.theme-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Above page content / sticky header; below nav dropdowns (200+) and modals */
  z-index: 120;
}
.theme-scene .ts {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 60px);
  will-change: transform;
}
.theme-scene .ts svg { display: block; width: 100%; height: auto; overflow: visible; }
.theme-scene .ts-bob { animation: ts-bob 1.8s ease-in-out infinite; }
.theme-scene .back .ts-flip { transform: scaleX(-1); }
.theme-scene svg * { transform-box: fill-box; }

/* Travel paths */
.theme-scene .ts-fly { animation: ts-fly var(--dur, 14s) linear infinite var(--delay, 0s); }
.theme-scene .ts-roam-a { animation: ts-roam-a var(--dur, 22s) ease-in-out infinite var(--delay, 0s); }
.theme-scene .ts-roam-b { animation: ts-roam-b var(--dur, 26s) ease-in-out infinite var(--delay, 0s); }
.theme-scene .ts-roam-c { animation: ts-roam-c var(--dur, 30s) ease-in-out infinite var(--delay, 0s); }
.theme-scene [class*="ts-roam"] .ts-bob { animation-duration: .9s; }
.theme-scene .ts-glide { animation: ts-glide var(--dur, 15s) ease-in-out infinite var(--delay, 0s); }
.theme-scene .ts-fall { top: 0; animation: ts-fall var(--dur, 14s) linear infinite var(--delay, 0s); }
.theme-scene .ts-fall .ts-bob,
.theme-scene .ts-spot .ts-bob,
.theme-scene .ts-corner .ts-bob { animation: none; }
.theme-scene .back { animation-direction: reverse; }
.theme-scene .ts-corner { top: auto; bottom: 18px; }
.theme-scene .ts-left { left: 18px; }
.theme-scene .ts-right { left: auto; right: 22px; }

/* Bat */
.theme-scene .bat { filter: drop-shadow(0 0 3px rgba(253, 186, 116, .95)) drop-shadow(0 0 10px rgba(249, 115, 22, .55)); }
.theme-scene .wing-l { transform-origin: 100% 40%; animation: ts-flap-l .3s ease-in-out infinite alternate; }
.theme-scene .wing-r { transform-origin: 0% 40%; animation: ts-flap-r .3s ease-in-out infinite alternate; }
.theme-scene .eye { transform-origin: center; animation: ts-blink 3.6s infinite; }

.theme-scene .ts-corner svg { transform-origin: 50% 100%; }

/* Snowflake */
.theme-scene .spin { animation: ts-spin 7s linear infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }

/* Firework */
.theme-scene .fw * { animation-duration: var(--dur, 5s); animation-delay: var(--delay, 0s); animation-iteration-count: infinite; }
.theme-scene .fw .rocket { animation-name: ts-fw-rocket; animation-timing-function: linear; }
.theme-scene .fw .flash { transform-origin: center; filter: blur(5px); animation-name: ts-fw-flash; }
.theme-scene .fw .grav { animation-name: ts-fw-grav; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(255, 220, 140, .8)); }
.theme-scene .fw .spk { animation-name: ts-fw-spark; animation-timing-function: linear; }
.theme-scene .fw .trail { animation-name: ts-fw-trail; }
.theme-scene .fw .ember { transform-origin: center; animation-name: ts-fw-ember; animation-timing-function: linear; }

/* Star */
.theme-scene .twinkle { transform-origin: center; animation: ts-twinkle var(--dur, 2.6s) ease-in-out infinite var(--delay, 0s); filter: drop-shadow(0 0 6px #fde68a); }

/* Paper plane */
.theme-scene .bank { transform-origin: center; animation: ts-bank 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }

/* Book */
.theme-scene .page-l { transform-origin: 100% 60%; animation: ts-page-l .55s ease-in-out infinite alternate; }
.theme-scene .page-r { transform-origin: 0% 60%; animation: ts-page-r .55s ease-in-out infinite alternate; }

/* Pencil */
.theme-scene .line { stroke-dasharray: 160; animation: ts-draw 4s ease-in-out infinite; }
.theme-scene .pen { transform-box: view-box; animation: ts-pen 4s ease-in-out infinite; }
.theme-scene .pen-wiggle { transform-box: view-box; animation: ts-scribble .28s ease-in-out infinite alternate; }
@keyframes ts-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ts-fly {
  0% { transform: translate3d(-20vw, 0, 0); }
  25% { transform: translate3d(18vw, -34px, 0); }
  50% { transform: translate3d(50vw, 22px, 0); }
  75% { transform: translate3d(82vw, -26px, 0); }
  100% { transform: translate3d(120vw, 0, 0); }
}
@keyframes ts-roam-a {
  0% { transform: translate3d(-12vw, 40vh, 0) rotate(0deg); }
  14% { transform: translate3d(18vw, 28vh, 0) rotate(-12deg); }
  28% { transform: translate3d(36vw, 64vh, 0) rotate(14deg); }
  42% { transform: translate3d(58vw, 34vh, 0) rotate(-10deg); }
  54% { transform: translate3d(70vw, 72vh, 0) rotate(12deg); }
  68% { transform: translate3d(88vw, 44vh, 0) rotate(-8deg); }
  80%, 100% { transform: translate3d(112vw, 30vh, 0) rotate(0deg); }
}
@keyframes ts-roam-b {
  0% { transform: translate3d(112vw, 70vh, 0) rotate(0deg); }
  12% { transform: translate3d(84vw, 48vh, 0) rotate(10deg); }
  24% { transform: translate3d(70vw, 80vh, 0) rotate(-12deg); }
  38% { transform: translate3d(50vw, 38vh, 0) rotate(8deg); }
  48% { transform: translate3d(40vw, 56vh, 0) rotate(-14deg); }
  58% { transform: translate3d(46vw, 30vh, 0) rotate(12deg); }
  72% { transform: translate3d(22vw, 62vh, 0) rotate(-8deg); }
  86%, 100% { transform: translate3d(-12vw, 44vh, 0) rotate(0deg); }
}
@keyframes ts-roam-c {
  0% { transform: translate3d(-12vw, 76vh, 0) rotate(0deg); }
  18% { transform: translate3d(24vw, 50vh, 0) rotate(-14deg); }
  30% { transform: translate3d(34vw, 30vh, 0) rotate(-6deg); }
  40% { transform: translate3d(24vw, 44vh, 0) rotate(16deg); }
  52% { transform: translate3d(42vw, 66vh, 0) rotate(-10deg); }
  68% { transform: translate3d(66vw, 38vh, 0) rotate(10deg); }
  84%, 100% { transform: translate3d(112vw, 56vh, 0) rotate(0deg); }
}
@keyframes ts-glide {
  0% { transform: translate3d(-15vw, 0, 0) rotate(-4deg); }
  30% { transform: translate3d(30vw, -50px, 0) rotate(-14deg); }
  42% { transform: translate3d(40vw, -70px, 0) rotate(-40deg); }
  52% { transform: translate3d(44vw, -20px, 0) rotate(20deg); }
  64% { transform: translate3d(56vw, 30px, 0) rotate(6deg); }
  100% { transform: translate3d(118vw, -10px, 0) rotate(-6deg); }
}
@keyframes ts-fall {
  0% { transform: translate3d(0, -12vh, 0); }
  25% { transform: translate3d(30px, 20vh, 0); }
  50% { transform: translate3d(-22px, 50vh, 0); }
  75% { transform: translate3d(26px, 80vh, 0); }
  100% { transform: translate3d(0, 112vh, 0); }
}
@keyframes ts-flap-l { from { transform: rotate(30deg) scaleY(.9); } to { transform: rotate(-34deg) scaleY(1.05); } }
@keyframes ts-flap-r { from { transform: rotate(-30deg) scaleY(.9); } to { transform: rotate(34deg) scaleY(1.05); } }
@keyframes ts-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-fw-rocket {
  0% { transform: translate(0, 240px); opacity: 0; animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  3% { opacity: 1; }
  14% { transform: translate(3px, 110px); }
  28% { transform: translate(-1px, 0); opacity: 1; }
  29%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ts-fw-flash {
  0%, 28% { transform: scale(.2); opacity: 0; }
  30% { transform: scale(1.1); opacity: .95; }
  40%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes ts-fw-grav {
  0%, 28% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  100% { transform: translateY(46px); }
}
@keyframes ts-fw-spark {
  0%, 28% { transform: translate(0, 0); opacity: 0; animation-timing-function: cubic-bezier(.05, .8, .25, 1); }
  29% { opacity: 1; }
  60% { transform: translate(var(--x), var(--y)); animation-timing-function: ease-out; }
  74% { opacity: 1; }
  92%, 100% { transform: translate(calc(var(--x) * 1.07), calc(var(--y) * 1.07)); opacity: 0; }
}
@keyframes ts-fw-trail {
  0%, 28% { opacity: 0; }
  30% { opacity: .95; }
  56%, 100% { opacity: 0; }
}
@keyframes ts-fw-ember {
  0%, 28% { transform: scale(1.5); opacity: 1; }
  44% { transform: scale(1.15); }
  62% { transform: scale(1); opacity: .35; }
  65% { opacity: 1; }
  69% { transform: scale(.85); opacity: .3; }
  72% { opacity: 1; }
  76% { transform: scale(.7); opacity: .25; }
  79% { opacity: .9; }
  84%, 100% { transform: scale(.55); opacity: .4; }
}
@keyframes ts-twinkle {
  0%, 100% { transform: scale(.35) rotate(0deg); opacity: .25; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}
@keyframes ts-bank { from { transform: rotate(-8deg) scaleY(.92); } to { transform: rotate(8deg) scaleY(1); } }
@keyframes ts-page-l { from { transform: rotate(24deg) scaleY(.92); } to { transform: rotate(-26deg); } }
@keyframes ts-page-r { from { transform: rotate(-24deg) scaleY(.92); } to { transform: rotate(26deg); } }
@keyframes ts-draw {
  0% { stroke-dashoffset: 160; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 160; opacity: 0; }
}
@keyframes ts-pen {
  0% { transform: translate(0, 0); }
  70% { transform: translate(78px, 0); }
  85% { transform: translate(78px, -12px); }
  100% { transform: translate(0, 0); }
}
@keyframes ts-scribble { from { transform: translateY(-6px); } to { transform: translateY(5px); } }
.theme-scene-follow { z-index: 150; }
.theme-scene .ts-follow {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 40px);
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.theme-scene .ts-follow.is-on { opacity: 1; }
.theme-scene .ts-follow svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (hover: none), (pointer: coarse) {
  .theme-scene-follow { display: none; }
}

@media (max-width: 640px) {
  .theme-scene .ts-extra { display: none; }
  .theme-scene .ts { width: calc(var(--w, 60px) * .7); }
  .theme-scene .ts-corner { bottom: 10px; }
}
/* Theme motion stays on when the admin enables a seasonal look.
   (Do not freeze fireworks/snow under prefers-reduced-motion.) */