/*
  Both hero-wrapper scenes, trimmed from style.css/script.js (the
  standalone /experience.html page) for embedding directly on the home
  page — no .back-nav, no .outro, since only the two hero-wrapper scenes
  are embedded here; see hero-animation.js for the matching JS trim.

  .hero-wrapper and .stage/.canvas/.layer/.scroll-cue are shared classes,
  so both #hero-wrapper and #hero-wrapper-2 reuse this same ruleset —
  only the per-layer z-index (id-scoped) and .canvas--section2's aspect
  ratio differ between the two scenes.

  .stage is pinned at `top: var(--nav-height)` instead of style.css's
  `top: 0`, so the sticky stage settles below the fixed site nav instead
  of under it. The pinned scroll distance this produces is unchanged
  (wrapper height minus stage top-offset minus stage height still equals
  wrapperHeight - 100vh), so hero-animation.js's progress math — which
  assumes a full-viewport pin — still lines up.

  Wrapper height raised from style.css's 130vh to 230vh: the pinned
  scroll distance (wrapperHeight - 100vh) is what hero-animation.js's
  progress 0->1 maps across, and its layers' start/end times are
  fractions of that same progress — so the taller the wrapper, the more
  physical scrolling each fraction of progress costs, i.e. the slower
  the parallax layers appear to move per pixel scrolled. At 230vh the
  entrance (progress 0->~0.40) takes ~92vh of scrolling, and the
  fully-assembled pose then holds for a dwell of ~138vh before the pin
  releases.

  padding/border-bottom are reset to 0/none because content.css's generic
  `section { padding: 40px 0; border-bottom: ... }` rule (for the text
  sections in <main>) also matches these — they're <section> elements
  too — and would otherwise add unwanted blank space around each pinned
  stage and a visible hairline through it.
*/

.hero-wrapper {
  position: relative;
  height: 230vh;
  /* Transparent on purpose — bg-fade.js paints a continuously scroll-
     interpolated color onto <body> instead, so this doesn't cut hard
     against the sections' backgrounds. */
  background: transparent;
  padding: 0;
  border-bottom: none;
  /* A real snap point, so mandatory snap (see html's scroll-snap-type in
     content.css) has somewhere to land a flick released inside this zone
     instead of yanking it past to an unrelated section. stop:always
     forces a fast flick to stop here first rather than sailing straight
     through to the next section, for a firmer overall snap feel. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stage {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  width: 100%;
  overflow: hidden;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  position: relative;
  width: min(65vw, 620px);
  aspect-ratio: 2853 / 2777;
  /* No margin-top here: now that .stage centers its content
     (align-items: center) instead of the old flex-start, the natural
     gap above the canvas is already bigger than the phone layer's 1.16
     scale overhang (see hero-animation.js), so it no longer needs an
     explicit margin to clear .stage's overflow:hidden. A margin here
     would just push the canvas off-center instead. */
}

.canvas--section2 {
  width: min(74vw, 700px);
  aspect-ratio: 3097 / 2777;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* Paint order verified against the flattened reference artwork: the
   manifest's z_index (0->7) turned out to run top->bottom, the opposite
   of CSS stacking order, so it's reversed here (phone sits furthest back,
   lines furthest front). */
#layer-phone  { z-index: 0; }
#layer-quote2 { z-index: 1; }
#layer-quote1 { z-index: 2; }
#layer-title  { z-index: 3; }
#layer-bubble { z-index: 4; }
#layer-blob2  { z-index: 5; }
#layer-blob1  { z-index: 6; }
#layer-lines  { z-index: 7; }

/* Same paint-order-is-reversed rule confirmed again for section 2's
   assets (verified by flattening both orders and comparing). */
#layer-phone-2   { z-index: 0; }
#layer-quote2-2  { z-index: 1; }
#layer-quote1-2  { z-index: 2; }
#layer-title-2   { z-index: 3; }
#layer-bubble-2  { z-index: 4; }
#layer-blob-2    { z-index: 5; }
#layer-pretzel-2 { z-index: 6; }
#layer-flag-2    { z-index: 7; }
#layer-lines-2   { z-index: 8; }

.scroll-cue {
  display: none;
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #f2a900;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.scroll-cue-line {
  width: 2px;
  height: 28px;
  background: #f2a900;
  border-radius: 2px;
  animation: scroll-cue-move 1.4s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes scroll-cue-move {
  0%   { transform: scaleY(0.2); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.3; }
}

@media (max-width: 899.98px) {
  /* Width-only, matching hero-animation.js's isDesktop() check — see its
     comment for why pointer type isn't part of this condition.
     Mobile/touch skips both hero scenes entirely (a static composite
     image was tried here first, but it didn't read well at phone width),
     so the section is just removed rather than left as dead scroll
     space. hero-animation.js also skips building the scene's DOM/JS on
     this path — see its setupScene(). */
  .hero-wrapper {
    display: none;
  }
}