/* The heroes' living backgrounds (templates/partials/hero-fx.html), instead of the grids they had: each niche its own
   slow motion behind the words — petals for the salon, bubbles for the car wash, steam for the sauna, the club's neon
   symbols, the barbershop's turning pole, the road's moving lines. Fourteen places shared by all; a theme gives the shape
   and the motion. Transforms and opacity only (the phone's GPU does it), never under the words' weight — everything is
   faint; «reduce motion» in the system stops it (a few shapes stay, still).
   Made by apps/platform/scripts/hero-fx.mjs — edit there, not here. */
/* the demo's intro (tpl-tour-intro): the niche's motion behind its card */
.tour-intro .hero-fx { z-index: 0; }
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-fx i {
  position: absolute; left: var(--x); top: var(--y); display: none; width: calc(var(--fx-size, 24px) * var(--s, 1)); aspect-ratio: 1;
  background: var(--fx-img, none) center / contain no-repeat; opacity: 0;
  animation: var(--fx-anim, none) calc(var(--fx-t, 14s) * var(--k, 1)) var(--fx-ease, linear) var(--d, 0s) infinite;
}
/* the fourteen places: where, how big, how fast, where in its cycle at the start */
.hero-fx i:nth-child(1) { --x: 3%; --y: 18%; --s: 1.2; --k: 1.1; --d: -3s; }
.hero-fx i:nth-child(2) { --x: 11%; --y: 62%; --s: .7; --k: .8; --d: -7s; }
.hero-fx i:nth-child(3) { --x: 19%; --y: 34%; --s: 1; --k: 1.3; --d: -1s; }
.hero-fx i:nth-child(4) { --x: 27%; --y: 80%; --s: .6; --k: .9; --d: -9s; }
.hero-fx i:nth-child(5) { --x: 36%; --y: 12%; --s: 1.4; --k: 1.2; --d: -5s; }
.hero-fx i:nth-child(6) { --x: 45%; --y: 54%; --s: .8; --k: 1; --d: -11s; }
.hero-fx i:nth-child(7) { --x: 53%; --y: 88%; --s: 1.1; --k: .75; --d: -2s; }
.hero-fx i:nth-child(8) { --x: 61%; --y: 26%; --s: .65; --k: 1.15; --d: -8s; }
.hero-fx i:nth-child(9) { --x: 69%; --y: 70%; --s: 1.3; --k: .95; --d: -4s; }
.hero-fx i:nth-child(10) { --x: 76%; --y: 8%; --s: .9; --k: 1.25; --d: -10s; }
.hero-fx i:nth-child(11) { --x: 83%; --y: 46%; --s: 1.5; --k: .85; --d: -6s; }
.hero-fx i:nth-child(12) { --x: 90%; --y: 84%; --s: .75; --k: 1.05; --d: -12s; }
.hero-fx i:nth-child(13) { --x: 95%; --y: 28%; --s: 1; --k: .9; --d: -2.5s; }
.hero-fx i:nth-child(14) { --x: 48%; --y: 38%; --s: .55; --k: 1.35; --d: -9.5s; }

/* ---------- the motions ---------- */
@keyframes fx-rise { 0% { transform: translateY(0) scale(.7); opacity: 0; } 12% { opacity: var(--fx-o, .9); } 80% { opacity: var(--fx-o, .9); } 100% { transform: translateY(-110vh) scale(1.05); opacity: 0; } }
@keyframes fx-rise-wobble {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; } 10% { opacity: var(--fx-o, .9); }
  25% { transform: translate(14px, -28vh) scale(.8); } 50% { transform: translate(-12px, -55vh) scale(.95); }
  75% { transform: translate(10px, -82vh) scale(1); opacity: var(--fx-o, .9); } 100% { transform: translate(-6px, -110vh) scale(1.05); opacity: 0; }
}
@keyframes fx-fall {
  0% { transform: translate(0, -12vh) rotate(0deg); opacity: 0; } 10% { opacity: var(--fx-o, .85); }
  50% { transform: translate(60px, 45vh) rotate(260deg); } 90% { opacity: var(--fx-o, .85); }
  100% { transform: translate(20px, 110vh) rotate(520deg); opacity: 0; }
}
@keyframes fx-twinkle { 0%, 62%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 74% { transform: scale(1) rotate(45deg); opacity: var(--fx-o, .9); } 86% { transform: scale(.4) rotate(90deg); opacity: .3; } }
@keyframes fx-drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: var(--fx-o, .7); } 33% { transform: translate(26px, -34px) rotate(40deg); }
  66% { transform: translate(-18px, -12px) rotate(-30deg); } 100% { transform: translate(0, 0) rotate(0deg); opacity: var(--fx-o, .7); }
}
@keyframes fx-ripple { 0% { transform: scale(.15); opacity: 0; } 12% { opacity: var(--fx-o, .55); } 100% { transform: scale(1); opacity: 0; } }
@keyframes fx-breathe { 0%, 100% { transform: translate(0, 0) scale(.86); opacity: var(--fx-o, .55); } 50% { transform: translate(22px, -18px) scale(1.12); opacity: calc(var(--fx-o, .55) + .2); } }
@keyframes fx-streak { 0% { transform: rotate(-24deg) translateX(-40vw); opacity: 0; } 15% { opacity: var(--fx-o, .9); } 85% { opacity: var(--fx-o, .9); } 100% { transform: rotate(-24deg) translateX(140vw); opacity: 0; } }
@keyframes fx-bounce {
  0%, 100% { transform: translateY(0) scale(1.08, .9) rotate(0deg); opacity: var(--fx-o, .85); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  50% { transform: translateY(calc(-70px * var(--s, 1))) scale(.95, 1.05) rotate(25deg); opacity: var(--fx-o, .85); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
}
@keyframes fx-spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(var(--sx, 120px), var(--sy, -220px)) scale(.2); opacity: 0; } }
@keyframes fx-steam { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: var(--fx-o, .5); } 100% { transform: translate(var(--sx, 30px), -75vh) scale(1.9); opacity: 0; } }
@keyframes fx-sweep { 0% { transform: translateX(-60vw); opacity: 0; } 20%, 70% { opacity: var(--fx-o, .6); } 100% { transform: translateX(120vw); opacity: 0; } }
@keyframes fx-scan { 0% { transform: translateY(0); opacity: 0; } 8%, 85% { opacity: var(--fx-o, .55); } 100% { transform: translateY(100vh); opacity: 0; } }
@keyframes fx-paw { 0% { opacity: 0; transform: scale(.6) rotate(var(--r, 30deg)); } 6% { opacity: var(--fx-o, .32); transform: scale(1) rotate(var(--r, 30deg)); } 46% { opacity: var(--fx-o, .32); } 62%, 100% { opacity: 0; transform: scale(1) rotate(var(--r, 30deg)); } }
@keyframes fx-belt { to { background-position: var(--bx, -100px) var(--by, 0); } }
@keyframes fx-ball {
  0% { transform: translate(-12vw, 0) rotate(0deg); animation-timing-function: cubic-bezier(.3, .6, .6, 1); }
  12.5% { transform: translate(4vw, calc(-150px * var(--s, 1))) rotate(90deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  25% { transform: translate(20vw, 0) rotate(180deg); animation-timing-function: cubic-bezier(.3, .6, .6, 1); }
  37.5% { transform: translate(36vw, calc(-110px * var(--s, 1))) rotate(270deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  50% { transform: translate(52vw, 0) rotate(360deg); animation-timing-function: cubic-bezier(.3, .6, .6, 1); }
  62.5% { transform: translate(68vw, calc(-75px * var(--s, 1))) rotate(450deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  75% { transform: translate(84vw, 0) rotate(540deg); animation-timing-function: cubic-bezier(.3, .6, .6, 1); }
  87.5% { transform: translate(98vw, calc(-40px * var(--s, 1))) rotate(630deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  100% { transform: translate(112vw, 0) rotate(720deg); }
}
@keyframes fx-rain { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: var(--fx-o, .85); } 85% { opacity: var(--fx-o, .85); } 100% { transform: translateY(150vh); opacity: 0; } }
@keyframes fx-route { 0% { offset-distance: 0%; opacity: 0; } 6%, 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- the home: two soft lights drifting, the brand's orange and a cool one ---------- */
:root:not([data-theme]) .hero-fx i:nth-child(-n+3) { display: block; }
:root:not([data-theme]) .hero-fx { --fx-anim: fx-breathe; --fx-t: 18s; --fx-ease: ease-in-out; --fx-o: .35; }
:root:not([data-theme]) .hero-fx i:nth-child(-n+3) { width: 46vw; max-width: 620px; border-radius: 50%; filter: blur(60px); }
:root:not([data-theme]) .hero-fx i:nth-child(1) { --x: 52%; --y: -18%; background: radial-gradient(circle, rgba(242, 85, 29, .22), transparent 70%); }
:root:not([data-theme]) .hero-fx i:nth-child(2) { --x: -12%; --y: 52%; background: radial-gradient(circle, rgba(42, 120, 214, .14), transparent 70%); }
:root:not([data-theme]) .hero-fx i:nth-child(3) { --x: 78%; --y: 58%; --s: .7; background: radial-gradient(circle, rgba(242, 85, 29, .14), transparent 70%); }

/* ---------- Blush · beauty: petals falling, a few sparkles ---------- */
:root[data-theme="blush"] .hero-fx { --fx-anim: fx-fall; --fx-t: 15s; --fx-size: 30px; --fx-o: .85; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M10%201C15.5%205%2017.5%2011.5%2010%2019%202.5%2011.5%204.5%205%2010%201z%27%20fill%3D%27%23e87ba4%27%20fill-opacity%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M10%203v14%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.45%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="blush"] .hero-fx i { display: block; top: -30px; }
:root[data-theme="blush"] .hero-fx i:nth-child(4n) { top: var(--y); --fx-anim: fx-twinkle; --fx-t: 5s; --fx-size: 16px; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M10%200l2.2%207.8L20%2010l-7.8%202.2L10%2020l-2.2-7.8L0%2010l7.8-2.2z%27%20fill%3D%27%237a2e5c%27%2F%3E%3C%2Fsvg%3E"); --fx-o: .45; }
:root[data-theme="blush"] .hero-fx i:nth-child(7) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M10%200l2.2%207.8L20%2010l-7.8%202.2L10%2020l-2.2-7.8L0%2010l7.8-2.2z%27%20fill%3D%27%23e3b35a%27%2F%3E%3C%2Fsvg%3E"); --fx-anim: fx-twinkle; top: var(--y); --fx-t: 6s; --fx-size: 18px; }

/* ---------- Clinic · dental: clean bubbles rising, a sparkle here and there ---------- */
:root[data-theme="clinic"] .hero-fx { --fx-anim: fx-rise-wobble; --fx-t: 16s; --fx-size: 42px; --fx-o: .95; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2718%27%20fill%3D%27%230e7c86%27%20fill-opacity%3D%27.05%27%20stroke%3D%27%230e7c86%27%20stroke-opacity%3D%27.35%27%20stroke-width%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M10%2014a12%2012%200%200%201%208-6%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="clinic"] .hero-fx i { display: block; top: 104%; }
:root[data-theme="clinic"] .hero-fx i:nth-child(3n) { top: var(--y); --fx-anim: fx-twinkle; --fx-t: 4.6s; --fx-size: 18px; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M10%200l2.2%207.8L20%2010l-7.8%202.2L10%2020l-2.2-7.8L0%2010l7.8-2.2z%27%20fill%3D%27%230e7c86%27%2F%3E%3C%2Fsvg%3E"); --fx-o: .5; }

/* ---------- Energy · fitness: speed — fast streaks across the dark ---------- */
:root[data-theme="energy"] .hero-fx { --fx-anim: fx-streak; --fx-t: 3.4s; --fx-ease: cubic-bezier(.5, 0, .5, 1); --fx-o: .75; }
:root[data-theme="energy"] .hero-fx i { display: block; left: 0; aspect-ratio: auto; height: 3px; width: calc(190px * var(--s, 1)); border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 76, .9) 60%, #ffffff); }
:root[data-theme="energy"] .hero-fx i:nth-child(3n) { background: linear-gradient(90deg, transparent, rgba(194, 54, 27, .95) 70%, rgba(255, 160, 110, 1)); height: 2px; }
:root[data-theme="energy"] .hero-fx i:nth-child(n+11) { display: none; }

/* ---------- Campus · education: chalk signs floating up the board ---------- */
:root[data-theme="campus"] .hero-fx { --fx-anim: fx-rise; --fx-t: 20s; --fx-size: 54px; --fx-o: .3; }
:root[data-theme="campus"] .hero-fx i { display: block; top: 100%; }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+1) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2726%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%CF%80%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+2) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2724%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%CE%A3%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+3) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2720%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%E2%88%9Ax%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+4) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2721%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3Ea%C2%B2%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+5) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2724%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%C6%8F%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+6) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2726%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%E2%88%9E%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+7) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2719%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EA%2B%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+8) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2715%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3Eabc%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n+9) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2726%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%3D%3C%2Ftext%3E%3C%2Fsvg%3E"); }
:root[data-theme="campus"] .hero-fx i:nth-child(10n) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2728%27%20font-family%3D%27Georgia%2CTimes%2Cserif%27%20font-size%3D%2722%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3E%25%3C%2Ftext%3E%3C%2Fsvg%3E"); }

/* ---------- Playroom · kids: bright shapes bouncing ---------- */
:root[data-theme="playroom"] .hero-fx { --fx-anim: fx-bounce; --fx-t: 1.9s; --fx-size: 32px; --fx-o: .7; }
:root[data-theme="playroom"] .hero-fx i { display: block; }
:root[data-theme="playroom"] .hero-fx i:nth-child(5n+1) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%20fill%3D%27%23f5b400%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="playroom"] .hero-fx i:nth-child(5n+2) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%274%27%20fill%3D%27%236d3fc0%27%20fill-opacity%3D%27.8%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="playroom"] .hero-fx i:nth-child(5n+3) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.5l10%2018H2z%27%20fill%3D%27%23e87ba4%27%20stroke%3D%27%23e87ba4%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="playroom"] .hero-fx i:nth-child(5n+4) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201.8l3%206.6%207.2.8-5.4%204.9%201.5%207.1L12%2017.6l-6.3%203.6%201.5-7.1-5.4-4.9%207.2-.8z%27%20fill%3D%27%231baf7a%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="playroom"] .hero-fx i:nth-child(5n) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%20fill%3D%27none%27%20stroke%3D%27%232a78d6%27%20stroke-width%3D%274.5%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="playroom"] .hero-fx i:nth-child(n+11) { display: none; }

/* ---------- Garage · car service: sparks from the welding, a lamp sweeping the workshop ---------- */
:root[data-theme="garage"] .hero-fx { --fx-anim: fx-spark; --fx-t: 2.4s; --fx-ease: cubic-bezier(.2, .7, .4, 1); --fx-size: 6px; }
:root[data-theme="garage"] .hero-fx i { display: block; left: 7%; top: 88%; border-radius: 50%; background: #ffb020; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .8); }
:root[data-theme="garage"] .hero-fx i:nth-child(odd) { --sx: calc(90px + 60px * var(--s)); --sy: calc(-160px - 90px * var(--s)); }
:root[data-theme="garage"] .hero-fx i:nth-child(even) { --sx: calc(150px + 80px * var(--s)); --sy: calc(-70px - 60px * var(--s)); background: #ff7a2e; }
:root[data-theme="garage"] .hero-fx i:nth-child(3n) { --sx: calc(30px + 40px * var(--s)); --sy: calc(-230px - 50px * var(--s)); }
:root[data-theme="garage"] .hero-fx i:nth-child(1) { left: -20%; top: 0; width: 55vw; aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; --sx: 0; --sy: 0;
  background: radial-gradient(40% 55% at 50% 50%, rgba(255, 220, 160, .07), transparent 70%); --fx-anim: fx-sweep; --fx-t: 9s; --fx-o: 1; --fx-ease: ease-in-out; }

/* ---------- Aqua · car wash: soap bubbles rising and swaying ---------- */
:root[data-theme="aqua"] .hero-fx { --fx-anim: fx-rise-wobble; --fx-t: 12s; --fx-size: 46px; --fx-o: 1; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2735%25%27%20cy%3D%2730%25%27%20r%3D%2770%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%27.95%27%2F%3E%3Cstop%20offset%3D%27.35%27%20stop-color%3D%27%23bfeaf8%27%20stop-opacity%3D%27.35%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2322c1ee%27%20stop-opacity%3D%27.18%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2718%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%2322c1ee%27%20stroke-opacity%3D%27.55%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="aqua"] .hero-fx i { display: block; top: 104%; }

/* ---------- Calm · spa: rings spreading on water, leaves drifting ---------- */
:root[data-theme="calm"] .hero-fx { --fx-anim: fx-ripple; --fx-t: 7.5s; --fx-ease: cubic-bezier(.2, .6, .4, 1); --fx-o: .75; }
:root[data-theme="calm"] .hero-fx i { display: block; width: 360px; border-radius: 50%; border: 2px solid rgba(63, 107, 87, .55); background: none; margin: -180px 0 0 -180px; }
:root[data-theme="calm"] .hero-fx i:nth-child(-n+3) { --x: 47%; --y: 16%; }
:root[data-theme="calm"] .hero-fx i:nth-child(n+4):nth-child(-n+6) { --x: 8%; --y: 86%; border-color: rgba(200, 162, 107, .65); }
:root[data-theme="calm"] .hero-fx i:nth-child(3n+1) { --d: 0s; } :root[data-theme="calm"] .hero-fx i:nth-child(3n+2) { --d: -2.5s; } :root[data-theme="calm"] .hero-fx i:nth-child(3n) { --d: -5s; }
:root[data-theme="calm"] .hero-fx i:nth-child(n+7) { width: calc(26px * var(--s, 1)); margin: 0; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%2020C4%209%2011%204%2021%203c-1%2010-6%2017-17%2017z%27%20fill%3D%27%233f6b57%27%20fill-opacity%3D%27.32%27%2F%3E%3Cpath%20d%3D%27M4.5%2019.5L15%209%27%20stroke%3D%27%23fffdf8%27%20stroke-opacity%3D%27.7%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  --fx-anim: fx-drift; --fx-t: 12s; --fx-ease: ease-in-out; --fx-o: .9; opacity: .9; }
:root[data-theme="calm"] .hero-fx i:nth-child(n+11) { display: none; }

/* ---------- Fresh · vet: a pet's paw prints walking across ---------- */
:root[data-theme="fresh"] .hero-fx { --fx-anim: fx-paw; --fx-t: 9s; --fx-size: 34px; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27%230f766e%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2716.2%27%20rx%3D%275.2%27%20ry%3D%274.4%27%2F%3E%3Cellipse%20cx%3D%275.6%27%20cy%3D%279.8%27%20rx%3D%272.1%27%20ry%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%279.6%27%20cy%3D%275.8%27%20rx%3D%272.1%27%20ry%3D%272.7%27%2F%3E%3Cellipse%20cx%3D%2714.4%27%20cy%3D%275.8%27%20rx%3D%272.1%27%20ry%3D%272.7%27%2F%3E%3Cellipse%20cx%3D%2718.4%27%20cy%3D%279.8%27%20rx%3D%272.1%27%20ry%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --fx-o: .4; }
:root[data-theme="fresh"] .hero-fx i { display: block; --s: 1; --k: 1; }
:root[data-theme="fresh"] .hero-fx i:nth-child(1) { --x: 4%; --y: 84%; --d: -6.00s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(2) { --x: 10.8%; --y: 73.8%; --d: -5.58s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(3) { --x: 17.6%; --y: 73.6%; --d: -5.16s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(4) { --x: 24.4%; --y: 63.400000000000006%; --d: -4.74s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(5) { --x: 31.2%; --y: 63.2%; --d: -4.32s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(6) { --x: 38%; --y: 53%; --d: -3.90s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(7) { --x: 44.8%; --y: 52.8%; --d: -3.48s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(8) { --x: 51.6%; --y: 42.6%; --d: -3.06s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(9) { --x: 58.4%; --y: 42.4%; --d: -2.64s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(10) { --x: 65.19999999999999%; --y: 32.199999999999996%; --d: -2.22s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(11) { --x: 72%; --y: 32%; --d: -1.80s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(12) { --x: 78.8%; --y: 21.799999999999997%; --d: -1.38s; --r: 72deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(13) { --x: 85.6%; --y: 21.599999999999994%; --d: -0.96s; --r: 52deg; }
:root[data-theme="fresh"] .hero-fx i:nth-child(14) { --x: 92.39999999999999%; --y: 11.399999999999991%; --d: -0.54s; --r: 72deg; }

/* ---------- Soft · therapy: soft colours slowly breathing in and out ---------- */
:root[data-theme="soft"] .hero-fx { --fx-anim: fx-breathe; --fx-t: 10s; --fx-ease: ease-in-out; --fx-o: .55; }
:root[data-theme="soft"] .hero-fx i:nth-child(-n+4) { display: block; width: 38vw; max-width: 460px; border-radius: 50%; filter: blur(46px); }
:root[data-theme="soft"] .hero-fx i:nth-child(1) { --x: 62%; --y: -12%; background: radial-gradient(circle, rgba(157, 180, 224, .75), transparent 70%); }
:root[data-theme="soft"] .hero-fx i:nth-child(2) { --x: -8%; --y: 48%; background: radial-gradient(circle, rgba(196, 181, 253, .6), transparent 70%); --d: -4s; }
:root[data-theme="soft"] .hero-fx i:nth-child(3) { --x: 70%; --y: 58%; --s: .8; background: radial-gradient(circle, rgba(167, 214, 207, .55), transparent 70%); --d: -7s; }
:root[data-theme="soft"] .hero-fx i:nth-child(4) { --x: 30%; --y: 20%; background: radial-gradient(circle, rgba(253, 220, 230, .55), transparent 70%); --d: -2s; }

/* ---------- Neon · game club: the controller's four signs floating in neon ---------- */
:root[data-theme="neon"] .hero-fx { --fx-anim: fx-drift; --fx-t: 9s; --fx-ease: ease-in-out; --fx-size: 40px; --fx-o: .75; }
:root[data-theme="neon"] .hero-fx i { display: block; opacity: .75; }
:root[data-theme="neon"] .hero-fx i:nth-child(4n+1) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%203.5l9%2016h-18z%27%20fill%3D%27none%27%20stroke%3D%27%2334d399%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); filter: drop-shadow(0 0 6px #34d399); }
:root[data-theme="neon"] .hero-fx i:nth-child(4n+2) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%20fill%3D%27none%27%20stroke%3D%27%23fb7185%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E"); filter: drop-shadow(0 0 6px #fb7185); }
:root[data-theme="neon"] .hero-fx i:nth-child(4n+3) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5.5%205.5l13%2013M18.5%205.5l-13%2013%27%20stroke%3D%27%2360a5fa%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"); filter: drop-shadow(0 0 6px #60a5fa); }
:root[data-theme="neon"] .hero-fx i:nth-child(4n) { --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%274.5%27%20y%3D%274.5%27%20width%3D%2715%27%20height%3D%2715%27%20rx%3D%271.2%27%20fill%3D%27none%27%20stroke%3D%27%23e879f9%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E"); filter: drop-shadow(0 0 6px #e879f9); }

/* ---------- Cyber · computer club: light falling in beams, glowing pixels rising, a scan line passing ---------- */
:root[data-theme="cyber"] .hero-fx { --fx-anim: fx-rain; --fx-t: 4.2s; --fx-size: 10px; --fx-o: .85; }
:root[data-theme="cyber"] .hero-fx i { display: block; top: -30%; width: 2px; aspect-ratio: auto; height: calc(170px * var(--s, 1));
  background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, .15) 30%, rgba(52, 211, 153, .9) 92%, #d1fae5); border-radius: 2px; }
:root[data-theme="cyber"] .hero-fx i:nth-child(4n+3) { background: linear-gradient(to bottom, transparent, rgba(244, 63, 94, .12) 30%, rgba(251, 113, 133, .85) 92%, #ffe4e6); }
:root[data-theme="cyber"] .hero-fx i:nth-child(n+9) { top: 102%; width: calc(9px * var(--s, 1)); height: auto; aspect-ratio: 1; border-radius: 2px; background: #10b981; box-shadow: 0 0 14px 2px rgba(16, 185, 129, .75);
  --fx-anim: fx-rise; --fx-t: 10s; }
:root[data-theme="cyber"] .hero-fx i:nth-child(n+9):nth-child(odd) { background: #34d399; }
:root[data-theme="cyber"] .hero-fx i:nth-child(14) { left: 0; top: 0; width: 100%; aspect-ratio: auto; height: 2px; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .6) 30%, rgba(16, 185, 129, .6) 70%, transparent);
  box-shadow: 0 0 16px rgba(16, 185, 129, .5); --fx-anim: fx-scan; --fx-t: 7s; --k: 1; --d: -1s; --fx-o: .55; --fx-ease: ease-in-out; }

/* ---------- Court · sports grounds: balls bouncing across the pitch ---------- */
:root[data-theme="court"] .hero-fx { --fx-anim: fx-ball; --fx-t: 9s; --fx-size: 26px; }
:root[data-theme="court"] .hero-fx i:nth-child(-n+2) { display: block; left: 0; opacity: .7; }
:root[data-theme="court"] .hero-fx i:nth-child(1) { --y: 58%; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Cpath%20d%3D%27M12%207.4l3.9%202.8-1.5%204.6H9.6L8.1%2010.2z%27%20fill%3D%27%230f3d22%27%2F%3E%3Cpath%20d%3D%27M12%201.5v5.9M15.9%2010.2l5.5-1.6M14.4%2014.8l3.4%204.6M9.6%2014.8l-3.4%204.6M8.1%2010.2L2.6%208.6%27%20stroke%3D%27%230f3d22%27%20stroke-width%3D%271.1%27%2F%3E%3C%2Fsvg%3E"); --s: 1.2; --d: -2s; }
:root[data-theme="court"] .hero-fx i:nth-child(2) { --y: 26%; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710.5%27%20fill%3D%27%23c6d93a%27%2F%3E%3Cpath%20d%3D%27M3.6%207.6c4.6.9%207%204.7%205.8%2013.4M20.4%2016.4c-4.6-.9-7-4.7-5.8-13.4%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E"); --s: .8; --k: .8; --d: -6s; }

/* ---------- Wood · sauna: steam rising, a few embers ---------- */
:root[data-theme="wood"] .hero-fx { --fx-anim: fx-steam; --fx-t: 11s; --fx-ease: ease-out; --fx-size: 170px; --fx-o: .42; }
:root[data-theme="wood"] .hero-fx i { display: block; top: 92%; border-radius: 50%; aspect-ratio: 1.4; background: radial-gradient(closest-side, rgba(255, 244, 232, .6), transparent); filter: blur(14px); }
:root[data-theme="wood"] .hero-fx i:nth-child(odd) { --sx: -40px; } :root[data-theme="wood"] .hero-fx i:nth-child(even) { --sx: 50px; }
:root[data-theme="wood"] .hero-fx i:nth-child(n+9) { --fx-size: 4px; aspect-ratio: 1; filter: none; background: #ffae5c; box-shadow: 0 0 8px 2px rgba(240, 138, 60, .8); --fx-anim: fx-rise; --fx-t: 9s; --fx-o: .85; top: 100%; }

/* ---------- Razor · barbershop: the barber's pole turning, a little gold dust ---------- */
:root[data-theme="razor"] .hero-fx { --fx-anim: fx-twinkle; --fx-t: 6s; --fx-size: 12px; --fx-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M10%200l2.2%207.8L20%2010l-7.8%202.2L10%2020l-2.2-7.8L0%2010l7.8-2.2z%27%20fill%3D%27%23e3b35a%27%2F%3E%3C%2Fsvg%3E"); --fx-o: .4; }
:root[data-theme="razor"] .hero-fx i { display: block; }
:root[data-theme="razor"] .hero-fx i:nth-child(1) { left: auto; right: 0; top: 0; width: 18px; aspect-ratio: auto; height: 100%; opacity: 1; --bx: 0; --by: 96px;
  background: repeating-linear-gradient(160deg, #b4532a 0 18px, #f3ede6 18px 26px, #e3b35a 26px 40px, #f3ede6 40px 48px) 0 0 / 100% 96px;
  --fx-anim: fx-belt; --fx-t: 2.6s; --k: 1; --d: 0s; }

/* ---------- Road · driving school: the lane's dashes running by ---------- */
:root[data-theme="road"] .hero-fx i:nth-child(-n+2) { display: block; left: 0; width: 100%; aspect-ratio: auto; opacity: 1; }
:root[data-theme="road"] .hero-fx i:nth-child(1) { top: auto; bottom: 14px; height: 6px; opacity: .9; background: repeating-linear-gradient(90deg, #fbbf24 0 60px, transparent 60px 100px) 0 0 / 100px 100%;
  --bx: -100px; --fx-anim: fx-belt; --fx-t: .9s; --k: 1; --d: 0s; }
:root[data-theme="road"] .hero-fx i:nth-child(2) { top: 64%; height: 4px; opacity: .22; background: repeating-linear-gradient(90deg, #ffffff 0 40px, transparent 40px 90px) 0 0 / 90px 100%;
  --bx: -90px; --fx-anim: fx-belt; --fx-t: 1.6s; --k: 1; --d: 0s; }

/* ---------- Drive · car rental: the night road — headlights running one way, tail lights the other, the city's lights
   blurred above ---------- */
:root[data-theme="drive"] .hero-fx { --fx-anim: fx-breathe; --fx-t: 12s; --fx-ease: ease-in-out; --fx-o: .4; }
:root[data-theme="drive"] .hero-fx i { display: block; border-radius: 50%; filter: blur(5px); }
:root[data-theme="drive"] .hero-fx i:nth-child(n+7) { width: calc(46px * var(--s, 1)); top: calc(var(--y) * .55); background: radial-gradient(closest-side, rgba(120, 146, 255, .85), transparent); }
:root[data-theme="drive"] .hero-fx i:nth-child(n+7):nth-child(3n) { background: radial-gradient(closest-side, rgba(255, 150, 100, .8), transparent); }
:root[data-theme="drive"] .hero-fx i:nth-child(n+7):nth-child(4n) { background: radial-gradient(closest-side, rgba(255, 236, 196, .75), transparent); }
:root[data-theme="drive"] .hero-fx i:nth-child(-n+6) { left: 0; width: calc(240px * var(--s, 1)); aspect-ratio: auto; height: 2px; border-radius: 2px; filter: none;
  --fx-anim: fx-sweep; --fx-t: 3.2s; --fx-ease: cubic-bezier(.45, 0, .55, 1); --fx-o: .85;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .55) 70%, #ffffff); box-shadow: 0 0 10px rgba(255, 236, 196, .45); }
:root[data-theme="drive"] .hero-fx i:nth-child(-n+6):nth-child(even) { animation-direction: reverse;
  background: linear-gradient(90deg, #ff4d3d, rgba(255, 107, 61, .6) 30%, transparent); box-shadow: 0 0 10px rgba(255, 77, 61, .5); }
:root[data-theme="drive"] .hero-fx i:nth-child(1) { --y: 78%; } :root[data-theme="drive"] .hero-fx i:nth-child(2) { --y: 84%; }
:root[data-theme="drive"] .hero-fx i:nth-child(3) { --y: 90%; } :root[data-theme="drive"] .hero-fx i:nth-child(4) { --y: 72%; }
:root[data-theme="drive"] .hero-fx i:nth-child(5) { --y: 95%; } :root[data-theme="drive"] .hero-fx i:nth-child(6) { --y: 88%; }

/* still for those who asked their system for less motion: a few shapes, no movement */
@media (prefers-reduced-motion: reduce) {
  .hero-fx i { animation: none !important; opacity: .35 !important; }
  .hero-fx i:nth-child(n+6) { display: none !important; }
}