/* Home hero: a tall section with a sticky, full-height stage. The phoenix globe paints the sky; the copy
   (label, headline, one sentence) sits bottom left; scrolling through the section turns night into dawn
   (see hero.js), and the copy's colours follow the sky.
   On phones the browser's bars slide away on the first scroll and the screen grows. The stage takes the largest
   viewport (lvh) so it never resizes with them, and the copy sits above the bars' edge (svh) so it never moves:
   in the first scroll only the phoenix moves. */

.hero {
  position: relative;
  height: var(--hero-length, 260vh);
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
.hero__scene {
  position: absolute;
  inset: 0;
}
.hero__copy {
  position: absolute;
  left: var(--space-page);
  right: var(--space-page);
  bottom: clamp(var(--space-5), 4.5vh, var(--space-7));
  bottom: calc(100lvh - 100svh + clamp(var(--space-5), 4.5svh, var(--space-7)));
  display: grid;
  pointer-events: none;
}
.hero__headline {
  grid-area: 1 / 1;
  align-self: end;
  color: var(--ink);
  will-change: opacity, transform;
}
/* When the sky turns, the type turns with it (the section's theme flips halfway). */
.hero__headline,
.hero__headline .rule-label,
.hero__headline em.accent,
.hero__lead {
  transition: color var(--dur-slower) var(--ease-standard);
}
.hero__headline .rule-label::before {
  transition: background-color var(--dur-slower) var(--ease-standard);
}
.hero__headline .rule-label {
  margin-bottom: var(--space-5);
  color: var(--ink-muted);
  text-wrap: balance;
}
.hero__headline .t-display-xl {
  max-width: 7.2em;
}
/* One sentence under the headline: what the studio does. */
.hero__lead {
  max-width: 32ch;
  margin-top: var(--space-5);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
.hero__headline[data-hero-phase='dawn'] {
  opacity: 0;
}

/* Scroll cue: a thin gold line that keeps drawing downward, bottom right. It can be a link onward (on the
   home page, to the selected work). Fades out once the story starts. */
.hero__cue {
  position: absolute;
  right: var(--space-page);
  bottom: clamp(var(--space-5), 4.5vh, var(--space-7));
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  text-decoration: none;
  transition: opacity var(--dur-slow) var(--ease-standard), color var(--dur-base) var(--ease-standard), visibility 0s;
}
a.hero__cue:hover,
a.hero__cue:focus-visible {
  color: var(--accent);
}
.hero__cue::after {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top;
  animation: hero-cue 2.4s var(--ease-in-out-quart) infinite;
}
.hero.is-moving .hero__cue {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow);
}
@keyframes hero-cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue::after {
    animation: none;
  }
}
@media (max-width: 600px) {
  .hero__cue {
    display: none;
  }
}