/* === ATLAS IMITATION SECTION ===
   Used by sections/landing-imitation.liquid.
   Forensic clone of sunday.ai's "From imitation to intuition".

   No JS, no GSAP, no ScrollTrigger. The motion is EMERGENT from
   CSS layout (sticky H1 + absolute-bottom image inside a tall
   container). See section liquid comment for full rationale.

   Source measurements: /tmp/sunday-imitation/measurements.json
*/

/* === OUTER SECTION ===
   - bg follows --ac-bg so the section integrates with the page's
     white↔cream transition chain (atlas-bg-transition.min.css).
   - overflow:clip prevents the 240vh inner stage from causing
     horizontal scroll on small viewports. Use `hidden` fallback
     for browsers that don't support `clip`.
   - padding-bottom 96px matches sunday's lg:pb-24 (24*4=96px).

   --ac-imitation-progress: 0..1 driven by atlas-imitation.min.js.
   0 = section just entered viewport from below (darken at full),
   1 = section.top reached viewport top (darken cleared). The JS
   reads section.getBoundingClientRect().top each scroll frame and
   sets this var via inline style. Declared on the section so the
   variable cascades down to .ac-imitation-darken (its child). */
/* padding-bottom: 0 — the section ends exactly where the stage
   (and therefore the bottom-anchored hand image) ends. We previously
   carried sunday's lg:pb-24 (96px) here as cream-colored padding
   below the gradient, but the user wants the section to close at
   the image bottom with no extra strip. */
.ac-imitation-section{
  --ac-imitation-progress:0;
  position:relative;
  width:100%;
  background:var(--ac-bg,#fff);
  overflow:hidden;
  overflow:clip;
  padding-bottom:0;
}

/* === DARKEN OVERLAY ===
   Sits ABOVE the gradient AND above the H1 (z-index 50 > heading
   z-index 1 and image z-index 20). At full opacity it tints the
   entire visible portion of the section toward dark, fading the
   sage gradient to a dark green-grey and dimming the white H1 to
   barely visible. As the user scrolls the section toward the top
   of the viewport, the JS-driven --ac-imitation-progress moves
   0→1 and the overlay's opacity calc(1 - progress) decreases
   1→0, revealing the sage and text progressively.

   Using rgba(0,0,0,0.45) rather than a flat dark hex because the
   semi-transparent black mixes with the underlying sage gradient,
   producing the dark-green-grey appearance seen in sunday.ai
   (full hex would over-darken). */
.ac-imitation-darken{
  position:absolute;
  inset:0;
  z-index:50;
  background:rgba(0,0,0,0.45);
  opacity:calc(1 - var(--ac-imitation-progress, 0));
  pointer-events:none;
  will-change:opacity;
}

/* Reduced-motion: skip the darken/fade-in effects, the section is
   shown in its final lighter state immediately with text fully
   visible at its pinned 50vh position. */
@media (prefers-reduced-motion:reduce){
  .ac-imitation-darken{display:none}
  .ac-imitation-heading{opacity:1;transform:none}
}

/* === STAGE ===
   The animation root. 180vh tall — that's the scroll runway over
   which the sticky H1 pins and the absolute image rises.

   Stage height controls timing:
     - H1 pin window length = stage_height - viewport_height (= 80vh
       at 180vh stage on a 100vh viewport).
     - Image first peeks from bottom of viewport at scrollY
       ≈ section_top + (stage_height - 180vh) = section_top + 0,
       i.e. image starts appearing right when the section enters
       the viewport top (and the H1 begins pinning).
   Sunday's reference is 240vh which puts a 60vh gap between text
   pinning and image first appearing. The user wanted that gap
   shorter, so we cut to 180vh — image appears essentially
   simultaneously with the H1 reaching its pinned position.

   Gradient: sage-green → warm-light-grey. Values lifted exactly
   from sunday's computed background-image (oklab interpolation).
   Atlas's --ac-sage (#C7D6C1) is slightly different so we override
   with sunday's exact values for fidelity, but they're easy to
   swap via the two custom properties below. */
.ac-imitation-stage{
  --ac-imitation-from:rgb(174,194,184);
  /* Bottom stop was sunday's warm-grey rgb(236,236,232). Changed to
     pure white #FFFFFF so the gradient ends in the same white the
     rest of the page returns to after this section (atlas-bg-
     transition.min.js removes is-bg-cream once the section has
     scrolled past, flipping --ac-bg back to white). The eye sees a
     seamless sage → white fade with no warm-grey-to-white edge. */
  --ac-imitation-to:rgb(255,255,255);
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:180vh;
  width:100%;
  /* Two declarations: oklab fallback for older engines that ignore
     `in oklab` returns to plain RGB interpolation. */
  background:linear-gradient(
    to bottom,
    var(--ac-imitation-from) 33%,
    var(--ac-imitation-to) 100%);
  background:linear-gradient(
    to bottom in oklab,
    var(--ac-imitation-from) 33%,
    var(--ac-imitation-to) 100%);
}

/* Mobile/tablet: section was perceived too tall on small viewports.
   On mobile a 180vh stage = ~1519px of scroll on a 390×844 device,
   roughly 1.8 swipes worth of "section". Reducing to 130vh ≈ 1097px
   (~1.3 swipes) matches the proportional feel of sunday.ai on mobile
   without losing the sticky-pin effect. The pin window shrinks from
   80vh to 30vh (still long enough for the image to cross the title). */
@media (max-width:1023px){
  .ac-imitation-stage{
    min-height:130vh;
  }
}

/* === HEADLINE (sticky) ===
   Pinned at top:0 of the viewport while the user scrolls through
   the stage. h-100svh keeps the headline's flex-centered baseline
   stable across iOS Safari URL-bar collapses (svh = small viewport
   height, doesn't change when URL bar shows/hides).

   Font sizing — forensically extracted from sunday's H1:
     desktop  84px / lh 92.4 (1.1) / ls -2.1px (-0.025em) / 400
     mobile   42px / lh 46.2 (1.1) / ls -1.05px (-0.025em) / 400
   Atlas uses Geist to match the rest of the landing. */
/* H1 positioning — exact 1:1 forensic clone of sunday.ai.
   Confirmed via 70-sample scroll motion profile saved at
   /tmp/sunday-h1-forensic/samples.json. Sunday's H1 is verbatim:
     <h1 class="sticky top-0 mx-auto flex h-svh items-center
                justify-center px-4 text-center heading-1 ..."> ... </h1>
   No JS, no transform animation, no opacity animation, no inline
   styles. Pure CSS sticky + flex-center.

   How it actually feels in motion (slope-verified, not guessed):
     • Entry phase (scrollY range = stage.height − 100vh):
         H1 is in normal flow at section.top. The H1 box is 100svh
         tall and the text is CENTERED vertically inside it
         (align-items:center). So during entry, text Y in viewport
         = section.top + 50svh. The text appears at the BOTTOM of
         the visible section area (= viewport bottom when section.
         top is at 50vh of viewport), then slides smoothly up to
         viewport center as section.top → 0.
     • Pin phase: sticky engages exactly when section.top = 0 of
         viewport. H1.top stays at 0, text stays centered at 50vh
         of viewport. The bottom-anchored image rises through the
         pinned viewport and crosses the text right at mid-height.
     • Post-pin: H1 unsticks when stage.bottom approaches H1.bottom
         in viewport, scrolls up with the page.

   Why earlier iterations felt wrong (for the record):
     • flex-start + top:50vh — pinned at 50vh while section was
       still entering, decoupling text from section ("sticky").
     • flex-start + top:0 — text rode at section.top during entry
       (matched the user's "emerge from top" description) but
       ended pinned at viewport TOP instead of centre, so the
       rising image never crossed at mid.
   This center + top:0 is what sunday.ai actually does. */
.ac-imitation-heading{
  position:sticky;
  top:0;
  margin:0 auto;
  padding:0 16px;
  width:100%;
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-wrap:balance;
  font-family:"Geist","Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:42px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-0.025em;
  color:#fff;
  z-index:1;
  opacity:var(--ac-imitation-progress, 0);
  /* translateY (set by atlas-imitation.min.js) keeps the text at
     50vh viewport from the very first moment the page renders, by
     shifting the H1 visually upward by section.top during entry.
     Combined with `overflow:clip` on .ac-imitation-section, the
     text is masked until section.top descends to 50vh viewport,
     at which point the section's top edge reveals it from above.
     During the pin phase translateY collapses to 0 (sticky already
     puts the H1 at viewport top with text at 50vh). */
  transform:translateY(var(--ac-imitation-heading-y, 0px));
  will-change:transform, opacity;
}

@media (min-width:1024px){
  .ac-imitation-heading{
    padding:0 80px;
    font-size:84px;
  }
}

/* === IMAGE WRAPPER ===
   Anchored to the stage's bottom edge. As the page scrolls past
   the stage, this wrapper is naturally translated UPWARD by the
   browser (without any animation code) — the image appears to
   slide up at exactly 1px per 1px of scroll. Pure CSS scrub.

   Dimensions forensically extracted from sunday:
     mobile  : 140vw × 80vh
     lg (≥1024): aspect-ratio 1/1 (effectively square at 1024×900;
                  height = 80vh = 720, width = 720 when constrained)
     xl (≥1280): max-width 50% — caps width at half-viewport so
                  the image doesn't grow past sensible size on
                  ultra-wide screens.

   z-index:20 places the image OVER the heading (matches sunday —
   the hand passes in front of the title). */
/* Image wrapper height was 80vh (sunday's value) — bumped to 100vh
   on desktop so the image's TOP sits at stage.bottom − 100vh =
   stage.top + 80vh. Visually: when the H1 pins at viewport top
   (text at 50vh), the image's top is at 80vh viewport — 30vh below
   the text. On mobile the 100vh wrapper makes the image fill the
   entire visible viewport, exaggerating the section's perceived
   length. The mobile override below brings it back to sunday.ai's
   80vh value, leaving a 20vh margin between the top of the rising
   image and the top of the viewport.

   On mobile we also use dvh (dynamic viewport height) so the
   wrapper sizes to the *visible* viewport instead of vh's larger
   "layout viewport" that includes the Safari address bar — this
   alone shaves another ~10% off the perceived section length. */
.ac-imitation-image-wrap{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  width:140vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  pointer-events:none;
}

@media (max-width:1023px){
  .ac-imitation-image-wrap{
    height:80vh;
    height:80dvh;
  }
}

@media (min-width:1024px){
  .ac-imitation-image-wrap{
    aspect-ratio:1 / 1;
  }
}

@media (min-width:1280px){
  .ac-imitation-image-wrap{
    max-width:50%;
  }
}

.ac-imitation-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 100%;
  display:block;
  /* Prevent the image from triggering pointer drag on desktop. */
  user-select:none;
  -webkit-user-drag:none;
}

/* === REDUCED MOTION ===
   The scroll-driven rise is intrinsically tied to scroll position
   (it's not an animation, it's layout). To respect a user's
   reduced-motion preference we collapse the section to a static
   block: stage shrinks to a sensible height, heading becomes a
   normal block, image is rendered inline at the bottom instead of
   absolutely-anchored. The same content is shown, no scroll-tied
   motion. */
@media (prefers-reduced-motion:reduce){
  .ac-imitation-stage{
    min-height:auto;
    padding:48px 0 0;
  }
  .ac-imitation-heading{
    position:static;
    height:auto;
    padding:0 16px 24px;
  }
  @media (min-width:1024px){
    .ac-imitation-heading{padding:0 80px 32px}
  }
  .ac-imitation-image-wrap{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:560px;
    height:auto;
    aspect-ratio:auto;
    margin:0 auto;
  }
  .ac-imitation-image{
    height:auto;
    max-height:60vh;
  }
}