/* Load after site.css and hero-motion.css. No additional markup is needed.
   .night changes the sky; .ambient-paused or .scene-paused freezes motion. */
.hero-stage {
  --pre-ambient-halo: #ffc92832;
  --pre-ambient-halo-edge: #ffc9280a;
}

.hero-stage.night {
  --pre-ambient-halo: #fff8cf24;
  --pre-ambient-halo-edge: #fff8cf05;
}

/* Different speeds and starting points keep the sky from moving as one layer. */
.hero-stage .cloud.one {
  animation: pre-ambient-cloud-near 19s ease-in-out -7s infinite alternate;
}

.hero-stage .cloud.two {
  animation: pre-ambient-cloud-far 26s ease-in-out -19s infinite alternate;
}

.hero-stage .cloud.three {
  animation: pre-ambient-cloud-high 22s ease-in-out -4s infinite alternate;
}

@keyframes pre-ambient-cloud-near {
  from { transform: translate3d(-35px, 3px, 0); }
  to { transform: translate3d(44px, -5px, 0); }
}

@keyframes pre-ambient-cloud-far {
  from { transform: translate3d(27px, -4px, 0); }
  to { transform: translate3d(-48px, 5px, 0); }
}

@keyframes pre-ambient-cloud-high {
  from { transform: translate3d(-22px, -3px, 0); }
  to { transform: translate3d(33px, 4px, 0); }
}

/* Animate children so the existing day/night transform on .sun stays intact. */
.hero-stage .sun::before,
.hero-stage .sun::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform-origin: center;
}

.hero-stage .sun::before {
  inset: -33%;
  background: repeating-conic-gradient(
    from 0deg,
    #dba718 0deg 2deg,
    transparent 2deg 30deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 57%, #000 59% 68%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 57%, #000 59% 68%, transparent 70%);
  opacity: .56;
  animation: pre-ambient-sun-rays 64s linear infinite;
  transition: opacity 1.2s ease;
}

.hero-stage .sun::after {
  inset: -62%;
  background: radial-gradient(
    circle,
    transparent 36%,
    var(--pre-ambient-halo) 44%,
    var(--pre-ambient-halo-edge) 61%,
    transparent 71%
  );
  animation: pre-ambient-sun-halo 9s ease-in-out -3s infinite;
}

.hero-stage.night .sun::before {
  opacity: 0;
}

@keyframes pre-ambient-sun-rays {
  to { transform: rotate(360deg); }
}

@keyframes pre-ambient-sun-halo {
  0%, 100% { transform: scale(.94); opacity: .54; }
  50% { transform: scale(1.11); opacity: .91; }
}

.hero-stage .floating-tag {
  animation: pre-ambient-tag-float 8s ease-in-out -2s infinite;
}

@keyframes pre-ambient-tag-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
  50% { transform: translate3d(-2px, -8px, 0) rotate(2.5deg); }
}

/* Two small star groups fade in with night mode. Brightness moves slowly;
   keeping opacity outside the keyframes also allows a smooth day/night fade. */
.hero-stage .sky-disc::before,
.hero-stage .sky-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  transition: opacity 1.4s ease;
}

.hero-stage .sky-disc::before {
  background-image:
    radial-gradient(circle at 22% 20%, #fff9e6 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 48% 9%, #fff9e6 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 29%, #fff9e6 0 1.3px, transparent 2px),
    radial-gradient(circle at 16% 42%, #fff9e6 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 43%, #fff9e6 0 1px, transparent 1.7px);
  animation: pre-ambient-star-glow 9s ease-in-out -2s infinite;
}

.hero-stage .sky-disc::after {
  background-image:
    radial-gradient(circle at 36% 29%, #fff9e6 0 .9px, transparent 1.7px),
    radial-gradient(circle at 61% 17%, #fff9e6 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 23%, #fff9e6 0 .8px, transparent 1.6px),
    radial-gradient(circle at 10% 33%, #fff9e6 0 .8px, transparent 1.6px),
    radial-gradient(circle at 52% 39%, #fff9e6 0 .9px, transparent 1.7px);
  animation: pre-ambient-star-glow 12s ease-in-out -8s infinite reverse;
}

.hero-stage.night .sky-disc::before {
  opacity: .74;
}

.hero-stage.night .sky-disc::after {
  opacity: .54;
}

@keyframes pre-ambient-star-glow {
  0%, 100% { filter: brightness(.64); }
  50% { filter: brightness(1); }
}

/* Pause at the current frame rather than snapping back to the start. */
.hero-stage:is(.ambient-paused, .scene-paused) .cloud,
.hero-stage:is(.ambient-paused, .scene-paused) .floating-tag,
.hero-stage:is(.ambient-paused, .scene-paused) .sun::before,
.hero-stage:is(.ambient-paused, .scene-paused) .sun::after,
.hero-stage:is(.ambient-paused, .scene-paused) .sky-disc::before,
.hero-stage:is(.ambient-paused, .scene-paused) .sky-disc::after {
  animation-play-state: paused;
}

@media (max-width: 700px) {
  /* A slightly smaller halo keeps the sun clear of the scene controls. */
  .hero-stage .sun::after { inset: -49%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage .cloud,
  .hero-stage .floating-tag,
  .hero-stage .sun::before,
  .hero-stage .sun::after,
  .hero-stage .sky-disc::before,
  .hero-stage .sky-disc::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-stage .cloud { transform: none; }
  .hero-stage .floating-tag { transform: rotate(4deg); }
  .hero-stage .sun::after { opacity: .65; }
}