/* SCENE 01 — the four-act hero. One pinned viewport; the film is the
   protagonist, type enters only when the land has settled. All text
   shares one exact left edge (grid law). */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

.hero__stage {
  position: absolute;
  inset: 0;
}

/* LCP poster (Act 4 final frame) sits beneath the canvas; the canvas
   paints over it as soon as the first act-1 frame decodes. */
.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* static vignette for edge fall-off */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 130% at 50% 42%, transparent 55%, rgba(18, 22, 26, .38) 100%);
}

/* black gradient fade brought up by the timeline as the type lands
   (.87 →): the philosophy stack reads on a deep ink fall-off */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(18, 22, 26, 0) 0%,
    rgba(18, 22, 26, 0) 40%,
    rgba(13, 16, 19, .48) 66%,
    rgba(9, 11, 14, .9) 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
}
.hero__overlay .container {
  position: relative;
  height: 100%;
}

/* the opening line: quiet storytelling over the raw land, masked rise
   at .03, exits .095 (round 6: the page opens on the film itself) */
.hero__pre {
  position: absolute;
  left: var(--pad);
  top: 42%;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 320;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: .01em;
  max-width: 26ch;
  color: var(--bone);
  text-shadow: 0 2px 26px rgba(18, 22, 26, .55);
}

/* narrative cards on the held white fields: centered in the frame
   (client direction round 7), a thin survey rule over the line */
.hero__act-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  color: var(--bone);
  text-shadow: 0 2px 30px rgba(18, 22, 26, .5);
}
.hero__act-card .rule { width: 46px; margin-bottom: 22px; opacity: .85; }
.hero__act-num {
  font-family: var(--font-body);
  font-weight: 340;
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 16px;
}

/* on the held white field: ink type, earth rule, no shadow */
.hero__act-card--onwhite {
  color: var(--ink);
  text-shadow: none;
}
.hero__act-card--onwhite .rule { background: var(--earth); opacity: .9; }
.hero__act-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 330;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  letter-spacing: .01em;
  line-height: 1.18;
  display: block;
  max-width: 20ch;
}

/* the philosophy stack — lands at .90 over the settled township frame.
   pre, h1, sub, CTAs and seal all share the container's left grid edge. */
.hero__stack {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 15vh;
}

.hero__h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(2.3rem, 5.4vw, 4.9rem);
  line-height: 1.07;
  letter-spacing: -.012em;
  color: var(--bone);
  text-wrap: balance;
  max-width: 18ch;
  text-shadow: 0 2px 34px rgba(18, 22, 26, .5);
}

.hero__sub {
  margin-top: var(--rhythm-headline);
  font-weight: 300;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--bone) 82%, transparent);
  max-width: 62ch;
  text-shadow: 0 1px 18px rgba(18, 22, 26, .5);
}

.hero__ctas {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__seal {
  position: absolute;
  left: var(--pad);
  bottom: 44px;
}

/* survey rail — the scene's counter-speed layer: hairline track, gold
   fill scrubbed with the film, act ticks at each completion point */
.hero__rail {
  position: absolute;
  right: 44px;
  top: 16vh;
  bottom: 16vh;
  width: 1px;
}
.hero__rail-track { position: absolute; inset: 0; background: var(--hair); }
.hero__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
}
.hero__rail-tick {
  position: absolute;
  right: 0;
  width: 12px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

@media (max-width: 899px) {
  .hero__rail { right: 20px; }
  .hero__stack { bottom: 13vh; }
  .hero__seal { bottom: 28px; }
  .hero__ctas { gap: 10px; }
  .cta { padding: 12px 18px; }
}

/* the closing segment (round 8): in motion builds the landing text
   sits on the risen bone field, so it reads in ink with no shadows;
   the static fallback below restores bone-over-poster */
body:not(.is-static) .hero__h1 { color: var(--ink); text-shadow: none; }
body:not(.is-static) .hero__sub {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-shadow: none;
}
body:not(.is-static) .hero__seal { color: var(--earth); }
body:not(.is-static) .hero__seal::before { background: var(--earth); }
body:not(.is-static) .hero__stack .cta {
  color: var(--ink);
  border-color: rgba(156, 85, 51, .28);
}
body:not(.is-static) .hero__stack .cta:hover {
  border-color: var(--earth);
  background: rgba(156, 85, 51, .07);
}
body:not(.is-static) .hero__stack .cta--primary {
  border-color: var(--earth);
  color: var(--earth);
}
body:not(.is-static) .hero__stack .cta--primary:hover {
  background: var(--earth);
  color: var(--bone);
}

/* reduced motion / static fallback: the poster frame with all hero text
   visible (JS adds is-static and never builds the scrub). The pre-line
   sits quietly above the philosophy stack; the transient act markers
   have no meaning without the film and stay out. */
body.is-static .hero__pre { top: 22%; }
body.is-static .hero__act-card { display: none; }
body.is-static .hero__wash { opacity: 1; }


/* ---------- the closing field (round 12): bone, texture, one WebGL form ---------- */

.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%239C5533' stroke-width='1'%3E%3Cpath d='M-20 90 C 120 40, 220 150, 380 100 S 560 60, 600 110'/%3E%3Cpath d='M-20 180 C 100 140, 260 240, 400 190 S 560 150, 600 200'/%3E%3Cpath d='M-20 290 C 140 230, 240 340, 390 280 S 560 250, 600 300'/%3E%3Cpath d='M-20 400 C 110 350, 250 450, 410 390 S 560 360, 600 410'/%3E%3Cpath d='M-20 500 C 130 450, 230 550, 400 490 S 560 460, 600 510'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
}
.hero__field::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone);
  opacity: .975;
}
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 899px) { .hero__gl { display: none; } }
body.is-static .hero__field { display: none; }