/* Load after site.css. Toggle scene-playing on the hero-stage to replay.
   One seven-second story; the existing cloud drift stays independent. */
.hero-stage {
  --pre-scene-duration: 7s;
  --pre-lamp-rest: .15;
  --pre-lamp-peak: .64;
  --pre-beam-rest: 0;
  --pre-beam-peak: .42;
}

.hero-stage.night {
  --pre-lamp-rest: 1;
  --pre-lamp-peak: 1;
  --pre-beam-rest: .12;
  --pre-beam-peak: .62;
}

/* The complete illustration remains visible when JS or motion is absent. */
.hero-stage .hero-van {
  animation: none;
  transform: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.hero-stage .hero-van-wheel {
  transform: none;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-stage .hero-door-left {
  transform: none;
  transform-box: fill-box;
  transform-origin: left center;
}

.hero-stage .hero-headlight-beam {
  opacity: var(--pre-beam-rest);
  pointer-events: none;
}

.hero-stage .hero-light-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-stage.scene-playing .hero-van {
  animation: pre-van-arrival var(--pre-scene-duration) ease-out 1 both;
}

.hero-stage.scene-playing .hero-van-wheel {
  animation: pre-wheel-roll var(--pre-scene-duration) ease-out 1 both;
}

.hero-stage.scene-playing .hero-door-left {
  animation: pre-door-welcome var(--pre-scene-duration) ease-in-out 1 both;
}

.hero-stage.scene-playing .hero-headlight-beam {
  animation: pre-headlight-greeting var(--pre-scene-duration) ease-in-out 1 both;
}

.hero-stage.scene-playing .hero-light-halo {
  animation: pre-lamp-warmth var(--pre-scene-duration) ease-in-out 1 both;
}

/* 0.35s pause, arrival from the left by 2.5s, then a tiny suspension settle.
   The parent clips street-art to the SVG viewBox. */
@keyframes pre-van-arrival {
  0%, 5% {
    transform: translateX(-900px) translateY(0);
    animation-timing-function: cubic-bezier(.18, .65, .32, 1);
  }
  36% {
    transform: translateX(2px) translateY(.7px);
    animation-timing-function: ease-out;
  }
  40%, 100% {
    transform: translateX(0) translateY(0);
  }
}

/* Clockwise rotation follows the same travel easing and stops on arrival. */
@keyframes pre-wheel-roll {
  0%, 5% {
    transform: rotate(-360deg);
    animation-timing-function: cubic-bezier(.18, .65, .32, 1);
  }
  36%, 100% {
    transform: rotate(0deg);
  }
}

/* This targets the door leaf only, never its arch, steps or building. */
@keyframes pre-door-welcome {
  0%, 44% {
    transform: perspective(260px) rotateY(0deg);
  }
  59%, 73% {
    transform: perspective(260px) rotateY(-24deg);
  }
  94%, 100% {
    transform: perspective(260px) rotateY(0deg);
  }
}

/* A gradual pool of light, not a flash; beams should live inside hero-van. */
@keyframes pre-headlight-greeting {
  0%, 23% {
    opacity: 0;
  }
  37% {
    opacity: var(--pre-beam-peak);
  }
  49% {
    opacity: var(--pre-beam-rest);
  }
  61% {
    opacity: var(--pre-beam-peak);
  }
  82%, 100% {
    opacity: var(--pre-beam-rest);
  }
}

@keyframes pre-lamp-warmth {
  0%, 29% {
    opacity: var(--pre-lamp-rest);
    transform: scale(1);
  }
  57% {
    opacity: var(--pre-lamp-peak);
    transform: scale(1.12);
  }
  89%, 100% {
    opacity: var(--pre-lamp-rest);
    transform: scale(1);
  }
}

.hero-stage.scene-paused .hero-van,
.hero-stage.scene-paused .hero-van-wheel,
.hero-stage.scene-paused .hero-door-left,
.hero-stage.scene-paused .hero-headlight-beam,
.hero-stage.scene-paused .hero-light-halo,
.hero-stage.scene-paused .cloud,
.hero-stage.scene-paused .floating-tag {
  animation-play-state: paused;
}