:root {
  --breakpoint-sm: 600px;
  --sky-fade: 1400ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: #0c0f14; /* fallback only — the .sky layers paint the scene */
  touch-action: none; /* lets touch-drag drive the cursor field */
}

/* =====================================================================
   Scene: gradient + one secondary atmosphere per season
   ===================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden; /* not painted at all once faded out */
  transition:
    opacity var(--sky-fade) ease,
    visibility 0s linear var(--sky-fade);
}

body[data-theme="fall"] .sky--fall,
body[data-theme="winter"] .sky--winter,
body[data-theme="spring"] .sky--spring,
body[data-theme="summer"] .sky--summer {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sky-fade) ease,
    visibility 0s;
}

/* Secondary atmosphere layer — oversized so its slow drift never shows an edge */
.sky .aura {
  position: absolute;
  inset: -8%;
  will-change: transform, opacity;
}

/* Pause atmosphere animation on hidden seasons */
.sky .aura {
  animation-play-state: paused;
}
body[data-theme="fall"] .sky--fall .aura,
body[data-theme="winter"] .sky--winter .aura,
body[data-theme="summer"] .sky--summer .aura {
  animation-play-state: running;
}

/* ----- Fall: burnt umber into warm near-black + faint amber haze ----- */
.sky--fall {
  background: linear-gradient(
    180deg,
    #4a2815 0%,
    #3a2010 38%,
    #24150b 72%,
    #160d08 100%
  );
}
.sky--fall .aura {
  background:
    radial-gradient(
      55% 32% at 34% 66%,
      rgba(224, 148, 66, 0.075),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(206, 128, 54, 0.035) 62%,
      transparent 88%
    );
  animation: haze-breathe 26s ease-in-out infinite alternate;
}

/* ----- Winter: navy into blue-black + diffused moonlit cold air ------ */
.sky--winter {
  background: linear-gradient(
    180deg,
    #173754 0%,
    #10263d 45%,
    #0a1827 75%,
    #07111d 100%
  );
}
.sky--winter .aura {
  background:
    radial-gradient(
      42% 38% at 76% 14%,
      rgba(182, 208, 236, 0.075),
      transparent 72%
    ),
    radial-gradient(
      70% 26% at 24% 90%,
      rgba(150, 180, 214, 0.045),
      transparent 72%
    );
  animation: fog-drift 90s ease-in-out infinite alternate;
}

/* ----- Spring: plum twilight + sparse pollen motes (JS) --------- */
.sky--spring {
  /* dusky plum twilight — lets the pink blossoms carry the colour */
  background: linear-gradient(
    180deg,
    #453a5c 0%,
    #33293f 40%,
    #221b2b 72%,
    #15111b 100%
  );
}
.sky--spring .motes {
  position: absolute;
  inset: 0;
}
.sky--spring .mote {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: rgb(252, 232, 238);
  box-shadow: 0 0 4px 1px rgba(252, 232, 238, 0.28);
  opacity: 0;
  will-change: transform, opacity;
}

/* ----- Summer: teal upper air into muted gold + side sunlight -------- */
.sky--summer {
  background: linear-gradient(
    180deg,
    #2a6582 0%,
    #3d7489 34%,
    #647d77 62%,
    #867c56 84%,
    #8f7438 100%
  );
}
.sky--summer .aura {
  background: radial-gradient(
    48% 46% at 88% 22%,
    rgba(255, 226, 168, 0.13),
    rgba(255, 226, 168, 0.035) 48%,
    transparent 74%
  );
  animation: haze-breathe 30s ease-in-out infinite alternate;
}

/* Shared: soft vignette (static layer, normal blending — cheap) */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 90% at 50% 42%,
    transparent 55%,
    rgba(0, 0, 0, 0.16) 100%
  );
}

@keyframes haze-breathe {
  from {
    opacity: 0.55;
    transform: translate3d(-1.5%, 0.5%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(1.5%, -1%, 0);
  }
}

@keyframes fog-drift {
  from {
    opacity: 0.75;
    transform: translate3d(-2.5%, 0, 0) scale(1);
  }
  to {
    opacity: 1;
    transform: translate3d(2.5%, -1%, 0) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky .aura {
    animation: none;
  }
}

/* =====================================================================
   Artifact layer
   ===================================================================== */

.weather-artifact-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Wrapper that carries ONLY the cursor-field offset. The GSAP-driven
   .weather-artifact inside it is untouched, so the two never fight. */
.weather-artifact-container .artifact-slot {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.weather-artifact-container .weather-artifact {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  user-select: none;
  will-change: transform;
  color: #fff;
  line-height: 1;
}

.weather-artifact .artifact {
  display: inline-block;
}

/* Dandelion seed (inline SVG, sized in em so font-size still drives size) */
.weather-artifact .seed {
  display: block;
  overflow: visible;
  color: #f4ecd9;
}

/* =====================================================================
   Season selector
   ===================================================================== */
.season-switch {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.season-switch button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  font: 500 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  transition: background 220ms ease, color 220ms ease;
}

.season-switch button:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
}

.season-switch button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

.season-switch button.is-active {
  color: #12161c;
  background: rgba(255, 255, 255, 0.9);
}

/* =====================================================================
   Scenery silhouettes (built in script.js → scenery)
   One <svg> per depth layer so parallax is a pure GPU transform.
   ===================================================================== */
.sky .land {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sky .land-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  will-change: transform;
}

/* =====================================================================
   Seasonal accents — one per season, CSS-only, behind the particles
   ===================================================================== */
.sky .accent {
  position: absolute;
  pointer-events: none;
  animation-play-state: paused;
}
.sky .accent * {
  animation-play-state: inherit;
}
body[data-theme="fall"] .sky--fall .accent,
body[data-theme="winter"] .sky--winter .accent,
body[data-theme="spring"] .sky--spring .accent,
body[data-theme="summer"] .sky--summer .accent {
  animation-play-state: running;
}

/* ----- Fall: flock crossing roughly once a minute --------------------- */
.flock {
  top: 16vh;
  left: 0;
  width: clamp(120px, 11vw, 190px);
  aspect-ratio: 2 / 1;
  color: #1b0e06;
  opacity: 0.7;
  z-index: 0;
  transform: translate3d(-20vw, 0, 0);
  animation: flock-cross 64s linear infinite;
  animation-delay: -18s; /* first pass comes early */
}
.flock .bird {
  transform-box: fill-box;
  transform-origin: center;
  animation: flap 1.1s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes flock-cross {
  0% { transform: translate3d(-20vw, 4vh, 0); }
  55% { transform: translate3d(115vw, -5vh, 0); }
  100% { transform: translate3d(115vw, -5vh, 0); }
}
@keyframes flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(-0.35); }
}

/* ----- Winter: faint moon at the heart of the cold light -------------- */
.moon {
  top: 9vh;
  left: 74vw;
  width: clamp(34px, 3.6vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  background:
    radial-gradient(circle at 34% 58%, rgba(120, 140, 165, 0.35) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 36%, rgba(120, 140, 165, 0.3) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 70%, rgba(120, 140, 165, 0.22) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 38%, #eef2f8, #c7d2e0 72%);
  opacity: 0.55;
  box-shadow:
    0 0 24px 6px rgba(205, 222, 245, 0.1),
    0 0 110px 40px rgba(190, 210, 240, 0.05);
}

/* ----- Spring: an umbrella strolls by just below the fold ------------- */
.umbrella-track {
  bottom: 0;
  left: 54vw;
  width: clamp(150px, 15vw, 240px);
  aspect-ratio: 200 / 120;
  z-index: 2; /* in front of the landscape: it's the nearest thing */
  transform: translate3d(0, 110%, 0);
  animation: umbrella-stroll 42s ease-in-out infinite;
  animation-delay: -30s;
}
.umbrella {
  width: 100%;
  height: 100%;
  transform-origin: 50% 90%;
  animation: umbrella-sway 3.6s ease-in-out infinite alternate;
  opacity: 0.92;
}
@keyframes umbrella-stroll {
  0% { transform: translate3d(-4vw, 110%, 0); }
  14% { transform: translate3d(0vw, 18%, 0); }
  56% { transform: translate3d(12vw, 12%, 0); }
  70% { transform: translate3d(16vw, 110%, 0); }
  100% { transform: translate3d(16vw, 110%, 0); }
}
@keyframes umbrella-sway {
  from { transform: rotate(-3deg) translateY(0); }
  to { transform: rotate(2.5deg) translateY(3%); }
}

/* ----- Summer: sun shafts fanning out from the glow ------------------- */
.rays {
  inset: 0;
  z-index: 2;
  transform-origin: 90% 10%;
  background: conic-gradient(
    from 0deg at 90% 10%,
    transparent 0deg 196deg,
    rgba(255, 232, 180, 0.07) 198deg,
    transparent 202deg 207deg,
    rgba(255, 232, 180, 0.05) 209deg 211deg,
    transparent 214deg 221deg,
    rgba(255, 232, 180, 0.08) 224deg,
    transparent 229deg 236deg,
    rgba(255, 232, 180, 0.04) 238deg,
    transparent 241deg 360deg
  );
  -webkit-mask-image: radial-gradient(ellipse 85% 95% at 90% 10%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 95% at 90% 10%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  animation: rays-drift 22s ease-in-out infinite alternate;
}
@keyframes rays-drift {
  from { opacity: 0.55; transform: rotate(-1.2deg); }
  to { opacity: 1; transform: rotate(1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sky .accent,
  .sky .accent * {
    animation: none;
  }
}

/* ----- Winter: low ground fog (two tiled bands, seamless loop) -------- */
.ground-fog {
  left: 0;
  width: 200%; /* two tiles wide; sliding by one tile loops seamlessly */
  z-index: 2;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
}
.ground-fog--back {
  bottom: 7vh;
  height: 30vh;
  opacity: 1;
  background-image:
    radial-gradient(26% 50% at 14% 60%, rgba(186, 206, 232, 0.16), transparent 72%),
    radial-gradient(30% 42% at 46% 52%, rgba(186, 206, 232, 0.13), transparent 72%),
    radial-gradient(24% 48% at 78% 62%, rgba(186, 206, 232, 0.16), transparent 72%);
  animation: fog-roll 160s linear infinite;
}
.ground-fog--front {
  bottom: -2vh;
  height: 22vh;
  background-image:
    radial-gradient(22% 46% at 28% 55%, rgba(196, 214, 238, 0.2), transparent 72%),
    radial-gradient(28% 50% at 64% 60%, rgba(196, 214, 238, 0.15), transparent 72%),
    radial-gradient(18% 40% at 92% 50%, rgba(196, 214, 238, 0.14), transparent 72%);
  animation:
    fog-roll 95s linear infinite reverse,
    fog-breathe 18s ease-in-out infinite alternate;
}
@keyframes fog-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes fog-breathe {
  from { opacity: 0.6; }
  to { opacity: 1; }
}