@property --accent1 { syntax: '<color>'; initial-value: #00F2FE; inherits: true; }
@property --accent2 { syntax: '<color>'; initial-value: #FA00FF; inherits: true; }
@property --title-accent1 { syntax: '<color>'; initial-value: #33F6FF; inherits: true; }
@property --title-accent2 { syntax: '<color>'; initial-value: #FF00E5; inherits: true; }

:root {
  --bg-body: #000000; --card-bg: #111827; --text-main: #f8fafc; --text-muted: #94a3b8;
  --warn: #f59e0b; --bad: #ef4444; --ok: #10b981; --trans-speed: 0.4s;
  --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1);
  --chart-normal-1: #00F2FE; --chart-normal-2: #FA00FF;
  --chart-focus-1: #00F5A0; --chart-focus-2: #00D9F5; 
  --chart-holiday-1: #FF8C00; --chart-holiday-2: #FF0080; 
  --chart-flow-1: #8b5cf6; --chart-flow-2: #6366f1;
  --aurora-1: rgba(255, 120, 200, 0.15); --aurora-2: rgba(80, 180, 255, 0.12);
  --aurora-3: rgba(120, 255, 190, 0.15); --aurora-bg-1: rgba(120,120,255,0.05); --aurora-bg-2: rgba(255,120,120,0.05);
}

html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; }

html:not(.dark) {
  --bg-body: #f1f5f9; --card-bg: #ffffff; --text-main: #0f172a; --text-muted: #64748b;
  --title-accent1: #009099; --title-accent2: #B300A1;
  --aurora-1: rgba(255, 120, 200, 0.25); --aurora-2: rgba(80, 180, 255, 0.25);
  --aurora-3: rgba(120, 255, 190, 0.25); --aurora-bg-1: rgba(120,120,255,0.02); --aurora-bg-2: rgba(255,120,120,0.02);
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-body); color: var(--text-main);
  --accent1: #00F2FE; --accent2: #FA00FF; --title-accent1: #33F6FF; --title-accent2: #FF00E5;
  transition: background-color var(--trans-speed) var(--ease-smooth), color var(--trans-speed) var(--ease-smooth);
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: manipulation;
}

/* App specific lock */
.app-mode { overflow: hidden; width: 100vw; height: 100vh; }
.app-mode #root { height: 100%; width: 100%; overflow: hidden; }

.perspective-container { perspective: 2000px; }
.preserve-3d { transform-style: preserve-3d; }
.rotate-3d-box { transform: rotateY(-15deg) rotateX(10deg); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: -20px 20px 60px rgba(0,0,0,0.5); }
.rotate-3d-box:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }

body.theme-focus { --accent1: #00F5A0; --accent2: #00D9F5; --title-accent1: #A0F9D5; --title-accent2: #00C6FF; }
html:not(.dark) body.theme-focus { --title-accent1: #008f5d; --title-accent2: #007799; }
body.theme-holiday { --accent1: #FF8C00; --accent2: #FF0080; --title-accent1: #FFD700; --title-accent2: #FF7F50; }
html:not(.dark) body.theme-holiday { --title-accent1: #b39700; --title-accent2: #cc4d1f; }
body.theme-flow { --accent1: #8b5cf6; --accent2: #6366f1; --title-accent1: #a78bfa; --title-accent2: #818cf8; --aurora-1: rgba(139, 92, 246, 0.2); --aurora-2: rgba(99, 102, 241, 0.2); --aurora-3: rgba(167, 139, 250, 0.15); --bg-body: #0f0c1a; }
html:not(.dark) body.theme-flow { --bg-body: #f5f3ff; --title-accent1: #7c3aed; --title-accent2: #4f46e5; }

/* Festival Themes */
body.theme-festival-christmas { --accent1: #D42426; --accent2: #166534; --title-accent1: #EF4444; --title-accent2: #22C55E; --aurora-1: rgba(212, 36, 38, 0.15); --aurora-2: rgba(22, 101, 52, 0.15); --aurora-3: rgba(255, 215, 0, 0.1); }
body.theme-festival-eid { --accent1: #10B981; --accent2: #F59E0B; --title-accent1: #34D399; --title-accent2: #FBBF24; --aurora-1: rgba(16, 185, 129, 0.2); --aurora-2: rgba(245, 158, 11, 0.2); --aurora-3: rgba(6, 95, 70, 0.2); }
body.theme-festival-newyear { --accent1: #8B5CF6; --accent2: #EC4899; --title-accent1: #A78BFA; --title-accent2: #FBCFE8; --aurora-1: rgba(139, 92, 246, 0.2); --aurora-2: rgba(236, 72, 153, 0.15); --aurora-3: rgba(255, 255, 255, 0.1); }
body.theme-festival-diwali { --accent1: #EA580C; --accent2: #9333EA; --title-accent1: #FB923C; --title-accent2: #C084FC; --aurora-1: rgba(234, 88, 12, 0.2); --aurora-2: rgba(147, 51, 234, 0.2); --aurora-3: rgba(251, 191, 36, 0.2); }
body.theme-festival-halloween { --accent1: #F97316; --accent2: #6B21A8; --title-accent1: #FDBA74; --title-accent2: #A855F7; --aurora-1: rgba(249, 115, 22, 0.2); --aurora-2: rgba(88, 28, 135, 0.25); --aurora-3: rgba(0, 0, 0, 0.1); }
body.theme-festival-valentines { --accent1: #EC4899; --accent2: #EF4444; --title-accent1: #F472B6; --title-accent2: #F87171; --aurora-1: rgba(236, 72, 153, 0.2); --aurora-2: rgba(239, 68, 68, 0.15); --aurora-3: rgba(253, 164, 175, 0.1); }
body.theme-festival-lunar { --accent1: #DC2626; --accent2: #EAB308; --title-accent1: #F87171; --title-accent2: #FACC15; --aurora-1: rgba(220, 38, 38, 0.2); --aurora-2: rgba(234, 179, 8, 0.2); --aurora-3: rgba(124, 45, 18, 0.1); }
body.theme-festival-ramadan { --accent1: #1E3A8A; --accent2: #D97706; --title-accent1: #3B82F6; --title-accent2: #FBBF24; --aurora-1: rgba(30, 58, 138, 0.2); --aurora-2: rgba(217, 119, 6, 0.2); --aurora-3: rgba(15, 23, 42, 0.2); }

html:not(.dark) body.theme-festival-christmas { --title-accent1: #B91C1C; --title-accent2: #15803D; }
html:not(.dark) body.theme-festival-halloween { --title-accent1: #C2410C; --title-accent2: #6B21A8; }
html:not(.dark) body.theme-festival-lunar { --title-accent1: #991B1B; --title-accent2: #854D0E; }
html:not(.dark) body.theme-festival-ramadan { --title-accent1: #1E3A8A; --title-accent2: #B45309; }

:root { --accent-grad: linear-gradient(135deg, var(--accent1), var(--accent2)); }
.grad-text { background-image: linear-gradient(135deg, var(--title-accent1), var(--title-accent2)); background-clip: text; -webkit-background-clip: text; color: transparent; transition: --title-accent1 var(--trans-speed) var(--ease-smooth), --title-accent2 var(--trans-speed) var(--ease-smooth); }

body.aurora-active::before, body.aurora-running::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(40% 60% at 20% 20%, var(--aurora-1), transparent 60%), radial-gradient(35% 55% at 80% 30%, var(--aurora-2), transparent 60%), radial-gradient(50% 70% at 50% 80%, var(--aurora-3), transparent 60%), linear-gradient(120deg, var(--aurora-bg-1), var(--aurora-bg-2));
  filter: blur(40px) saturate(120%); transform: translateZ(0); will-change: background-position, opacity, filter; animation: auroraShift 18s ease-in-out infinite; transition: background 1s ease;
}
@keyframes auroraShift { 
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; } 
  25% { background-position: 20% 10%, 80% 10%, 45% 90%, 20% 10%; } 
  50% { background-position: 60% 40%, 40% 20%, 40% 60%, 60% 40%; } 
  75% { background-position: 80% 70%, 20% 60%, 55% 30%, 80% 70%; } 
  100% { background-position: 0% 100%, 100% 100%, 50% 0%, 0% 100%; } 
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; }
html:not(.dark) ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }

/* Decor Layers */
.festival-decor-layer { pointer-events: none; position: fixed; inset: 0; z-index: 9998; overflow: hidden; }
.christmas-lights-container { display: flex; justify-content: center; width: 100%; position: absolute; top: -14px; left: 0; gap: 40px; }
.christmas-wire { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(0,0,0,0.3); z-index: -1; }
.christmas-light { width: 10px; height: 10px; border-radius: 50%; background: #ccc; animation: light-twinkle 2s infinite ease-in-out; position: relative; margin-top: 10px; box-shadow: 0 2px 10px rgba(255,255,255,0.2); }
.christmas-light::before { content:''; position: absolute; top: -4px; left: 3px; width: 4px; height: 4px; background: #444; }
.christmas-light:nth-child(2n) { background: #D42426; animation-delay: 0.5s; box-shadow: 0 4px 15px rgba(212, 36, 38, 0.6); }
.christmas-light:nth-child(2n+1) { background: #166534; animation-delay: 1s; box-shadow: 0 4px 15px rgba(22, 101, 52, 0.6); }
.christmas-light:nth-child(3n) { background: #F59E0B; animation-delay: 1.5s; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.6); }
@keyframes light-twinkle { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.snowflake { position: absolute; color: white; font-size: 10px; opacity: 0.8; animation: fall linear infinite; text-shadow: 0 0 5px rgba(255,255,255,0.8); }
@keyframes fall { to { transform: translateY(100vh); } }

/* Loaders */
#global-preloader { position: fixed; inset: 0; z-index: 10001; background-color: var(--bg-body); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease-smooth), visibility 0.6s var(--ease-smooth); }
#global-preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.loader-spinner { width: 64px; height: 64px; position: relative; }
.loader-spinner::before, .loader-spinner::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
html.dark .loader-spinner::before, html.dark .loader-spinner::after { mix-blend-mode: screen; }
.loader-spinner::before { border-top-color: var(--accent1); border-left-color: rgba(0, 242, 254, 0.2); animation: spin-cw 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.loader-spinner::after { border-bottom-color: var(--accent2); border-right-color: rgba(250, 0, 255, 0.2); animation: spin-ccw 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes spin-cw { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spin-ccw { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
.loader-text { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 800; background: linear-gradient(90deg, var(--title-accent1), var(--title-accent2), var(--title-accent1)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 6px; animation: textShine 3s linear infinite; }
@keyframes textShine { to { background-position: 200% center; } }
.loader-dot { width: 6px; height: 6px; background-color: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.loader-dot:nth-child(1) { animation-delay: -0.32s; } .loader-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; background-color: var(--accent1); } }

/* --- LIVING FOOTER - EXACT COPY --- */
:root {
  --lf-sky-fade: var(--bg-body);
  --lf-mountains: #94a3b8; --lf-city-far: #64748b; --lf-city-mid: #475569; --lf-terrain: #334155; --lf-road: #1e293b; --lf-window: rgba(255,255,255,0.1); --lf-window-glow: transparent; --lf-headlight: transparent;
}
html.dark {
  --lf-mountains: #1e293b; --lf-city-far: #0f172a; --lf-city-mid: #020617; --lf-terrain: #000000;
  --lf-road: #0a0a0a; --lf-window: #fef08a; --lf-window-glow: rgba(254, 240, 138, 0.4); --lf-headlight: rgba(255, 255, 200, 0.8);
}
.living-footer-wrapper { position: relative; width: 100%; height: 240px; flex-shrink: 0; overflow: hidden; border-top: 1px solid rgba(128, 128, 128, 0.1); background: var(--bg-body); }
.lf-layer { position: absolute; }
.lf-top-fade { z-index: 20; top: -1px; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, var(--lf-sky-fade) 0%, transparent 100%); pointer-events: none; transition: background var(--trans-speed); }
html.dark .lf-top-fade { background: linear-gradient(to bottom, var(--lf-sky-fade) 0%, rgba(0,0,0,0) 100%); }
.lf-sky { z-index: 1; inset: 0; opacity: 0; transition: opacity 3s ease; }
.lf-sky.active { opacity: 1; }
.lf-celestial { z-index: 2; border-radius: 50%; transition: all 1s ease-out; transform: translate(-50%, 50%); }
.lf-airspace { z-index: 3; inset: 0; pointer-events: none; }
.lf-parallax-bg { z-index: 4; bottom: 0; left: 0; width: 100%; height: 100%; }
.lf-train-sys { z-index: 5; bottom: 50px; left: 0; width: 100%; height: 20px; }
.lf-parallax-fg { z-index: 6; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.lf-sidewalk { z-index: 7; bottom: 30px; left: 0; right: 0; height: 15px; background: var(--lf-terrain); border-top: 1px solid rgba(255,255,255,0.05); transition: background var(--trans-speed); }
.lf-pedestrians { z-index: 8; bottom: 35px; left: 0; width: 100%; height: 30px; }
.lf-road { z-index: 9; bottom: 0; left: 0; right: 0; height: 30px; background: var(--lf-road); border-top: 2px solid rgba(0,0,0,0.3); transition: background var(--trans-speed); }
.lf-vehicles { z-index: 10; bottom: 0; left: 0; width: 100%; height: 40px; pointer-events: none; }
.lf-weather-sys { z-index: 15; inset: 0; pointer-events: none; overflow: hidden; }

.lf-bg-morning { background: linear-gradient(180deg, #8ba8c9 0%, #f4c293 60%, #e88d72 100%); }
.lf-bg-day { background: linear-gradient(180deg, #5eb3f9 0%, #8be0ff 100%); }
.lf-bg-evening { background: linear-gradient(180deg, #373d65 0%, #765b77 50%, #d47e68 100%); }
.lf-bg-night { background: linear-gradient(180deg, #060913 0%, #101728 60%, #1a253a 100%); }

.lf-sun { width: 44px; height: 44px; background: #fffae6; box-shadow: 0 0 60px 20px rgba(255, 230, 100, 0.6); }
.lf-moon { width: 36px; height: 36px; background: #e2e8f0; box-shadow: 0 0 30px 5px rgba(226, 232, 240, 0.2); }
.lf-moon::after { content: ''; position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.1); box-shadow: -4px 8px 0 -2px rgba(0,0,0,0.05); }
.lf-star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--dur) infinite alternate ease-in-out; }
.lf-plane { position: absolute; top: 15%; width: 24px; height: 24px; animation: fly-right 83s linear infinite; opacity: 0.8; }
.lf-plane svg { width: 100%; height: 100%; fill: var(--lf-city-mid); transition: fill var(--trans-speed); transform: rotate(90deg); }
.lf-plane::after { content: ''; position: absolute; right: 2px; top: 10px; width: 3px; height: 3px; background: #ef4444; border-radius: 50%; animation: blink 1.5s infinite; }
.lf-balloon { position: absolute; top: 25%; width: 16px; height: 22px; animation: fly-left 149s linear infinite; opacity: 0.7; }
.lf-balloon svg { width: 100%; height: 100%; fill: #ef4444; }

.lf-parallax-bg svg, .lf-parallax-fg svg { width: 100%; height: 100%; display: block; }
.lf-win { fill: var(--lf-window); transition: fill var(--trans-speed); }
.night .lf-win.active, .evening .lf-win.active { fill: var(--lf-window); filter: drop-shadow(0 0 2px var(--lf-window-glow)); }

.lf-train-track { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.05); }
.lf-train { position: absolute; bottom: 4px; width: 500px; height: 14px; background: #111; border-radius: 3px; display: flex; align-items: center; justify-content: space-evenly; animation: train-pass 41s linear infinite; }
.lf-train-car { width: 110px; height: 100%; background: var(--lf-city-mid); border-radius: 2px; display: flex; gap: 4px; padding: 2px 4px; transition: background var(--trans-speed); }
.lf-train-win { flex: 1; background: var(--lf-window); opacity: 0.3; border-radius: 1px; transition: all var(--trans-speed); }
.night .lf-train-win, .evening .lf-train-win { opacity: 0.9; box-shadow: 0 0 4px var(--lf-window-glow); }

.lf-road-lines { position: absolute; top: 13px; left: 0; width: 200%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 30px, transparent 30px, transparent 60px); animation: pan-x 15s linear infinite; }

.lf-entity { position: absolute; will-change: transform; }
.lf-car-sedan { bottom: 8px; width: 50px; height: 16px; animation: drive-right 23s linear infinite; }
.lf-sedan-top { position: absolute; bottom: 10px; right: 10px; width: 24px; height: 10px; background: #3b82f6; border-radius: 10px 8px 0 0; }
.lf-sedan-body { position: absolute; bottom: 4px; right: 0; width: 50px; height: 10px; background: #1d4ed8; border-radius: 4px 8px 6px 4px; }
html.dark .lf-sedan-top { background: #334155; } html.dark .lf-sedan-body { background: #1e293b; }
.lf-wheel { position: absolute; bottom: 0; width: 12px; height: 12px; background: #0f172a; border-radius: 50%; border: 2px solid #94a3b8; animation: spin-cw 0.4s linear infinite; }
.lf-car-sedan .w1 { left: 6px; } .lf-car-sedan .w2 { right: 8px; }

.lf-car-truck { bottom: 14px; width: 70px; height: 26px; animation: drive-left 37s linear infinite; }
.lf-truck-box { position: absolute; bottom: 6px; right: 0; width: 50px; height: 20px; background: #e2e8f0; border-radius: 2px; }
.lf-truck-cab { position: absolute; bottom: 6px; left: 0; width: 18px; height: 16px; background: #f59e0b; border-radius: 6px 2px 2px 4px; }
html.dark .lf-truck-box { background: #475569; } html.dark .lf-truck-cab { background: #78350f; }
.lf-car-truck .lf-wheel { animation: spin-ccw 0.6s linear infinite; }
.lf-car-truck .w1 { left: 2px; } .lf-car-truck .w2 { right: 10px; } .lf-car-truck .w3 { right: 30px; }

.lf-headlight { position: absolute; bottom: 5px; width: 25px; height: 8px; border-radius: 50%; opacity: 0; transition: opacity 1s; }
.lf-car-sedan .lf-headlight { right: -15px; background: linear-gradient(90deg, var(--lf-headlight), transparent); }
.lf-car-truck .lf-headlight { left: -15px; background: linear-gradient(-90deg, var(--lf-headlight), transparent); }
.night .lf-headlight, .evening .lf-headlight { opacity: 1; }

.lf-person-dog { bottom: 0; display: flex; align-items: flex-end; gap: 8px; animation: walk-left 59s linear infinite; }
.lf-jogger { bottom: 0; animation: walk-right 31s linear infinite; }
.lf-human { position: relative; width: 10px; height: 26px; }
.lf-h-head { width: 8px; height: 8px; background: var(--lf-city-mid); border-radius: 50%; margin: 0 auto; transition: background var(--trans-speed); }
.lf-h-body { width: 6px; height: 10px; background: var(--accent1); margin: 0 auto; border-radius: 2px; }
html.dark .lf-h-body { background: #475569; }
.lf-jogger .lf-h-body { background: #ef4444; }
.lf-h-leg { width: 2.5px; height: 10px; background: var(--lf-city-mid); position: absolute; top: 18px; transform-origin: top; transition: background var(--trans-speed); border-radius: 2px; }
.lf-h-leg.l { left: 1.5px; animation: swing-l 0.6s infinite alternate ease-in-out; }
.lf-h-leg.r { right: 1.5px; animation: swing-r 0.6s infinite alternate ease-in-out; }
.lf-jogger .lf-h-leg.l { animation: swing-l 0.3s infinite alternate ease-in-out; }
.lf-jogger .lf-h-leg.r { animation: swing-r 0.3s infinite alternate ease-in-out; }

.lf-dog { position: relative; width: 14px; height: 10px; margin-bottom: 2px; }
.lf-dog-body { width: 12px; height: 6px; background: var(--lf-city-mid); border-radius: 4px; position: absolute; bottom: 4px; left: 1px; transition: background var(--trans-speed); }
.lf-dog-head { width: 6px; height: 6px; background: var(--lf-city-mid); border-radius: 50%; position: absolute; bottom: 8px; left: -2px; transition: background var(--trans-speed); }
.lf-dog-leg { width: 1.5px; height: 4px; background: var(--lf-city-mid); position: absolute; bottom: 0; transform-origin: top; transition: background var(--trans-speed); }
.lf-dog-leg.f { left: 2px; animation: swing-l 0.3s infinite alternate ease-in-out; }
.lf-dog-leg.b { right: 2px; animation: swing-r 0.3s infinite alternate ease-in-out; }
.lf-leash { position: absolute; width: 12px; height: 1px; background: rgba(128,128,128,0.5); bottom: 12px; left: -8px; transform: rotate(-15deg); }

.lf-clouds-bg { position: absolute; top: 10px; width: 200%; height: 100px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"><path d="M40,50 Q60,30 90,40 Q110,20 140,40 Q160,30 180,50 Z M250,60 Q270,40 300,50 Q320,30 350,50 Q370,40 390,60 Z" fill="white" opacity="0.3"/></svg>') repeat-x; animation: pan-x 120s linear infinite; }
.lf-rain { background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="20" y1="0" x2="10" y2="20" stroke="white" stroke-opacity="0.4" stroke-width="0.5"/><line x1="70" y1="30" x2="60" y2="50" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/></svg>') repeat; animation: fall-rain 0.3s linear infinite; }
.lf-snow { background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="1.5" fill="white" opacity="0.8"/><circle cx="70" cy="60" r="1" fill="white" opacity="0.6"/></svg>') repeat; animation: fall-snow 4s linear infinite; }

.anim-pan-slow { animation: pan-pattern 199s linear infinite; }
.anim-pan-med { animation: pan-pattern 131s linear infinite; }
.anim-pan-fast { animation: pan-pattern 89s linear infinite; }
.anim-tree-sway { transform-origin: bottom center; animation: sway 5s infinite alternate ease-in-out; }

@keyframes pan-pattern { from { transform: translateX(0); } to { transform: translateX(-800px); } }
@keyframes pan-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fall-rain { from { background-position: 0 0; } to { background-position: -20px 100px; } }
@keyframes fall-snow { from { background-position: 0 -100px; } to { background-position: 20px 100px; } }
@keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes drive-right { 0% { transform: translateX(-10vw); } 100% { transform: translateX(110vw); } }
@keyframes drive-left { 0% { transform: translateX(110vw) scaleX(-1); } 100% { transform: translateX(-10vw) scaleX(-1); } }
@keyframes walk-right { 0% { transform: translateX(-10vw); } 100% { transform: translateX(110vw); } }
@keyframes walk-left { 0% { transform: translateX(110vw) scaleX(-1); } 100% { transform: translateX(-10vw) scaleX(-1); } }
@keyframes fly-right { from { left: -10%; transform: scale(0.6); } to { left: 110%; transform: scale(1); } }
@keyframes fly-left { from { left: 110%; transform: scale(0.8); } to { left: -10%; transform: scale(1.2); } }
@keyframes train-pass { 0%, 60% { left: 120%; } 100% { left: -150%; } }
@keyframes swing-l { 0% { transform: rotate(-25deg); } 100% { transform: rotate(25deg); } }
@keyframes swing-r { 0% { transform: rotate(25deg); } 100% { transform: rotate(-25deg); } }
@keyframes sway { 0% { transform: skewX(-2deg); } 100% { transform: skewX(2deg); } }
@keyframes twinkle { 0% { opacity: 0.1; transform: scale(0.8); } 100% { opacity: 0.9; transform: scale(1.2); box-shadow: 0 0 4px #fff; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }