/* ============================================================
   TCA WEBSITE — HERO SECTION (parallax scene)
   Architecture adapted from the reference prototype (sticky-pinned
   frame inside a taller-than-viewport wrapper): as the user scrolls
   through the wrapper's extra height, the frame stays pinned to the
   viewport while each layer inside it translates at its own speed.
   That's what makes it read as a continuous "camera move" instead
   of the artwork simply scrolling off screen — and why the hero can
   now hand off to the next section with no seam (no stats bar, no
   section padding, matching dusk tones at the boundary).
   ============================================================ */

.hero {
  position: relative;
  background: var(--navy-dark);
  padding: 0;
}

.hero-scene-wrapper {
  position: relative;
  height: 200vh; /* extra scroll distance the depth effect plays out over */
}

.hero-scene-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ---- Layer stack ---- */
.hero-parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 105%;
  will-change: transform;
}

.hero-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Full z-index map for the hero stack (kept in one place since it now
   spans 5 painted layers + 3 ambient effects):
     1  hero-layer--sky          (01-sky.png — sky/clouds, opaque)
     2  hero-birds, hero-layer--mountains (02-mountains.png — distant peaks)
     3  hero-layer--tree-school  (03-tree-school.png — tree + building)
     4  hero-dandelions          (floating seeds, ambient)
     5  hero-layer--grass-band, hero-feet-grass
     6  hero-layer--figures      (05-figures.png — the two children)
     7  hero-leaves              (falling leaves, full-bleed overlay)
     8  hero-close-grass         (blurred foreground band, closest layer)
     9  hero-parallax::after     (text-legibility scrim)
     10 hero__content-track, hero__scroll-cue */
.hero-layer--sky         { z-index: 1; }
.hero-layer--mountains   { z-index: 3; }
.hero-layer--tree-school { z-index: 4; }
/* .hero-layer--grass-band  { z-index: 2; } */
.hero-layer--figures     { z-index: 8; }

/* Ambient drift lives on this inner element, not the scroll-parallax
   layer itself — a CSS animation and a JS-set inline transform on the
   SAME element fight over `transform`, and the animation silently wins,
   which would cancel the scroll depth outright. */
.hero-clouds-drift {
  width: 100%;
  height: 100%;
  animation: heroCloudDrift 42s ease-in-out infinite alternate;
}

@keyframes heroCloudDrift {
  0%   { transform: translate3d(-1.5%, 0, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, 0, 0) scale(1.02); }
}

/* ---- Close grass band (procedural — there's no painted foreground
   layer anymore). Sits in front of the boy-and-girl layer, spans the
   full width, and is deliberately dense + blurred: a soft, blurred,
   fast-moving band right at the bottom edge reads as "close to the
   camera lens" the way real depth-of-field does, and it's what makes
   the scene feel like it has a true foreground instead of stopping at
   the figures layer. */
.hero-close-grass {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -5%;
  height: 46%;
  z-index: 8;
  overflow: visible;
  pointer-events: none;
  filter: blur(2.5px);
}

/* Small tuft at the children's feet — separate from the close-grass
   band so it can sit at a specific spot instead of spanning full width.
   NOTE: the source art (boy-and-girl.png) is a whole illustrated scene,
   not an isolated character cutout, so exact foot position can't be
   detected reliably by image analysis — this is a reasonable estimate
   (bottom-center, slightly right, matching the composition). Nudge
   --left/--bottom below once you see it live if it's off. */
.hero-feet-grass {
  position: absolute;
  left: 44%;
  width: 26%;
  bottom: 0%;
  height: 20%;
  z-index: 8;
  overflow: visible;
  pointer-events: none;
}

/* Text-legibility scrim. Measured against the real art: the light
   cloud areas sat around luminance 117, giving white text only ~2:1
   contrast (WCAG AA needs 4.5:1). The plateau below holds near-full
   opacity across the entire text column width (~48% of viewport,
   matching .hero__content's max-width + padding) rather than fading
   immediately, so contrast holds regardless of what's behind any
   given word. The top strip does the same for the nav bar, which
   sits transparent over this same art at scroll position 0.
   Bottom edge fades up to rgba(6,5,20,0.94) — deliberately matched to
   the identical value used by .about-scene-top-fade (about-scene.css)
   so the two sides converge on the same pixel color at the seam,
   instead of two independently-tuned "close enough" dark values that
   still show a visible seam under scrutiny (which is what a flat 0.6
   opacity here was actually producing — verify visually after any
   change to this value, not just by reading the comment). */
.hero-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(6, 5, 20, 0.62) 0%,
      rgba(6, 5, 20, 0.55) 30%,
      rgba(6, 5, 20, 0) 54%,
      transparent 82%),
    linear-gradient(to top, rgba(6, 5, 20, 0.94) 0%, rgba(6, 5, 20, 0.55) 16%, transparent 38%),
    linear-gradient(to bottom, rgba(6, 5, 20, 0.55) 0%, transparent 20%);
}

/* ---- Floating dandelion seeds — ambient, full-bleed, sits between the
   tree/school midground and the grass band so they read as drifting
   through the middle of the scene rather than pasted on top of it.
   Per-sprite animation (.fx-dandelion) lives in scene-fx.css; this
   container only owns z-index/position. ---- */
.hero-dandelions {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Birds (decorative, layered above sky/clouds) ---- */
.hero-birds {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-bird {
  position: absolute;
  width: 34px;
  height: 17px;
  color: rgba(255, 242, 192, 0.8);
  opacity: 0;
  animation-name: heroBirdFly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-bird .wing {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin:19px 9px;
  animation: heroWingFlap 0.8s ease-in-out infinite;
}
.hero-bird .wing--r { animation-delay: -0.4s; }

.hero-bird--1 { top: 18%; width: 26px; height: 13px; animation-duration: 34s; animation-delay: -4s; }
.hero-bird--2 { top: 28%; width: 20px; height: 10px; animation-duration: 46s; animation-delay: -22s; }
.hero-bird--3 { top: 14%; width: 30px; height: 15px; animation-duration: 38s; animation-delay: -14s; }
.hero-bird--4 { top: 34%; width: 18px; height: 9px;  animation-duration: 52s; animation-delay: -33s; }

@keyframes heroBirdFly {
  0%   { transform: translate3d(-10vw, 0, 0); opacity: 0; }
  6%   { opacity: 0.85; }
  50%  { transform: translate3d(55vw, -22px, 0); }
  94%  { opacity: 0.85; }
  100% { transform: translate3d(120vw, 12px, 0); opacity: 0; }
}

@keyframes heroWingFlap {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(22deg); }
}

/* ---- Falling leaves — container only; the .fx-leaf sprite animation
   and @keyframes now live in scene-fx.css so about-scene can reuse
   the exact same engine. This container sits ABOVE the figures layer
   deliberately (full-bleed overlay, not scene-embedded) so leaves
   read as drifting past the whole camera view, same as the original
   3-layer version. ---- */
.hero-leaves {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Content ---- */
/* Transform carrier only — see the HTML comment above .hero__content
   for why this wrapper exists separately from .hero__content itself.
   No layout properties of its own; it just needs to be a real block
   box so `transform` has something to apply to (display:contents
   wouldn't work here — transforms don't apply to it). */
.hero__content-track {
  z-index: 10;
  will-change: transform;
}

.hero__content {
  position: relative;
  padding: 0 3rem;
  max-width: 680px;
  margin-top: -40px;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero__kicker::before { content: ''; width: 26px; height: 2px; background: var(--green-light); flex-shrink: 0; }

.hero__mega {
  /* Live comparison vs. Reckless/Canela — Fraunces is free (Google
     Fonts) and has an optical-size axis, so font-optical-sizing:auto
     lets the browser pick the right display-weight cut for a heading
     this large instead of just scaling up a text-sized instance.
     Scoped to just this element on purpose — rest of the site still
     uses Playfair Display (var(--font-display)) unchanged. */
  font-family: 'Fraunces', var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 12px 50px rgba(0, 0, 0, 0.35);
  margin-bottom: 0.5rem;
}

/* Logo + wordmark lockup. Sized in em against the heading's own
   font-size (not a fixed px value) so it scales exactly in step with
   the clamp() above at every viewport width, including the tighter
   mobile clamp further down — no separate mobile override needed. */
.hero__mega--with-logo {
  display: flex;
  align-items: center;
  gap: 0.12em;
}
.hero__mega-logo {
  height: 0.82em;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.35));
}

.hero__full-name {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.75rem;
}

.hero__sub {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  margin-bottom: 2.25rem;
  font-weight: 300;
  max-width: 30em;
}

.hero__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Scroll cue — a mouse-outline indicator (pill + animated dot),
   not just a bare line. The line version read as an unstyled default
   rather than an intentional icon at a glance. */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.hero__scroll-mouse {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
}
.hero__scroll-dot {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  transform: translateX(-50%);
  animation: heroScrollDot 1.8s ease-in-out infinite;
}
@keyframes heroScrollDot {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  60%  { transform: translate(-50%, 13px); opacity: 0; }
  100% { transform: translate(-50%, 13px); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero-scene-wrapper { height: 165vh; }
  .hero__content {
    padding: 0 1.5rem;
  }
  .hero__mega {
    font-size: clamp(3.4rem, 20vw, 5.5rem);
  }
  .hero-bird--2, .hero-bird--4 { display: none; }
  .hero__scroll-cue { display: none; }

  /* The desktop scrim's gradient stops are tuned to the ~42%-wide text
     column on a wide screen; on a narrow phone the text runs nearly
     full-width, so the same percentages fade out before covering it.
     Measured contrast dropped to ~2.6:1 with a scaled diagonal version —
     this uses a mostly vertical, near-uniform dark wash instead. */
  .hero-parallax::after {
    background:
      linear-gradient(180deg,
        rgba(6, 5, 20, 0.86) 0%,
        rgba(6, 5, 20, 0.89) 25%,
        rgba(6, 5, 20, 0.92) 100%),
      linear-gradient(to top, rgba(6, 5, 20, 0.94) 0%, rgba(6, 5, 20, 0.55) 16%, transparent 38%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene-wrapper { height: auto; }
  .hero-scene-frame { position: relative; }
  .hero-clouds-drift,
  .hero-bird,
  .hero-bird .wing,
  .hero__scroll-dot {
    animation: none !important;
  }
  .hero-bird { opacity: 0 !important; }
  /* .fx-leaf / .fx-dandelion / .blade reduced-motion rules live in
     scene-fx.css since both hero and about-scene use them now. */
}