/* =========================================================================
   MOTION LAYER — Lenis smooth scroll, custom cursor, intro reveal, and the
   GSAP/WebGL showpiece scaffolding. Loaded async (non-critical). Everything
   here is enhancement-only: with JS off, none of it applies and the existing
   CSS experience renders untouched (see <noscript> in index.html).
   ========================================================================= */

/* ── Lenis smooth scroll (only active once motion.js adds the .lenis class) ── */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Never force smooth scroll for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    html.lenis {
        scroll-behavior: auto;
    }
}

/* ── GSAP reveal hand-off ──────────────────────────────────────────────────
   When GSAP is driving (html.gsap-ready), neutralize the CSS reveal hold so
   gsap.from() owns the entrance — no double-animation, no flash. With JS off
   or GSAP unavailable, the original .reveal behavior (global.css) is untouched. */
html.gsap-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}
/* NOTE: .stagger-children is deliberately NOT neutralized here — those groups
   keep their original CSS cascade reveal (global.css + main.js observer). */

/* ── SplitText kinetic headlines ──────────────────────────────────────────── */
.split-line {
    padding-bottom: 0.14em;   /* keep descenders (g, y, p) from clipping in the line mask */
}

/* Compositor hint for parallaxed decorative glows. */
.ambient-glow {
    will-change: transform;
}

/* ── Hero "600 weekends" orb-field canvas ──────────────────────────────────
   Sits above the CSS liquid blobs (z 0) but behind the hero content (z 2).
   Fades in once the first frame is drawn so it never pops over the LCP paint. */
.hero-orbs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-orbs.is-ready {
    opacity: 1;
}

/* ── Synergy "bond engine" (Phase 4 centerpiece, desktop only) ─────────────── */
.synergy-aura {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.synergy-aura.is-ready {
    opacity: 1;
}

/* Tier chips light up in sequence in their own tier colour as the score climbs. */
.tier-chip.is-lit {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--tier-color, var(--clr-primary));
    box-shadow: 0 6px 22px -8px var(--tier-color, var(--clr-primary));
}

.tier-chip.is-lit .tier-emoji {
    transform: scale(1.06);
}

.tier-chip.is-current {
    transform: translateY(-6px) scale(1.12);
    box-shadow: 0 12px 30px -6px var(--tier-color, var(--clr-primary)),
                0 0 0 2px var(--tier-color, var(--clr-primary));
    z-index: 2;
}

.tier-chip.is-current .tier-name {
    color: var(--clr-text-dark);
    opacity: 1;
    font-weight: 700;
}

.tier-chip.is-current .tier-emoji {
    transform: scale(1.28) rotate(-4deg);
}

/* Injected synergy meter (score 0→100 riding a tier-coloured fill). */
.synergy-meter {
    max-width: 640px;
    margin: 1.75rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.synergy-meter__track {
    height: 8px;
    border-radius: 9999px;
    background: rgba(26, 18, 8, 0.07);
    overflow: hidden;
}

.synergy-meter__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--clr-primary);
}

.synergy-meter__readout {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
}

.synergy-meter__score {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-text-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.synergy-meter__label {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Custom cursor (desktop fine-pointer only; html.cursor-custom) ──────────
   The native cursor is hidden for the ring/dot effect, but text fields keep a
   normal caret so the waitlist input is never compromised. */
html.cursor-custom,
html.cursor-custom a,
html.cursor-custom button,
html.cursor-custom [data-magnetic] {
    cursor: none;
}

html.cursor-custom input,
html.cursor-custom textarea,
html.cursor-custom select,
html.cursor-custom [contenteditable="true"] {
    cursor: auto;
}

.loonee-cursor,
.loonee-cursor__dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
}

.loonee-cursor {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(244, 123, 37, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtle outer halo keeps the ring legible on dark sections (phone cards,
       trust) as well as the light cream background — no blend-mode disappearing act. */
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22);
    transition:
        width 0.32s var(--ease-out-expo),
        height 0.32s var(--ease-out-expo),
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.loonee-cursor__dot {
    width: 6px;
    height: 6px;
    background: var(--clr-primary);
    border-radius: 50%;
}

.loonee-cursor.is-hover {
    width: 62px;
    height: 62px;
    background: rgba(244, 123, 37, 0.12);
    border-color: rgba(244, 123, 37, 0.45);
}

.loonee-cursor.is-down {
    width: 30px;
    height: 30px;
}

.loonee-cursor.is-text {
    opacity: 0 !important;
    visibility: hidden !important;
}

.loonee-cursor__label {
    font-family: var(--font-primary);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--clr-primary);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s var(--ease-bounce);
}

.loonee-cursor.has-label {
    width: 74px;
    height: 74px;
    background: rgba(244, 123, 37, 0.16);
    border-color: rgba(244, 123, 37, 0.55);
}

.loonee-cursor.has-label .loonee-cursor__label {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .loonee-cursor,
    .loonee-cursor__dot {
        display: none !important;
    }
}

@media (pointer: coarse) {
    .loonee-cursor,
    .loonee-cursor__dot {
        display: none !important;
    }
}