/* ONLINECLOCK.NET — ambient background scenes for /bg/ theme pages.
   Every scene is pure CSS: no images, no canvas, no libraries.
   Motion is disabled automatically when the visitor prefers reduced motion. */

.stage{ background:#0b0f16; }
.stage-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .stage-layer *,
  .stage-layer::before,
  .stage-layer::after{ animation:none !important; }
}

/* ---------------- Aquarium ---------------- */
.sc-aquarium{ background:linear-gradient(180deg,#012a4a 0%,#01527d 45%,#013a5c 100%); }
.sc-aquarium .water{
  position:absolute; inset:-10%;
  background:
    radial-gradient(70% 40% at 30% 0%, rgba(120,220,255,.28), transparent 70%),
    radial-gradient(50% 30% at 75% 5%, rgba(160,255,240,.20), transparent 70%);
  animation:aqShimmer 9s ease-in-out infinite alternate;
}
@keyframes aqShimmer{ from{ transform:translateX(-2%) } to{ transform:translateX(2%) } }
.sc-aquarium .bub{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(190,240,255,.30) 60%, rgba(255,255,255,.06) 100%);
  animation:aqRise linear infinite;
}
@keyframes aqRise{
  0%{ transform:translateY(0) translateX(0); opacity:0 }
  10%{ opacity:.85 }
  100%{ transform:translateY(-115vh) translateX(24px); opacity:0 }
}
.sc-aquarium .fish{ position:absolute; animation:aqSwim linear infinite; }
.sc-aquarium .fish i{
  display:block; width:46px; height:20px; border-radius:60% 40% 45% 55%;
  background:linear-gradient(90deg,#ffb347,#ff7b39); position:relative;
  box-shadow:0 0 18px rgba(255,150,70,.35);
}
.sc-aquarium .fish i::after{
  content:""; position:absolute; right:-13px; top:3px;
  border-left:15px solid #ff7b39; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.sc-aquarium .fish i::before{
  content:""; position:absolute; left:11px; top:6px; width:4px; height:4px;
  border-radius:50%; background:#1b2430;
}
.sc-aquarium .fish.alt i{ background:linear-gradient(90deg,#7fe7ff,#3aa7d8); box-shadow:0 0 18px rgba(90,200,255,.35); }
.sc-aquarium .fish.alt i::after{ border-left-color:#3aa7d8; }
@keyframes aqSwim{
  0%{ transform:translateX(-18vw) scaleX(1) }
  49%{ transform:translateX(112vw) scaleX(1) }
  50%{ transform:translateX(112vw) scaleX(-1) }
  99%{ transform:translateX(-18vw) scaleX(-1) }
  100%{ transform:translateX(-18vw) scaleX(1) }
}
.sc-aquarium .weed{
  position:absolute; bottom:-6px; width:16px; height:130px;
  background:linear-gradient(180deg,rgba(60,190,140,0),rgba(40,170,120,.75));
  border-radius:50% 50% 6px 6px; transform-origin:50% 100%;
  animation:aqSway 6s ease-in-out infinite alternate;
}
@keyframes aqSway{ from{ transform:rotate(-7deg) } to{ transform:rotate(7deg) } }
.sc-aquarium .sand{
  position:absolute; left:0; right:0; bottom:0; height:14%;
  background:linear-gradient(180deg,rgba(226,201,148,.15),rgba(200,170,110,.55));
}

/* ---------------- Rain ---------------- */
.sc-rain{ background:linear-gradient(180deg,#151b26 0%,#26313f 55%,#1a2029 100%); }
.sc-rain .glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 45% at 50% 12%, rgba(150,190,230,.22), transparent 70%);
}
.sc-rain .drop{
  position:absolute; top:-14%; width:1.6px;
  background:linear-gradient(180deg,rgba(190,220,255,0),rgba(190,220,255,.75));
  animation:rnFall linear infinite;
}
@keyframes rnFall{
  from{ transform:translateY(-20vh) }
  to{ transform:translateY(125vh) }
}
.sc-rain .flash{
  position:absolute; inset:0; background:rgba(210,230,255,.5); opacity:0;
  animation:rnFlash 13s linear infinite;
}
@keyframes rnFlash{
  0%,92%,100%{ opacity:0 }
  93%{ opacity:.55 } 94%{ opacity:0 } 95%{ opacity:.35 } 96%{ opacity:0 }
}
.sc-rain .puddle{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  background:linear-gradient(180deg,rgba(120,160,200,0),rgba(120,160,200,.22));
}

/* ---------------- Fireplace ---------------- */
.sc-fireplace{ background:radial-gradient(70% 60% at 50% 100%, #4a1c05, #17100b 70%, #0b0805 100%); }
.sc-fireplace .flame{
  position:absolute; bottom:6%; left:50%; width:150px; height:230px;
  margin-left:-75px; border-radius:50% 50% 40% 40%;
  background:radial-gradient(ellipse at 50% 100%, #fff2c0 0%, #ffbf42 26%, #ff7a18 52%, #d8340a 76%, rgba(120,20,0,0) 100%);
  filter:blur(2px); transform-origin:50% 100%;
  animation:fpFlicker 2.4s ease-in-out infinite alternate;
}
.sc-fireplace .flame.b{ width:96px; margin-left:-48px; height:170px; animation-duration:1.7s; opacity:.9; }
.sc-fireplace .flame.c{ width:56px; margin-left:-28px; height:120px; animation-duration:1.2s; opacity:.85; }
@keyframes fpFlicker{
  0%{ transform:scale(1,1) skewX(0deg); opacity:.9 }
  40%{ transform:scale(1.05,.96) skewX(2deg); opacity:1 }
  100%{ transform:scale(.95,1.06) skewX(-2deg); opacity:.92 }
}
.sc-fireplace .ember{
  position:absolute; bottom:10%; width:3px; height:3px; border-radius:50%;
  background:#ffb545; box-shadow:0 0 8px #ff8a1f;
  animation:fpEmber linear infinite;
}
@keyframes fpEmber{
  0%{ transform:translate(0,0); opacity:0 }
  15%{ opacity:1 }
  100%{ transform:translate(var(--dx,20px),-70vh); opacity:0 }
}
.sc-fireplace .logs{
  position:absolute; left:50%; bottom:4%; width:280px; height:34px; margin-left:-140px;
  background:linear-gradient(180deg,#4a3career 0%,#3a2a1c 100%);
  background:linear-gradient(180deg,#4a3220,#2b1d12); border-radius:18px;
  box-shadow:0 -6px 26px rgba(255,120,20,.4);
}

/* ---------------- Ceiling fan ---------------- */
.sc-fan{ background:radial-gradient(70% 70% at 50% 40%, #2c3a4d, #141a24 70%, #0b0f16 100%); }
.sc-fan .fan{
  position:absolute; left:50%; top:50%; width:520px; height:520px;
  margin:-260px 0 0 -260px; animation:fnSpin linear infinite;
}
@keyframes fnSpin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.sc-fan .blade{
  position:absolute; left:50%; top:50%; width:230px; height:52px;
  border-radius:0 40px 40px 0; transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(203,213,241,.9),rgba(100,116,139,.65));
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sc-fan .blade:nth-child(1){ transform:rotate(0deg) translateY(-26px) }
.sc-fan .blade:nth-child(2){ transform:rotate(90deg) translateY(-26px) }
.sc-fan .blade:nth-child(3){ transform:rotate(180deg) translateY(-26px) }
.sc-fan .blade:nth-child(4){ transform:rotate(270deg) translateY(-26px) }
.sc-fan .hub{
  position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #f1f5f9, #94a3b8);
  box-shadow:0 0 40px rgba(255,255,255,.25);
}

/* ---------------- Christmas ---------------- */
.sc-christmas{ background:linear-gradient(180deg,#08131f 0%,#0d2438 55%,#123049 100%); }
.sc-christmas .flake{
  position:absolute; top:-8%; color:#fff; opacity:.85;
  animation:xmFall linear infinite;
}
@keyframes xmFall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0) }
  100%{ transform:translateY(122vh) translateX(var(--drift,30px)) rotate(360deg) }
}
.sc-christmas .lights{
  position:absolute; top:0; left:0; right:0; height:60px;
  display:flex; justify-content:space-around; align-items:flex-start;
}
.sc-christmas .lights i{
  width:12px; height:18px; border-radius:0 0 50% 50%; margin-top:12px;
  animation:xmBlink 2.4s ease-in-out infinite;
}
.sc-christmas .lights i:nth-child(4n+1){ background:#ff4d4d; box-shadow:0 0 16px #ff4d4d; animation-delay:0s }
.sc-christmas .lights i:nth-child(4n+2){ background:#4dff88; box-shadow:0 0 16px #4dff88; animation-delay:.6s }
.sc-christmas .lights i:nth-child(4n+3){ background:#ffd24d; box-shadow:0 0 16px #ffd24d; animation-delay:1.2s }
.sc-christmas .lights i:nth-child(4n+4){ background:#4db8ff; box-shadow:0 0 16px #4db8ff; animation-delay:1.8s }
@keyframes xmBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }
.sc-christmas .ground{
  position:absolute; left:-5%; right:-5%; bottom:-30px; height:120px;
  background:#eaf4ff; border-radius:50% 50% 0 0; opacity:.92;
}

/* ---------------- Fall ---------------- */
.sc-fall{ background:linear-gradient(180deg,#3d1f08 0%,#7a3d10 45%,#a85a17 100%); }
.sc-fall .leaf{
  position:absolute; top:-8%; width:16px; height:16px;
  border-radius:0 60% 0 60%;
  animation:flFall linear infinite;
}
@keyframes flFall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0); opacity:0 }
  8%{ opacity:1 }
  100%{ transform:translateY(122vh) translateX(var(--drift,60px)) rotate(540deg); opacity:.2 }
}
.sc-fall .haze{
  position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 10%, rgba(255,200,120,.28), transparent 70%);
}

/* ---------------- Halloween ---------------- */
.sc-halloween{ background:linear-gradient(180deg,#0a0713 0%,#1b0f24 55%,#2a1206 100%); }
.sc-halloween .moon{
  position:absolute; right:12%; top:12%; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fff6d8, #f3d78a 60%, #d9b45e 100%);
  box-shadow:0 0 90px rgba(255,220,140,.45);
}
.sc-halloween .bat{ position:absolute; animation:hwFly linear infinite; }
.sc-halloween .bat i{
  display:block; width:0; height:0; position:relative;
  border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:8px solid #120c18;
  animation:hwFlap .42s ease-in-out infinite alternate;
}
.sc-halloween .bat i::before,
.sc-halloween .bat i::after{
  content:""; position:absolute; top:-2px; width:18px; height:9px; background:#120c18;
  border-radius:60% 60% 0 0;
}
.sc-halloween .bat i::before{ left:-27px; transform:rotate(-16deg) }
.sc-halloween .bat i::after{ right:-27px; transform:rotate(16deg) }
@keyframes hwFlap{ from{ transform:scaleY(.7) } to{ transform:scaleY(1.15) } }
@keyframes hwFly{
  0%{ transform:translate(-15vw,10vh) }
  50%{ transform:translate(60vw,-6vh) }
  100%{ transform:translate(115vw,14vh) }
}
.sc-halloween .pumpkin{
  position:absolute; left:8%; bottom:8%; width:96px; height:78px; border-radius:48%;
  background:radial-gradient(circle at 38% 32%, #ff9a3c, #e2620f 65%, #a03e05 100%);
  box-shadow:0 0 46px rgba(255,140,40,.5);
  animation:hwGlow 3.4s ease-in-out infinite alternate;
}
.sc-halloween .pumpkin::before{
  content:""; position:absolute; left:20px; top:24px;
  border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:16px solid #2b1205;
}
.sc-halloween .pumpkin::after{
  content:""; position:absolute; right:20px; top:24px;
  border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:16px solid #2b1205;
}
@keyframes hwGlow{ from{ filter:brightness(.9) } to{ filter:brightness(1.16) } }
.sc-halloween .fog{
  position:absolute; left:-20%; right:-20%; bottom:0; height:34%;
  background:linear-gradient(180deg,rgba(160,140,190,0),rgba(160,140,190,.22));
  animation:hwFog 18s ease-in-out infinite alternate;
}
@keyframes hwFog{ from{ transform:translateX(-4%) } to{ transform:translateX(4%) } }

/* ---------------- Nature ---------------- */
.sc-nature{ background:linear-gradient(180deg,#1b3a4b 0%,#2e6b6b 42%,#8fbf7a 100%); }
.sc-nature .sun{
  position:absolute; left:50%; top:22%; width:120px; height:120px; margin-left:-60px;
  border-radius:50%; background:radial-gradient(circle,#fff3c4,#ffd166 60%,rgba(255,209,102,0) 72%);
  animation:ntSun 22s ease-in-out infinite alternate;
}
@keyframes ntSun{ from{ transform:translateY(14px); opacity:.85 } to{ transform:translateY(-14px); opacity:1 } }
.sc-nature .hill{
  position:absolute; left:-10%; right:-10%; border-radius:50% 50% 0 0;
}
.sc-nature .hill.h1{ bottom:0; height:34%; background:#1d3d2b; }
.sc-nature .hill.h2{ bottom:0; height:26%; background:#2a5638; left:-25%; right:-5%; }
.sc-nature .hill.h3{ bottom:0; height:19%; background:#3a7148; left:-5%; right:-25%; }
.sc-nature .mist{
  position:absolute; left:-20%; right:-20%; bottom:16%; height:22%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.26));
  animation:ntMist 24s ease-in-out infinite alternate;
}
@keyframes ntMist{ from{ transform:translateX(-5%) } to{ transform:translateX(5%) } }

/* ---------------- Lava ---------------- */
.sc-lava{ background:linear-gradient(180deg,#20060c 0%,#3d0a10 50%,#5c1108 100%); }
.sc-lava .blob{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #ffd06b, #ff6a1f 45%, #d32005 100%);
  filter:blur(1px); box-shadow:0 0 50px rgba(255,110,30,.5);
  animation:lvRise ease-in-out infinite alternate;
}
@keyframes lvRise{
  from{ transform:translateY(18vh) scale(1) }
  to{ transform:translateY(-18vh) scale(1.16) }
}
.sc-lava .heat{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 100%, rgba(255,110,20,.34), transparent 70%);
  animation:lvPulse 5s ease-in-out infinite alternate;
}
@keyframes lvPulse{ from{ opacity:.7 } to{ opacity:1 } }

/* ---------------- Water ---------------- */
.sc-water{ background:linear-gradient(180deg,#0b3d5c 0%,#1479a6 50%,#2ba6c7 100%); }
.sc-water .ripple{
  position:absolute; left:50%; top:58%; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); transform:translate(-50%,-50%);
  animation:wtRipple 6s ease-out infinite;
}
@keyframes wtRipple{
  0%{ width:0; height:0; opacity:.75 }
  100%{ width:150vw; height:150vw; opacity:0 }
}
.sc-water .caustic{
  position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(64deg, rgba(255,255,255,.10) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.08) 0 2px, transparent 2px 32px);
  animation:wtDrift 16s linear infinite alternate;
}
@keyframes wtDrift{ from{ transform:translate(-3%,-2%) } to{ transform:translate(3%,2%) } }
.sc-water .glint{
  position:absolute; inset:0;
  background:radial-gradient(50% 34% at 50% 6%, rgba(255,255,255,.30), transparent 70%);
}

/* ---------------- Theme gallery previews ---------------- */
.bgcard{ padding:0; overflow:hidden; }
.bgcard .prev{
  height:132px; position:relative; overflow:hidden;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
}
.bgcard .prev > span{ position:relative; z-index:3; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.bgcard .body{ padding:1rem 1.15rem 1.2rem; }
.bgcard h3{ margin:0 0 .3rem; font-size:var(--step-1); }
.bgcard p{ margin:0; font-size:.88rem; color:var(--ink-2); }

/* =================================================================
   SECOND WAVE OF SCENES
   ================================================================= */

/* ---------------- Starfield ---------------- */
.sc-starfield{ background:radial-gradient(120% 90% at 50% 110%, #14213d 0%, #0a0f1f 45%, #04060d 100%); }
.sc-starfield .star{
  position:absolute; border-radius:50%; background:#fff;
  animation:stTwinkle ease-in-out infinite alternate;
}
@keyframes stTwinkle{ from{ opacity:.18; transform:scale(.8) } to{ opacity:1; transform:scale(1.15) } }
.sc-starfield .shoot{
  position:absolute; width:120px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff);
  animation:stShoot linear infinite;
}
@keyframes stShoot{
  0%{ transform:translate(-10vw,-10vh) rotate(28deg); opacity:0 }
  6%{ opacity:1 }
  22%{ transform:translate(90vw,52vh) rotate(28deg); opacity:0 }
  100%{ transform:translate(90vw,52vh) rotate(28deg); opacity:0 }
}
.sc-starfield .milky{
  position:absolute; inset:0;
  background:radial-gradient(60% 22% at 42% 34%, rgba(150,180,255,.16), transparent 70%),
             radial-gradient(46% 16% at 66% 58%, rgba(200,160,255,.12), transparent 70%);
  transform:rotate(-18deg);
}

/* ---------------- Snowfall ---------------- */
.sc-snow{ background:linear-gradient(180deg,#1d2a3a 0%,#33475e 55%,#5b7593 100%); }
.sc-snow .flake{
  position:absolute; top:-8%; border-radius:50%; background:#fff;
  animation:snFall linear infinite;
}
@keyframes snFall{
  0%{ transform:translateY(-10vh) translateX(0); opacity:0 }
  8%{ opacity:.95 }
  100%{ transform:translateY(122vh) translateX(var(--drift,40px)); opacity:.15 }
}
.sc-snow .drift{
  position:absolute; left:-6%; right:-6%; bottom:-40px; height:140px;
  background:#eef5ff; border-radius:50% 50% 0 0; opacity:.9;
}
.sc-snow .drift.b{ bottom:-70px; height:170px; left:-20%; right:-30%; opacity:.6; }

/* ---------------- Sunset ---------------- */
.sc-sunset{ background:linear-gradient(180deg,#20124d 0%,#8e2a6b 38%,#e3573f 68%,#f9a03f 88%,#ffd07b 100%); }
.sc-sunset .sun{
  position:absolute; left:50%; bottom:24%; width:180px; height:180px; margin-left:-90px;
  border-radius:50%; background:radial-gradient(circle,#fff5cc 0%,#ffd166 45%,#ff8c42 75%,rgba(255,140,66,0) 78%);
  box-shadow:0 0 120px rgba(255,170,90,.6);
  animation:suSink 26s ease-in-out infinite alternate;
}
@keyframes suSink{ from{ transform:translateY(20px) } to{ transform:translateY(-22px) } }
.sc-sunset .sea{
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(180deg,#7a2e57,#2a1140);
}
.sc-sunset .shimmer{
  position:absolute; left:50%; bottom:0; width:220px; height:26%; margin-left:-110px;
  background:repeating-linear-gradient(180deg, rgba(255,200,120,.55) 0 2px, transparent 2px 9px);
  animation:suShim 5s ease-in-out infinite alternate;
}
@keyframes suShim{ from{ transform:scaleX(.9); opacity:.7 } to{ transform:scaleX(1.15); opacity:1 } }
.sc-sunset .cloud{
  position:absolute; height:14px; border-radius:14px;
  background:rgba(255,220,190,.42); animation:suCloud linear infinite;
}
@keyframes suCloud{ from{ transform:translateX(-30vw) } to{ transform:translateX(120vw) } }

/* ---------------- Matrix ---------------- */
.sc-matrix{ background:#020805; }
.sc-matrix .col{
  position:absolute; top:-40%; width:1ch;
  font-family:var(--f-mono); font-size:16px; line-height:1.15;
  color:#27ff8b; text-shadow:0 0 8px rgba(39,255,139,.75);
  white-space:pre; writing-mode:vertical-rl; text-orientation:upright;
  animation:mxFall linear infinite;
}
@keyframes mxFall{
  0%{ transform:translateY(-60%); opacity:0 }
  6%{ opacity:1 }
  100%{ transform:translateY(150%); opacity:.15 }
}
.sc-matrix .vig{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, transparent 30%, rgba(0,0,0,.75) 100%);
}

/* ---------------- Aurora ---------------- */
.sc-aurora{ background:linear-gradient(180deg,#02030d 0%,#061029 55%,#0a1b33 100%); }
.sc-aurora .band{
  position:absolute; left:-30%; right:-30%; height:46%;
  filter:blur(34px); opacity:.6; mix-blend-mode:screen;
  border-radius:50%;
  animation:auSway ease-in-out infinite alternate;
}
@keyframes auSway{
  from{ transform:translateX(-6%) skewX(-8deg) scaleY(.9) }
  to{ transform:translateX(6%) skewX(8deg) scaleY(1.12) }
}
.sc-aurora .star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:stTwinkle ease-in-out infinite alternate; }
.sc-aurora .ridge{
  position:absolute; left:-5%; right:-5%; bottom:0; height:16%;
  background:#04070f; clip-path:polygon(0 100%,0 46%,12% 22%,24% 58%,38% 18%,52% 52%,66% 14%,80% 48%,92% 26%,100% 54%,100% 100%);
}

/* ---------------- Sakura ---------------- */
.sc-sakura{ background:linear-gradient(180deg,#2b1b33 0%,#6b3355 42%,#c46e8e 78%,#f4c2d3 100%); }
.sc-sakura .petal{
  position:absolute; top:-8%; width:14px; height:11px;
  background:#ffc2d8; border-radius:100% 0 100% 0;
  animation:skFall linear infinite;
}
@keyframes skFall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0); opacity:0 }
  8%{ opacity:1 }
  100%{ transform:translateY(122vh) translateX(var(--drift,80px)) rotate(720deg); opacity:.25 }
}
.sc-sakura .branch{
  position:absolute; top:-4px; height:12px; border-radius:0 0 40% 40%;
  background:#3a2233;
}
.sc-sakura .moon{
  position:absolute; right:14%; top:14%; width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fff,#ffe6f0 65%,#f3c9dc 100%);
  box-shadow:0 0 70px rgba(255,220,235,.45);
}

/* ---------------- Neon grid ---------------- */
.sc-neon{ background:linear-gradient(180deg,#1a0b33 0%,#3d1057 46%,#7b1f6a 72%,#12061f 73%,#0a0417 100%); }
.sc-neon .sun{
  position:absolute; left:50%; top:16%; width:230px; height:230px; margin-left:-115px;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(180deg,#ffe14d,#ff5f9e 60%,#a52ad6);
  box-shadow:0 0 90px rgba(255,95,158,.55);
}
.sc-neon .sun::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, transparent 0 12px, rgba(20,5,35,.85) 12px 18px);
}
.sc-neon .grid{
  position:absolute; left:-50%; right:-50%; bottom:0; height:28%;
  background:
    repeating-linear-gradient(90deg, rgba(0,255,231,.55) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(0deg,  rgba(0,255,231,.45) 0 2px, transparent 2px 34px);
  transform:perspective(340px) rotateX(72deg);
  transform-origin:50% 100%;
  animation:neGrid 2.4s linear infinite;
}
@keyframes neGrid{ from{ background-position:0 0, 0 0 } to{ background-position:0 0, 0 34px } }
.sc-neon .haze{
  position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 62%, rgba(255,60,160,.28), transparent 70%);
}

/* ---------------- Bokeh ---------------- */
.sc-bokeh{ background:linear-gradient(140deg,#12082a 0%,#2a1147 45%,#3d1230 100%); }
.sc-bokeh .orb{
  position:absolute; border-radius:50%;
  filter:blur(var(--bl,6px));
  animation:bkFloat ease-in-out infinite alternate;
}
@keyframes bkFloat{
  from{ transform:translate(0,0) scale(1); opacity:var(--o,.5) }
  to{ transform:translate(var(--dx,20px),var(--dy,-26px)) scale(1.14); opacity:calc(var(--o,.5) + .28) }
}

/* ---------------- Candle ---------------- */
.sc-candle{ background:radial-gradient(60% 60% at 50% 46%, #3a2a14 0%, #171009 55%, #0a0705 100%); }
.sc-candle .body{
  position:absolute; left:50%; bottom:14%; width:74px; height:190px; margin-left:-37px;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(90deg,#f2e3c6,#fff8e8 35%,#dcc9a4);
  box-shadow:0 -10px 40px rgba(255,180,80,.35);
}
.sc-candle .body::before{
  content:""; position:absolute; left:50%; top:-8px; width:4px; height:16px; margin-left:-2px;
  background:#3a2a18; border-radius:2px;
}
.sc-candle .fl{
  position:absolute; left:50%; bottom:calc(14% + 190px); width:34px; height:74px; margin-left:-17px;
  border-radius:50% 50% 42% 42%; transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%, #fffbe8 0%, #ffd76a 30%, #ff9d2e 60%, rgba(220,80,0,0) 100%);
  filter:blur(1px);
  animation:cdFlicker 1.6s ease-in-out infinite alternate;
}
.sc-candle .fl.b{ width:18px; margin-left:-9px; height:44px; animation-duration:1.05s; }
@keyframes cdFlicker{
  0%{ transform:scale(1,1) skewX(0); opacity:.92 }
  50%{ transform:scale(1.06,.95) skewX(3deg); opacity:1 }
  100%{ transform:scale(.94,1.07) skewX(-3deg); opacity:.94 }
}
.sc-candle .halo{
  position:absolute; left:50%; bottom:calc(14% + 150px); width:340px; height:340px; margin:0 0 0 -170px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,170,60,.30), transparent 68%);
  animation:cdHalo 3.4s ease-in-out infinite alternate;
}
@keyframes cdHalo{ from{ opacity:.65; transform:scale(.94) } to{ opacity:1; transform:scale(1.06) } }

/* ---------------- Fireworks ---------------- */
.sc-fireworks{ background:linear-gradient(180deg,#04060f 0%,#0a1024 55%,#131a33 100%); }
.sc-fireworks .star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.6; }
.sc-fireworks .burst{
  position:absolute; width:6px; height:6px; border-radius:50%;
  animation:fwBurst ease-out infinite;
}
@keyframes fwBurst{
  0%{ transform:scale(.2); opacity:0; box-shadow:none }
  8%{ opacity:1 }
  60%{ opacity:.9 }
  100%{ transform:scale(1); opacity:0 }
}
.sc-fireworks .skyline{
  position:absolute; left:0; right:0; bottom:0; height:14%;
  background:#02040a;
  clip-path:polygon(0 100%,0 52%,6% 52%,6% 30%,12% 30%,12% 60%,20% 60%,20% 22%,26% 22%,26% 56%,34% 56%,34% 40%,42% 40%,42% 66%,50% 66%,50% 26%,57% 26%,57% 58%,65% 58%,65% 36%,72% 36%,72% 62%,80% 62%,80% 28%,87% 28%,87% 54%,94% 54%,94% 44%,100% 44%,100% 100%);
}

/* ---------------- Valentine ---------------- */
.sc-valentine{ background:linear-gradient(180deg,#2a0716 0%,#6b0f33 45%,#b3204f 100%); }
.sc-valentine .heart{
  position:absolute; bottom:-8%;
  color:#ff8fb1; opacity:.9;
  animation:vlRise linear infinite;
}
@keyframes vlRise{
  0%{ transform:translateY(0) translateX(0) rotate(0); opacity:0 }
  10%{ opacity:.95 }
  100%{ transform:translateY(-122vh) translateX(var(--drift,40px)) rotate(24deg); opacity:0 }
}
.sc-valentine .glow{
  position:absolute; inset:0;
  background:radial-gradient(55% 40% at 50% 46%, rgba(255,140,180,.28), transparent 72%);
  animation:vlPulse 4.5s ease-in-out infinite alternate;
}
@keyframes vlPulse{ from{ opacity:.6 } to{ opacity:1 } }

/* ---------------- Thanksgiving ---------------- */
.sc-thanks{ background:linear-gradient(180deg,#2e1508 0%,#6b3410 44%,#a8641f 78%,#d19a4a 100%); }
.sc-thanks .leaf{
  position:absolute; top:-8%; width:17px; height:17px; border-radius:0 62% 0 62%;
  animation:flFall linear infinite;
}
.sc-thanks .haze{
  position:absolute; inset:0;
  background:radial-gradient(58% 38% at 50% 12%, rgba(255,206,130,.32), transparent 70%);
}
.sc-thanks .field{
  position:absolute; left:-6%; right:-6%; bottom:0; height:18%;
  background:linear-gradient(180deg, rgba(120,70,20,.35), rgba(70,38,10,.85));
  border-radius:50% 50% 0 0;
}
.sc-thanks .sheaf{
  position:absolute; bottom:6%; width:9px; height:70px; transform-origin:50% 100%;
  background:linear-gradient(180deg, rgba(226,178,88,.9), rgba(150,100,36,.9));
  border-radius:50% 50% 3px 3px;
  animation:aqSway 7s ease-in-out infinite alternate;
}

/* ================= Clouds ================= */
.sc-clouds{ background:linear-gradient(180deg,#5eb3f2 0%,#9ad2f8 55%,#d8eefc 100%); }
.sc-clouds .cloud{
  position:absolute; border-radius:100px; background:rgba(255,255,255,.92);
  filter:blur(1px); animation:cdDrift linear infinite;
}
.sc-clouds .cloud::before, .sc-clouds .cloud::after{
  content:""; position:absolute; border-radius:100px; background:inherit;
}
.sc-clouds .cloud::before{ width:55%; height:170%; left:12%; top:-70%; }
.sc-clouds .cloud::after{ width:40%; height:140%; right:14%; top:-48%; }
@keyframes cdDrift{ from{ transform:translateX(-40vw) } to{ transform:translateX(120vw) } }
.sc-clouds .sunspot{
  position:absolute; top:8%; right:12%; width:22vmin; height:22vmin; border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,210,.95),rgba(255,240,180,0) 70%);
  animation:cdPulse 9s ease-in-out infinite alternate;
}
@keyframes cdPulse{ from{ opacity:.7; transform:scale(1) } to{ opacity:1; transform:scale(1.08) } }

/* ================= City Skyline ================= */
.sc-skyline{ background:linear-gradient(180deg,#070b1a 0%,#141d3a 50%,#3b2a44 100%); }
.sc-skyline .tower{
  position:absolute; bottom:0; background:#070a16;
  box-shadow:0 0 30px rgba(0,0,0,.5);
}
.sc-skyline .win{
  position:absolute; width:3px; height:5px; background:#ffd98a; opacity:.85;
  animation:skFlick ease-in-out infinite alternate;
}
@keyframes skFlick{ from{ opacity:.25 } to{ opacity:.95 } }
.sc-skyline .moon{
  position:absolute; top:10%; left:14%; width:12vmin; height:12vmin; border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fffdf2,#e8e2c8 62%,#cfc7a6);
  box-shadow:0 0 70px rgba(255,250,220,.5);
}
.sc-skyline .star{
  position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:stTwinkle ease-in-out infinite alternate;
}

/* ================= Forest ================= */
.sc-forest{ background:linear-gradient(180deg,#0a1a14 0%,#123024 48%,#1d4433 100%); }
.sc-forest .trunk{
  position:absolute; bottom:0; background:#050f0b; border-radius:2px 2px 0 0;
}
.sc-forest .canopy{
  position:absolute; left:-4%; right:-4%; top:0; height:34%;
  background:radial-gradient(ellipse at 20% 100%,#08170f 0 30%,transparent 31%),
             radial-gradient(ellipse at 55% 100%,#0a1c13 0 34%,transparent 35%),
             radial-gradient(ellipse at 85% 100%,#08170f 0 30%,transparent 31%);
}
.sc-forest .fly{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#d6ff8a; box-shadow:0 0 10px 3px rgba(190,255,120,.65);
  animation:ffFloat ease-in-out infinite alternate;
}
@keyframes ffFloat{
  from{ transform:translate(0,0); opacity:.25 }
  to{ transform:translate(26px,-32px); opacity:1 }
}
.sc-forest .haze{
  position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(180deg,transparent,rgba(150,220,180,.14));
}

/* ================= Galaxy ================= */
.sc-galaxy{ background:radial-gradient(ellipse at 50% 50%,#1a0b33 0%,#0a0618 55%,#03020a 100%); }
.sc-galaxy .neb{
  position:absolute; border-radius:50%; filter:blur(46px);
  mix-blend-mode:screen; animation:gxSwirl linear infinite;
}
@keyframes gxSwirl{ from{ transform:rotate(0) scale(1) } to{ transform:rotate(360deg) scale(1.1) } }
.sc-galaxy .star{
  position:absolute; border-radius:50%; background:#fff;
  animation:stTwinkle ease-in-out infinite alternate;
}
.sc-galaxy .dust{
  position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 50%,rgba(255,220,255,.16),transparent 62%);
  animation:gxSwirl 90s linear infinite reverse;
}

/* ================= Ocean Waves ================= */
.sc-ocean{ background:linear-gradient(180deg,#0b2a4a 0%,#12507e 42%,#1f7fa8 72%,#e6d6ac 100%); }
.sc-ocean .wave{
  position:absolute; left:-50%; right:-50%; height:26%;
  border-radius:44%; background:rgba(255,255,255,.10);
  animation:owRoll linear infinite;
}
@keyframes owRoll{ from{ transform:translateX(-8%) rotate(0deg) } to{ transform:translateX(8%) rotate(360deg) } }
.sc-ocean .foam{
  position:absolute; left:0; right:0; height:3px; background:rgba(255,255,255,.55);
  filter:blur(1px); animation:owFoam ease-in-out infinite alternate;
}
@keyframes owFoam{ from{ transform:translateY(0); opacity:.35 } to{ transform:translateY(-7px); opacity:.85 } }
.sc-ocean .sand{
  position:absolute; left:0; right:0; bottom:0; height:14%;
  background:linear-gradient(180deg,#e6d6ac,#c9b184);
}
.sc-ocean .gull{
  position:absolute; width:16px; height:6px; opacity:.55;
  border-top:2px solid rgba(255,255,255,.8);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  animation:owGull linear infinite;
}
@keyframes owGull{ from{ transform:translateX(-10vw) } to{ transform:translateX(110vw) } }

/* ================= Thunderstorm ================= */
.sc-storm{ background:linear-gradient(180deg,#0a0d16 0%,#151b2b 55%,#232b3d 100%); }
.sc-storm .sheet{
  position:absolute; inset:0; background:rgba(190,215,255,.85);
  opacity:0; animation:stFlash steps(1) infinite;
}
@keyframes stFlash{
  0%,92%{ opacity:0 } 93%{ opacity:.55 } 94%{ opacity:0 }
  95%{ opacity:.85 } 96%{ opacity:.1 } 97%{ opacity:.45 } 98%,100%{ opacity:0 }
}
.sc-storm .bolt{
  position:absolute; top:0; width:3px; background:#eaf3ff;
  filter:blur(.5px) drop-shadow(0 0 8px rgba(190,220,255,.9));
  opacity:0; animation:stBolt steps(1) infinite;
}
@keyframes stBolt{ 0%,94%{ opacity:0 } 95%{ opacity:1 } 96%,100%{ opacity:0 } }
.sc-storm .cloudmass{
  position:absolute; left:-20%; right:-20%; top:-8%; height:46%;
  background:radial-gradient(ellipse at 30% 80%,#2b3348 0 40%,transparent 62%),
             radial-gradient(ellipse at 70% 85%,#232a3d 0 44%,transparent 66%);
  filter:blur(8px); animation:stCreep 26s ease-in-out infinite alternate;
}
@keyframes stCreep{ from{ transform:translateX(-3%) } to{ transform:translateX(3%) } }
.sc-storm .drop{
  position:absolute; top:-12%; width:1.5px; background:linear-gradient(rgba(210,230,255,0),rgba(210,230,255,.75));
  animation:rnFall linear infinite;
}

/* ================= Gradient Flow ================= */
.sc-gradient{ background:#0b0f1c; }
.sc-gradient .blob{
  position:absolute; border-radius:50%; filter:blur(60px);
  mix-blend-mode:screen; opacity:.75;
  animation:gfDrift ease-in-out infinite alternate;
}
@keyframes gfDrift{
  from{ transform:translate(-6%,-4%) scale(1) }
  to{ transform:translate(8%,6%) scale(1.25) }
}

/* ================= Lanterns ================= */
.sc-lanterns{ background:linear-gradient(180deg,#08111f 0%,#132239 50%,#2a2036 100%); }
.sc-lanterns .lantern{
  position:absolute; border-radius:44% 44% 50% 50%;
  background:radial-gradient(circle at 50% 70%,#ffd98a,#ff9440 62%,#e2652a);
  box-shadow:0 0 22px 6px rgba(255,170,80,.45);
  animation:ltRise linear infinite;
}
.sc-lanterns .lantern::after{
  content:""; position:absolute; left:35%; right:35%; bottom:-18%; height:18%;
  background:rgba(255,190,110,.45); border-radius:0 0 40% 40%;
}
@keyframes ltRise{
  from{ transform:translateY(110%) translateX(0) rotate(-3deg); opacity:0 }
  12%{ opacity:1 }
  to{ transform:translateY(-30vh) translateX(6vw) rotate(3deg); opacity:0 }
}
.sc-lanterns .star{
  position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:stTwinkle ease-in-out infinite alternate;
}
.sc-lanterns .water{
  position:absolute; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(180deg,rgba(255,170,90,.10),rgba(10,18,32,.85));
}