/* =====================================================================
   cinematic.css — Aspire cinematic motion foundation (Phase 0)

   Easing tokens + canvas/pin/reveal base styles for the scroll-scrubbed
   cinematic. Brand colors only.
     --primary-blue #113EA0  --dark-navy #00143A  --turquoise #35CBCC
     --sterile-grey #DEDFE0  --white #FFFFFF
   ===================================================================== */

:root {
    /* Signature easing — shared by CSS transitions and (mirrored) GSAP. */
    --ease-signature: cubic-bezier(.65, .05, 0, 1);
    --scrub-bg: #00143A;
}

/* --- Pinned scrub stage --------------------------------------------- */
.scrub-pin {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--scrub-bg);
    /* index.css's base `section { padding:120px 5vw }` would otherwise inset
       the absolutely-positioned canvas (its containing block is the padding
       box). Neutralise it so the scrub canvas is full-bleed on the landing
       page. (Harmless on the standalone demo, which doesn't load index.css.) */
    padding: 0;
    min-height: 0;
}

.scrub-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* --- Landing-page hero overlay -------------------------------------- */
/* The existing <section id="hero"> is nested inside #cine-stage and floated
   above the single continuous scrub canvas, so it keeps every one of its own
   index.css rules (kinetic text, glass card, scroll indicator) untouched.
   Its opacity is driven by scrub progress in index-cinematic.js so it fades
   out before the forming portion begins. */
#cine-stage > #hero {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* --- Core Values overlay (blended INTO the pinned stage) ------------- */
/* The orbital lives ABOVE the scrub canvas (z-index) and is revealed on
   scrub progress in index-cinematic.js, so it composites over the dark,
   just-formed tablet — no separate white section, no dark->white jump.
   VISIBLE by default so the content is never lost: the GSAP reveal sets
   autoAlpha:0 at build (immediate) and then drives opacity/scale + the node
   stagger from scrub progress, so on the happy path it's hidden instantly
   (under the page cloak, no flash). If GSAP/the scrub is blocked (CDN down)
   or reduced-motion is on, no reveal runs and the values stay visible rather
   than permanently hidden — matching index-cinematic's static-fallback path. */
.cine-values-overlay {
    position: absolute;
    inset: 0;
    z-index: 3; /* above #hero (z2) so nodes stay hoverable; canvas is z0 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    /* Container alone re-enables pointer events so the faded-in hero/canvas
       behind never block clicks during the raw-materials phase. */
    pointer-events: none;
}
/* --- Geometry-driven orbital layout. The orbital aligns to the engraved
   tablet's ACTUAL on-screen position (not viewport centre): index-cinematic.js
   layoutOrbital() reads the tablet geometry and sets inline left/top/size on
   the hit-area, ring, nodes-wrapper, nodes and Care. So here we only strip the
   old white-section box model (fixed 600px, scale 1.3, flex, margins) and set
   the positioning contexts + pointer-event surfaces; positions come from JS. */
.cine-values-overlay .molecular-container {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    display: block;
    pointer-events: none; /* only the hit-area + Care opt back in (below) */
}

/* The tablet circle. Hovering anywhere inside (its descendant ring + nodes
   included) spins the ring; mouseleave pauses it. JS sets left/top/width/height
   to 2*rOuter centred on the tablet. */
.cine-values-overlay .tablet-hit-area {
    position: absolute;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    /* NB: border-radius does not shape the pointer hit region, so the box corners
       (just outside the round tablet, over the dark bg) also start the spin. That's
       a harmless early-trigger; a clip-path circle is NOT used because the node
       discs sit at rInner and overflow rOuter — clipping would crop their edges. */
}

/* nodes-wrapper is a zero-size point AT the tablet centre; rotating it spins
   the nodes around the centre (transform-origin is its own 0,0). JS sets
   left/top to the centre. */
.cine-values-overlay #nodes-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

/* Ring + nodes: JS owns position/size. Care is now an ordinary ring node
   inside #nodes-wrapper (rides the ring, rotates with the rest) — no separate
   floating rule. The .value-node base already supplies position:absolute.
   The ring is a descendant of the (now-shrunk) .tablet-hit-area, and its 621px
   square box (border-radius does NOT clip pointer hit-testing) would otherwise
   re-capture pointer events out to ~r310 and re-trigger the hover-spin across
   the whole tablet — defeating the trimmed central hit zone. It's a purely
   decorative dashed circle, so make it non-interactive; the nodes (also
   descendants) keep their own pointer events and still spin/scale on hover. */
.cine-values-overlay .molecular-ring { position: absolute; pointer-events: none; }

/* The node discs are sized by JS (layoutOrbital, 195px desktop). Scale their
   inner media + label proportionally (50px -> 65px, 0.8rem -> 1.2rem) so the
   slightly smaller circles stay balanced. Scoped to the overlay; the base
   .value-node rules are untouched for any other usage. */
.cine-values-overlay .node-media {
    width: 65px;
    height: 65px;
    margin-bottom: 12px;
}
.cine-values-overlay .value-node h3 {
    font-size: 1.2rem;
}

.cine-values-overlay .section-heading {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    /* 3x the prior clamp(1rem, 2.4vw, 1.5rem) — Core Values heading reads big
       over the dark stage. Scoped to .cine-values-overlay so other
       .section-heading instances keep their own size. */
    font-size: clamp(3rem, 7.2vw, 4.5rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Restyle the orbital for the DARK stage (brand tokens only). The
   orbital was built for a white bg; on the navy tablet the heading and the
   dashed ring must read in turquoise/white. The value-node circles stay
   white (a brand token) with dark labels, so their media/labels are intact
   and legible — only the elements sitting directly ON the dark bg change. */
.cine-values-overlay .section-heading {
    color: var(--white, #FFFFFF);
}
.cine-values-overlay .molecular-ring {
    border-color: rgba(53, 203, 204, 0.55); /* --turquoise #35CBCC */
}

/* (No mobile scale override: the orbital is sized from the tablet's on-screen
   geometry, so it tracks the narrow-stage tablet automatically — node size is
   derived from the inner-edge radius in layoutOrbital.) */

/* --- "By The Numbers" beat -------------------------------------------- */
/* The 4 stats were relocated from the old standalone #stats section INTO the
   pinned cinematic. After the Core Values orbital fades out, this overlay
   reveals over the LOWER portion of the frozen tablet (index-cinematic.js
   applyNumbersReveal, driven by the same scrub). Visible by default so the
   content is never lost (matches the values-overlay fallback); the GSAP reveal
   sets autoAlpha:0 at build under the page cloak. Dark-navy text + a subtle
   light scrim keep the numbers legible over the light tablet face. */
.cine-numbers-overlay {
    position: absolute;
    /* Default (static-fallback) anchor: lower third of the stage. Once the
       tablet geometry is ready, index-cinematic.js layoutNumbers() overrides
       left/top/width and clears bottom so the stack sits WITHIN the tablet face,
       just below the engraving — and tracks the tablet on resize. */
    left: 0;
    right: 0;
    bottom: 9%;
    z-index: 4; /* above the values overlay (z3) once it has faded out */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem; /* tight stack: heading sits directly above the stat row */
    pointer-events: none; /* purely a reveal; nothing to click */
    text-align: center;
    /* CEO: push the whole block +65px south of its geometry-tracked top.
       Container transform only — GSAP animates this overlay's autoAlpha (not
       transform), and layoutNumbers() drives `top`, so the shift rides the live
       tablet geometry on resize. (Heading/items get their own GSAP `y`, relative
       to this shifted container.) */
    transform: translateY(65px);
}
.cine-numbers-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem); /* restored to 075f258 (pre-a910cb3 shrink) */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dark-navy, #00143A);
}
.cine-numbers-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%; /* never wider than the geometry-capped overlay box */
    gap: clamp(0.6rem, 1.4vw, 1.25rem);
    /* Subtle light scrim so the dark-navy numbers stay legible regardless of the
       tablet's engraving shadows underneath. */
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 0.75rem 1.1rem;
}
.cine-stat-item { text-align: center; }
.cine-numbers-overlay .stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    line-height: 1;
}
.cine-numbers-overlay .stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 2.24rem); /* CEO: -30% (x0.7) of 075f258 size */
    color: var(--dark-navy, #00143A);
    line-height: 1;
    display: block;
}
.cine-numbers-overlay .stat-suffix {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 1.12vw, 0.98rem); /* CEO: -30% (x0.7) of 075f258 size */
    color: var(--primary-blue, #113EA0);
    line-height: 1;
    display: block;
}
.cine-numbers-overlay .stat-label {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 0.8rem; /* restored to 075f258 (pre-a910cb3 shrink) */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 20, 58, 0.65);
    display: block;
    margin-top: 7px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    /* Three stats stay on ONE row (equal columns); labels may wrap within their
       column so nothing overflows on narrow phones. */
    .cine-numbers-grid { gap: 0.9rem; padding: 1rem 0.9rem; }
    .cine-stat-item { flex: 1 1 0; min-width: 0; }
    .cine-numbers-overlay .stat-label { white-space: normal; }
}

/* (Reduced motion / blocked-GSAP need no opacity override: the overlay is
   visible by default and the JS reveal only re-hides it when it actually
   runs — so the static fallback shows Core Values without extra rules.) */

/* --- OUR FORMULATIONS showcase overlay (over the held c-pack final frame) -- */
/* Revealed on scrub progress in index-cinematic.js (applyShowcaseReveal), same
   discipline as .cine-numbers-overlay: VISIBLE by default so reduced-motion /
   blocked-GSAP shows it statically over poster.jpg; the GSAP reveal sets
   autoAlpha:0 at build then drives it from the held tail. Labels + CTA sit in
   the LOWER portion (the settled trio occupies the vertical middle of the
   frame); a centered, evenly-spaced row is robust across viewports — we don't
   pixel-pin under each product since cover-fit shifts their x-positions. */
.cine-showcase-overlay {
    position: absolute;
    inset: 0;
    z-index: 5; /* inside #cine-stage now: above the scrub canvas (z0) AND at/above
                   the numbers (z4) — though the numbers fade out before this reveals */
    opacity: 1;
    pointer-events: none; /* purely a reveal; only the CTA re-enables clicks */
}
/* Each label is rotated -90deg (whole word, reading bottom-up — the same
   orientation as the Aspire brand printed on the tube) and absolutely pinned
   just RIGHT of its own product in the settled trio (bottle · blister · tube).
   left% fractions match the validated 16:9 mock. */
.cine-showcase-label {
    position: absolute;
    top: calc(45% + 60px); /* +60px south of the prior 45% midline */
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--white, #FFFFFF);
    font-size: clamp(1rem, 1.55vw, 1.4rem);
}
/* +45px term: center-anchored + rotate(-90deg) means the label's own AABB half-
   width (~14.5px) sits between the anchor and its visual left edge, so +30px nets
   only a ~15px visual gap. +45px nets the intended clean ~30px product-edge→label gap. */
.label-oral      { left: calc(32.15% + 45px); }  /* 30px visual gap right of bottle  (ruler-measured right edge 463/1440=0.3215 @1440) */
.label-tablets   { left: calc(60.8% + 45px); }   /* 30px visual gap right of blister (edge 0.608) — VERIFIED CORRECT, unchanged */
.label-ointments { left: calc(84.17% + 45px); }  /* 30px visual gap right of tube    (ruler-measured right edge 1212/1440=0.8417 @1440) */
/* CTA mirrors the (now-dead) #products-strip .hero-learn-more-btn: turquoise/
   white on navy. pointer-events re-enabled so it's clickable through the
   non-interactive overlay. */
.cine-showcase-cta {
    position: absolute;
    left: 50%;
    bottom: calc(8vh - 45px); /* +45px south of the original 8vh padding-bottom (+15px past the prior -30px) */
    transform: translateX(-50%); /* GSAP reveal parses this to xPercent:-50, so the
                                    y-tween preserves horizontal centering */
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    color: var(--white, #FFFFFF);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.4s ease;
    cursor: pointer;
}
.cine-showcase-cta:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--turquoise, #35CBCC);
    color: var(--turquoise, #35CBCC);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(53, 203, 204, 0.2);
}
@media (max-width: 600px) {
    /* Narrow viewport: shrink the rotated labels and nudge the outer two inward
       so OINTMENTS doesn't clip the right edge; CTA stays bottom-centred. */
    .cine-showcase-label { font-size: 0.85rem; letter-spacing: 0.1em; }
    .label-oral      { left: 28%; }
    .label-tablets   { left: 60%; }
    .label-ointments { left: 88%; }
}

/* --- Reveal base ----------------------------------------------------- */
/* Initial hidden state so elements don't flash before GSAP binds.
   The reduced-motion / no-lib path overrides these inline to visible. */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    will-change: opacity, transform, filter;
}

/* If JS never runs at all, reveal content after a beat so it's never
   permanently hidden (progressive-enhancement safety net). */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* --- Demo harness layout (Phase 0 only) ------------------------------ */
.cine-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem;
    text-align: center;
    color: var(--dark-navy, #00143A);
    background: var(--white, #FFFFFF);
}

.cine-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1.05;
    color: var(--dark-navy, #00143A);
    max-width: 18ch;
}

.cine-note {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 1rem;
    max-width: 60ch;
    color: var(--primary-blue, #113EA0);
}