/* === THEMES === */

/* Default dark theme is the baseline (variables.css) */

/* ── Rain theme ── */
body.theme-rain {
  /* canvas handles the visual rain overlay */
}

/* ── Snow theme ── */
body.theme-snow {
  /* canvas handles snowflakes */
}

/* ── Sunbeams theme ── */
body.theme-sunbeams {
  /* dynamic sunbeam divs injected by JS */
}

/* Sunbeam elements */
.sunbeam {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.sunbeam-a {
  width: 340px;
  height: 340px;
  top: -60px;
  left: -80px;
  background: radial-gradient(circle, rgba(255, 200, 80, 0.55) 0%, rgba(255, 140, 20, 0.15) 50%, transparent 70%);
  animation: sunbeamDrift1 8s ease-in-out infinite;
}

.sunbeam-b {
  width: 260px;
  height: 260px;
  top: 35%;
  right: -60px;
  background: radial-gradient(circle, rgba(255, 160, 40, 0.45) 0%, rgba(255, 100, 10, 0.12) 50%, transparent 68%);
  animation: sunbeamDrift2 11s ease-in-out infinite;
}

.sunbeam-c {
  width: 220px;
  height: 220px;
  bottom: 18%;
  left: 10%;
  background: radial-gradient(circle, rgba(255, 230, 100, 0.50) 0%, rgba(255, 180, 30, 0.14) 50%, transparent 65%);
  animation: sunbeamDrift3 14s ease-in-out infinite;
}

/* Canvas for rain/snow (always present, JS controls visibility) */
#weather-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}

#weather-canvas.visible {
  opacity: 1;
}

/* Theme transition overlay */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.theme-transition-overlay.flash {
  opacity: 0.4;
}