#season-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
}

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

.season-overlay::before,
.season-overlay::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.season-on .season-overlay::before,
body.season-on .season-overlay::after {
  opacity: 1;
}

/* spring */
body.season-spring .season-overlay::before {
  background-image:
    radial-gradient(circle, rgba(255, 190, 220, 0.95) 0 10px, transparent 11px),
    radial-gradient(circle, rgba(255, 210, 230, 0.82) 0 8px, transparent 9px),
    radial-gradient(circle, rgba(255, 230, 240, 0.78) 0 6px, transparent 7px);
  background-size: 140px 140px, 200px 200px, 260px 260px;
  animation: seasonSpringFall 12s linear infinite;
}

body.season-spring .season-overlay::after {
  background-image:
    radial-gradient(circle, rgba(255, 200, 225, 0.55) 0 12px, transparent 13px);
  background-size: 220px 220px;
  animation: seasonSpringFall2 16s linear infinite;
}

/* summer */
body.season-summer .season-overlay::before {
  background-image:
    radial-gradient(circle, rgba(180, 230, 255, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle, rgba(150, 220, 255, 0.14) 0 5px, transparent 6px);
  background-size: 200px 200px, 260px 260px;
  filter: blur(1px);
  animation: seasonSummerFloat 12s ease-in-out infinite alternate;
}

body.season-summer .season-overlay::after {
  background-image:
    radial-gradient(circle, rgba(200, 240, 255, 0.12) 0 12px, transparent 13px);
  background-size: 300px 300px;
  filter: blur(2px);
  animation: seasonSummerFloat2 16s ease-in-out infinite alternate;
}

/* autumn */
body.season-autumn .season-overlay::before {
  background-image:
    radial-gradient(circle, rgba(255, 170, 90, 0.78) 0 7px, transparent 8px),
    radial-gradient(circle, rgba(220, 90, 40, 0.68) 0 6px, transparent 7px),
    radial-gradient(circle, rgba(255, 210, 120, 0.62) 0 5px, transparent 6px);
  background-size: 240px 240px, 300px 300px, 200px 200px;
  animation: seasonAutumnFall 22s linear infinite;
}

body.season-autumn .season-overlay::after {
  background-image:
    radial-gradient(circle, rgba(255, 180, 100, 0.22) 0 8px, transparent 9px);
  background-size: 340px 340px;
  animation: seasonAutumnFall2 28s linear infinite;
}

/* winter */
body.season-winter .season-overlay::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(220, 240, 255, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 5px, transparent 6px);
  background-size: 160px 160px, 220px 220px, 300px 300px;
  animation: seasonWinterSnow 16s linear infinite;
}

body.season-winter .season-overlay::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.24) 0 6px, transparent 7px);
  background-size: 360px 360px;
  animation: seasonWinterSnow2 24s linear infinite;
}

@keyframes seasonSpringFall {
  from { transform: translateY(-6%) translateX(0); }
  to { transform: translateY(6%) translateX(-3%); }
}

@keyframes seasonSpringFall2 {
  from { transform: translateY(-4%) translateX(2%); }
  to { transform: translateY(7%) translateX(-2%); }
}

@keyframes seasonSummerFloat {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}

@keyframes seasonSummerFloat2 {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(14px) translateX(6px); }
}

@keyframes seasonAutumnFall {
  from { transform: translateY(-5%) translateX(1%); }
  to { transform: translateY(7%) translateX(-2%); }
}

@keyframes seasonAutumnFall2 {
  from { transform: translateY(-6%) translateX(-1%); }
  to { transform: translateY(8%) translateX(3%); }
}

@keyframes seasonWinterSnow {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}

@keyframes seasonWinterSnow2 {
  from { transform: translateY(-10%) translateX(0); }
  to { transform: translateY(10%) translateX(2%); }
}