/* ===================================================
   Theme Variations — Time of Day, Season, Weather, Lakes
   Applied via body classes set by theme-engine.js
   =================================================== */

/* ---- Lake ---- */

.lake {
  position: absolute;
  bottom: 14vh;
  left: 10%;
  right: 30%;
  height: 8vh;
  background: linear-gradient(180deg,
    rgba(135, 206, 235, 0.6) 0%,
    rgba(100, 181, 246, 0.7) 40%,
    rgba(66, 165, 245, 0.5) 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  z-index: 2;
  overflow: hidden;
}

.lake::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  right: -10%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(255, 255, 255, 0.15) 40px,
    rgba(255, 255, 255, 0.15) 80px
  );
  animation: lake-shimmer 8s ease-in-out infinite;
}

.lake::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(46, 125, 50, 0.15));
}

/* Second lake (smaller, right side) */
.lake-2 {
  position: absolute;
  bottom: 16vh;
  right: 5%;
  width: 18%;
  height: 5vh;
  background: linear-gradient(180deg,
    rgba(135, 206, 235, 0.5) 0%,
    rgba(100, 181, 246, 0.6) 100%);
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
}

.lake-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  right: -10%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 25px,
    rgba(255, 255, 255, 0.12) 25px,
    rgba(255, 255, 255, 0.12) 50px
  );
  animation: lake-shimmer 6s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes lake-shimmer {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* Footer-sized lakes */
.forest-scene-footer .lake {
  bottom: 60px;
  height: 25px;
}
.forest-scene-footer .lake-2 {
  bottom: 70px;
  height: 16px;
}

/* ============================================
   TIME OF DAY
   ============================================ */

/* ---- Dawn (5-7am) ---- */

body.dawn {
  --sky-top: #FF9E80;
  --sky-mid: #FFCCBC;
  --sky-bottom: #FFF3E0;
}

body.dawn .hero-scene,
body.dawn .page-header {
  background: linear-gradient(180deg, #FF9E80 0%, #FFCCBC 25%, #FFE0B2 50%, #E8F5E9 100%);
}

body.dawn .sun {
  top: 40%;
  right: 20%;
  background: radial-gradient(circle, #FFF9C4 0%, #FFAB40 40%, rgba(255,171,64,0) 70%);
  box-shadow: 0 0 80px rgba(255,171,64,0.5), 0 0 160px rgba(255,171,64,0.2);
}

body.dawn .lake {
  background: linear-gradient(180deg,
    rgba(255, 158, 128, 0.5) 0%,
    rgba(255, 183, 77, 0.4) 50%,
    rgba(100, 181, 246, 0.4) 100%);
}

body.dawn .lake-2 {
  background: linear-gradient(180deg, rgba(255, 183, 77, 0.4), rgba(100, 181, 246, 0.3));
}

/* ---- Morning (7-10am) — uses base theme ---- */

/* ---- Day (10am-5pm) — uses base theme ---- */

/* ---- Sunset (5-8pm) ---- */

body.sunset {
  --sky-top: #7B1FA2;
  --sky-mid: #FF6F00;
  --sky-bottom: #FFE0B2;
}

body.sunset .hero-scene,
body.sunset .page-header {
  background: linear-gradient(180deg, #7B1FA2 0%, #E65100 20%, #FF6F00 40%, #FFE0B2 70%, #E8F5E9 100%);
}

body.sunset .sun {
  top: 45%;
  right: 15%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #FFF9C4 0%, #FF6F00 35%, rgba(255,111,0,0) 65%);
  box-shadow: 0 0 100px rgba(255,111,0,0.5), 0 0 200px rgba(255,111,0,0.2);
}

body.sunset .cloud { opacity: 0.4; }
body.sunset .cloud-1 { background: #FFCC80; }
body.sunset .cloud-1::before, body.sunset .cloud-1::after { background: #FFCC80; }
body.sunset .cloud-2 { background: #CE93D8; }
body.sunset .cloud-2::before, body.sunset .cloud-2::after { background: #CE93D8; }
body.sunset .cloud-3 { background: #FFAB91; }
body.sunset .cloud-3::before, body.sunset .cloud-3::after { background: #FFAB91; }

body.sunset .bird span { background: #4A148C; }
body.sunset .bird span::before, body.sunset .bird span::after { border-top-color: #6A1B9A; }

body.sunset .lake {
  background: linear-gradient(180deg,
    rgba(123, 31, 162, 0.4) 0%,
    rgba(255, 111, 0, 0.4) 40%,
    rgba(66, 165, 245, 0.3) 100%);
}

body.sunset .lake-2 {
  background: linear-gradient(180deg, rgba(255, 111, 0, 0.35), rgba(123, 31, 162, 0.3));
}

body.sunset .site-nav {
  background: rgba(255, 243, 224, 0.88);
}

/* ---- Night (8pm-5am) ---- */

body.night {
  --sky-top: #0D1B2A;
  --sky-mid: #1B2838;
  --sky-bottom: #1B3A1D;
  --text-body: #B8C9BB;
  --text-dark: #D4E4D6;
  --text-muted: rgba(184, 201, 187, 0.6);
  --card-bg: rgba(13, 27, 42, 0.85);
  --card-border: rgba(255, 255, 255, 0.1);
}

body.night {
  background: #0D1B2A;
}

body.night .hero-scene,
body.night .page-header {
  background: linear-gradient(180deg, #0D1B2A 0%, #1B2838 40%, #1B3A1D 80%, #0D2818 100%);
}

/* Hide sun, show moon */
body.night .sun {
  background: radial-gradient(circle, #E8EAF6 0%, #C5CAE9 30%, rgba(197,202,233,0) 60%);
  box-shadow: 0 0 40px rgba(197,202,233,0.4), 0 0 80px rgba(197,202,233,0.15);
  width: 70px;
  height: 70px;
  top: 8%;
  right: 18%;
}

/* Stars */
body.night .hero-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, white, transparent),
    radial-gradient(1px 1px at 25% 8%, white, transparent),
    radial-gradient(1.5px 1.5px at 40% 22%, white, transparent),
    radial-gradient(1px 1px at 55% 5%, white, transparent),
    radial-gradient(1px 1px at 65% 18%, white, transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, white, transparent),
    radial-gradient(1px 1px at 88% 25%, white, transparent),
    radial-gradient(1px 1px at 15% 30%, white, transparent),
    radial-gradient(1px 1px at 48% 10%, white, transparent),
    radial-gradient(1.5px 1.5px at 92% 6%, white, transparent),
    radial-gradient(1px 1px at 5% 22%, white, transparent),
    radial-gradient(1px 1px at 72% 28%, white, transparent),
    radial-gradient(1px 1px at 33% 16%, white, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, white, transparent),
    radial-gradient(1px 1px at 82% 20%, white, transparent);
  opacity: 0.7;
  z-index: 1;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 0.8; }
}

body.night .cloud { opacity: 0.15; }
body.night .cloud, body.night .cloud::before, body.night .cloud::after {
  background: #37474F;
}

body.night .leaf { opacity: 0; }

/* Fireflies replace leaves at night */
body.night .leaf {
  width: 4px !important;
  height: 4px !important;
  background: #FFD54F !important;
  border-radius: 50% !important;
  opacity: 0.7 !important;
  box-shadow: 0 0 8px rgba(255,213,79,0.6);
  animation: firefly 6s ease-in-out infinite !important;
}
body.night .leaf:nth-child(2) { animation-duration: 8s !important; animation-delay: -1s !important; }
body.night .leaf:nth-child(3) { animation-duration: 5s !important; animation-delay: -3s !important; }
body.night .leaf:nth-child(4) { animation-duration: 7s !important; animation-delay: -2s !important; }
body.night .leaf:nth-child(5) { animation-duration: 9s !important; animation-delay: -4s !important; }
body.night .leaf:nth-child(6) { animation-duration: 6s !important; animation-delay: -5s !important; }
body.night .leaf:nth-child(7) { animation-duration: 10s !important; animation-delay: -7s !important; }
body.night .leaf:nth-child(8) { animation-duration: 7s !important; animation-delay: -3s !important; }

@keyframes firefly {
  0% { top: 60%; opacity: 0; transform: translateX(0) translateY(0); }
  20% { opacity: 0.8; }
  50% { opacity: 0.3; transform: translateX(30px) translateY(-40px); }
  80% { opacity: 0.7; }
  100% { top: 30%; opacity: 0; transform: translateX(-20px) translateY(-80px); }
}

body.night .bird { display: none; }

body.night .lake {
  background: linear-gradient(180deg,
    rgba(13, 27, 42, 0.7) 0%,
    rgba(27, 40, 56, 0.6) 50%,
    rgba(27, 58, 29, 0.4) 100%);
}
body.night .lake::before {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(197, 202, 233, 0.08) 40px,
    rgba(197, 202, 233, 0.08) 80px
  );
}
body.night .lake-2 {
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.6), rgba(27, 40, 56, 0.5));
}

body.night .ground {
  background: linear-gradient(180deg, #1B5E20 0%, #0D3B0F 30%, #0A2E0C 100%);
}

body.night .site-nav {
  background: rgba(13, 27, 42, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.night .nav-brand-text { color: #D4E4D6; }
body.night .nav-tab { color: rgba(184, 201, 187, 0.5); }
body.night .nav-tab:hover, body.night .nav-tab.active { color: #D4E4D6; border-bottom-color: var(--forest-bright); }

body.night .mobile-tab-bar {
  background: rgba(13, 27, 42, 0.95);
  border-top-color: rgba(255, 255, 255, 0.06);
}
body.night .mobile-tab { color: rgba(184, 201, 187, 0.5); }
body.night .mobile-tab.active { color: #D4E4D6; }

body.night .footer-content { background: rgba(10, 20, 15, 0.95); }
body.night .footer-bottom { background: rgba(5, 12, 8, 0.95); }

body.night .frosted-card,
body.night .frosted-card-sm {
  background: rgba(13, 27, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.night h1, body.night h2, body.night h3, body.night h4 { color: #D4E4D6; }
body.night a { color: var(--forest-bright); }

/* ============================================
   SEASONS
   ============================================ */

/* ---- Spring ---- */

body.spring .tree-1 .c3 { border-bottom-color: #F48FB1; }
body.spring .tree-3 .c3 { border-bottom-color: #F8BBD0; }
body.spring .tree-6 .c3 { border-bottom-color: #F48FB1; }
body.spring .tree-9 .c3 { border-bottom-color: #CE93D8; }

body.spring .leaf:nth-child(2) { background: #F48FB1 !important; }
body.spring .leaf:nth-child(5) { background: #F8BBD0 !important; }
body.spring .leaf:nth-child(7) { background: #CE93D8 !important; }

/* ---- Summer — base theme, no overrides ---- */

/* ---- Fall ---- */

body.fall .tree-1 .c1 { border-bottom-color: #BF360C; }
body.fall .tree-1 .c2 { border-bottom-color: #E65100; }
body.fall .tree-1 .c3 { border-bottom-color: #FF6F00; }

body.fall .tree-2 .c1 { border-bottom-color: #D84315; }
body.fall .tree-2 .c2 { border-bottom-color: #FF8F00; }
body.fall .tree-2 .c3 { border-bottom-color: #FFA726; }

body.fall .tree-3 .c1 { border-bottom-color: #E65100; }
body.fall .tree-3 .c2 { border-bottom-color: #FF6F00; }
body.fall .tree-3 .c3 { border-bottom-color: #FFB300; }

body.fall .tree-4 .c1 { border-bottom-color: #BF360C; }
body.fall .tree-4 .c2 { border-bottom-color: #D84315; }
body.fall .tree-4 .c3 { border-bottom-color: #FF8F00; }

body.fall .tree-5 .c1 { border-bottom-color: #33691E; }
body.fall .tree-5 .c2 { border-bottom-color: #E65100; }
body.fall .tree-5 .c3 { border-bottom-color: #FF6F00; }

body.fall .tree-6 .c1 { border-bottom-color: #E65100; }
body.fall .tree-6 .c2 { border-bottom-color: #FFB300; }
body.fall .tree-6 .c3 { border-bottom-color: #FFD54F; }

body.fall .tree-7 .c1 { border-bottom-color: #BF360C; }
body.fall .tree-7 .c2 { border-bottom-color: #D84315; }
body.fall .tree-7 .c3 { border-bottom-color: #FF8F00; }

body.fall .tree-8 .c1 { border-bottom-color: #33691E; }
body.fall .tree-8 .c2 { border-bottom-color: #BF360C; }
body.fall .tree-8 .c3 { border-bottom-color: #E65100; }

body.fall .tree-9 .c1 { border-bottom-color: #FF6F00; }
body.fall .tree-9 .c2 { border-bottom-color: #FFB300; }
body.fall .tree-9 .c3 { border-bottom-color: #FFD54F; }

body.fall .tree-10 .c1 { border-bottom-color: #D84315; }
body.fall .tree-10 .c2 { border-bottom-color: #FF8F00; }
body.fall .tree-10 .c3 { border-bottom-color: #FFA726; }

body.fall .ground {
  background: linear-gradient(180deg, #8D6E63 0%, #6D4C41 30%, #5D4037 100%);
}
body.fall .ground::before {
  background: linear-gradient(180deg, transparent, #8D6E63);
}

body.fall .leaf:nth-child(1) { background: #FF6F00 !important; }
body.fall .leaf:nth-child(2) { background: #BF360C !important; }
body.fall .leaf:nth-child(3) { background: #FFB300 !important; }
body.fall .leaf:nth-child(4) { background: #D84315 !important; }
body.fall .leaf:nth-child(5) { background: #FF8F00 !important; }
body.fall .leaf:nth-child(6) { background: #FFD54F !important; }
body.fall .leaf:nth-child(7) { background: #E65100 !important; }
body.fall .leaf:nth-child(8) { background: #FFA726 !important; }

/* ---- Winter ---- */

body.winter {
  --sky-top: #B0BEC5;
  --sky-mid: #CFD8DC;
  --sky-bottom: #ECEFF1;
}

body.winter .hero-scene,
body.winter .page-header {
  background: linear-gradient(180deg, #B0BEC5 0%, #CFD8DC 30%, #ECEFF1 60%, #E8EAF6 100%);
}

/* Snow-capped trees */
body.winter .tree .c3 { border-bottom-color: #ECEFF1 !important; }
body.winter .tree .c2 { border-bottom-color: #CFD8DC !important; }

body.winter .tree-2 .c2 { border-bottom-color: #1B5E20 !important; }
body.winter .tree-5 .c2 { border-bottom-color: #1B5E20 !important; }
body.winter .tree-8 .c2 { border-bottom-color: #1B5E20 !important; }

body.winter .ground {
  background: linear-gradient(180deg, #ECEFF1 0%, #CFD8DC 30%, #B0BEC5 100%);
}
body.winter .ground::before {
  background: linear-gradient(180deg, transparent, #ECEFF1);
}

/* Snowflakes replace leaves */
body.winter .leaf {
  background: white !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
body.winter .leaf:nth-child(7) { background: white !important; }

/* Frozen lakes */
body.winter .lake {
  background: linear-gradient(180deg,
    rgba(224, 242, 254, 0.7) 0%,
    rgba(187, 222, 251, 0.8) 50%,
    rgba(144, 202, 249, 0.6) 100%);
}
body.winter .lake::before {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 30px,
    rgba(255, 255, 255, 0.25) 30px,
    rgba(255, 255, 255, 0.25) 60px
  );
  animation: none;
}
body.winter .lake-2 {
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.6), rgba(187, 222, 251, 0.7));
}
body.winter .lake-2::before { animation: none; }

body.winter .sun {
  background: radial-gradient(circle, #FFFFFF 0%, #ECEFF1 30%, rgba(236,239,241,0) 60%);
  box-shadow: 0 0 40px rgba(255,255,255,0.3);
  opacity: 0.7;
}

body.winter .cloud, body.winter .cloud::before, body.winter .cloud::after {
  background: #CFD8DC;
}

/* ============================================
   WEATHER OVERLAYS
   ============================================ */

/* ---- Cloudy ---- */

body.weather-cloudy .sun { opacity: 0.4; }
body.weather-cloudy .cloud { opacity: 0.85; }
body.weather-cloudy .cloud-1 { animation-duration: 35s; }
body.weather-cloudy .cloud-2 { animation-duration: 40s; opacity: 0.7; }
body.weather-cloudy .cloud-3 { animation-duration: 50s; opacity: 0.75; }

/* Extra clouds for overcast feel */
body.weather-cloudy .hero-scene::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(176, 190, 197, 0.3) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ---- Fog ---- */

body.weather-fog .hero-scene::after,
body.weather-fog .page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(236, 239, 241, 0.4);
  z-index: 6;
  pointer-events: none;
}

body.weather-fog .sun { opacity: 0.25; }
body.weather-fog .forest-scene { opacity: 0.7; }
body.weather-fog .bird { opacity: 0.3; }

/* ---- Rain ---- */

body.weather-rain .sun { opacity: 0.15; }
body.weather-rain .cloud { opacity: 0.9; }
body.weather-rain .cloud, body.weather-rain .cloud::before, body.weather-rain .cloud::after {
  background: #90A4AE;
}

body.weather-rain .bird { display: none; }

/* Rain drops layer */
body.weather-rain .hero-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(176, 190, 197, 0.3) 95%),
    linear-gradient(90deg, transparent 97%, rgba(176, 190, 197, 0.15) 97%);
  background-size: 3px 20px, 7px 20px;
  animation: rain-fall 0.4s linear infinite;
  z-index: 6;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes rain-fall {
  0% { background-position: 0 0, 4px 10px; }
  100% { background-position: 0 20px, 4px 30px; }
}

body.weather-rain .lake::before {
  animation: lake-shimmer 3s ease-in-out infinite;
}

/* ---- Snow (weather) ---- */

body.weather-snow .sun { opacity: 0.3; }
body.weather-snow .cloud { opacity: 0.8; }
body.weather-snow .cloud, body.weather-snow .cloud::before, body.weather-snow .cloud::after {
  background: #CFD8DC;
}
body.weather-snow .bird { display: none; }

/* Override leaves to snowflakes if not already winter season */
body.weather-snow .leaf {
  background: white !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 4px rgba(255,255,255,0.5);
}

/* ============================================
   COMBINED STATES (night + season)
   ============================================ */

body.night.fall .hero-scene::before {
  opacity: 0.6;
}

body.night.winter .hero-scene::before {
  opacity: 0.4;
}

body.night.winter .ground {
  background: linear-gradient(180deg, #37474F 0%, #263238 30%, #1a2327 100%);
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  .lake::before, .lake-2::before { animation: none; }
  body.weather-rain .hero-scene::after { animation: none; }
  body.night .hero-scene::before { animation: none; }
  body.night .leaf { animation: none !important; opacity: 0 !important; }
}