/* The landscape automatically follows the visitor's local time. */
:root { --scene-image: url("hero.jpg"); }
:root[data-scene="morning"] { --scene-image: url("hero-morning-left.webp"); }
:root[data-scene="evening"] { --scene-image: url("hero-evening.webp"); }
:root[data-scene="night"] { --scene-image: var(--lunar-image, none), url("hero-night-moonless.webp"); }

.hero {
  background-image: linear-gradient(90deg, rgba(20, 30, 32, .55), rgba(20, 30, 32, .3) 40%, rgba(20, 30, 32, 0) 60%), var(--scene-image);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: max(96px, 6vw);
}
.workshop-page .ws-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: max(96px, 6vw);
  background-image: linear-gradient(90deg, rgba(20, 30, 32, .86), rgba(20, 30, 32, .68) 60%, rgba(20, 30, 32, .35)), var(--scene-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.workshop-page .ws-hero-grid { position: relative; z-index: 1; }
.site-footer { background-image: var(--scene-image); }

.scene-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms ease;
}
.scene-fade.is-leaving { opacity: 0; }

/* Sun rays only align with the original daytime sun. */
:root[data-scene="morning"] .fx-sun,
:root[data-scene="evening"] .fx-sun,
:root[data-scene="night"] .fx-sun { display: none; }
:root[data-scene="night"] .fx-grass .tuft { stroke: #7daea6; }

/* Red poppies replace the landscape blossoms from November 1 through 11. */
.remembrance-poppies { display: none; pointer-events: none; }
:root[data-flowers="poppies"] .wildflower-blossoms,
:root[data-flowers="poppies"] .logo-blossom { display: none; }
:root[data-flowers="poppies"] .remembrance-poppies { display: inline; }

/* Keep the headline legible with the sunrise now behind the left-hand copy. */
@media (min-width: 801px) {
  :root[data-scene="morning"] .hero {
    background-image: linear-gradient(90deg, rgba(20, 30, 32, .68), rgba(20, 30, 32, .62) 40%, rgba(20, 30, 32, .08) 70%), var(--scene-image);
  }
}

@media (max-width: 800px) {
  .hero { background-image: linear-gradient(180deg, rgba(34, 35, 31, .72), rgba(34, 35, 31, .9)), var(--scene-image); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-fade { transition: none; }
}

/* Decorative night sky, aligned with each hero's landscape crop. */
.night-sky {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
:root[data-scene="night"] .night-sky { display: block; }
.night-sky.is-active { opacity: .72; }
.workshop-page .night-sky.is-active { opacity: .45; }
.night-star {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: night-star-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite;
  animation-play-state: paused;
}
.night-sky.is-active .night-star { animation-play-state: running; }
@keyframes night-star-twinkle {
  0%, 100% { opacity: .05; transform: scale(.7); }
  50% { opacity: .9; transform: scale(1.1); }
}
.night-comet { opacity: 0; transform-box: view-box; }
.night-comet.is-passing { animation: night-comet-pass 3.2s linear both; }
@keyframes night-comet-pass {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .8; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(440px, 150px); }
}
@media (prefers-reduced-motion: reduce), print {
  :root[data-scene] .night-sky { display: none; transition: none; }
  .night-star, .night-comet.is-passing { animation: none; }
}

/* Sun hover works through the hero copy without intercepting input. */
.morning-sun-fx, .evening-sun-fx {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
:root[data-scene="morning"] .morning-sun-fx { display: block; }
:root[data-scene="evening"] .evening-sun-fx { display: block; }
.morning-sun-glow, .evening-sun-glow {
  opacity: 0;
  transform: scale(.78);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 500ms ease, transform 800ms ease;
}
.morning-sun-rays, .evening-sun-rays {
  fill: none;
  stroke: #ffe3a1;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 384px 399px;
  transition: opacity 500ms ease;
}
.is-morning-sun-active .morning-sun-glow { opacity: .3; transform: scale(1.08); }
.is-morning-sun-active .morning-sun-rays { opacity: .32; animation: morning-sun-turn 24s linear infinite; }
:root[data-scene="morning"] .hero.is-morning-sun-active .q-sun { color: #c96a00; font-weight: 700; }
.evening-sun-rays { stroke: #ffdf9f; stroke-width: 3; transform-origin: 1514px 437px; }
.is-evening-sun-active .evening-sun-glow { opacity: .65; transform: scale(1.1); }
.is-evening-sun-active .evening-sun-rays { opacity: .55; animation: morning-sun-turn 36s linear infinite; }
:root[data-scene="evening"] .hero.is-evening-sun-active .q-sun { color: #b76624; font-weight: 700; }
@keyframes morning-sun-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .morning-sun-glow, .morning-sun-rays, .evening-sun-glow, .evening-sun-rays { transition: none; }
  .is-morning-sun-active .morning-sun-rays, .is-evening-sun-active .evening-sun-rays { animation: none; }
}
@media print { :root[data-scene] .morning-sun-fx, :root[data-scene] .evening-sun-fx { display: none; } }