/* ---------- background layers ---------- */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #6fbcf4;
  background-image: var(--glow), var(--sky);
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

.bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 28%, transparent 72%, rgba(4, 18, 34, .14));
}

html.theme-swap .bg-layer { animation: bgFade .8s ease; }

@keyframes bgFade {
  from { opacity: .45; }
  to { opacity: 1; }
}

/* ---------- base foreground palettes ---------- */

body[data-day="1"] {
  --fg: #0b2a45;
  --muted: rgba(11, 42, 69, .63);
  --card-bg: rgba(255, 255, 255, .42);
  --card-border: rgba(255, 255, 255, .62);
  --card-hover: rgba(255, 255, 255, .56);
  --panel: rgba(250, 253, 255, .98);
  --item-hover: rgba(11, 42, 69, .06);
  --chip-bg: rgba(255, 255, 255, .36);
  --chip-border: rgba(255, 255, 255, .55);
  --divider: rgba(11, 42, 69, .12);
  --accent: #1f7ae0;
  --accent-soft: rgba(31, 122, 224, .13);
  --accent-border: rgba(31, 122, 224, .3);
  --sk-base: rgba(11, 42, 69, .09);
  --scroll: rgba(11, 42, 69, .2);
}

body[data-day="0"] {
  --fg: #eef4ff;
  --muted: rgba(238, 244, 255, .64);
  --card-bg: rgba(255, 255, 255, .09);
  --card-border: rgba(255, 255, 255, .16);
  --card-hover: rgba(255, 255, 255, .14);
  --panel: rgba(8, 16, 32, .98);
  --item-hover: rgba(255, 255, 255, .09);
  --chip-bg: rgba(255, 255, 255, .07);
  --chip-border: rgba(255, 255, 255, .12);
  --divider: rgba(255, 255, 255, .14);
  --accent: #8ab4ff;
  --accent-soft: rgba(138, 180, 255, .16);
  --accent-border: rgba(138, 180, 255, .36);
  --sk-base: rgba(255, 255, 255, .12);
  --scroll: rgba(255, 255, 255, .22);
}

/* ---------- 14 weather themes ---------- */

body[data-weather="clear"][data-day="1"] {
  --sky: linear-gradient(180deg, #3ea1ea 0%, #79c6f2 46%, #cdeeff 100%);
  --glow: radial-gradient(circle at 76% 8%, rgba(255, 241, 177, .95) 0%, rgba(255, 226, 120, .42) 19%, rgba(255, 226, 120, 0) 48%);
  --accent: #1f7ae0;
}

body[data-weather="clear"][data-day="0"] {
  --sky: linear-gradient(180deg, #040c22 0%, #0b1e44 48%, #16325c 100%);
  --glow: radial-gradient(circle at 74% 10%, rgba(150, 190, 255, .4) 0%, rgba(120, 160, 255, .12) 26%, transparent 52%);
  --accent: #8ab4ff;
}

body[data-weather="partly"][data-day="1"] {
  --sky: linear-gradient(180deg, #4fa7e8 0%, #8dccf3 50%, #e2f3fd 100%);
  --glow: radial-gradient(circle at 72% 6%, rgba(255, 240, 185, .8), transparent 42%), radial-gradient(circle at 18% 26%, rgba(255, 255, 255, .45), transparent 38%);
  --accent: #1f7ae0;
}

body[data-weather="partly"][data-day="0"] {
  --sky: linear-gradient(180deg, #0a1730 0%, #13294d 52%, #1e3c64 100%);
  --glow: radial-gradient(circle at 72% 8%, rgba(160, 195, 255, .32), transparent 44%);
  --accent: #8ab4ff;
}

body[data-weather="cloudy"][data-day="1"] {
  --sky: linear-gradient(180deg, #8ca3b8 0%, #b7c8d8 54%, #dde9f1 100%);
  --glow: radial-gradient(circle at 68% 4%, rgba(255, 255, 255, .55), transparent 42%);
  --fg: #17293a;
  --muted: rgba(23, 41, 58, .62);
  --accent: #2a6fb0;
}

body[data-weather="cloudy"][data-day="0"] {
  --sky: linear-gradient(180deg, #141d2c 0%, #243349 54%, #35465e 100%);
  --glow: radial-gradient(circle at 70% 6%, rgba(150, 180, 220, .18), transparent 45%);
  --accent: #9dc4f0;
}

body[data-weather="fog"][data-day="1"] {
  --sky: linear-gradient(180deg, #a9b9c6 0%, #cfdae1 55%, #e9eef1 100%);
  --glow: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .55), transparent 55%);
  --fg: #22313d;
  --muted: rgba(34, 49, 61, .62);
  --accent: #3d6b8a;
}

body[data-weather="fog"][data-day="0"] {
  --sky: linear-gradient(180deg, #222c38 0%, #36434f 55%, #4a5866 100%);
  --glow: radial-gradient(circle at 50% 45%, rgba(190, 210, 230, .14), transparent 55%);
  --accent: #a9c6dd;
}

body[data-weather="rain"][data-day="1"] {
  --sky: linear-gradient(180deg, #4f6f8c 0%, #7193ad 50%, #a9c0d2 100%);
  --glow: radial-gradient(circle at 62% 2%, rgba(255, 255, 255, .28), transparent 45%);
  --fg: #0e2130;
  --muted: rgba(14, 33, 48, .64);
  --card-bg: rgba(255, 255, 255, .34);
  --card-border: rgba(255, 255, 255, .5);
  --accent: #1c5d8a;
}

body[data-weather="rain"][data-day="0"] {
  --sky: linear-gradient(180deg, #0b1724 0%, #15293c 52%, #1f3a50 100%);
  --glow: radial-gradient(circle at 62% 4%, rgba(130, 180, 230, .14), transparent 48%);
  --accent: #7fc0ef;
}

body[data-weather="snow"][data-day="1"] {
  --sky: linear-gradient(180deg, #a9c6db 0%, #d3e4ef 55%, #f4f9fc 100%);
  --glow: radial-gradient(circle at 70% 5%, rgba(255, 255, 255, .75), transparent 45%);
  --fg: #14304a;
  --muted: rgba(20, 48, 74, .6);
  --accent: #2f6f9f;
}

body[data-weather="snow"][data-day="0"] {
  --sky: linear-gradient(180deg, #182636 0%, #263a52 55%, #354d68 100%);
  --glow: radial-gradient(circle at 70% 5%, rgba(190, 220, 255, .2), transparent 45%);
  --accent: #a9d4f5;
}

body[data-weather="thunder"][data-day="1"] {
  --sky: linear-gradient(180deg, #3d4a60 0%, #55627a 52%, #7b8499 100%);
  --glow: radial-gradient(circle at 68% 4%, rgba(190, 205, 235, .22), transparent 46%);
  --fg: #f2f6ff;
  --muted: rgba(242, 246, 255, .66);
  --card-bg: rgba(255, 255, 255, .1);
  --card-border: rgba(255, 255, 255, .18);
  --card-hover: rgba(255, 255, 255, .15);
  --panel: rgba(10, 16, 28, .98);
  --item-hover: rgba(255, 255, 255, .09);
  --chip-bg: rgba(255, 255, 255, .08);
  --chip-border: rgba(255, 255, 255, .14);
  --divider: rgba(255, 255, 255, .15);
  --accent: #ffd166;
  --accent-soft: rgba(255, 209, 102, .16);
  --accent-border: rgba(255, 209, 102, .4);
  --sk-base: rgba(255, 255, 255, .13);
  --scroll: rgba(255, 255, 255, .24);
}

body[data-weather="thunder"][data-day="0"] {
  --sky: linear-gradient(180deg, #070c16 0%, #111a2c 52%, #1c2740 100%);
  --glow: radial-gradient(circle at 68% 4%, rgba(140, 170, 230, .18), transparent 46%);
  --accent: #ffd166;
  --accent-soft: rgba(255, 209, 102, .16);
  --accent-border: rgba(255, 209, 102, .4);
}

/* ---------- weather effects ---------- */

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

.rain {
  position: absolute;
  inset: -150px -10% 0;
  opacity: 0;
  transition: opacity .9s ease;
  background-image: repeating-linear-gradient(103deg, transparent 0 9px, rgba(255, 255, 255, .26) 9px 10px);
  background-size: 100% 150px;
  animation: rainFall .6s linear infinite;
  will-change: background-position;
}

.rain-back {
  background-image: repeating-linear-gradient(103deg, transparent 0 14px, rgba(255, 255, 255, .12) 14px 15px);
  background-size: 100% 230px;
  animation: rainFallBack 1.05s linear infinite;
}

body[data-weather="rain"] .rain { opacity: 1; }
body[data-weather="thunder"] .rain { opacity: .85; }

@keyframes rainFall { to { background-position: 0 150px; } }
@keyframes rainFallBack { to { background-position: 0 230px; } }

.snow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

body[data-weather="snow"] .snow { opacity: 1; }

.flake {
  position: absolute;
  top: -12vh;
  left: var(--x, 50%);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 7px rgba(255, 255, 255, .65);
  animation: snowFall var(--d, 9s) linear var(--delay, 0s) infinite,
             snowSway var(--sd, 4s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: translate, transform;
}

@keyframes snowFall {
  from { translate: 0 0; }
  to { translate: 0 120vh; }
}

@keyframes snowSway {
  from { transform: translateX(-11px); }
  to { transform: translateX(11px); }
}

.fog {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(54px);
  background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 66%);
  transition: opacity 1.4s ease;
}

.fog-a {
  left: -12vw;
  top: 42vh;
  width: 82vw;
  height: 46vh;
  animation: fogDriftA 64s ease-in-out infinite alternate;
}

.fog-b {
  right: -16vw;
  top: 20vh;
  width: 72vw;
  height: 40vh;
  animation: fogDriftB 88s ease-in-out infinite alternate;
}

body[data-weather="fog"] .fog { opacity: .85; }

@keyframes fogDriftA {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(16vw, -4vh, 0); }
}

@keyframes fogDriftB {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-14vw, 5vh, 0); }
}

.flash {
  position: absolute;
  inset: 0;
  background: #e8f0ff;
  opacity: 0;
  pointer-events: none;
}

body[data-weather="thunder"] .flash { animation: lightning 12s infinite; }

@keyframes lightning {
  0%, 51%, 100% { opacity: 0; }
  52% { opacity: .45; }
  53% { opacity: 0; }
  55% { opacity: .3; }
  56.5% { opacity: 0; }
}