/* Jackson Ryle — County-line hero choreography
   Paired with js/hero.js. If that module never runs, base.css keyframes
   still deliver the original entrance — everything here is additive. */

/* —— Dusk rises: the stage brightens as the site wakes —— */

.stage {
  transition: filter 2.8s var(--ease);
}

body.is-booting .stage {
  filter: brightness(0.4) saturate(0.85);
}

/* —— Trail Roads canvas (three.js, under the phosphor rain) —— */

#trailroads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #trailroads {
    opacity: 0.55;
  }
}

/* —— JS-driven entrance (body.hero-fx set by js/hero.js) —— */

body.hero-fx .brand,
body.hero-fx .tagline,
body.hero-fx .lede,
body.hero-fx .cta-row,
body.hero-fx .scroll-cue {
  animation: none;
  opacity: 1;
}

/* Characters: risen from the dirt, blurred road-heat settling sharp.
   Padding + negative margin grow the background paint box so descenders
   and ascenders survive background-clip:text at line-height 0.9. */
.hero-char {
  display: inline-block;
  padding: 0.3em 0.1em;
  margin: -0.3em -0.1em;
  background: linear-gradient(
    105deg,
    var(--cream) 0%,
    var(--cream) 40%,
    #fff7dd 50%,
    #dcc9a4 60%,
    var(--cream) 75%,
    var(--cream) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.hero-fx .hero-char {
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(9px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.95s var(--ease),
    filter 0.9s var(--ease);
}

body.hero-fx .hero-in .hero-char {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Gold sheen sweeping through the letters once they've landed */
.hero-sheen .hero-char {
  animation: hero-sheen 1.15s var(--ease) both;
  animation-delay: var(--sheen-delay, 0ms);
}

@keyframes hero-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

/* Tagline: italic gold arriving with its tracking settling in */
body.hero-fx .tagline {
  opacity: 0;
  transform: translateY(0.45rem);
  letter-spacing: 0.22em;
  filter: blur(3px);
  transition:
    opacity 1.1s var(--ease) 1.25s,
    transform 1.1s var(--ease) 1.25s,
    letter-spacing 1.3s var(--ease) 1.25s,
    filter 1.1s var(--ease) 1.25s;
}

body.hero-fx .hero-in .tagline {
  opacity: 1;
  transform: none;
  letter-spacing: 0.03em;
  filter: blur(0);
}

body.hero-fx .lede {
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 1s var(--ease) 1.5s,
    transform 1s var(--ease) 1.5s;
}

body.hero-fx .hero-in .lede {
  opacity: 1;
  transform: none;
}

body.hero-fx .cta-row {
  opacity: 0;
  transform: translateY(0.7rem);
  transition:
    opacity 0.95s var(--ease) 1.75s,
    transform 0.95s var(--ease) 1.75s;
}

body.hero-fx .hero-in .cta-row {
  opacity: 1;
  transform: none;
}

body.hero-fx .scroll-cue {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 2.3s;
}

body.hero-fx .hero-in .scroll-cue {
  opacity: 1;
}

/* —— Steel-glint sweep on the hero CTAs —— */

.cta-row .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 230, 180, 0.16) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
  pointer-events: none;
}

.cta-row .btn:hover::after,
.cta-row .btn:focus-visible::after {
  transform: translateX(130%);
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  body.is-booting .stage {
    transition: none;
    filter: none;
  }

  .hero-char,
  .hero-sheen .hero-char {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .cta-row .btn::after {
    display: none;
  }
}