/* Category scenes (generated by holiday-lights/_tools/art.py).
   Always-on: twinkling bulbs, falling snow, gentle motion.
   .play (hover, tap, click or scrolling into view): a category-specific "show". */
.scene{display:block;width:100%;height:auto}
.scene .b{transform-box:fill-box;transform-origin:50% 30%}
.scene .st{animation:sc-twinkle 3.4s ease-in-out infinite}
.scene .tw{animation:sc-twinkle 2.6s ease-in-out infinite}
.scene .spk{transform-box:fill-box;transform-origin:50% 50%;animation:sc-spark 2.8s ease-in-out infinite}
.scene .glow{animation:sc-glow 2.4s ease-in-out infinite}
.scene .fall{animation:sc-fall 9s linear infinite}
.scene .flame{transform-box:fill-box;transform-origin:50% 100%;animation:sc-flame .9s ease-in-out infinite alternate}
.scene .chase{animation:sc-chase 1.2s steps(1) infinite}
.scene .chase2{animation:sc-chase2 1.6s linear infinite}
.scene .wave{animation:sc-wave 3.2s ease-in-out infinite}
.scene .flicker{animation:sc-flicker 1.7s steps(2) infinite}
.scene .spin,.scene .spin2,.scene .spin3,.scene .meter{transform-box:fill-box;transform-origin:50% 50%;animation:sc-spin 10s linear infinite}
.scene .spin2{animation-duration:6s}.scene .spin3{animation-duration:14s}
.scene .meter{transform-origin:50% 100%;animation-duration:2.4s}
.scene .bob{animation:sc-bob 2.2s ease-in-out infinite alternate}
.scene .hop{animation:sc-bob 1.6s ease-in-out infinite alternate}
.scene .hover-bob{animation:sc-bob 2.6s ease-in-out infinite alternate}
.scene .nose{animation:sc-twinkle 1.2s ease-in-out infinite}
.scene .beam{animation:sc-beam 5s ease-in-out infinite alternate}
.scene .strand{animation:sc-strand 1.6s linear infinite}
.scene .note{animation:sc-note 3.2s linear infinite}
.scene .pinwheel{transform-box:fill-box;transform-origin:50% 50%;animation:sc-spin 2.4s linear infinite}
.scene .seq{animation:sc-seq 1.5s steps(1) infinite}
.scene .arm{animation:sc-arm 1.1s ease-in-out infinite alternate}
.scene .graze{animation:sc-graze 4s ease-in-out infinite}
.scene .nod{animation:sc-nod 2.2s ease-in-out infinite alternate}
.scene .train{animation:sc-train 9s linear infinite}
.scene .puffs{animation:sc-puffs 1s ease-out infinite}
.scene .runup{animation:sc-wave 1.8s ease-in-out infinite}
.scene .sway{animation:sc-sway 2.8s ease-in-out infinite alternate}
.scene .puff{animation:sc-puff 3.2s ease-in-out infinite}
.scene .zap{transform-box:fill-box;transform-origin:50% 50%;animation:sc-zap 2.6s steps(1) infinite}
.scene .neon{filter:drop-shadow(0 0 2px rgba(255,227,163,.95))}

/* ---- the show: one-time effects layered on top; running animations keep their steady pace ---- */
.scene.play .b{animation:sc-pop .7s ease-out both;animation-delay:calc(var(--i) * 22ms)}
.scene.play .hop{animation:sc-hop .5s ease-out 4 alternate}
.scene.play .sleigh{animation:sc-sleigh 2.6s ease-in-out}
.scene.play .blackout{animation:sc-blackout 2.2s ease-out}
.scene.play .puff{animation:sc-boing 1.3s ease-out}

@keyframes sc-twinkle{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sc-spark{0%,100%{transform:scale(.35);opacity:.3}50%{transform:scale(1.1);opacity:1}}
@keyframes sc-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sc-fall{from{transform:translateY(0)}to{transform:translateY(230px)}}
@keyframes sc-flame{from{transform:scale(1,1) rotate(-4deg)}to{transform:scale(.8,1.12) rotate(4deg)}}
@keyframes sc-chase{0%{opacity:1}50%{opacity:.2}}
@keyframes sc-chase2{0%,100%{opacity:.2}15%{opacity:1}40%{opacity:.2}}
@keyframes sc-wave{0%,100%{opacity:.3}12%{opacity:1}32%{opacity:.3}}
@keyframes sc-flicker{0%{opacity:1}50%{opacity:.62}}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes sc-hop{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes sc-beam{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes sc-strand{0%,100%{opacity:.35}12%{opacity:1}45%{opacity:.35}}
@keyframes sc-note{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(12px,-60px);opacity:0}}
@keyframes sc-seq{0%{opacity:1}33.3%{opacity:0}}
@keyframes sc-arm{from{transform:rotate(-30deg)}to{transform:rotate(22deg)}}
@keyframes sc-graze{0%,30%,100%{transform:rotate(0)}45%,80%{transform:rotate(56deg)}}
@keyframes sc-nod{from{transform:rotate(-6deg)}to{transform:rotate(12deg)}}
@keyframes sc-train{from{transform:translateX(-110px)}to{transform:translateX(340px)}}
@keyframes sc-puffs{from{transform:translateY(4px);opacity:.9}to{transform:translateY(-8px);opacity:0}}
@keyframes sc-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes sc-puff{0%,100%{transform:scale(1,1)}40%{transform:scale(1.02,.98)}70%{transform:scale(.99,1.02)}}
@keyframes sc-zap{0%,100%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:scale(1.2)}12%{opacity:0}48%{opacity:1;transform:scale(.9)}52%{opacity:0}}
@keyframes sc-pop{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes sc-sleigh{0%{transform:translate(0,0)}45%{transform:translate(190px,-34px)}46%{transform:translate(-280px,40px)}100%{transform:translate(0,0)}}
@keyframes sc-blackout{0%{opacity:1}8%{opacity:.06}52%{opacity:.06}58%{opacity:1;filter:brightness(1.9)}100%{opacity:1;filter:brightness(1)}}
@keyframes sc-boing{0%{transform:scale(1,1)}18%{transform:scale(1.14,.72)}42%{transform:scale(.9,1.16)}62%{transform:scale(1.05,.94)}80%{transform:scale(.98,1.03)}100%{transform:scale(1,1)}}

/* tap / hover hint */
.scene-btn{display:block;position:relative;width:100%}
.scene-hit{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scene-hit:focus-visible{outline:3px solid #FFFFFF;outline-offset:-6px;box-shadow:inset 0 0 0 9px #12223F}
.scene-hint{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(10,16,36,.62);color:#FFFFFF;font:700 12px/1 'Nunito',system-ui,sans-serif;padding:6px 10px 6px 8px;border-radius:999px;pointer-events:none;backdrop-filter:blur(2px);transition:opacity .3s}
.scene-hint::before{content:"";width:7px;height:7px;border-radius:999px;background:#FFC94A;box-shadow:0 0 8px #FFC94A}
.scene-hint .h-hover{display:none}
@media (hover:hover){.scene-hint .h-hover{display:inline}.scene-hint .h-tap{display:none}}
.scene-btn:hover .scene-hint{opacity:0}

@media (prefers-reduced-motion: reduce){.scene *{animation:none!important}.scene .fall{display:none}.scene .train{transform:translateX(120px)}.scene-hint{display:none}}