/* Holiday decorations (built by deco.js). Everything is pointer-events:none and sits above the page. */
.deco{position:absolute;top:var(--navb,0px);left:0;width:100%;height:var(--dh,100vh);pointer-events:none;z-index:0;overflow:hidden;contain:paint}
.deco>*{position:absolute;pointer-events:none}
.deco svg{display:block;width:100%;height:auto}.deco>svg.defs{width:0;height:0;overflow:hidden}
@keyframes swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes drop{0%,100%{height:50px}50%{height:150px}}
@keyframes fly{0%{transform:translate(-120px,0)}25%{transform:translate(25vw,-24px)}50%{transform:translate(55vw,14px)}75%{transform:translate(80vw,-18px)}100%{transform:translate(calc(100vw + 120px),0)}}
@keyframes flap{0%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
@keyframes drift{0%{transform:translateX(-40vw)}100%{transform:translateX(120vw)}}
@keyframes driftb{0%{transform:translateX(120vw)}100%{transform:translateX(-40vw)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 18px 4px var(--c),0 0 36px 10px var(--c);opacity:1}50%{box-shadow:0 0 6px 1px var(--c);opacity:.45}}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.grass{--sw:1}@keyframes gsway{0%,100%{transform:skewX(-1.6deg)}50%{transform:skewX(1.6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drise{0%{transform:translateY(0);opacity:0}10%{opacity:.5}100%{transform:translateY(-120vh);opacity:0}}
@keyframes sweep{0%{transform:rotate(-28deg)}100%{transform:rotate(28deg)}}
@keyframes flapflag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes shimmer{0%,100%{opacity:.4}50%{opacity:.62}}
@keyframes flicker{0%,100%{opacity:.8}45%{opacity:1}55%{opacity:.7}}

/* ===== Halloween ===== */
.web{width:210px;opacity:.9}.web-tl{top:0;left:0}.web-tr{top:0;right:0;transform:scaleX(-1)}.web-bl{bottom:0;left:0;width:150px;transform:scaleY(-1)}.web-br{bottom:0;right:0;width:150px;transform:scale(-1,-1)}
.spwrap{top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swing 4.6s ease-in-out infinite}.spwrap>*{position:static}
.thr{width:1.5px;background:linear-gradient(#ddd,#999);height:80px;animation:drop 7s ease-in-out infinite}.spwrap svg{width:40px;margin-top:-10px;position:relative;z-index:1}.spwrap .thr{position:relative;z-index:0}
.moon{top:64px;right:3%;width:clamp(150px,16vw,230px);animation:bob 9s ease-in-out infinite;opacity:.95}
.fbat{left:0;animation:fly 20s linear infinite}.fbat svg{width:58px;overflow:visible}.fbat .wing{transform-box:fill-box;animation:wingl .28s ease-in-out infinite alternate}.fbat .wl{transform-origin:100% 60%}.fbat .wr{transform-origin:0% 60%;animation-name:wingr}
@keyframes wingl{from{transform:rotate(22deg)}to{transform:rotate(-26deg)}}@keyframes wingr{from{transform:rotate(-22deg)}to{transform:rotate(26deg)}}
.haunt{left:0;right:0;bottom:0;z-index:-1}.haunt svg{width:100%;height:auto;overflow:visible}.haunt .win{animation:flicker 3.2s ease-in-out infinite}.haunt .win:nth-of-type(2n){animation-delay:-1.1s}.haunt .win:nth-of-type(3n){animation-delay:-2s}.haunt .jl{animation:flicker 2.1s ease-in-out infinite}
.fog{left:-20%;width:140%;height:170px;bottom:0;background:radial-gradient(ellipse at 50% 100%,rgba(235,225,255,.18),transparent 70%);animation:drift 38s linear infinite alternate}.fog2{bottom:-30px;height:200px;animation:driftb 52s linear infinite alternate;opacity:.8}
body[data-fx=halloween] .card::after{content:"";position:absolute;top:0;left:0;width:92px;height:92px;pointer-events:none;opacity:.8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23efe8ff' stroke-opacity='.4' stroke-width='1'%3E%3Cpath d='M0 0L100 0M0 0L100 30M0 0L100 62M0 0L84 100M0 0L50 100M0 0L0 100'/%3E%3Cpath d='M26 0Q20 20 0 26M54 0Q38 38 0 54M84 0Q58 58 0 84'/%3E%3C/g%3E%3C/svg%3E") no-repeat;border-top-left-radius:inherit}
body[data-fx=halloween] .card:nth-child(even)::after{left:auto;right:0;transform:scaleX(-1)}

/* ===== Autumn / Thanksgiving ===== */
body[data-fx=thanksgiving]{background:radial-gradient(900px 520px at 88% 4%,rgba(255,170,50,.30),transparent 62%),radial-gradient(1000px 640px at 0 100%,rgba(190,70,12,.28),transparent 62%),var(--bg) fixed!important}
.branch{top:-12px;width:min(390px,38vw)}.bl{left:-12px}.br{right:-12px;transform:scaleX(-1)}.branch .sw{transform-origin:0 0;animation:sway 7s ease-in-out infinite}.br .sw{animation-delay:-3s}
.fogwarm{left:0;right:0;bottom:0;height:180px;background:linear-gradient(transparent,rgba(255,150,40,.12))}
.pile{left:0;bottom:0;width:100%;height:70px}.pile svg{height:100%}
.harvest{bottom:26px;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite}.harvest svg{width:100%}

/* ===== Christmas ===== */
.wire{top:0;left:0;height:34px}.wire svg{height:34px}
.bulb{width:10px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:glowpulse 2.4s ease-in-out infinite}
.bulb.c0{--c:#ff3b3b;background:#ff5f5f}.bulb.c1{--c:#ffd23f;background:#ffe27a}.bulb.c2{--c:#3ddc84;background:#7dffb0}.bulb.c3{--c:#4da3ff;background:#8cc4ff}
.snowbank{left:0;bottom:0;width:100%;height:96px}.snowbank svg{height:100%}
.tree{bottom:30px;width:clamp(100px,12vw,180px)}.tree img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}.tr img{transform:scaleX(-1)}.tl{left:2%}.tr{right:2%}.tree .tw{animation:twinkle 1.8s ease-in-out infinite}.tree .tw:nth-child(2n){animation-delay:-.6s}.tree .tw:nth-child(3n){animation-delay:-1.2s}
.gifts{bottom:34px;display:flex;gap:2px;align-items:flex-end;width:clamp(86px,10vw,130px)}.gifts svg{width:54%}.gifts svg+svg{width:44%}.gl{left:calc(2% + clamp(100px,12vw,180px) - 6px)}.gr{right:calc(2% + clamp(100px,12vw,180px) - 6px)}

/* ===== New Year ===== */
.star{width:3px;height:3px;border-radius:50%;animation:twinkle 3s ease-in-out infinite}.star.g{background:#ffe27a;box-shadow:0 0 8px #ffd23f}.star.w{background:#fff;box-shadow:0 0 8px #fff}.star.b{background:#8cc4ff;box-shadow:0 0 8px #4da3ff}
.beam{bottom:-30px;width:260px;height:115vh;background:linear-gradient(to top,rgba(255,236,160,.34),transparent 80%);clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;animation:sweep 9s ease-in-out infinite alternate}.bm1{left:6%}.bm2{right:6%;animation-direction:alternate-reverse;animation-duration:11s}
.glowbase{left:0;right:0;bottom:0;height:160px;background:radial-gradient(ellipse at 50% 100%,rgba(250,204,21,.22),transparent 70%)}

/* ===== Valentine's ===== */
.bokeh{bottom:-160px;border-radius:50%;background:radial-gradient(circle,rgba(255,120,170,.5),rgba(255,120,170,0) 70%);filter:blur(4px);animation:drise 30s linear infinite}
.hg .ht{display:block;line-height:0;margin-top:-2px}.hg .ht svg{width:30px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}.hg{animation-duration:3.8s}.hg .thr{animation:none;width:1px}

/* ===== St. Patrick's ===== */
.rainbow{top:0;left:0;width:100%;height:min(72vh,560px);opacity:.62;filter:blur(.8px) saturate(1.15);--m1:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%);--m2:linear-gradient(to bottom,#000 55%,transparent 98%);-webkit-mask-image:var(--m1),var(--m2);mask-image:var(--m1),var(--m2);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-size:240% 100%,100% 100%;mask-size:240% 100%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:rbsweep 16s ease-in-out infinite alternate}.rainbow svg{height:100%}
@keyframes rbsweep{from{-webkit-mask-position:0% 0,0 0;mask-position:0% 0,0 0}to{-webkit-mask-position:100% 0,0 0;mask-position:100% 0,0 0}}
.cloud{height:46px;width:150px;border-radius:50px;background:rgba(255,255,255,.2);filter:blur(7px)}.cloud.c1{top:12%;animation:drift 70s linear infinite}.cloud.c2{top:30%;width:200px;animation:drift 95s linear infinite;animation-delay:-40s}.cloud.c3{top:20%;animation:drift 80s linear infinite;animation-delay:-20s}
.pot{bottom:12px;right:2%;width:clamp(90px,11vw,160px)}.pot .sp{animation:twinkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* ===== Spring ===== */
.sunglow{top:-120px;left:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,225,120,.38),transparent 68%);animation:shimmer 7s ease-in-out infinite}
.grass{left:0;bottom:0;width:100%;transform-origin:50% 100%}.grass svg{height:100%}.grass.g3{animation:gsway 9s ease-in-out infinite}.grass.g2{animation:gsway 7s ease-in-out infinite reverse}.grass.g1{animation:gsway 5s ease-in-out infinite}.soil{left:0;right:0;bottom:0;height:16px;background:linear-gradient(#143d1e,#0b2412)}
.flower{bottom:6px;transform-origin:50% 100%;animation:sway 3.8s ease-in-out infinite}.flower svg{width:100%}

/* ===== 4th of July ===== */
.flag{width:28px;transform-origin:50% 0;animation:flapflag 3s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}.flag svg{width:100%;border-radius:0 0 3px 3px}
.firew{aspect-ratio:1;transform:scale(0);opacity:0;animation:burst 8s ease-out infinite;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px rgba(255,255,255,.35))}.firew svg{width:100%}
@keyframes burst{0%{transform:scale(.05);opacity:0}6%{opacity:1}55%{transform:scale(1);opacity:.9}100%{transform:scale(1.18);opacity:0}}

/* ===== Summer / beach ===== */
body[data-fx=summer]{background:linear-gradient(180deg,#0a2a43 0%,#0f5c80 38%,#2aa6bf 68%,#f3dca4 100%) fixed!important}
body[data-fx=summer] .card{background:rgba(5,40,62,.62)}body[data-fx=summer] .nav{background:rgba(6,36,58,.7)}
.sun{top:8px;right:-3%;width:clamp(180px,26vw,380px);mix-blend-mode:screen}.sun .rays{transform-origin:100px 100px;animation:spin 140s linear infinite}.sun svg{overflow:visible}
.gull{left:0;animation:drift 34s linear infinite}
/*x*/.palm{bottom:18px;width:clamp(170px,21vw,300px);z-index:0;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}.pl{left:-1%}.pr{right:-1%;transform:scaleX(-1);animation-delay:-3s}
.wv{left:0;bottom:0;width:200%;height:150px;animation:slide 14s linear infinite}.wv svg{height:100%}.wv.w2{animation-duration:20s;animation-direction:reverse;bottom:-8px}.wv.w3{animation-duration:27s;bottom:-16px}
.sand{left:0;right:0;bottom:0;height:40px}.sand svg{height:100%}
.shell{bottom:2px;width:28px}.shell svg{width:100%}.umb{bottom:8px;left:30%;width:clamp(60px,7vw,96px);transform-origin:50% 100%;transform:rotate(-8deg)}

@media(max-width:700px){.web{width:110px}.web-bl,.web-br{display:none}.branch{width:200px}.tree,.palm,.pot,.harvest,.gifts{display:none}.moon,.sun{transform:scale(.7);transform-origin:100% 0}}
body:has(#fxbanner) .deco .wire,body:has(#fxbanner) .deco .bulb{margin-top:36px}
body[data-deco][data-fx=halloween] .wave-div,body[data-deco][data-fx=summer] .wave-div,body[data-deco][data-fx=thanksgiving] .wave-div,body[data-deco][data-fx=christmas] .wave-div,body[data-deco][data-fx=spring] .wave-div,body[data-deco][data-fx=stpatrick] .wave-div,body[data-deco][data-fx=newyear] .wave-div,body[data-deco][data-fx=july4] .wave-div,body[data-deco][data-fx=valentines] .wave-div{visibility:hidden}

/* ===== Your own look: water ===== */
.oceanfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.oceanfx .ray{position:absolute;top:-10%;width:22vw;height:120vh;background:linear-gradient(to bottom,rgba(150,230,255,.14),transparent 70%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);transform-origin:50% 0;animation:sweep 14s ease-in-out infinite alternate}
.oceanfx .r1{left:10%}.oceanfx .r2{left:56%;animation-duration:19s;animation-direction:alternate-reverse}.oceanfx .r3{left:82%;width:14vw;animation-duration:23s}
.owaves{position:absolute;left:0;right:0;bottom:0;height:150px}
.owaves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:slide 16s linear infinite}
.owaves svg:nth-child(2){animation-duration:11s;animation-direction:reverse;bottom:-10px}.owaves svg:nth-child(3){animation-duration:24s;bottom:-20px}
.ow1{fill:var(--primary);opacity:.24}.ow2{fill:var(--secondary);opacity:.22}.ow3{fill:#bff6ff;opacity:.14}
@media(max-width:700px){.owaves{height:100px}.oceanfx .ray{display:none}}

.hills{left:0;bottom:0;width:100%;height:130px}.hills svg{height:100%}.skyline{left:0;bottom:0;width:100%;height:clamp(90px,17vh,160px)}.skyline svg{height:100%}.skyline .win{animation:twinkle 5s ease-in-out infinite}
.deco-newyear .glowbase{z-index:1}