/* The whole hero intro (colour blocks + header fade-in) only plays when
   JS confirms the page loaded with the hero's top flush with the viewport
   top. See initHeroIntro() in scripts/site.js — it adds .play-intro to
   <body> once, at load, and never touches it again. */

.hero-intro {
  opacity: 0;
  pointer-events: none;
}

body.play-intro .hero-intro {
  animation: hero-intro-bg 5.3s ease forwards;
}

body.play-intro .hero-logo {
  animation: hero-logo-fade 5.3s ease forwards;
}

body.play-intro .hero-title {
  animation: hero-title-fade 5.3s ease forwards;
}

body.play-intro .hero-line {
  animation: hero-line-reveal 5.3s ease-out forwards;
}

body.play-intro .header-fade {
  opacity: 0;
  animation: hero-header-fade 5.3s ease forwards;
}

/* Phase 1 (0-15%, 0.8s): brown bg, logo visible.
   Phase 2 (15-40%, 1.3s): bg fades brown -> feature colour, logo fades out, h1 fades in.
   Phase 3 (40-100%, 3.2s): feature colour bg fades out, revealing the header/hero behind it.
   Title fade and line reveal keep the same relative position inside phase 3 as before, just stretched along with it. */

@keyframes hero-intro-bg {
  0%,
  15% {
    background-color: #50302E;
    opacity: 1;
  }

  40% {
    background-color: var(--hero-feature-colour, #50302E);
    opacity: 1;
  }

  100% {
    background-color: var(--hero-feature-colour, #50302E);
    opacity: 0;
  }
}

@keyframes hero-logo-fade {
  0%,
  15% {
    opacity: 1;
  }

  40%,
  100% {
    opacity: 0;
  }
}

@keyframes hero-title-fade {
  0%,
  15% {
    opacity: 0;
  }

  85%,
  100% {
    opacity: 1;
  }
}

@keyframes hero-line-reveal {
  0%,
  42% {
    height: 0px;
  }

  100% {
    height: calc(50vh - 120px);
  }
}

@keyframes hero-header-fade {
  0%,
  42% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}