/* <living-scene>: a living landscape background (sky by the real clock and weather,
   seasons, holidays, nature, ambient sound). Generated from the Seekers site; every
   rule is scoped under living-scene and every animation is prefixed ls-. */
living-scene { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; text-align: left; line-height: normal; } /* never inherit the host page's text layout */
living-scene .sound-btn, living-scene .sky-preview { pointer-events: auto; }
living-scene .scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
living-scene .scene svg { position: absolute; left: 0; width: 100%; height: 100%; }
living-scene .stars { top: 0; }
living-scene .stars circle { fill: #fff; opacity: 0.25; animation: ls-twinkle 4s ease-in-out infinite; }
living-scene .ridges { bottom: 0; animation: ls-drift 40s ease-in-out infinite alternate; transform-origin: bottom; }
living-scene .ridges .trees path { fill: #07303a; }
living-scene .cloud {
  position: absolute; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  filter: blur(2px); animation: ls-float linear infinite;
}
living-scene .cloud::before, living-scene .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
living-scene .cloud::before { width: 60%; height: 140%; left: 12%; top: -55%; }
living-scene .cloud::after { width: 40%; height: 120%; right: 14%; top: -40%; }
living-scene .c1 { width: 220px; top: 14%; animation-duration: 70s; animation-delay: -10s; }
living-scene .c2 { width: 160px; top: 28%; animation-duration: 95s; animation-delay: -50s; opacity: 0.7; }
living-scene .c3 { width: 260px; top: 8%; animation-duration: 120s; animation-delay: -85s; opacity: 0.5; }
@keyframes ls-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@keyframes ls-float { from { transform: translateX(-320px); } to { transform: translateX(110vw); } }
@keyframes ls-drift { from { transform: scale(1.02) translateX(-1%); } to { transform: scale(1.06) translateX(1%); } }
@media (prefers-reduced-motion: reduce) {
  living-scene .stars circle, living-scene .cloud, living-scene .ridges { animation: none !important; }
}
/* ---------- v14: sky that follows the local time (hero[data-phase]) ----------
   Gradients can't animate, so each phase is its own layer and they crossfade.
   sunrise (shourouk): green → orange · day: sea green · sunset (ghouroub): blue → orange · night: dark blue + stars */
living-scene { --fade: 4s; --r1: #0f5965; --r2: #0d4a54; --r3: #0a3b43; --tree: #07303a; --cloud: rgba(255, 255, 255, 0.16); --stars: 0; background: #071433; }
living-scene .sky, living-scene .sky i { position: absolute; inset: 0; }
living-scene .sky i { opacity: 0; transition: opacity var(--fade) ease-in-out; }
living-scene .s-night { background: radial-gradient(900px 500px at 78% 10%, rgba(120, 150, 255, 0.18), transparent 60%), linear-gradient(180deg, #030a1f 0%, #0a1a3d 55%, #16306a 100%); }
living-scene .s-sunrise { background: radial-gradient(900px 460px at 57% 46%, rgba(255, 170, 90, 0.5), transparent 60%), linear-gradient(180deg, #1f5f63 0%, #4d9a86 28%, #e9b071 52%, #f28a4a 72%); }
living-scene .s-day { background: radial-gradient(1000px 520px at 72% 0%, rgba(255, 255, 255, 0.22), transparent 60%), linear-gradient(180deg, #0c5f6b 0%, #158291 50%, #3fa9a0 100%); }
living-scene .s-sunset { background: radial-gradient(1000px 480px at 64% 42%, rgba(255, 120, 60, 0.85), transparent 65%), linear-gradient(180deg, #13295a 0%, #3c3f7c 24%, #c0605a 48%, #f08a3e 66%); }
living-scene[data-phase="night"] .s-night, living-scene[data-phase="sunrise"] .s-sunrise, living-scene[data-phase="day"] .s-day, living-scene[data-phase="sunset"] .s-sunset { opacity: 1; }
living-scene[data-phase="night"] { --r1: #13254f; --r2: #0c1a3b; --r3: #08122b; --tree: #050c1f; --cloud: rgba(170, 190, 255, 0.07); --stars: 1; }
living-scene[data-phase="sunrise"] { --r1: #3f6f63; --r2: #2c5a52; --r3: #1d4842; --tree: #133630; --cloud: rgba(255, 225, 200, 0.35); --stars: 0.25; }
living-scene[data-phase="day"] { --r1: #127380; --r2: #0e5e69; --r3: #0b4b54; --tree: #083a42; --cloud: rgba(255, 255, 255, 0.32); --stars: 0; }
living-scene[data-phase="sunset"] { --r1: #5a3f6a; --r2: #3b2f5c; --r3: #262449; --tree: #181836; --cloud: rgba(255, 190, 160, 0.3); --stars: 0.3; }
living-scene .ridges .m3, living-scene .ridges .trees path { transition: fill var(--fade) ease-in-out; }
living-scene .ridges .trees path { fill: var(--tree); }
living-scene .stars { opacity: var(--stars); transition: opacity var(--fade) ease-in-out; }
/* Sun and moon travel between phase positions */
living-scene .sun, living-scene .moon { position: absolute; border-radius: 50%; transition: left var(--fade) ease-in-out, top var(--fade) ease-in-out, opacity var(--fade), background-color var(--fade), box-shadow var(--fade); }
living-scene .sun { width: 84px; height: 84px; left: 12%; top: 110%; opacity: 0; background: #ffd27a; box-shadow: 0 0 60px 24px rgba(255, 196, 102, 0.45), 0 0 160px 70px rgba(255, 150, 70, 0.25); }
living-scene[data-phase="sunrise"] .sun { opacity: 1; background: #ffb768; }
living-scene[data-phase="day"] .sun { left: 48%; top: 9%; opacity: 1; background: #fff3c4; box-shadow: 0 0 60px 26px rgba(255, 244, 200, 0.4), 0 0 180px 80px rgba(255, 255, 255, 0.14); }
living-scene[data-phase="sunset"] .sun { left: 60%; top: 32%; opacity: 1; background: #ff8a47; box-shadow: 0 0 70px 30px rgba(255, 120, 60, 0.55), 0 0 200px 90px rgba(255, 90, 60, 0.3); }
living-scene .moon { width: 58px; height: 58px; left: 70%; top: -20%; opacity: 0; background: transparent; box-shadow: inset -14px 8px 0 0 #f4f1de, 0 0 40px 6px rgba(200, 215, 255, 0.18); }
living-scene[data-phase="night"] .moon { left: 46%; top: 11%; opacity: 1; }
living-scene .sun { animation: ls-sunPulse 6s ease-in-out infinite; }
@keyframes ls-sunPulse { 50% { filter: brightness(1.12); } }
/* Shooting stars, night only */
living-scene .shoot { position: absolute; top: 12%; left: 22%; width: 110px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent); transform: rotate(-24deg); }
living-scene[data-phase="night"] .shoot { animation: ls-shoot 7s ease-in 2s infinite; }
living-scene[data-phase="night"] .shoot.s2 { top: 22%; left: 58%; animation-duration: 11s; animation-delay: 6s; }
@keyframes ls-shoot {
  0% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  2% { opacity: 1; }
  10% { opacity: 0; transform: rotate(-24deg) translateX(-340px); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-340px); }
}
/* Clouds: soft puffs from three overlapping shapes, tinted per phase, drifting at
   different speeds and heights (parallax) with a gentle bob */
living-scene .cloud { height: 34px; width: calc(var(--w) * 1px); background: var(--cloud); filter: blur(3px);
  border-radius: 999px; transition: background-color var(--fade); animation: ls-float linear infinite, ls-bob 9s ease-in-out infinite; }
living-scene .cloud::before { width: 48%; height: 170%; left: 14%; top: -85%; }
living-scene .cloud::after { width: 36%; height: 135%; right: 16%; top: -55%; }
living-scene .c1 { --w: 210; top: 13%; animation-duration: 80s, 9s; animation-delay: -12s, 0s; }
living-scene .c2 { --w: 140; top: 26%; animation-duration: 110s, 11s; animation-delay: -60s, -3s; opacity: 0.75; }
living-scene .c3 { --w: 260; top: 7%;  animation-duration: 140s, 13s; animation-delay: -95s, -6s; opacity: 0.55; }
living-scene .c4 { --w: 120; top: 34%; animation-duration: 95s, 10s; animation-delay: -30s, -2s; opacity: 0.6; transform: scale(0.8); }
living-scene .c5 { --w: 180; top: 19%; animation-duration: 160s, 12s; animation-delay: -130s, -8s; opacity: 0.45; }
@keyframes ls-float { from { translate: -320px 0; } to { translate: 110vw 0; } }
@keyframes ls-bob { 50% { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) {
  living-scene { --fade: 0s; }
  living-scene .shoot, living-scene .sun { animation: none !important; }
}
/* ---------- v15: weather over the sky (hero[data-weather], set by site.js) ---------- */
living-scene .weather { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
living-scene[data-weather] .weather { opacity: 1; }
living-scene .weather::before { content: ""; position: absolute; inset: 0; background: rgba(30, 40, 55, 0.28); }
/* overcast */
living-scene .weather i { position: absolute; top: -12%; }
/* Overcast: grey clouds, hazy sun/moon, no stars */
living-scene[data-weather] { --cloud: rgba(205, 212, 222, 0.38); }
living-scene[data-weather][data-phase="night"] { --cloud: rgba(130, 140, 170, 0.16); }
living-scene[data-weather] .sun, living-scene[data-weather] .moon { animation: none; filter: blur(8px) brightness(0.8); }
living-scene[data-weather] .stars, living-scene[data-weather] .shoot { opacity: 0; animation: none; }
/* Rain: slanted streaks */
living-scene[data-weather="rain"] .weather i {
  width: 1.5px; height: 64px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.5));
  transform: rotate(calc(-12deg * var(--wdir, 1) * var(--rainx, 1))); animation: ls-rain linear infinite;
}
@keyframes ls-rain { to { transform: translate(calc(70px * var(--wdir, 1) * var(--rainx, 1)), 120vh) rotate(calc(-12deg * var(--wdir, 1) * var(--rainx, 1))); } }
/* Snow: soft flakes drifting side to side */
living-scene[data-weather="snow"] .weather i {
  width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 255, 255, 0.85);
  filter: blur(0.6px); animation: ls-snow linear infinite;
}
@keyframes ls-snow {
  50% { transform: translate(var(--x), 58vh); }
  to { transform: translate(calc(var(--x) * -1), 118vh); }
}
@media (prefers-reduced-motion: reduce) {
  living-scene .weather i { display: none; }
}
/* Snow as six-armed crystals (mask, so they stay white and crisp), slowly spinning */
living-scene[data-weather="snow"] .weather i {
  border-radius: 0; filter: none; background: rgba(255, 255, 255, 0.9);
  -webkit-mask: var(--flake) center / contain no-repeat; mask: var(--flake) center / contain no-repeat;
  --flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3Cpath transform='rotate(60)' d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3Cpath transform='rotate(120)' d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3C/svg%3E");
}
@keyframes ls-snow {
  50% { transform: translate(var(--x), 58vh) rotate(calc(var(--r) * 0.5)); }
  to { transform: translate(calc(var(--x) * -1), 118vh) rotate(var(--r)); }
}
/* v18: gentler rain, smaller snow, heavy clouds, visible lightning */
living-scene[data-weather="rain"] .weather i { width: 1px; height: 26px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.45)); }
living-scene[data-weather="rain"] .weather::before {
  background: linear-gradient(180deg, rgba(25, 32, 45, 0.55) 0%, rgba(25, 32, 45, 0.3) 45%, rgba(25, 32, 45, 0.15) 100%);
}
living-scene[data-weather] { --heavy: rgba(150, 160, 175, 0.55); }
living-scene[data-weather][data-phase="night"] { --heavy: rgba(55, 65, 90, 0.7); }
living-scene .cloud.heavy { height: 46px; background: var(--heavy); filter: blur(6px); transform: scale(var(--k)); transform-origin: left top; }
/* ---------- v22: real moon phase (lit part only, no dark disk) ---------- */
living-scene .moon { box-shadow: none; filter: drop-shadow(0 0 14px rgba(220, 230, 255, 0.55)); }
/* ---------- Ramadan / Eid decorations (hero[data-fest], set by site.js) ---------- */
living-scene .fest { position: absolute; inset: 0; }
living-scene .garland { position: absolute; top: 68px; left: 0; width: 100%; height: 60px; overflow: visible; filter: drop-shadow(0 2px 6px rgba(255, 200, 90, 0.35)); }
living-scene .lantern { position: absolute; top: 68px; width: 34px; margin-left: -17px; padding-top: var(--len); transform-origin: 50% 0; animation: ls-sway 4.5s ease-in-out infinite alternate; }
living-scene .lantern::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--len); background: rgba(233, 185, 73, 0.75); }
living-scene .lantern svg { display: block; width: 34px; height: 54px; filter: drop-shadow(0 0 10px rgba(255, 210, 110, 0.75)) drop-shadow(0 0 26px rgba(255, 170, 60, 0.35)); }
living-scene .lantern .glow, living-scene .lantern use { animation: ls-candle 2.4s ease-in-out infinite; }
@keyframes ls-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes ls-candle { 0%, 100% { opacity: 1; } 45% { opacity: 0.86; } 60% { opacity: 0.97; } }
living-scene .sparkle { position: absolute; width: 12px; height: 12px; background: #ffe3a0; animation: ls-sparkle 3s ease-in-out infinite;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes ls-sparkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (max-width: 760px) {
  living-scene .lantern:nth-of-type(2), living-scene .lantern:nth-of-type(3) { display: none; }
  living-scene .lantern { transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  living-scene .lantern, living-scene .lantern use, living-scene .sparkle { animation: none; }
  living-scene .sparkle { opacity: 0.8; }
}
/* .scene svg stretches every svg to the hero; decorations keep their own boxes */
living-scene .fest .garland { top: 68px; height: 60px; }
living-scene .fest .lantern svg { position: static; width: 34px; height: 54px; }
/* Lanterns hang on a small chain of oval links instead of a plain line */
living-scene .lantern::before {
  width: 5px; margin-left: -2.5px; background: radial-gradient(ellipse 1.6px 3px at 50% 50%, transparent 50%, #e9b949 58%, #e9b949 92%, transparent 100%) 50% 0 / 5px 6px repeat-y;
  filter: drop-shadow(0 0 2px rgba(255, 210, 110, 0.5));
}
/* Realistic moon: limb-darkened disk, maria (the dark "seas"), a few craters incl.
   bright Tycho, fine surface grain; masked to the phase by site.js (--phase). */
living-scene .moon { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(225, 232, 255, 0.4)); }
living-scene .moon-disk {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--shade, none),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .38 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 46% 80%, #fffdf2 0 3%, rgba(255, 253, 242, 0.5) 4%, transparent 9%),
    radial-gradient(circle at 70% 62%, rgba(110, 108, 98, 0.5) 0 2.5%, transparent 4%),
    radial-gradient(circle at 26% 70%, rgba(110, 108, 98, 0.45) 0 2%, transparent 3.5%),
    radial-gradient(circle at 58% 18%, rgba(110, 108, 98, 0.4) 0 2%, transparent 3.5%),
    radial-gradient(ellipse 20% 16% at 36% 30%, rgba(120, 118, 106, 0.6), transparent 70%),
    radial-gradient(ellipse 14% 12% at 60% 32%, rgba(120, 118, 106, 0.55), transparent 70%),
    radial-gradient(ellipse 16% 14% at 66% 50%, rgba(120, 118, 106, 0.5), transparent 70%),
    radial-gradient(ellipse 22% 30% at 22% 48%, rgba(125, 123, 110, 0.5), transparent 70%),
    radial-gradient(ellipse 14% 10% at 44% 62%, rgba(125, 123, 110, 0.4), transparent 70%),
    radial-gradient(ellipse 10% 9% at 78% 40%, rgba(120, 118, 106, 0.45), transparent 70%),
    radial-gradient(circle at 42% 38%, #fbf8ec 0%, #ece7d4 50%, #cbc5ae 85%, #a9a38d 100%);
  -webkit-mask: var(--phase) center / 100% 100% no-repeat; mask: var(--phase) center / 100% 100% no-repeat;
}
/* Festive days: moon sits below the garland */
living-scene[data-fest][data-phase="night"] .moon { left: 60%; top: 17%; }
/* Tilted crescent: lit side toward the lower right, horns tipping up */
living-scene .moon-disk { transform: rotate(30deg); }
/* Storm lightning (site.js draws a new bolt each strike; behind the mountains) */
living-scene .scene svg.lightning { top: 0; opacity: 0; }
living-scene .lightning path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
living-scene .lightning .core { stroke: #fff; stroke-width: 2.2; }
living-scene .lightning .core.thin { stroke-width: 1.1; opacity: 0.8; }
living-scene .lightning .halo { stroke: rgba(170, 195, 255, 0.9); stroke-width: 9; }
living-scene .lightning .halo.thin { stroke-width: 4; opacity: 0.6; }
living-scene .sky-glow { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(55% 60% at var(--x, 50%) 25%, rgba(205, 218, 255, 0.6), rgba(205, 218, 255, 0.2) 45%, transparent 75%); }
/* Overcast darkening lives in the sky layer (behind sun, lightning and mountains),
   so a strike shines at full brightness instead of through the grey veil */
living-scene .weather::before, living-scene[data-weather="rain"] .weather::before { display: none; }
living-scene[data-weather] .sky::after { content: ""; position: absolute; inset: 0; background: rgba(30, 40, 55, 0.28); }
living-scene[data-weather="rain"] .sky::after { background: linear-gradient(180deg, rgba(25, 32, 45, 0.6) 0%, rgba(25, 32, 45, 0.32) 45%, rgba(25, 32, 45, 0.15) 100%); }
/* ---------- Halloween ---------- */
living-scene[data-fest="halloween"] .sky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 0%, rgba(110, 40, 150, 0.32), transparent 70%); }
living-scene[data-fest="halloween"] .moon-disk { filter: sepia(0.7) saturate(2.4) hue-rotate(-12deg) brightness(1.05); }
living-scene .lantern.spider { width: 30px; margin-left: -15px; }
living-scene .lantern.spider::before { width: 1px; margin-left: -0.5px; height: calc(var(--len) + 16px); background: rgba(235, 235, 245, 0.55); filter: none; }
living-scene .lantern.spider svg { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(190, 120, 255, 0.55)); animation: ls-dangle 3.2s ease-in-out infinite alternate; }
@keyframes ls-dangle { from { transform: translateY(0); } to { transform: translateY(16px); } }
living-scene .bat { position: absolute; left: 0; width: 46px; animation: ls-batFly linear infinite; }
living-scene .bat svg { display: block; width: 46px; height: 17px; animation: flap 0.22s ease-in-out infinite alternate; transform-origin: 50% 40%; filter: drop-shadow(0 0 4px rgba(255, 140, 60, 0.25)); }
@keyframes ls-batFly {
  0% { transform: translate(-80px, 0) scale(0.8); }
  25% { transform: translate(25vw, -26px) scale(0.95); }
  50% { transform: translate(52vw, 14px) scale(0.75); }
  75% { transform: translate(78vw, -18px) scale(0.9); }
  100% { transform: translate(calc(100vw + 80px), 6px) scale(0.8); }
}
living-scene .pumpkin { position: absolute; bottom: 2.5%; z-index: 2; animation: ls-pumpkinGlow 2.6s ease-in-out infinite; }
living-scene .pumpkin svg { display: block; width: 100%; height: auto; }
@keyframes ls-pumpkinGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.75)) drop-shadow(0 0 26px rgba(255, 120, 30, 0.4)); }
  45% { filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.55)) drop-shadow(0 0 16px rgba(255, 120, 30, 0.25)); }
}
living-scene .fest .cobweb { position: absolute; top: 68px; left: 0; width: 130px; height: 130px; opacity: 0.8; }
living-scene .lantern.bauble { width: 30px; margin-left: -15px; }
living-scene .lantern.bauble::before { width: 2px; margin-left: -1px; background: #c8102e; filter: none; }
living-scene .lantern.bauble svg { width: 30px; height: 36px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 10px rgba(255, 230, 170, 0.35)); }
living-scene .garland .bulb { animation: ls-bulb 1.4s ease-in-out infinite alternate; }
@keyframes ls-bulb { from { opacity: 0.35; filter: none; } to { opacity: 1; filter: drop-shadow(0 0 5px currentColor) brightness(1.25); } }
living-scene .fest i.flake { position: absolute; top: -8%; width: var(--s); height: var(--s); background: rgba(255, 255, 255, 0.9); animation: ls-snow linear infinite;
  -webkit-mask: var(--flake) center / contain no-repeat; mask: var(--flake) center / contain no-repeat;
  --flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3Cpath transform='rotate(60)' d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3Cpath transform='rotate(120)' d='M0-11V11M0-7l-3-3M0-7l3-3M0 7l-3 3M0 7l3 3'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  living-scene .fest .cobweb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  living-scene .bat, living-scene .bat svg, living-scene .pumpkin, living-scene .lantern.spider svg, living-scene .garland .bulb, living-scene .fest i.flake { animation: none; }
  living-scene .bat, living-scene .fest i.flake { display: none; }
}
/* .scene svg stretches every svg; festive pieces keep their own size */
living-scene .fest .pumpkin svg, living-scene .fest .bat svg { position: static; }
living-scene .fest .pumpkin svg { height: auto; }
living-scene .bat { width: 58px; }
living-scene .fest .bat svg { width: 58px; height: 21px; filter: drop-shadow(0 0 5px rgba(255, 150, 70, 0.7)) drop-shadow(0 0 1px rgba(255, 200, 150, 0.9)); }
living-scene .lantern.spider { width: 40px; margin-left: -20px; }
living-scene .fest .lantern.spider svg { width: 40px; height: 40px; filter: drop-shadow(0 0 6px rgba(200, 140, 255, 0.8)) drop-shadow(0 0 1px rgba(230, 210, 255, 0.9)); }
living-scene .pumpkin { bottom: 4%; }
/* Bats v2: driven by site.js (position/facing), wings flap separately with a body bob */
living-scene .bat { top: 0; left: 0; width: 64px; animation: none; will-change: transform; }
living-scene .fest .bat svg { display: block; width: 64px; height: 30px; animation: ls-batBob var(--beat) ease-in-out infinite alternate;
  fill: #120c18; filter: drop-shadow(0 0 4px rgba(255, 150, 70, 0.65)) drop-shadow(0 0 1px rgba(255, 210, 160, 0.9)); }
living-scene .bat .wing { transform-box: fill-box; transform-origin: 100% 0%; animation: ls-wingBeat var(--beat) ease-in-out infinite alternate; }
@keyframes ls-wingBeat { from { transform: rotate(34deg) scaleY(0.75); } to { transform: rotate(-28deg) scaleY(1.05); } }
@keyframes ls-batBob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
/* Pumpkins: bigger, sitting on the slope above the bottom edge */
living-scene .pumpkin { bottom: 7%; }
/* Two small bats */
living-scene .bat { width: 36px; }
living-scene .fest .bat svg { width: 36px; height: 17px; }
/* Christmas snowman on the slope, bottom-left; sways gently on his base */
living-scene .snowman { position: absolute; left: 3%; bottom: 6%; width: 74px; z-index: 2; transform-origin: 50% 100%; animation: ls-snowmanSway 5s ease-in-out infinite alternate; }
living-scene .fest .snowman svg { position: static; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(220, 235, 255, 0.45)); }
@keyframes ls-snowmanSway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@media (max-width: 760px) {
  living-scene .snowman { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  living-scene .snowman { animation: none; }
}
/* ---------- Christmas: a snowy landscape ---------- */
living-scene .fest svg.snowfloor { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 13%; z-index: 1; filter: drop-shadow(0 -2px 8px rgba(200, 220, 255, 0.25)); }
living-scene .fest svg.prints { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
living-scene .snowman { bottom: 4.5%; width: 82px; }
living-scene[data-fest="christmas"] .ridges .trees path:not(.tsnow) { fill: #173a2f; }
living-scene[data-fest="christmas"][data-phase="night"] .ridges .trees path:not(.tsnow) { fill: #10291f; }
/* Bigger, more lifelike snowman */
living-scene .snowman { width: 130px; bottom: 2.5%; animation: none; }
living-scene .fest .snowman svg { filter: drop-shadow(0 0 14px rgba(220, 235, 255, 0.35)); }
@media (max-width: 760px) {
  living-scene .snowman { width: 84px; }
}
/* Snow scenes: clear sky (no clouds) and no glow halo around the snowman */
living-scene[data-fest="christmas"] .cloud, living-scene[data-weather="snow"] .cloud { display: none; }
living-scene .fest .snowman svg { filter: none; }
/* ---------- Realistic clouds ----------
   Each cloud is a cumulus shape (soft lobes roughed up by fractal noise, drawn
   once as an SVG mask), filled with the phase/weather colour (--cloud) and
   shaded lighter on top, darker underneath. Three shapes so they don't repeat. */
living-scene .scene { --cloud-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20180%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-20%25%27%20y%3D%27-40%25%27%20width%3D%27140%25%27%20height%3D%27180%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%27%20numOctaves%3D%274%27%20seed%3D%273%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2760%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%276%27%2F%3E%3C%2Ffilter%3E%3Cg%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%3E%3Cellipse%20cx%3D%27200%27%20cy%3D%27122%27%20rx%3D%27155%27%20ry%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27104%27%20r%3D%2744%27%2F%3E%3Ccircle%20cx%3D%27210%27%20cy%3D%2786%27%20r%3D%2760%27%2F%3E%3Ccircle%20cx%3D%27282%27%20cy%3D%27108%27%20r%3D%2736%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --cloud-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20180%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-20%25%27%20y%3D%27-40%25%27%20width%3D%27140%25%27%20height%3D%27180%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%27%20numOctaves%3D%274%27%20seed%3D%2711%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2760%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%276%27%2F%3E%3C%2Ffilter%3E%3Cg%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%3E%3Cellipse%20cx%3D%27200%27%20cy%3D%27124%27%20rx%3D%27165%27%20ry%3D%2730%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27110%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27180%27%20cy%3D%2792%27%20r%3D%2748%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2796%27%20r%3D%2752%27%2F%3E%3Ccircle%20cx%3D%27310%27%20cy%3D%27114%27%20r%3D%2728%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --cloud-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20180%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-20%25%27%20y%3D%27-40%25%27%20width%3D%27140%25%27%20height%3D%27180%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%27%20numOctaves%3D%274%27%20seed%3D%2727%27%2F%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2760%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%276%27%2F%3E%3C%2Ffilter%3E%3Cg%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%3E%3Cellipse%20cx%3D%27200%27%20cy%3D%27120%27%20rx%3D%27140%27%20ry%3D%2736%27%2F%3E%3Ccircle%20cx%3D%27165%27%20cy%3D%2796%27%20r%3D%2754%27%2F%3E%3Ccircle%20cx%3D%27245%27%20cy%3D%27100%27%20r%3D%2744%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
living-scene .cloud {
  height: auto; aspect-ratio: 400 / 180; width: calc(var(--w) * 1.6px); border-radius: 0; filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(20, 30, 45, 0.18) 100%), var(--cloud);
  -webkit-mask: var(--cloud-a) center / 100% 100% no-repeat; mask: var(--cloud-a) center / 100% 100% no-repeat;
}
living-scene .cloud::before, living-scene .cloud::after { display: none; }
living-scene .c2, living-scene .c5 { -webkit-mask-image: var(--cloud-b); mask-image: var(--cloud-b); }
living-scene .c3 { -webkit-mask-image: var(--cloud-c); mask-image: var(--cloud-c); }
living-scene .cloud.heavy { height: auto; filter: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(10, 15, 25, 0.25)), var(--heavy); }
living-scene .cloud.heavy:nth-of-type(3n) { -webkit-mask-image: var(--cloud-b); mask-image: var(--cloud-b); }
living-scene .cloud.heavy:nth-of-type(3n + 1) { -webkit-mask-image: var(--cloud-c); mask-image: var(--cloud-c); }
/* Clouds follow the real sky (site.js sets hero[data-sky] from the weather):
   hidden until it's known, none when clear, two when mainly clear, all when
   partly cloudy, greyer and denser when overcast. */
living-scene .cloud { transition: opacity 2s ease; }
living-scene:not([data-sky]) .cloud, living-scene[data-sky="clear"] .cloud { opacity: 0 !important; }
living-scene[data-sky="few"] .cloud:is(.c2, .c4, .c5) { opacity: 0 !important; }
living-scene[data-sky="overcast"]:not([data-weather]) { --cloud: rgba(205, 212, 222, 0.34); --heavy: rgba(160, 170, 185, 0.38); }
living-scene[data-sky="overcast"][data-phase="night"]:not([data-weather]) { --cloud: rgba(120, 132, 160, 0.2); --heavy: rgba(55, 65, 90, 0.6); }
living-scene[data-sky="overcast"] .weather { opacity: 1; }
/* ---------- Nature (hero[data-wind|fog|heat|rainbow|fireflies|meteors|camp], set by site.js) ---------- */
living-scene .fx { position: absolute; inset: 0; }
/* Fog banks drifting between the ridges */
living-scene .fog-bank { position: absolute; left: -30%; width: 160%; height: 90px; border-radius: 50%; background: var(--fog, rgba(235, 240, 245, 0.32)); filter: blur(22px); animation: ls-fogDrift 60s ease-in-out infinite alternate; }
living-scene[data-phase="night"] { --fog: rgba(140, 155, 190, 0.22); }
@keyframes ls-fogDrift { to { translate: 12% 0; } }
/* Heat shimmer above the hills */
living-scene:not([data-phase="day"]) .ridges { filter: none !important; }
/* the shimmer (inline, set by site.js) only by day */
/* Fireflies on warm nights */
living-scene .firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e8ff8a; box-shadow: 0 0 8px 3px rgba(210, 255, 110, 0.55); opacity: 0;
  animation: ls-wander ease-in-out infinite alternate, ls-blink ease-in-out infinite; }
living-scene:not([data-phase="night"]) .firefly { display: none; }
@keyframes ls-wander { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes ls-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
living-scene .fx > svg[width="0"] { width: 0; height: 0; }
/* ---------- Mountains and forest ----------
   Four fractal ridgelines (far to near) lit from above, with haze between them
   (atmospheric perspective); pines in two rows; snow on the high peaks in winter. */
living-scene .ridges { --lit: color-mix(in srgb, var(--r1), #fff 14%); }
living-scene .ridges .m0 { opacity: 1; } /* solid: the sun sets behind it, not through it */
living-scene .ridges .m1 { opacity: 1; }
living-scene .ridges .m3 { fill: var(--r3); }
living-scene .ridges .lit0 { stop-color: color-mix(in srgb, var(--lit), var(--sky-haze) 45%); }
living-scene .ridges .base0 { stop-color: color-mix(in srgb, color-mix(in srgb, var(--r1), var(--r2) 30%), var(--sky-haze) 40%); }
living-scene .ridges .lit1 { stop-color: color-mix(in srgb, color-mix(in srgb, var(--r1), #fff 6%), var(--sky-haze) 15%); }
living-scene .ridges .base1 { stop-color: var(--r2); }
living-scene .ridges .lit2 { stop-color: color-mix(in srgb, var(--r2), var(--r1) 40%); }
living-scene .ridges .base2 { stop-color: var(--r3); }
living-scene .ridges .hz { stop-color: var(--r1); }
living-scene .ridges .mist { opacity: 0.6; }
living-scene .ridges .trees.far path { fill: color-mix(in srgb, var(--tree), var(--r1) 55%); }
living-scene .ridges .trees.back path { fill: color-mix(in srgb, var(--tree), var(--r2) 45%); }
/* Seasons (hero[data-season], from the date and hemisphere) */
living-scene { --leaf: #6a8f3c; }
/* summer */
living-scene[data-season="spring"] { --leaf: #8fc66a; }
living-scene[data-season="autumn"] { --leaf: #d9772b; }
living-scene[data-season="winter"] { --leaf: #c9d6e2; }
living-scene:is([data-snowcover], [data-fest="christmas"]) .ridges .trees path:not(.tsnow) { fill: color-mix(in srgb, var(--tree), #dfe8f2 18%); }
living-scene[data-season="summer"] .ridges .m3 { fill: color-mix(in srgb, var(--r3), #8a6a2a 14%); }
/* dry summer grass */
living-scene[data-phase="night"] .leaf { background: color-mix(in srgb, var(--leaf), #0a1430 60%); }
/* ---------- A more real sun: white-hot core, warm limb, layered bloom ---------- */
living-scene .sun { background: radial-gradient(circle, #fffef6 0 42%, #fff4cf 58%, #ffe08f 76%, #ffc962 100%);
  box-shadow: 0 0 18px 6px rgba(255, 252, 230, 0.9), 0 0 70px 28px rgba(255, 226, 150, 0.45), 0 0 220px 110px rgba(255, 196, 110, 0.18); }
living-scene[data-phase="day"] .sun { background: radial-gradient(circle, #ffffff 0 48%, #fffbe8 64%, #fff0bf 82%, #ffe6a0 100%);
  box-shadow: 0 0 22px 8px rgba(255, 255, 245, 0.95), 0 0 90px 36px rgba(255, 246, 210, 0.45), 0 0 260px 130px rgba(255, 255, 255, 0.14); }
/* Low sun: deeper colour and slightly squashed by the thick air near the horizon */
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .sun { scale: 1 0.93; background: radial-gradient(circle, #fff7e0 0 55%, #ffe1a6 72%, #ffc77f 88%, #ffb874 100%);
  box-shadow: 0 0 14px 5px rgba(255, 186, 116, 0.95), 0 0 70px 30px rgba(255, 150, 70, 0.55), 0 0 230px 115px rgba(255, 110, 60, 0.28); }
/* ---------- v2: realism pass ---------- */
/* Wind: trees bend from the base (tops move most) in irregular gusts; a few
   leaves tumble along curved paths; faint streaks in strong wind */
living-scene[data-wind] .trees.none-old > g {
  transform-box: fill-box; transform-origin: 50% 100%; animation: ls-gust var(--gust-t, 6s) ease-in-out infinite; }
living-scene[data-wind] .trees > :nth-child(4n) { animation-delay: -1.3s; }
living-scene[data-wind] .trees > :nth-child(4n + 1) { animation-delay: -2.9s; animation-duration: calc(var(--gust-t, 6s) * 1.17); }
living-scene[data-wind] .trees > :nth-child(4n + 2) { animation-delay: -4.1s; animation-duration: calc(var(--gust-t, 6s) * 0.9); }
living-scene[data-wind="breeze"] { --bend: calc(2.5deg * var(--wdir, 1)); }
living-scene[data-wind="strong"] { --bend: calc(6deg * var(--wdir, 1)); --gust-t: 4s; }
@keyframes ls-gust {
  0%, 100% { transform: skewX(calc(var(--bend) * 0.2)); }
  18% { transform: skewX(calc(var(--bend) * 0.9)); }
  27% { transform: skewX(calc(var(--bend) * 0.45)); }
  46% { transform: skewX(var(--bend)); }
  58% { transform: skewX(calc(var(--bend) * 0.35)); }
  74% { transform: skewX(calc(var(--bend) * 0.7)); }
}
living-scene .leaf { position: absolute; left: -2%; width: 6px; height: 3.5px; border-radius: 70% 0; background: var(--leaf, #9a7b3c); opacity: 0; animation: ls-blow linear infinite; }
@keyframes ls-blow {
  0% { opacity: 0; transform: translate(0, 0) rotate3d(1, 0.4, 0, 0deg); }
  6% { opacity: 0.85; }
  25% { transform: translate(26vw, calc(var(--dy) * 0.2 - 22px)) rotate3d(1, 0.4, 0.2, calc(var(--r) * 0.25)); }
  50% { transform: translate(52vw, calc(var(--dy) * 0.5 + 14px)) rotate3d(0.3, 1, 0.2, calc(var(--r) * 0.5)); }
  75% { transform: translate(78vw, calc(var(--dy) * 0.8 - 12px)) rotate3d(1, 0.2, 0.4, calc(var(--r) * 0.75)); }
  94% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(104vw, var(--dy)) rotate3d(1, 0.4, 0, var(--r)); }
}
living-scene .streak { position: absolute; left: 0; height: 1px; width: 140px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: ls-streak ease-in infinite; }
living-scene[data-phase="night"] .streak { background: linear-gradient(90deg, transparent, rgba(180, 195, 230, 0.2), transparent); }
@keyframes ls-streak { 0% { opacity: 0; transform: translateX(-10vw); } 10% { opacity: 1; } 30% { opacity: 0; transform: translateX(60vw); } 100% { opacity: 0; transform: translateX(60vw); } }
/* Rainbow: one faint, see-through bow (red outside), fading toward the ground and one leg */
living-scene .rainbow { position: absolute; left: 50%; bottom: 0; width: 96vw; aspect-ratio: 2; translate: -50% 12%; opacity: 0; transition: opacity 4s; mix-blend-mode: screen; filter: blur(2.5px);
  background:
    radial-gradient(ellipse farthest-side at 50% 100%, transparent 70.5%, rgba(140, 80, 210, 0.5) 71.5%, rgba(70, 110, 255, 0.5) 73%, rgba(60, 190, 110, 0.5) 74.5%, rgba(255, 230, 70, 0.5) 76%, rgba(255, 150, 50, 0.5) 77.5%, rgba(240, 60, 50, 0.5) 79%, transparent 80.5%);
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.2), #000 28%, #000 62%, rgba(0, 0, 0, 0.55)), linear-gradient(#000 40%, transparent 92%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, rgba(0, 0, 0, 0.2), #000 28%, #000 62%, rgba(0, 0, 0, 0.55)), linear-gradient(#000 40%, transparent 92%); mask-composite: intersect; }
living-scene[data-rainbow]:is([data-phase="day"], [data-phase="sunrise"], [data-phase="sunset"]) .rainbow { opacity: 0.38; }
/* Campfire and tent, at night and dusk (not in rain/snow) */
living-scene .camp { position: absolute; left: 51.5%; bottom: 2.2%; display: flex; align-items: flex-end; gap: 4px; opacity: 0; transition: opacity var(--fade); }
living-scene[data-camp]:is([data-phase="night"], [data-phase="sunset"]) .camp { opacity: 1; }
living-scene .scene .camp svg { position: static; }
living-scene .camp .tent { width: 58px; height: 35px; }
living-scene .tent .front { fill: color-mix(in srgb, var(--tree), #000 25%); }
living-scene .tent .side { fill: color-mix(in srgb, var(--tree), #ff8a3d 13%); }
living-scene .tent .door { fill: #ffb067; opacity: 0.35; }
living-scene .tent .rope { stroke: color-mix(in srgb, var(--tree), #fff 15%); stroke-width: 0.5; fill: none; }
living-scene .fire { position: relative; width: 30px; height: 36px; }
living-scene .camp .fire svg { width: 30px; height: 36px; overflow: visible; }
living-scene .fire .log { stroke: #24160d; stroke-width: 3.2; stroke-linecap: round; }
living-scene .fire .ember { fill: #ff6a1f; filter: blur(0.6px); animation: ls-ember 1.7s ease-in-out infinite alternate; }
@keyframes ls-ember { to { opacity: 0.45; } }
living-scene .fire .f { transform-box: fill-box; transform-origin: 50% 100%; filter: blur(0.5px); mix-blend-mode: screen; }
living-scene .fire .f1 { animation: ls-lick1 0.7s ease-in-out infinite alternate; }
living-scene .fire .f2 { animation: ls-lick2 0.53s ease-in-out infinite alternate; }
living-scene .fire .f3 { animation: ls-lick1 0.41s ease-in-out infinite alternate-reverse; }
@keyframes ls-lick1 { 0% { transform: scale(1, 1) skewX(-4deg); } 40% { transform: scale(0.9, 1.14) skewX(3deg); } 100% { transform: scale(1.06, 0.9) skewX(-1deg); } }
@keyframes ls-lick2 { 0% { transform: scale(0.95, 1.08) skewX(5deg); } 60% { transform: scale(1.05, 0.92) skewX(-3deg); } 100% { transform: scale(0.92, 1.18) skewX(2deg); } }
living-scene .fire .glow { position: absolute; left: 50%; bottom: -6px; width: 170px; height: 70px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 140, 60, 0.4), rgba(255, 110, 40, 0.12) 60%, transparent); animation: ls-glow 0.9s ease-in-out infinite alternate; }
@keyframes ls-glow { 0% { opacity: 1; } 35% { opacity: 0.8; } 100% { opacity: 0.92; scale: 0.95; } }
living-scene .fire b { position: absolute; bottom: 20px; width: 1.5px; height: 1.5px; border-radius: 50%; background: #ffd08a; box-shadow: 0 0 3px #ff8a2a; animation: ls-spark 2s ease-out infinite; }
@keyframes ls-spark { from { transform: none; opacity: 1; } to { transform: translate(var(--x), -55px); opacity: 0; } }
/* Birds: silhouettes that change shape through the wingbeat (site.js) */
living-scene .fx .flock { position: absolute; left: 0; width: 200px; height: 80px; }
living-scene .scene .fx .bird { position: absolute; width: 32px; height: 34px; overflow: visible; }
living-scene .bird path { fill: var(--bird, #0b2e35); opacity: 0.82; }
living-scene[data-phase="sunset"] { --bird: #1d1830; }
living-scene[data-phase="sunrise"] { --bird: #1f3a36; }
@media (prefers-reduced-motion: reduce) {
  living-scene .trees > *, living-scene .fire .f, living-scene .fire .glow, living-scene .fire .ember { animation: none !important; }
}
/* Snow caps on the high peaks: in winter, while it snows, and at Christmas. Tinted
   by the light (bluish at night, warm at sunrise/sunset) and shaded on one side. */
living-scene .ridges .snowcap { fill: color-mix(in srgb, #f4f7fb, var(--r1) var(--snow-shade, 18%)); opacity: 0; transition: opacity 3s, fill var(--fade); }
living-scene .ridges .snowcap.s0 { --snow-shade: 28%; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .ridges .snowcap { opacity: 0.92; }
living-scene[data-phase="night"] .ridges .snowcap { --snow-shade: 55%; }
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .ridges .snowcap { fill: color-mix(in srgb, #ffe2cc, var(--r1) 22%); }
/* Snow on the pine tiers: winter, snowfall, Christmas */
living-scene .ridges .trees path.tsnow { fill: color-mix(in srgb, #f4f7fb, var(--r1) var(--snow-shade, 24%)); opacity: 0; transition: opacity 3s; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .ridges .trees path.tsnow { opacity: 0.9; }
living-scene[data-phase="night"] .ridges .trees path.tsnow { --snow-shade: 55%; }
/* Night: each treeline its own tone so they read apart in the dark: the near
   line a dark blue, the middle a blue-grey, the far line moonlit grey */
living-scene[data-phase="night"] .ridges .trees.front path:not(.tsnow) { fill: #0a1326; }
living-scene[data-phase="night"] .ridges .trees.back path:not(.tsnow) { fill: #1c2740; }
living-scene[data-phase="night"] .ridges .trees.far path:not(.tsnow) { fill: #3a4557; }
/* The camp stands on a small clearing of ground, lit warm around the fire */
living-scene .camp { bottom: 0; padding: 0 30px 9px; }
living-scene .scene .camp .clearing { position: absolute; left: -10px; right: -40px; bottom: 0; width: auto; height: 34px; z-index: -1; }
living-scene .camp .clearing path { fill: color-mix(in srgb, var(--tree), #000 15%); }
living-scene[data-phase="night"] .camp .clearing path { fill: #08101f; }
living-scene .camp .clearing .lit { fill: rgba(255, 140, 60, 0.28); filter: blur(6px); }
living-scene .camp { isolation: isolate; }
/* Ground fog over the treelines: thick at the bottom, fading out upward */
living-scene .ridges .fg { stop-color: #e9eef2; }
living-scene[data-phase="night"] .ridges .fg { stop-color: #6f7c99; }
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .ridges .fg { stop-color: #f2d7c4; }
living-scene .ridges .ground-fog { pointer-events: none; }
/* Snow on the ground and on the camp's clearing (winter, snowfall, Christmas) */
living-scene .ridges .trees path.tsnow.floor { --snow-shade: 12%; }
living-scene[data-phase="night"] .ridges .trees path.tsnow.floor { --snow-shade: 50%; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .camp .clearing path { fill: color-mix(in srgb, #f4f7fb, var(--r1) 18%); }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"])[data-phase="night"] .camp .clearing path { fill: color-mix(in srgb, #f4f7fb, var(--r1) 50%); }
/* The sun follows its daily arc (--sx/--sy, set from the clock in index.html) */
living-scene:not([data-phase="night"]) .sun { left: var(--sx, 48%); top: var(--sy, 9%); }
/* The moon crosses the night sky the same way (--mx/--my) */
living-scene[data-phase="night"] .moon { left: var(--mx, 46%); top: var(--my, 11%); }
/* Falling snow settles bit by bit: the peaks first, then the trees a few at a
   time, then the ground (lying winter snow without snowfall just shows) */
living-scene[data-weather="snow"] .ridges .snowcap { transition: opacity 20s ease-in 2s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow { transition: opacity 7s ease-in; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k0 { transition-delay: 8s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k1 { transition-delay: 13s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k2 { transition-delay: 18s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k3 { transition-delay: 23s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k4 { transition-delay: 28s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.k5 { transition-delay: 33s; }
living-scene[data-weather="snow"] .ridges .trees path.tsnow.floor { transition: opacity 18s ease-in 14s; }
living-scene[data-weather="snow"] .camp .clearing path { transition: fill 18s ease-in 14s; }
/* Wind: each stretch of a treeline bends from its base, one after another (--i),
   so a gust rolls along the forest; near trees bend most, distant ones a little */
living-scene[data-wind] .ridges .trees .sway { transform-box: fill-box; transform-origin: 50% 100%;
  animation: ls-gust var(--gust-t, 6s) ease-in-out infinite; animation-delay: calc(var(--i) * -0.32s); }
living-scene[data-wind] .ridges .trees.back { --bend-k: 0.6; }
living-scene[data-wind] .ridges .trees.far { --bend-k: 0.35; }
living-scene[data-wind] .ridges .trees .sway { --bend: calc(var(--bend-base, 2.5deg) * var(--bend-k, 1) * var(--wdir, 1)); }
living-scene[data-wind="strong"] .ridges .trees .sway { --bend-base: 6deg; }
@media (prefers-reduced-motion: reduce) {
  living-scene .ridges .trees .sway { animation: none; }
}
/* ---------- Foreground hill (هضبة): big tree + owl, snowman, wild plants (site.js) ---------- */
living-scene { --hillc: #18707e; --canopy: #3f6b58; --bark: #3b2a1d; }
/* hill in the app teal, tinted by season */
living-scene[data-season="spring"] { --hillc: #1a7a78; --canopy: #4f7d62; }
living-scene[data-season="summer"] { --hillc: #2b7470; --canopy: #44695a; }
living-scene[data-season="autumn"] { --hillc: #3d6b66; --canopy: #a8643a; }
living-scene[data-season="winter"] { --hillc: #4f7a80; }
living-scene .land { position: absolute; inset: 0; }
living-scene .scene .land .hill { top: auto; bottom: 0; height: 110px; }
/* Three slopes, far to near: far one lighter and hazier, near one deepest green-teal */
living-scene .land .hill stop { transition: stop-color var(--fade); }
/* The foreground is the darkest layer (atmospheric perspective): deep silhouettes in
   the scene's own colours, each slope a step darker toward the viewer */
living-scene .land .ht0 { stop-color: color-mix(in srgb, var(--tree), var(--hillc) 34%); }
living-scene .land .hb0 { stop-color: color-mix(in srgb, var(--tree), var(--hillc) 22%); }
living-scene .land .ht1 { stop-color: color-mix(in srgb, var(--tree), var(--hillc) 22%); }
living-scene .land .hb1 { stop-color: color-mix(in srgb, var(--tree), #000 12%); }
living-scene .land .ht2 { stop-color: color-mix(in srgb, var(--tree), #000 14%); }
living-scene .land .hb2 { stop-color: color-mix(in srgb, var(--tree), #000 30%); }
living-scene[data-phase="night"] .land :is(.ht0, .hb0) { stop-color: #0a1428; }
living-scene[data-phase="night"] .land :is(.ht1, .hb1) { stop-color: #070f20; }
living-scene[data-phase="night"] .land :is(.ht2, .hb2) { stop-color: #040a17; }


/* Plants stand on the hill and sway a little (more in the wind); dimmed at night */
living-scene .flora { position: absolute; inset: 0; transition: filter var(--fade); filter: brightness(0.42) saturate(0.35); }
/* plants read as foreground silhouettes */
living-scene[data-phase="night"] .flora { filter: brightness(0.2) saturate(0.3); }
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .flora { filter: brightness(0.34) saturate(0.4); }
living-scene .plant { position: absolute; translate: -50% 0; transform-origin: 50% 100%; animation: ls-plantSway 4.5s ease-in-out infinite alternate; line-height: 0; }
living-scene .plant.still { animation: none; }
living-scene .scene .plant svg { position: static; width: auto; height: auto; overflow: visible; }
living-scene[data-wind] .plant { animation-duration: 1.6s; --sway: calc(9deg * var(--wdir, 1)); }
living-scene[data-wind="strong"] .plant { animation-duration: 0.9s; --sway: calc(16deg * var(--wdir, 1)); }
@keyframes ls-plantSway { from { rotate: calc(var(--sway, 3deg) * -0.4); } to { rotate: var(--sway, 3deg); } }
living-scene .plant .grass { fill: color-mix(in srgb, var(--hillc), #4f8a3a 35%); }
living-scene .plant .drygrass { fill: color-mix(in srgb, #b49a52, var(--hillc) 35%); }
living-scene .plant .stem, living-scene .plant .herb-stem { stroke: #4f7a32; stroke-width: 0.9; fill: none; }
living-scene .plant .petal-w { fill: #dfe2d8; }
living-scene .plant .core-y { fill: #c9a94a; }
living-scene .plant .petal-r { fill: #9e4a3e; }
living-scene .plant .petal-r2 { fill: #a85546; }
living-scene .plant .core-d { fill: #2a2224; }
living-scene .plant .petal-y { fill: #c8b862; }
living-scene .plant .core-g { fill: #8c7d3a; }
living-scene .plant .herb { stroke: #5e7f5a; stroke-width: 1; stroke-linecap: round; }
living-scene .plant .herb-fl { fill: #9aa3c0; }
living-scene .plant .lav { fill: #7d7398; }
living-scene .plant .seed { stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.4; }
living-scene .plant .puff { fill: rgba(255, 255, 255, 0.28); }
living-scene .plant .m-stem { fill: #efe6d2; }
living-scene .plant .m-cap { fill: #8a5a3c; }
living-scene .plant .m-dot { fill: #d9cdb8; }
living-scene .plant .dry-stalk { stroke: #8c7a58; stroke-width: 0.9; fill: none; stroke-linecap: round; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .plant { opacity: 0; transition: opacity 6s 14s; }
/* buried under the snow */
/* Snowman: only where snow is falling or lying (and at Christmas) */
living-scene .scene .land .snowman { top: auto; left: 54%; width: 56px; height: 52px; animation: none; z-index: auto; translate: -50% 0; opacity: 0; transition: opacity 3s; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .snowman { opacity: 1; }
living-scene .snowman circle, living-scene .snowman .mound { fill: #f3f6fa; }
living-scene .snowman .mound { fill: #e6edf3; }
living-scene .snowman .coal { fill: #1d1d22; }
living-scene .snowman .nose { fill: #f07a2a; }
living-scene .snowman .arm { stroke: #5a3c22; stroke-width: 1.6; stroke-linecap: round; fill: none; }
living-scene .snowman .scarf { fill: #e8622c; }
living-scene .snowman .hat { stroke: #1d1d22; stroke-width: 2.4; fill: #1d1d22; }
living-scene[data-phase="night"] .land .snowman { filter: brightness(0.5) saturate(0.6) hue-rotate(190deg); }
/* The big tree on the left of the hill; leaves by season, bare in winter */
living-scene .scene .land .bigtree { top: auto; left: clamp(-40px, -1.5vw, -10px); width: clamp(160px, 17vw, 270px); height: auto; aspect-ratio: 420 / 550; overflow: visible; }
living-scene .bigtree .bark path { stroke: color-mix(in srgb, var(--bark), var(--tree) 45%); fill: none; stroke-linecap: round; transition: stroke var(--fade); }
living-scene .bigtree .leaves path { transition: fill var(--fade), opacity 3s; }
living-scene .bigtree .c0 { fill: color-mix(in srgb, var(--canopy), var(--tree) var(--k0, 66%)); }
living-scene .bigtree .c1 { fill: color-mix(in srgb, var(--canopy), var(--tree) var(--k1, 46%)); }
living-scene .bigtree .c2 { fill: color-mix(in srgb, var(--canopy), var(--tree) var(--k2, 22%)); }
living-scene[data-season="winter"] .bigtree .leaves { opacity: 0; }
living-scene .bigtree .tsnow2 path { stroke: color-mix(in srgb, #eef3f8, var(--r1) 18%); fill: none; stroke-linecap: round; opacity: 0; transition: opacity 10s 6s; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .bigtree .tsnow2 path { opacity: 0.75; }
living-scene[data-phase="night"] .bigtree { --k0: 90%; --k1: 84%; --k2: 0%; }
living-scene[data-phase="night"] .bigtree .c2 { fill: color-mix(in srgb, var(--canopy), #0a1326 76%); }
living-scene[data-phase="night"] .bigtree .bark path { stroke: #070d1c; }
living-scene[data-phase="night"] .bigtree .tsnow2 path { filter: brightness(0.45); }
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .bigtree { --k0: 70%; --k1: 52%; }
living-scene .bigtree .crown { transform-origin: 200px 520px; }
living-scene[data-wind] .bigtree .crown { animation: ls-treeGust var(--gust-t, 6s) ease-in-out infinite; }
@keyframes ls-treeGust { 0%, 100% { rotate: 0deg; } 30% { rotate: calc(var(--bend, 2.5deg) * 0.35); } 55% { rotate: calc(var(--bend, 2.5deg) * 0.12); } 75% { rotate: calc(var(--bend, 2.5deg) * 0.45); } }
/* Autumn: leaves drift down from the crown */
living-scene .land .tfall { position: absolute; left: clamp(-40px, -1.5vw, -10px); width: clamp(160px, 17vw, 270px); aspect-ratio: 420 / 550; display: none; }
living-scene[data-season="autumn"] .land .tfall { display: block; }
living-scene .tfall i { position: absolute; width: 7px; height: 4px; border-radius: 70% 0; background: var(--canopy); opacity: 0; animation: ls-leafFall linear infinite; }
living-scene .tfall i:nth-child(2n) { background: #d9902f; }
living-scene .tfall i:nth-child(3n) { background: #a8402a; }
living-scene[data-phase="night"] .tfall i { background: #2a2018; }
@keyframes ls-leafFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 0.9; } 50% { transform: translate(30px, 140px) rotate(260deg); } 90% { opacity: 0.9; } 100% { opacity: 0; transform: translate(70px, 300px) rotate(620deg); } }
@media (max-width: 760px) {
  living-scene .land .tfall { width: 140px; left: -30px; }
}
/* The owl: only at night */
living-scene .owl { opacity: 0; transition: opacity 3s; }
living-scene[data-phase="night"] .owl { opacity: 1; }
living-scene .owl .ob { fill: #0d0f15; }
@media (prefers-reduced-motion: reduce) {
  living-scene .plant, living-scene .owl *, living-scene .bigtree .crown { animation: none !important; }
}
@media (max-width: 760px) {
  living-scene .scene .land .bigtree { width: 140px; left: -30px; }
}
/* Nature sounds toggle (bottom right of the hero) */
living-scene .sound-btn { position: absolute; right: clamp(14px, 3vw, 36px); bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif; color: #fff; background: rgba(8, 20, 34, 0.38); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.2s; }
living-scene .sound-btn:hover { background: rgba(8, 20, 34, 0.55); }
living-scene .sound-btn:focus-visible { outline: 2px solid #4cd9b0; outline-offset: 2px; }
living-scene .sound-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
living-scene .sound-btn .spk { fill: currentColor; }
living-scene .sound-btn[aria-pressed="true"] { border-color: rgba(76, 217, 176, 0.7); }
/* Localhost-only scene preview panel: grouped, readable, collapsible */
living-scene .sky-preview { position: fixed; touch-action: none; left: 12px; bottom: 12px; z-index: 999; width: 290px; border-radius: 16px; overflow: hidden;
  font: 13px/1.35 system-ui, sans-serif; color: #eef3f8; background: rgba(12, 18, 32, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
living-scene .sky-preview header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 12px; cursor: grab; user-select: none; background: rgba(76, 217, 176, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
living-scene .sky-preview header b { font-size: 14px; }
living-scene .sky-preview header small { grid-row: 2; opacity: 0.6; font-size: 11px; }
living-scene .sky-preview .min { grid-row: 1 / 3; grid-column: 2; width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer; font-size: 16px; color: #fff; background: rgba(255, 255, 255, 0.1); }
living-scene .sky-preview.folded .body { display: none; }
living-scene .sky-preview .body { display: grid; gap: 10px; padding: 10px 12px 12px; max-height: 86vh; overflow: auto; }
living-scene .sky-preview fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
living-scene .sky-preview legend { padding: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4cd9b0; }
living-scene .sky-preview label { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-transform: capitalize; }
living-scene .sky-preview select, living-scene .sky-preview input[type="range"] { width: 140px; }
living-scene .sky-preview select { padding: 4px 6px; border-radius: 8px; color: #fff; background: #1d2740; border: 1px solid rgba(255, 255, 255, 0.18); font: inherit; text-transform: capitalize; }
living-scene .sky-preview .cks { display: grid; gap: 4px; }
living-scene .sky-preview .ck { justify-content: flex-start; gap: 8px; text-transform: none; }
living-scene .sky-preview .ck input { accent-color: #4cd9b0; }
living-scene .sky-preview .now { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-transform: capitalize; }
living-scene .sky-preview .now span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
living-scene .sky-preview a { color: #4cd9b0; font-weight: 600; text-decoration: none; }
/* The perched owl: faint facial disc and feather edges in the dark */
living-scene .owl .feet { stroke: #5a4a30; stroke-width: 0.8; stroke-linecap: round; }
/* snowy slopes still read apart */
/* Perched owl, the way a real one behaves: still, a quick blink now and then, the
   face snapping to look one way, holding, then back; it leans in as it hoots */
living-scene .owl .disc { fill: #171a23; } living-scene .owl .chest { fill: #161820; }
living-scene .owl .beak { fill: #d9d2c4; }
living-scene .owl .iris-rim { fill: #8a3c14; } living-scene .owl .iris { fill: #e8862a; } /* amber-orange eyeshine */
living-scene .owl .pupil { fill: #050608; }
living-scene .owl .shine { fill: #fff6dc; opacity: 0.6; }
living-scene .owl .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: ls-owlBlink 7.3s infinite; }
living-scene .owl .owl-face { animation: ls-owlLook 17s infinite; }
living-scene .owl { transform-box: fill-box; transform-origin: 50% 100%; }
living-scene .owl.hoot { animation: ls-owlHoot 2.2s ease-in-out; }
@keyframes ls-owlBlink { 0%, 61%, 64.5%, 67%, 69.5%, 100% { scale: 1 1; } 62.8%, 68.2% { scale: 1 0.06; } }
@keyframes ls-owlLook { 0%, 22% { translate: 0 0; } 23.5%, 44% { translate: -1.3px 0.2px; } 45.5%, 70% { translate: 0 0; } 71.5%, 88% { translate: 1.2px 0; } 89.5%, 100% { translate: 0 0; } }
@keyframes ls-owlHoot { 0%, 100% { rotate: 0deg; } 20%, 80% { rotate: 3deg; } }
/* Snow on the ground: the snowman replaces the campfire; snow lies in patches over the hill */
/* Rain, snowfall or snow on the ground: the camp stays, its fire out (cold embers, a thin wisp of smoke),
   at any hour; the snowman stands beside it */
living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .camp { opacity: 1; }
living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .fire :is(.f, .glow, b), living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .camp .clearing .lit { display: none; }
living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .fire .ember { fill: #5b5550; animation: none; filter: none; }
living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .tent .door { opacity: 0; }
living-scene .fire .smoke { position: absolute; left: 50%; bottom: 8px; width: 5px; height: 30px; margin-left: -2.5px; border-radius: 3px; background: linear-gradient(to top, rgba(220, 224, 230, 0.95), rgba(220, 224, 230, 0)); filter: blur(1px); opacity: 0; transform-origin: 50% 100%; } /* a thin wisp, not a puff */
living-scene:is([data-snowcover], [data-fest="christmas"], [data-weather]) .fire .smoke { animation: ls-smoke 6s ease-out 1; } /* a few puffs, then it stops */
living-scene .fire .smoke:nth-of-type(2) { animation-delay: 1.5s !important; } living-scene .fire .smoke:nth-of-type(3) { animation-delay: 3s !important; }
living-scene[data-phase="night"] .fire .smoke { background: linear-gradient(to top, rgba(150, 160, 180, 0.7), rgba(150, 160, 180, 0)); }
@keyframes ls-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.6, 0.4); } 20% { opacity: 0.85; } 60% { opacity: 0.5; transform: translate(calc(5px * var(--wdir, 1)), -22px) scale(1.6, 1.2) skewX(calc(-8deg * var(--wdir, 1))); } 100% { opacity: 0; transform: translate(calc(12px * var(--wdir, 1)), -48px) scale(2.6, 1.5) skewX(calc(-14deg * var(--wdir, 1))); } }
living-scene .scene .land .snowman:not(.s2) { left: 63%; }

/* Halloween, kept real: bats are small dark silhouettes that only fly at dusk and
   night; the pumpkins sit small on the hill (bottom set inline from the hill's height) */
living-scene .fest .bat svg { width: 26px; height: 12px; filter: none; }
living-scene .bat { width: 26px; }
living-scene .bat svg path, living-scene .bat svg ellipse { fill: #0b0a12; }
living-scene:not([data-phase="night"]):not([data-phase="sunset"]) .bat { display: none; }
living-scene .pumpkin { z-index: auto; translate: -50% 0; }
living-scene:not([data-phase="night"]):not([data-phase="sunset"]) .pumpkin { animation: none; filter: brightness(0.8); }
living-scene .sound-btn[hidden] { display: none; } /* sound="off" */
living-scene .owl .feather { stroke: #262a35; stroke-width: 0.7; fill: none; stroke-linecap: round; } /* wing edges and chest barring */

/* Every ground has depth: a soft rim of sky light along each slope's crest (on top of
   the fine grain set in the svg) */
living-scene .land .rim { fill: none; stroke: color-mix(in srgb, var(--r1), #fff 30%); stroke-width: 1; stroke-linecap: round; opacity: 0.22; } /* broken, irregular: light catching the crest here and there */
living-scene[data-phase="night"] .land .rim { stroke: #8ea3c8; opacity: 0.12; }
living-scene:is([data-phase="sunrise"], [data-phase="sunset"]) .land .rim { stroke: #ffc59a; }
/* Snow lies in shaded layers: bright crests, cool blue shadow toward each slope's foot */
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land {
  --s-top0: #f7fafd; --s-bot0: #cfdbe8; --s-top1: #e9f0f7; --s-bot1: #bfcddd; --s-top2: #dde6f0; --s-bot2: #aebfd3; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"])[data-phase="night"] .land {
  --s-top0: #9aa9c4; --s-bot0: #67779a; --s-top1: #8494b2; --s-bot1: #56668a; --s-top2: #74849f; --s-bot2: #4a597a; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]):is([data-phase="sunrise"], [data-phase="sunset"]) .land {
  --s-top0: #fbe6da; --s-bot0: #c9bccf; --s-top1: #f0dccf; --s-bot1: #b7accb; --s-top2: #e3d2c8; --s-bot2: #a79dbf; }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .ht0 { stop-color: var(--s-top0); } living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .hb0 { stop-color: var(--s-bot0); }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .ht1 { stop-color: var(--s-top1); } living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .hb1 { stop-color: var(--s-bot1); }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .ht2 { stop-color: var(--s-top2); } living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .hb2 { stop-color: var(--s-bot2); }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) .land .rim { stroke: #fff; opacity: 0.4; }
living-scene[data-weather="snow"] .land stop { transition: stop-color 18s ease-in 10s; }
/* Footprints through the snow to the camp snowman; the second snowman on the left */
living-scene .land .prints { position: absolute; inset: 0; opacity: 0; transition: opacity 3s; }
living-scene:is([data-snowcover], [data-fest="christmas"]) .land .prints { opacity: 1; }
living-scene .land .prints i { position: absolute; width: 6px; height: 2.4px; border-radius: 50% 50% 45% 45%; translate: -50% 0; background: linear-gradient(180deg, rgba(95, 115, 150, 0.32), rgba(150, 170, 200, 0.12)); } /* pressed into the snow: darker at the back edge, fading forward */
living-scene[data-phase="night"] .land .prints i { background: linear-gradient(180deg, rgba(30, 40, 65, 0.5), rgba(60, 72, 100, 0.15)); }
living-scene .scene .land .snowman.s2 { width: 72px; height: 67px; }
/* Puddles: a strip of mirrored sky on the ground, shimmering; ripples while it rains */
living-scene .land .puddle { position: absolute; translate: -50% 0; border-radius: 50%; overflow: hidden; opacity: 0; scale: 0.1 0.3; transition: opacity 6s, scale 25s ease-in;
  background: linear-gradient(180deg, color-mix(in srgb, var(--r1), #fff 14%), color-mix(in srgb, var(--r2), #000 10%) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
living-scene .land .puddle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.16) 47%, transparent 58%); background-size: 300% 100%; animation: ls-puddleShine 9s ease-in-out infinite; } /* a faint sheen, not a glow */
living-scene[data-weather="rain"] .land .puddle { opacity: 0.55; scale: 1; transition: opacity 8s, scale 45s cubic-bezier(0.2, 0.6, 0.4, 1); } /* fills slowly with the rain */
living-scene[data-rainbow]:not([data-weather]) .land .puddle { opacity: 0.6; scale: 0.7 0.85; } /* just after: still there, drying */
living-scene[data-phase="night"] .land .puddle { background: linear-gradient(180deg, #4a5b80, #1a2440 70%); }
living-scene .land .puddle b { position: absolute; left: 35%; top: 50%; width: 14px; height: 4px; margin: -2px 0 0 -7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); opacity: 0; }
living-scene[data-weather="rain"] .land .puddle b { animation: ls-ripple 1.4s ease-out infinite; }
@keyframes ls-puddleShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
@keyframes ls-ripple { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { living-scene .land .puddle::after, living-scene .land .puddle b { animation: none; } }

living-scene .sound-btn { padding: 9px; gap: 0; } /* icon-only round button, clear of the phone */
living-scene .sound-btn { right: clamp(20px, 3.6vw, 56px); } /* a little in from the edge, still clear of the phone */

/* Depth parallax (--px/--py from -1 to 1, set by the mouse and scroll): far layers barely
   move, near ones move most */
living-scene .stars { translate: calc(var(--px, 0) * -1.5px) calc(var(--py, 0) * -1px); }
living-scene :is(.sun, .moon) { translate: calc(var(--px, 0) * -2.5px) calc(var(--py, 0) * -1.5px); }
living-scene .ridges .m0, living-scene .ridges .snowcap.s0 { translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -1.5px); }
living-scene .ridges .m1, living-scene .ridges .snowcap.s1 { translate: calc(var(--px, 0) * -5px) calc(var(--py, 0) * -2.5px); }
living-scene .ridges .m2 { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -3.5px); }
living-scene .ridges :is(.m3, .trees.far) { translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -4.5px); }
living-scene .ridges .trees.back { translate: calc(var(--px, 0) * -11px) calc(var(--py, 0) * -5.5px); }
living-scene .ridges .trees.front { translate: calc(var(--px, 0) * -13.5px) calc(var(--py, 0) * -6.5px); }
living-scene .land { left: -24px; right: -24px; translate: calc(var(--px, 0) * -17px) calc(var(--py, 0) * -5px); }
/* Scrolled out of view: everything holds still */
living-scene.ls-paused *, living-scene.ls-paused *::before, living-scene.ls-paused *::after { animation-play-state: paused !important; }
/* Phones: the sun and moon move to the top right, small, clear of the headline
   (their arc is squeezed into that corner) */
@media (max-width: 760px) {
  living-scene:not([data-phase="night"]) .sun { left: calc(var(--sx, 48%) * 0.4 + 54%); top: calc(var(--sy, 9%) * 0.08 + 58px); scale: 0.55; }
  living-scene[data-phase="night"] .moon { left: calc(var(--mx, 46%) * 0.4 + 54%); top: calc(var(--my, 11%) * 0.08 + 58px); scale: 0.55; }
}
/* Things standing on the hill move with it: the camp (and everything else in the fx
   layer: fireflies, fog, leaves) and the Halloween pumpkins */
living-scene .fx { translate: calc(var(--px, 0) * -17px) calc(var(--py, 0) * -5px); }
living-scene .fest .pumpkin { translate: calc(-50% + var(--px, 0) * -17px) calc(var(--py, 0) * -5px); }

/* Wind direction from the weather (data-wind-dir): trees, plants, rain, smoke, clouds
   and leaves all go the way it really blows */
living-scene { --wdir: 1; }
living-scene[data-wind-dir="left"] { --wdir: -1; }
living-scene[data-wind-dir="left"] .cloud { animation-direction: reverse, normal; }
living-scene[data-wind-dir="left"] :is(.leaf, .streak) { animation-direction: reverse; }
/* The real moon: below the horizon it's gone; up in daytime it shows pale in the blue */
living-scene[data-moon="down"] .moon { opacity: 0 !important; }
living-scene[data-moon="day"]:not([data-phase="night"]) .moon { left: var(--mx); top: var(--my); opacity: 0.35; }
/* Real bright stars: a touch brighter than the faint background ones */
living-scene .stars circle.rs { fill: #fff; }

/* Lite mode (weak phones, Data Saver, low battery, slow frames): drop the costly bits */
living-scene[data-lite] .ridges { filter: none !important; animation: none !important; }
living-scene[data-lite] .land .hill g { filter: none; }
living-scene[data-lite] :is(.stars circle, .ridges .trees .sway, .plant, .bigtree .crown, .fog-bank, .land .puddle::after) { animation: none !important; }
living-scene[data-lite] :is(.cloud.c4, .cloud.c5, .leaf, .streak, .fog-bank, .tfall) { display: none !important; }
living-scene[data-lite] .weather i:nth-child(2n) { display: none; }
living-scene[data-lite] { --px: 0 !important; --py: 0 !important; }

/* Rain leans with the wind: the way it blows (--wdir) and harder in stronger wind */
living-scene[data-wind="breeze"] { --rainx: 1.6; }
living-scene[data-wind="strong"] { --rainx: 2.4; }

/* A storm rains harder than rain: denser, brighter streaks, and the puddles fill bigger and faster */
living-scene[data-storm][data-weather="rain"] .weather i { height: 34px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.55)); }
living-scene[data-storm][data-weather="rain"] .land .puddle { scale: 1.4; opacity: 0.65; transition: opacity 5s, scale 20s cubic-bezier(0.2, 0.6, 0.4, 1); }

/* The owl in flight (side view): hidden until it leaves the branch */
living-scene .scene .land .owl-fly { top: 0; left: 0; width: 40px; height: auto; aspect-ratio: 1; overflow: visible; opacity: 0; pointer-events: none; }
living-scene .land .owl-fly.flying { opacity: 1; } /* swaps with the perched owl instantly */
living-scene .owl-fly path, living-scene .owl-fly circle { fill: #0d0f15; }
living-scene .owl-fly .disc { fill: #161922; } living-scene .owl-fly .brow { fill: #0d0f15; } living-scene .owl-fly .fi { fill: #e8862a; } living-scene .owl-fly .fp { fill: #050608; } living-scene .owl-fly .fb { fill: #d9d2c4; }
living-scene .owl.away { opacity: 0 !important; transition: none; }

/* Haze on the far ranges comes from colour (blended toward the sky near the horizon),
   not see-through paint, so the low sun and moon really go behind the peaks */
living-scene { --sky-haze: #4f9aa3; }
living-scene[data-phase="sunrise"] { --sky-haze: #c99f8a; }
living-scene[data-phase="sunset"] { --sky-haze: #b4707a; }
living-scene[data-phase="night"] { --sky-haze: #1d2a52; }

/* Snow on the big tree's crown (clumps on top, specks) and on the tent (ridge, roof
   slopes, specks): only where snow lies or falls; settles in slowly when it snows */
living-scene .bigtree .csnow, living-scene .tent .tsnowp { opacity: 0; transition: opacity 3s; }
living-scene .tent .tsnowp { fill: color-mix(in srgb, #f4f7fb, var(--r1) 12%); }
living-scene .bigtree .csnow :is(ellipse, circle) { fill: color-mix(in srgb, #f4f7fb, var(--r1) 14%); }
living-scene:is([data-snowcover], [data-weather="snow"], [data-fest="christmas"]) :is(.bigtree .csnow, .tent .tsnowp) { opacity: 0.95; }
living-scene[data-weather="snow"] :is(.bigtree .csnow, .tent .tsnowp) { transition: opacity 14s ease-in 6s; }
living-scene[data-phase="night"] :is(.bigtree .csnow, .tent .tsnowp) { filter: brightness(0.55); }