/* Theme + skin motion. Layers are built by flyleaf-fx.js only for the active theme/skin
   (page: .theme-fx / .skin-fx under .wrap; Aspetto preview: .look-stage-fx / .look-stage-sfx).
   Keyframes animate transform-family properties and opacity only. --u scales sizes,
   --H / --W are the layer height / width (viewport on the page, the preview box in the sheet). */

html { --fx-beat: 16s; }

.theme-fx,
.skin-fx,
.combo-fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  --u: 1px;
  --H: 100vh;
  --W: 100vw;
  --gw: min(360px, 60vw);
}
@media (max-width: 860px) {
  .theme-fx,
  .skin-fx,
  .combo-fx { position: absolute; }
}
.look-stage-fx,
.look-stage-sfx,
.look-stage-cfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --u: calc(100cqw / 800);
  --H: 68.75cqw;
  --W: 100cqw;
  --gw: 150px;
}
.theme-fx > i,
.skin-fx > i,
.combo-fx > i,
.look-stage-fx > i,
.look-stage-sfx > i,
.look-stage-cfx > i {
  position: absolute;
  display: block;
  left: var(--x, 0);
  top: var(--y, 0);
  font-style: normal;
  animation-delay: calc(var(--d, 0) * -1s);
}

/* Study lights: retune mark ink so motion stays readable. Never pause FX here,
   never crush the whole layer with opacity (pale strokes vanish on #000).
   --fx-mark scales sparse glyph/particle opacity; --fx-soft scales atmospheres
   and breath animations; --fx-bright lifts SVG/asset themes without whitening the page. */
html {
  --fx-mark: 1;
  --fx-soft: 1;
  --fx-bright: 1;
  --fx-code: #4ad27e;
  --fx-code-glow: rgba(74, 210, 126, 0.45);
  --fx-neon-line: rgba(255, 79, 216, 0.6);
  --fx-neon-cross: rgba(255, 79, 216, 0.4);
  --fx-neon-h: rgba(94, 240, 255, 0.6);
  --fx-neon-h-glow: rgba(94, 240, 255, 0.5);
  --fx-radar: rgba(90, 200, 255, 0.42);
  --fx-aurora-op: 0.5;
  --fx-warm: rgba(255, 210, 140, 0.55);
  --fx-heart: #ff7aa8;
  --fx-petal: #f3b7c8;
  --fx-petal-b: #fff4f7;
  --fx-crane: #f6f1e8;
  --fx-bubble: rgba(190, 240, 255, 0.55);
  --fx-lamp: rgba(255, 250, 236, 0.16);
  --fx-caustic-lo: 0.12;
  --fx-caustic-hi: 0.5;
  --fx-fly-lo: 0.08;
  --fx-fly-hi: 1;
  --fx-bulb-lo: 0.1;
  --fx-wash-lo: 0.25;
  --fx-wash-hi: 0.85;
  --fx-glass-lo: 0.28;
  --fx-glass-hi: 0.72;
  --fx-lantern-lo: 0.32;
  --fx-lantern-hi: 0.72;
  --fx-ink-lo: 0.35;
  --fx-ink-hi: 0.8;
  --fx-spark-lo: 0.12;
  --fx-spark-hi: 0.9;
  --fx-union-lo: 0.15;
  --fx-union-hi: 0.55;
  --fx-flash: 0.2;
  --fx-celbar: 0.35;
  --fx-atmo-codice: rgba(40, 220, 120, 0.16);
  --fx-atmo-neon: rgba(255, 80, 180, 0.22);
  --fx-atmo-radar: rgba(80, 180, 255, 0.2);
  --fx-atmo-aurora: rgba(90, 230, 170, 0.28);
  --fx-atmo-cosmo: rgba(120, 150, 255, 0.22);
  --fx-atmo-abissi: rgba(40, 140, 180, 0.28);
  --fx-atmo-lucciole: rgba(160, 220, 90, 0.16);
  --fx-atmo-noir: rgba(220, 220, 210, 0.08);
  --fx-atmo-pixel: rgba(80, 160, 255, 0.16);
  --fx-atmo-natale: rgba(255, 80, 90, 0.16);
  --fx-atmo-halloween: rgba(255, 120, 20, 0.18);
  --fx-atmo-capodanno: rgba(255, 210, 120, 0.16);
  --fx-atmo-valentino: rgba(255, 120, 160, 0.2);
  --fx-atmo-circuito: rgba(60, 220, 150, 0.2);
  --fx-atmo-vetrata: rgba(180, 120, 255, 0.2);
  --fx-atmo-lanterna: rgba(255, 170, 70, 0.22);
  --fx-atmo-ciliegio: rgba(255, 170, 190, 0.28);
  --fx-atmo-gru: rgba(230, 230, 240, 0.14);
  --fx-atmo-sumi: rgba(230, 220, 200, 0.12);
  --fx-atmo-acquerello: rgba(140, 180, 220, 0.18);
  --fx-atmo-anime: rgba(255, 120, 180, 0.22);
}
html[data-light="day"],
.look-stage[data-light-preview="day"] {
  --fx-mark: 1.08;
  --fx-soft: 1.05;
  --fx-bright: 1.05;
  --fx-code: #2f9a5c;
  --fx-code-glow: rgba(40, 150, 90, 0.55);
  --fx-neon-line: rgba(210, 40, 170, 0.78);
  --fx-neon-cross: rgba(210, 40, 170, 0.55);
  --fx-neon-h: rgba(20, 170, 190, 0.78);
  --fx-neon-h-glow: rgba(20, 170, 190, 0.6);
  --fx-radar: rgba(30, 140, 200, 0.62);
  --fx-aurora-op: 0.62;
  --fx-warm: rgba(220, 150, 60, 0.7);
  --fx-heart: #e0457a;
  --fx-petal: #e090a8;
  --fx-crane: #ebe4d6;
  --fx-lamp: rgba(255, 244, 210, 0.28);
  --fx-caustic-lo: 0.18;
  --fx-caustic-hi: 0.62;
  --fx-fly-lo: 0.14;
  --fx-bulb-lo: 0.18;
  --fx-wash-lo: 0.35;
  --fx-wash-hi: 0.95;
  --fx-glass-lo: 0.38;
  --fx-lantern-lo: 0.42;
  --fx-ink-lo: 0.42;
  --fx-ink-hi: 0.88;
  --fx-union-lo: 0.22;
  --fx-union-hi: 0.65;
  --fx-flash: 0.28;
  --fx-celbar: 0.45;
  --fx-atmo-codice: rgba(30, 160, 90, 0.22);
  --fx-atmo-neon: rgba(220, 50, 150, 0.28);
  --fx-atmo-radar: rgba(40, 140, 210, 0.28);
  --fx-atmo-aurora: rgba(40, 180, 130, 0.34);
}
html[data-light="night"],
.look-stage[data-light-preview="night"] {
  --fx-mark: 1.55;
  --fx-soft: 1.35;
  --fx-bright: 1.2;
  --fx-code: #62e894;
  --fx-code-glow: rgba(90, 230, 140, 0.6);
  --fx-neon-line: rgba(255, 110, 230, 0.75);
  --fx-neon-cross: rgba(255, 110, 230, 0.5);
  --fx-neon-h: rgba(120, 245, 255, 0.7);
  --fx-neon-h-glow: rgba(120, 245, 255, 0.6);
  --fx-radar: rgba(110, 215, 255, 0.55);
  --fx-aurora-op: 0.68;
  --fx-warm: rgba(255, 220, 160, 0.7);
  --fx-heart: #ff8ab4;
  --fx-lamp: rgba(255, 250, 236, 0.24);
  --fx-caustic-lo: 0.18;
  --fx-caustic-hi: 0.62;
  --fx-fly-lo: 0.14;
  --fx-bulb-lo: 0.18;
  --fx-wash-lo: 0.32;
  --fx-wash-hi: 0.92;
  --fx-glass-lo: 0.36;
  --fx-lantern-lo: 0.4;
  --fx-ink-lo: 0.42;
  --fx-union-lo: 0.22;
  --fx-union-hi: 0.68;
  --fx-flash: 0.3;
  --fx-celbar: 0.48;
  --fx-atmo-codice: rgba(60, 230, 140, 0.22);
  --fx-atmo-neon: rgba(255, 100, 200, 0.28);
  --fx-atmo-radar: rgba(100, 200, 255, 0.26);
  --fx-atmo-aurora: rgba(110, 240, 180, 0.34);
  --fx-atmo-cosmo: rgba(140, 170, 255, 0.28);
  --fx-atmo-abissi: rgba(60, 170, 210, 0.34);
  --fx-atmo-lucciole: rgba(180, 240, 110, 0.24);
  --fx-atmo-noir: rgba(230, 230, 220, 0.14);
  --fx-atmo-circuito: rgba(80, 240, 170, 0.28);
  --fx-atmo-sumi: rgba(240, 230, 210, 0.18);
}
html[data-light="dark"],
.look-stage[data-light-preview="dark"] {
  --fx-mark: 1.3;
  --fx-soft: 1.15;
  --fx-bright: 1.12;
  --fx-code: #56dc88;
  --fx-code-glow: rgba(80, 220, 135, 0.55);
  --fx-neon-line: rgba(255, 95, 220, 0.7);
  --fx-neon-cross: rgba(255, 95, 220, 0.48);
  --fx-neon-h: rgba(100, 240, 255, 0.68);
  --fx-radar: rgba(100, 210, 255, 0.5);
  --fx-aurora-op: 0.6;
  --fx-lamp: rgba(255, 250, 236, 0.2);
  --fx-caustic-lo: 0.15;
  --fx-caustic-hi: 0.55;
  --fx-fly-lo: 0.1;
  --fx-bulb-lo: 0.14;
  --fx-wash-lo: 0.28;
  --fx-union-lo: 0.18;
  --fx-union-hi: 0.6;
  --fx-flash: 0.24;
  --fx-celbar: 0.4;
}
html[data-light="black"],
.look-stage[data-light-preview="black"] {
  --fx-mark: 3.8;
  --fx-soft: 2.15;
  --fx-bright: 1.75;
  --fx-code: #b8ffd4;
  --fx-code-glow: rgba(170, 255, 210, 1);
  --fx-neon-line: rgba(255, 160, 245, 0.98);
  --fx-neon-cross: rgba(255, 160, 245, 0.8);
  --fx-neon-h: rgba(170, 255, 255, 0.95);
  --fx-neon-h-glow: rgba(170, 255, 255, 0.9);
  --fx-radar: rgba(160, 240, 255, 0.88);
  --fx-aurora-op: 0.95;
  --fx-warm: rgba(255, 235, 180, 0.95);
  --fx-heart: #ffb0cc;
  --fx-petal: #ffd0dc;
  --fx-petal-b: #fffafb;
  --fx-crane: #fffaf2;
  --fx-bubble: rgba(220, 255, 255, 0.9);
  --fx-lamp: rgba(255, 252, 240, 0.5);
  --fx-caustic-lo: 0.38;
  --fx-caustic-hi: 0.95;
  --fx-fly-lo: 0.32;
  --fx-fly-hi: 1;
  --fx-bulb-lo: 0.36;
  --fx-wash-lo: 0.5;
  --fx-wash-hi: 1;
  --fx-glass-lo: 0.55;
  --fx-glass-hi: 1;
  --fx-lantern-lo: 0.55;
  --fx-lantern-hi: 1;
  --fx-ink-lo: 0.58;
  --fx-ink-hi: 1;
  --fx-spark-lo: 0.36;
  --fx-spark-hi: 1;
  --fx-union-lo: 0.4;
  --fx-union-hi: 0.9;
  --fx-flash: 0.5;
  --fx-celbar: 0.72;
  --fx-atmo-codice: rgba(100, 255, 180, 0.42);
  --fx-atmo-neon: rgba(255, 140, 230, 0.48);
  --fx-atmo-radar: rgba(140, 230, 255, 0.46);
  --fx-atmo-aurora: rgba(150, 255, 210, 0.52);
  --fx-atmo-cosmo: rgba(180, 200, 255, 0.46);
  --fx-atmo-abissi: rgba(90, 210, 245, 0.5);
  --fx-atmo-lucciole: rgba(220, 255, 140, 0.4);
  --fx-atmo-noir: rgba(250, 250, 240, 0.28);
  --fx-atmo-pixel: rgba(130, 190, 255, 0.36);
  --fx-atmo-natale: rgba(255, 120, 130, 0.36);
  --fx-atmo-halloween: rgba(255, 170, 70, 0.4);
  --fx-atmo-capodanno: rgba(255, 230, 160, 0.36);
  --fx-atmo-valentino: rgba(255, 160, 190, 0.4);
  --fx-atmo-circuito: rgba(110, 255, 190, 0.42);
  --fx-atmo-vetrata: rgba(220, 170, 255, 0.42);
  --fx-atmo-lanterna: rgba(255, 200, 110, 0.42);
  --fx-atmo-ciliegio: rgba(255, 200, 220, 0.46);
  --fx-atmo-gru: rgba(250, 250, 255, 0.34);
  --fx-atmo-sumi: rgba(250, 240, 225, 0.32);
  --fx-atmo-acquerello: rgba(180, 210, 250, 0.38);
  --fx-atmo-anime: rgba(255, 160, 210, 0.42);
}

/* SVG / image-backed marks: lift only in pitch black (color-ink themes already use --fx-* vars).
   Never touch the account sun/moon orb — only .theme-fx / .skin-fx / .combo-fx children. */
html[data-light="black"] .theme-fx > .fx-glow,
html[data-light="black"] .theme-fx > .fx-fw,
html[data-light="black"] .theme-fx > .fx-bat,
html[data-light="black"] .theme-fx > .fx-pump,
html[data-light="black"] .theme-fx > .fx-heart,
html[data-light="black"] .theme-fx > .fx-sun,
html[data-light="black"] .theme-fx > .fx-halo,
html[data-light="black"] .theme-fx > .fx-cloud,
html[data-light="black"] .theme-fx > .fx-pstar,
html[data-light="black"] .theme-fx > .fx-ribbon,
html[data-light="black"] .theme-fx > .fx-star,
html[data-light="black"] .theme-fx > .fx-planet,
html[data-light="black"] .theme-fx > .fx-shoot,
html[data-light="black"] .theme-fx > .fx-caustic,
html[data-light="black"] .theme-fx > .fx-jelly,
html[data-light="black"] .theme-fx > .fx-branch,
html[data-light="black"] .theme-fx > .fx-moon,
html[data-light="black"] .skin-fx > .fx-ember,
html[data-light="black"] .skin-fx > .fx-spark,
html[data-light="black"] .skin-fx > .fx-petal,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-glow,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-fw,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-bat,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-pump,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-heart,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-sun,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-halo,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-cloud,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-pstar,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-ribbon,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-star,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-planet,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-shoot,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-caustic,
.look-stage[data-light-preview="black"] .look-stage-fx > .fx-jelly,
.look-stage[data-light-preview="black"] .look-stage-sfx > .fx-ember,
.look-stage[data-light-preview="black"] .look-stage-sfx > .fx-spark,
.look-stage[data-light-preview="black"] .look-stage-sfx > .fx-petal {
  filter: brightness(var(--fx-bright)) saturate(1.12);
}
html[data-light="black"] [data-fx="natale"] > .fx-glow,
.look-stage[data-light-preview="black"] [data-fx="natale"] > .fx-glow {
  filter: drop-shadow(0 0 10px var(--fx-warm)) brightness(var(--fx-bright));
}
html[data-light="black"] [data-fx="neon"] > .fx-floor::before,
.look-stage[data-light-preview="black"] [data-fx="neon"] > .fx-floor::before {
  opacity: 1;
  filter: brightness(1.35) saturate(1.2);
}
html[data-light="black"] [data-fx="neon"] > .fx-horizon,
.look-stage[data-light-preview="black"] [data-fx="neon"] > .fx-horizon {
  height: 3px;
  box-shadow: 0 0 16px var(--fx-neon-h-glow), 0 0 4px #fff;
}
html[data-light="black"] [data-fx="noir"] > .fx-lamp,
.look-stage[data-light-preview="black"] [data-fx="noir"] > .fx-lamp {
  background: radial-gradient(closest-side, rgba(255, 252, 240, 0.55), rgba(255, 250, 236, 0.18) 45%, transparent);
}
html[data-light="black"] [data-fx="radar"] > .fx-sweep,
.look-stage[data-light-preview="black"] [data-fx="radar"] > .fx-sweep {
  opacity: 0.95;
}
html[data-light="black"] [data-fx="radar"] > .fx-blip,
.look-stage[data-light-preview="black"] [data-fx="radar"] > .fx-blip {
  background: #f0fbff;
  box-shadow: 0 0 14px #9ad8ff, 0 0 4px #fff;
}
html[data-light="black"] [data-combo="synth"] > .fx-flash,
.look-stage[data-light-preview="black"] [data-combo="synth"] > .fx-flash {
  opacity: var(--fx-flash);
  filter: brightness(1.25);
}
/* Pane edge glints stay readable on #000 */
html[data-light="black"][data-look] .pane::before,
html[data-light="black"][data-look] .pane::after {
  filter: brightness(1.35) saturate(1.1);
}

/* Hidden tab: everything decorative stops */
html.fx-paused .theme-fx *,
html.fx-paused .theme-fx *::before,
html.fx-paused .theme-fx *::after,
html.fx-paused .combo-fx *,
html.fx-paused .skin-fx *,
html.fx-paused .look-stage *,
html.fx-paused .look-stage *::before,
html.fx-paused .look-stage *::after,
html.fx-paused .forest::after,
html.fx-paused[data-look] .pane::before,
html.fx-paused[data-look] .pane::after,
html.fx-paused .chrome-circlet::before,
html.fx-paused .chrome-circlet::after { animation-play-state: paused !important; }

/* —— natale: garland sits under the header; bulbs light up in turn —— */
[data-fx="natale"] > .fx-glow {
  left: 0;
  right: 0;
  top: var(--th-garland-y, 112px);
  width: auto;
  height: calc(var(--gw) / 6);
  background: var(--fx-glow-a) 0 0 / var(--gw) auto repeat-x;
  opacity: 0.12;
  transform-origin: 50% 40%;
  animation: fxBulbs calc(var(--fx-beat) * 0.5) ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 210, 140, 0.35));
  will-change: opacity, filter;
}
[data-fx="natale"] > .fx-glow.b {
  background-image: var(--fx-glow-b);
  animation-delay: -2.4s;
}
@keyframes fxBulbs {
  0%, 14% { opacity: var(--fx-bulb-lo); filter: drop-shadow(0 0 2px rgba(255, 200, 120, 0.15)) brightness(0.75); }
  22% { opacity: 0.55; filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.55)) brightness(1.05); }
  30%, 52% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 230, 170, 0.85)) brightness(1.35); }
  62% { opacity: 0.45; filter: drop-shadow(0 0 6px rgba(255, 210, 140, 0.4)) brightness(0.95); }
  72%, 100% { opacity: var(--fx-bulb-lo); filter: drop-shadow(0 0 2px rgba(255, 200, 120, 0.15)) brightness(0.75); }
}

/* —— capodanno: rockets rise, burst, sparkle and fade —— */
[data-fx="capodanno"] > .fx-fw {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  transform: translate(-50%, -50%);
  color: var(--c);
}
[data-fx="capodanno"] > .fx-fw::before,
[data-fx="capodanno"] > .fx-fw::after {
  content: "";
  position: absolute;
  opacity: 1;
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-delay: inherit;
}
[data-fx="capodanno"] > .fx-fw::before {
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 48);
  margin-left: calc(var(--u) * -1.4);
  border-radius: 2px;
  background: linear-gradient(to bottom, #fff 0%, currentColor 35%, transparent 100%);
  box-shadow: 0 0 10px currentColor;
  animation-name: fxRocket;
  animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1);
}
[data-fx="capodanno"] > .fx-fw::after {
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--fx-burst) center / contain no-repeat;
  mask: var(--fx-burst) center / contain no-repeat;
  scale: 0.1;
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 22px currentColor);
  animation-name: fxBurst;
  animation-timing-function: cubic-bezier(0.12, 0.75, 0.3, 1);
}
/* Full travel off-screen both ends (overflow clips); jump is invisible, no fade cheat. */
@keyframes fxRocket {
  0% { translate: 0 calc(var(--H) * 0.55); opacity: 1; }
  100% { translate: 0 calc(var(--H) * -0.55); opacity: 1; }
}
/* Closed pulse + full 360 so 0% pose == 100% pose. */
@keyframes fxBurst {
  0% { scale: 0.22; translate: 0 0; opacity: 0.85; rotate: 0deg; }
  22% { scale: 0.55; opacity: 1; rotate: 80deg; }
  48% { scale: 1.15; translate: 0 calc(var(--u) * 8); opacity: 1; rotate: 180deg; }
  72% { scale: 0.7; translate: 0 calc(var(--u) * 6); opacity: 0.9; rotate: 280deg; }
  100% { scale: 0.22; translate: 0 0; opacity: 0.85; rotate: 360deg; }
}

/* —— halloween: bats drift and flap, pumpkin faces flicker —— */
[data-fx="halloween"] > .fx-bat {
  width: calc(var(--u) * var(--s));
  aspect-ratio: 2 / 1;
  background: var(--fx-bat) center / contain no-repeat;
  opacity: 0.85;
  animation: fxBatDrift var(--t) ease-in-out infinite, fxBatFlap var(--f) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.3s);
}
@keyframes fxBatDrift {
  0%, 100% { translate: 0 0; }
  25% { translate: calc(var(--u) * 60) calc(var(--u) * -22); }
  50% { translate: calc(var(--u) * 110) calc(var(--u) * 12); }
  75% { translate: calc(var(--u) * 46) calc(var(--u) * 30); }
}
@keyframes fxBatFlap {
  from { scale: 1 1; }
  to { scale: 0.92 0.5; }
}
[data-fx="halloween"] > .fx-pump {
  top: auto;
  width: min(calc(var(--u) * var(--s)), calc(var(--W) * 0.28));
  aspect-ratio: 140 / 110;
  background: var(--fx-pumpkin) center / contain no-repeat;
}
[data-fx="halloween"] > .fx-pump.p1 { left: calc(var(--u) * 10); bottom: calc(var(--u) * 14); }
[data-fx="halloween"] > .fx-pump.p2 { left: auto; right: calc(var(--u) * 14); bottom: calc(var(--u) * 10); }
[data-fx="halloween"] > .fx-pump::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fx-face) center / contain no-repeat;
  animation: fxCandle calc(var(--fx-beat) * 0.5) linear infinite;
}
[data-fx="halloween"] > .fx-pump.p2::after { animation-duration: 4.3s; animation-delay: -1.3s; }
@keyframes fxCandle {
  0% { opacity: 0.9; }
  8% { opacity: 0.62; }
  13% { opacity: 0.95; }
  22% { opacity: 0.7; }
  30% { opacity: 1; }
  41% { opacity: 0.76; }
  50% { opacity: 0.92; }
  58% { opacity: 0.6; }
  66% { opacity: 0.88; }
  79% { opacity: 1; }
  88% { opacity: 0.72; }
  100% { opacity: 0.9; }
}

/* —— valentino: hearts rise and sway —— */
[data-fx="valentino"] > .fx-heart {
  top: 100%;
  width: calc(var(--u) * var(--s));
  aspect-ratio: 108 / 96;
  background: var(--fx-heart) center / contain no-repeat;
  opacity: 0.72;
  animation: fxRiseFade var(--t) linear infinite, fxHeartSway var(--f) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.4s);
}
/* Starts below stage, ends above; both clipped — period shift, no fade. */
@keyframes fxRiseFade {
  0% { translate: 0 0; opacity: 0.72; }
  100% { translate: 0 calc(var(--H) * -1.12); opacity: 0.72; }
}
@keyframes fxHeartSway {
  from { transform: translateX(calc(var(--u) * -14)) rotate(-9deg); }
  to { transform: translateX(calc(var(--u) * 14)) rotate(9deg); }
}

/* —— neon: sun glow breathes, grid rolls toward you —— */
[data-fx="neon"] > .fx-floor {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: calc(var(--H) * 0.34);
  overflow: hidden;
  perspective: calc(var(--u) * 240);
  perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%);
}
[data-fx="neon"] > .fx-floor::before {
  content: "";
  position: absolute;
  left: -60%;
  right: -60%;
  top: 0;
  height: 260%;
  transform-origin: 50% 0;
  background:
    repeating-linear-gradient(to bottom, var(--fx-neon-line) 0 2px, transparent 2px calc(var(--u) * 48)),
    repeating-linear-gradient(to right, var(--fx-neon-cross) 0 2px, transparent 2px calc(var(--u) * 48));
  animation: fxGridRoll var(--fx-beat) linear infinite;
}
@keyframes fxGridRoll {
  from { transform: rotateX(70deg) translateY(0); }
  to { transform: rotateX(70deg) translateY(calc(var(--u) * 48)); }
}
[data-fx="neon"] > .fx-horizon {
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--H) * 0.34);
  height: 2px;
  background: var(--fx-neon-h);
  box-shadow: 0 0 10px var(--fx-neon-h-glow);
}
[data-fx="neon"] > .fx-sun,
[data-fx="neon"] > .fx-halo {
  top: auto;
  left: 50%;
  bottom: calc(var(--H) * 0.34);
}
[data-fx="neon"] > .fx-sun {
  width: calc(var(--u) * 220);
  aspect-ratio: 156 / 132;
  transform: translateX(-50%);
  background: var(--fx-sun) center bottom / contain no-repeat;
  opacity: 0.85;
}
[data-fx="neon"] > .fx-halo {
  width: calc(var(--u) * 460);
  aspect-ratio: 1;
  transform: translate(-50%, 42%);
  background: radial-gradient(closest-side, rgba(255, 94, 200, 0.34), rgba(255, 140, 80, 0.12) 50%, transparent);
  animation: fxBreath var(--fx-beat) ease-in-out infinite alternate;
}
@keyframes fxBreath {
  from { opacity: 0.4; scale: 0.94; }
  to { opacity: 0.95; scale: 1.06; }
}

/* —— pixel: blinking pixel stars, clouds moving in steps —— */
[data-fx="pixel"] > .fx-cloud {
  width: calc(var(--u) * var(--s));
  aspect-ratio: 72 / 30;
  background: var(--fx-cloud) center / contain no-repeat;
  image-rendering: pixelated;
  animation: fxCloudStep var(--t) steps(30) calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxCloudStep {
  0%, 100% { translate: 0 0; }
  50% { translate: calc(var(--W) * 0.2) 0; }
}
[data-fx="pixel"] > .fx-pstar {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  background: var(--fx-star) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: fxBlink var(--t) step-end calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxBlink {
  0% { opacity: 1; }
  64% { opacity: 0.15; }
  80% { opacity: 1; }
}

/* —— noir: the window light flickers now and then —— */
[data-fx="noir"] > .fx-lamp {
  left: auto;
  right: 4%;
  top: 0;
  width: calc(var(--u) * 560);
  aspect-ratio: 1;
  transform: translate(35%, -38%);
  background: radial-gradient(closest-side, var(--fx-lamp), color-mix(in srgb, var(--fx-lamp) 40%, transparent) 45%, transparent);
  animation: fxFlicker calc(var(--fx-beat) * 2) linear infinite;
}
@keyframes fxFlicker {
  0%, 68% { opacity: 1; }
  69% { opacity: 0.45; }
  70% { opacity: 0.9; }
  71.5% { opacity: 0.5; }
  73% { opacity: 1; }
  88% { opacity: 1; }
  89% { opacity: 0.6; }
  90.5%, 100% { opacity: 1; }
}

/* —— acquerello: washes breathe colour very slowly —— */
[data-fx="acquerello"] > .fx-wash {
  width: min(calc(var(--W) * 0.46), calc(var(--u) * 640));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.3;
  animation: fxWash var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
@keyframes fxWash {
  from { opacity: var(--fx-wash-lo); scale: 0.94; }
  to { opacity: var(--fx-wash-hi); scale: 1.06; }
}

/* —— aurora: ribbons wave, stars twinkle —— */
[data-fx="aurora"] > .fx-ribbon {
  left: -10%;
  width: 120%;
  height: calc(var(--H) * var(--s));
  background: var(--fx-ribbon) center / 100% 100% no-repeat;
  transform-origin: 50% 0;
  opacity: var(--fx-aurora-op);
  animation: fxAurora var(--t) ease-in-out infinite, fxAuroraGlow var(--f) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.6s);
}
[data-fx="aurora"] > .fx-ribbon.flip { transform: scaleX(-1); }
@keyframes fxAurora {
  0%, 100% { translate: calc(var(--W) * -0.05) 0; scale: 1 1; }
  50% { translate: calc(var(--W) * 0.05) calc(var(--u) * 10); scale: 1.06 1.18; }
}
@keyframes fxAuroraGlow {
  from { opacity: calc(var(--fx-aurora-op) * 0.56); }
  to { opacity: calc(var(--fx-aurora-op) * 1.44); }
}
[data-fx="aurora"] > .fx-star,
[data-fx="cosmo"] > .fx-star {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(220, 235, 255, 0.5) 45%, transparent);
  animation: fxTwinkle var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
[data-fx="cosmo"] > .fx-star.x {
  border-radius: 0;
  background:
    radial-gradient(closest-side, #fff, rgba(220, 235, 255, 0.45) 30%, transparent 60%),
    linear-gradient(to right, transparent, rgba(235, 240, 255, 0.8) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(to bottom, transparent, rgba(235, 240, 255, 0.8) 50%, transparent) center / 1px 100% no-repeat;
}
@keyframes fxTwinkle {
  from { opacity: 0.12; scale: 0.7; }
  to { opacity: 1; scale: 1; }
}

/* —— cosmo: drifting planet, a rare shooting star —— */
[data-fx="cosmo"] > .fx-planet {
  width: calc(var(--u) * 140);
  aspect-ratio: 120 / 80;
  background: var(--fx-planet) center / contain no-repeat;
  opacity: 0.9;
  animation: fxPlanet calc(var(--fx-beat) * 4) ease-in-out infinite;
}
@keyframes fxPlanet {
  0%, 100% { translate: 0 0; rotate: -6deg; }
  50% { translate: calc(var(--W) * -0.07) calc(var(--H) * 0.06); rotate: 5deg; }
}
[data-fx="cosmo"] > .fx-shoot {
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 2);
  border-radius: 2px;
  transform-origin: 0 50%;
  transform: rotate(-29deg);
  background: linear-gradient(to right, #fff, rgba(200, 220, 255, 0.55) 22%, transparent);
  opacity: 1;
  animation: fxShoot var(--t) linear calc(var(--d, 0) * -1s) infinite;
}
/* Off-screen → off-screen streak; stage overflow hides the reset. */
@keyframes fxShoot {
  0% { translate: calc(var(--u) * 120) calc(var(--u) * -80); opacity: 1; }
  100% { translate: calc(var(--u) * -420) calc(var(--u) * 260); opacity: 1; }
}

/* —— abissi: caustics shimmer, bubbles rise, a jellyfish drifts —— */
[data-fx="abissi"] > .fx-caustic {
  left: calc(var(--u) * -40);
  right: calc(var(--u) * -40);
  top: 0;
  height: calc(var(--H) * 0.45);
  background: var(--fx-caustic) 0 0 / calc(var(--u) * var(--s)) repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent);
  mask-image: linear-gradient(to bottom, #000 15%, transparent);
  animation: fxCaustic var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxCaustic {
  0%, 100% { opacity: var(--fx-caustic-lo); translate: calc(var(--u) * -18) 0; }
  50% { opacity: var(--fx-caustic-hi); translate: calc(var(--u) * 18) calc(var(--u) * 6); }
}
[data-fx="abissi"] > .fx-bubble {
  top: 100%;
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid var(--fx-bubble);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 14%, rgba(180, 240, 255, 0.16) 34%, rgba(180, 240, 255, 0.05) 70%);
  opacity: 0.8;
  animation: fxBubble var(--t) linear infinite, fxSway var(--f) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.5s);
}
@keyframes fxBubble {
  0% { translate: 0 0; opacity: 0.8; }
  100% { translate: 0 calc(var(--H) * -1.06); opacity: 0.8; }
}
@keyframes fxSway {
  from { transform: translateX(calc(var(--u) * -9)); }
  to { transform: translateX(calc(var(--u) * 9)); }
}
[data-fx="abissi"] > .fx-jelly {
  width: calc(var(--u) * 66);
  aspect-ratio: 60 / 90;
  background: var(--fx-jelly) center / contain no-repeat;
  transform-origin: 50% 25%;
  opacity: 0.8;
  animation: fxJellyDrift calc(var(--fx-beat) * 4) ease-in-out infinite, fxJellyPulse calc(var(--fx-beat) * 0.5) ease-in-out infinite;
}
@keyframes fxJellyDrift {
  0%, 100% { translate: 0 0; }
  40% { translate: calc(var(--u) * 26) calc(var(--H) * -0.14); }
  70% { translate: calc(var(--u) * -12) calc(var(--H) * -0.22); }
}
@keyframes fxJellyPulse {
  0%, 100% { scale: 1 1; }
  40% { scale: 1.08 0.9; }
  70% { scale: 0.96 1.05; }
}

/* —— lucciole: fireflies wander and glow —— */
[data-fx="lucciole"] > .fx-fly {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background: radial-gradient(closest-side, #fbffc4 0 18%, rgba(222, 242, 120, 0.55) 36%, rgba(200, 230, 90, 0.16) 62%, transparent);
  opacity: 0.1;
  animation: fxFlyA var(--t) ease-in-out infinite, fxGlowPulse var(--f) ease-in-out infinite;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.7s);
}
[data-fx="lucciole"] > .fx-fly:nth-child(3n + 2) { animation-name: fxFlyB, fxGlowPulse; }
[data-fx="lucciole"] > .fx-fly:nth-child(3n) { animation-name: fxFlyC, fxGlowPulse; }
@keyframes fxFlyA {
  0%, 100% { translate: 0 0; }
  33% { translate: calc(var(--u) * 36) calc(var(--u) * -26); }
  66% { translate: calc(var(--u) * -18) calc(var(--u) * -46); }
}
@keyframes fxFlyB {
  0%, 100% { translate: 0 0; }
  40% { translate: calc(var(--u) * -40) calc(var(--u) * 14); }
  70% { translate: calc(var(--u) * -12) calc(var(--u) * -30); }
}
@keyframes fxFlyC {
  0%, 100% { translate: 0 0; }
  30% { translate: calc(var(--u) * 20) calc(var(--u) * 30); }
  65% { translate: calc(var(--u) * 46) calc(var(--u) * -8); }
}
@keyframes fxGlowPulse {
  0%, 100% { opacity: var(--fx-fly-lo); }
  45% { opacity: var(--fx-fly-hi); }
  60% { opacity: calc(var(--fx-fly-hi) * 0.8); }
}

/* —— codice: dim glyph columns falling —— */
[data-fx="codice"] > .fx-col {
  top: 0;
  font: calc(var(--u) * 15) / 1.15 ui-monospace, "Cascadia Mono", Consolas, "MS Gothic", monospace;
  color: var(--fx-code);
  white-space: pre;
  text-shadow: 0 0 6px var(--fx-code-glow), 0 0 14px var(--fx-code-glow);
  opacity: calc(var(--o) * var(--fx-mark));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  translate: 0 -100%;
  animation: fxFall var(--t) linear calc(var(--d, 0) * -1s) infinite;
}
html[data-light="black"] [data-fx="codice"] > .fx-col,
.look-stage[data-light-preview="black"] [data-fx="codice"] > .fx-col {
  font-size: calc(var(--u) * 16);
  letter-spacing: 0.02em;
  text-shadow:
    0 0 4px #eafff2,
    0 0 10px var(--fx-code-glow),
    0 0 22px var(--fx-code-glow);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000);
}
@keyframes fxFall {
  0% { translate: 0 -120%; opacity: calc(var(--o) * var(--fx-mark)); }
  100% { translate: 0 120%; opacity: calc(var(--o) * var(--fx-mark)); }
}

/* —— Skins —— */

/* Onda (rare): a slow glint runs along the pane edges */
html[data-look="onda"] .pane::before,
html[data-look="onda"] .pane::after,
.look-stage[data-skin-preview="onda"] .look-stage-card::before,
.look-stage[data-skin-preview="onda"] .look-stage-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38%;
  height: 1.5px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(150, 240, 240, 0.85), transparent);
  translate: -100% 0;
  opacity: 1;
  animation: fxEdgeRun var(--fx-beat) ease-in-out infinite;
}
html[data-look="onda"] .pane::before,
.look-stage[data-skin-preview="onda"] .look-stage-card::before {
  top: auto;
  bottom: 0;
  animation-direction: reverse;
  animation-delay: -5.5s;
}
.look-stage[data-skin-preview="onda"] .look-stage-card,
.look-stage[data-skin-preview="prisma"] .look-stage-card { position: relative; }
/* Closed forth-and-back glint; 0% == 100%, no fade jump. */
@keyframes fxEdgeRun {
  0%, 100% { translate: -100% 0; opacity: 1; }
  50% { translate: 270% 0; opacity: 1; }
}

/* Prisma (epic): pane edges drift through the spectrum */
html[data-look="prisma"] .pane::before,
html[data-look="prisma"] .pane::after,
.look-stage[data-skin-preview="prisma"] .look-stage-card::before,
.look-stage[data-skin-preview="prisma"] .look-stage-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #ff8ad8, #8ab4ff 50%, #8affd0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
  animation: fxPrisma calc(var(--fx-beat) * 2) ease-in-out infinite alternate;
}
html[data-look="prisma"] .pane::after,
.look-stage[data-skin-preview="prisma"] .look-stage-card::after {
  background: linear-gradient(300deg, #ffd08a, #ff8ad8 50%, #b08aff);
  animation-delay: -14s;
}
@keyframes fxPrisma {
  from { opacity: 0.85; }
  to { opacity: 0.05; }
}

/* Cometa (epic): a comet with a fading tail circles each glass orb */
html[data-look="cometa"] .wrap > header .chrome-circlet--lang::after,
html[data-look="cometa"] .wrap > header .chrome-circlet--account::after,
.look-stage[data-skin-preview="cometa"] .look-stage-orb--glass::after {
  content: "";
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(circle at 50% 3.5%, #fff 0 2.6%, rgba(190, 210, 255, 0.7) 3.8%, transparent 6.5%),
    conic-gradient(transparent 0 285deg, rgba(160, 190, 255, 0) 285deg, rgba(170, 196, 255, 0.6) 359deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 97%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 97%, transparent 99%);
  animation: fxSpin var(--fx-beat) linear infinite;
}
html[data-look="cometa"] .wrap > header .chrome-circlet--account::after { animation-duration: 36s; animation-delay: -8s; }
.look-stage[data-skin-preview="cometa"] .look-stage-orb--glass { position: relative; }
.look-stage[data-skin-preview="cometa"] .look-stage-orb--glass:last-child::after { animation-duration: 36s; animation-delay: -8s; }
@keyframes fxSpin {
  to { transform: rotate(360deg); }
}

/* Lucciola (legendary): fireflies circle the logo orb */
html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::after,
html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::before,
.look-stage[data-skin-preview="lucciola"] .look-stage-orb--mark::after,
.look-stage[data-skin-preview="lucciola"] .look-stage-orb--mark::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  pointer-events: none;
  filter: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 4%, #fbffc8 0 2.2%, rgba(226, 240, 120, 0.45) 3.8%, transparent 7%),
    radial-gradient(circle at 88% 70%, #f4ffb0 0 1.8%, rgba(210, 236, 110, 0.4) 3.2%, transparent 6%),
    radial-gradient(circle at 14% 76%, #fbffc8 0 1.6%, rgba(210, 236, 110, 0.35) 3%, transparent 5.5%);
  animation: fxSpin calc(var(--fx-beat) * 2) linear infinite, fxGlowSoft calc(var(--fx-beat) * 0.5) ease-in-out infinite;
}
html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::before,
.look-stage[data-skin-preview="lucciola"] .look-stage-orb--mark::before {
  inset: -16%;
  background:
    radial-gradient(circle at 20% 18%, #f4ffb0 0 2%, rgba(210, 236, 110, 0.4) 3.6%, transparent 6.5%),
    radial-gradient(circle at 84% 30%, #fbffc8 0 1.6%, rgba(226, 240, 120, 0.35) 3%, transparent 5.5%);
  animation: fxSpin calc(var(--fx-beat) * 4) linear infinite reverse, fxGlowSoft calc(var(--fx-beat) * 0.5) ease-in-out calc(var(--fx-beat) * -0.25) infinite;
}
.look-stage[data-skin-preview="lucciola"] .look-stage-orb--mark { position: relative; }
@keyframes fxGlowSoft {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 1; }
}

/* Fenice (legendary): embers rise slowly from the bottom */
[data-sfx="fenice"] > .fx-ember {
  top: 100%;
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff2c0 0 22%, #ffb050 48%, rgba(240, 100, 30, 0.45) 72%, transparent);
  opacity: 0.85;
  animation: fxEmber var(--t) linear infinite, fxSway var(--f) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1s), calc(var(--d) * -0.5s);
}
@keyframes fxEmber {
  0% { translate: 0 0; opacity: 0.85; }
  100% { translate: 0 calc(var(--H) * -0.85); opacity: 0.85; }
}

/* —— circuito: slow traces along the edges —— */
[data-fx="circuito"] > .fx-trace {
  opacity: 0.9;
  animation-duration: var(--t);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--d, 0) * -1s);
}
[data-fx="circuito"] > .fx-trace.h {
  width: calc(var(--u) * 180);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--fx-code), transparent);
  box-shadow: 0 0 8px var(--fx-code-glow);
  animation-name: fxTraceX;
}
[data-fx="circuito"] > .fx-trace.v {
  width: 3px;
  border-radius: 3px;
  box-shadow: 0 0 8px var(--fx-neon-h-glow);
  height: calc(var(--u) * 160);
  background: linear-gradient(180deg, transparent, var(--fx-neon-h), transparent);
  animation-name: fxTraceY;
}
@keyframes fxTraceX {
  0%, 100% { translate: 0 0; opacity: 0.9; }
  50% { translate: calc(var(--W) * 0.42) 0; opacity: 0.9; }
}
@keyframes fxTraceY {
  0%, 100% { translate: 0 0; opacity: 0.85; }
  50% { translate: 0 calc(var(--H) * 0.28); opacity: 0.85; }
}

/* —— vetrata: coloured glass squares breathing in the corners —— */
[data-fx="vetrata"] > .fx-glass {
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 92);
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  animation: fxGlass var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxGlass {
  0%, 100% { opacity: var(--fx-glass-lo); }
  50% { opacity: var(--fx-glass-hi); }
}

/* —— radar: one slow arc, kept clear of the header orbs' orbit speck —— */
[data-fx="radar"] > .fx-sweep {
  width: calc(var(--u) * 200);
  height: calc(var(--u) * 200);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 76%, var(--fx-radar) 88%, transparent 100%);
  animation: fxSweep calc(var(--fx-beat) * 2) linear infinite;
  opacity: 0.75;
}
@keyframes fxSweep {
  to { transform: rotate(360deg); }
}

/* —— lanterna: a few warm squares drifting at the sides —— */
[data-fx="lanterna"] > .fx-lantern {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s) * 1.35);
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(#f6d48a, #e07030 70%, #8a3018);
  box-shadow: 0 0 10px rgba(240, 160, 60, 0.35);
  animation: fxLantern var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
@keyframes fxLantern {
  from { translate: 0 0; opacity: var(--fx-lantern-lo); }
  to { translate: 0 calc(var(--u) * -16); opacity: var(--fx-lantern-hi); }
}

/* —— ciliegio / hanami: sakura petals drift at the edges —— */
[data-fx="ciliegio"] > .fx-petal,
[data-sfx="hanami"] > .fx-petal {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s) * 1.4);
  border-radius: 80% 0 80% 0;
  background: var(--fx-petal);
  opacity: 0.9;
  animation: fxPetal var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
[data-fx="ciliegio"] > .fx-petal.b,
[data-sfx="hanami"] > .fx-petal.b { background: var(--fx-petal-b); }
/* Closed drift path — ends on start pose. */
@keyframes fxPetal {
  0%, 100% { translate: 0 0; rotate: -24deg; opacity: 0.9; }
  28% { translate: calc(var(--u) * 28) calc(var(--H) * 0.2); rotate: 8deg; opacity: 0.9; }
  55% { translate: calc(var(--u) * 12) calc(var(--H) * 0.42); rotate: 42deg; opacity: 0.9; }
  78% { translate: calc(var(--u) * -14) calc(var(--H) * 0.18); rotate: 6deg; opacity: 0.9; }
}

/* —— gru: paper cranes glide —— */
[data-fx="gru"] > .fx-crane {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s) * 0.55);
  background: var(--fx-crane);
  clip-path: polygon(0 48%, 40% 18%, 50% 46%, 60% 18%, 100% 48%, 62% 78%, 50% 54%, 38% 78%);
  opacity: 0.9;
  animation: fxCrane var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
/* Closed glide loop. */
@keyframes fxCrane {
  0%, 100% { translate: 0 0; rotate: -6deg; opacity: 0.9; }
  30% { translate: calc(var(--W) * 0.1) calc(var(--u) * -26); rotate: 2deg; opacity: 0.9; }
  58% { translate: calc(var(--W) * 0.18) calc(var(--u) * -8); rotate: 10deg; opacity: 0.9; }
  82% { translate: calc(var(--W) * 0.06) calc(var(--u) * 14); rotate: 0deg; opacity: 0.9; }
}

/* —— sumi: ink blooms, pale on the dark ground —— */
[data-fx="sumi"] > .fx-ink {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s) * 0.72);
  border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 35% 40%, rgba(244, 236, 226, 0.42), rgba(40, 32, 28, 0.2) 68%, transparent 74%);
  animation: fxInk var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
[data-fx="sumi"] > .fx-ink.b { animation-direction: alternate-reverse; }
@keyframes fxInk {
  from { scale: 0.82; opacity: var(--fx-ink-lo); rotate: -8deg; }
  to { scale: 1.08; opacity: var(--fx-ink-hi); rotate: 6deg; }
}

/* —— supernova: fewer, quieter sparks than fenice —— */
[data-sfx="supernova"] > .fx-spark {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c8 0 28%, #f0b040 58%, transparent 74%);
  animation: fxSpark var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxSpark {
  0%, 100% { opacity: var(--fx-spark-lo); scale: 0.75; }
  50% { opacity: var(--fx-spark-hi); scale: 1.12; }
}

/* Rare and up that were still: a slow glint on the pane, not on the orbiting speck.
   Rame / bronzo / notte only recolour the existing ring (::before), never ::after. */
html[data-look="lava"] .pane,
html[data-look="aurora"] .pane,
html[data-look="ghiaccio"] .pane,
html[data-look="nebbia"] .pane,
html[data-look="corallo"] .pane,
html[data-look="ametista"] .pane,
html[data-look="oroantico"] .pane,
html[data-look="forja"] .pane,
html[data-look="sole"] .pane,
html[data-look="smeraldo"] .pane,
html[data-look="opale"] .pane,
html[data-look="atelier"] .pane {
  position: relative;
}
html[data-look="lava"] .pane::before,
html[data-look="aurora"] .pane::before,
html[data-look="ghiaccio"] .pane::before,
html[data-look="nebbia"] .pane::before,
html[data-look="corallo"] .pane::before,
html[data-look="ametista"] .pane::before,
html[data-look="oroantico"] .pane::before,
html[data-look="forja"] .pane::before,
html[data-look="sole"] .pane::before,
html[data-look="smeraldo"] .pane::before,
.look-stage[data-skin-preview="lava"] .look-stage-card::before,
.look-stage[data-skin-preview="aurora"] .look-stage-card::before,
.look-stage[data-skin-preview="ghiaccio"] .look-stage-card::before,
.look-stage[data-skin-preview="nebbia"] .look-stage-card::before,
.look-stage[data-skin-preview="corallo"] .look-stage-card::before,
.look-stage[data-skin-preview="ametista"] .look-stage-card::before,
.look-stage[data-skin-preview="oroantico"] .look-stage-card::before,
.look-stage[data-skin-preview="forja"] .look-stage-card::before,
.look-stage[data-skin-preview="sole"] .look-stage-card::before,
.look-stage[data-skin-preview="smeraldo"] .look-stage-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32%;
  height: 1.5px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  animation: fxEdgeRun calc(var(--fx-beat) * 2) ease-in-out infinite;
}
html[data-look="lava"] .pane::before,
.look-stage[data-skin-preview="lava"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #e07040, transparent); }
html[data-look="aurora"] .pane::before,
.look-stage[data-skin-preview="aurora"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #e090b8, transparent); animation-delay: -3s; }
html[data-look="ghiaccio"] .pane::before,
.look-stage[data-skin-preview="ghiaccio"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #90c8e0, transparent); animation-delay: -6s; }
html[data-look="nebbia"] .pane::before,
.look-stage[data-skin-preview="nebbia"] .look-stage-card::before { background: linear-gradient(90deg, transparent, rgba(168, 176, 184, 0.7), transparent); animation-duration: 24s; }
html[data-look="corallo"] .pane::before,
.look-stage[data-skin-preview="corallo"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #e88078, transparent); animation-delay: -4s; }
html[data-look="ametista"] .pane::before,
.look-stage[data-skin-preview="ametista"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #b070e0, transparent); animation-delay: -8s; }
html[data-look="oroantico"] .pane::before,
.look-stage[data-skin-preview="oroantico"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #e8c060, transparent); animation-delay: -2s; }
html[data-look="forja"] .pane::before,
.look-stage[data-skin-preview="forja"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #d07040, transparent); animation-delay: -7s; }
html[data-look="sole"] .pane::before,
.look-stage[data-skin-preview="sole"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #ffe080, transparent); animation-delay: -5s; }
html[data-look="smeraldo"] .pane::before,
.look-stage[data-skin-preview="smeraldo"] .look-stage-card::before { background: linear-gradient(90deg, transparent, #3dbe7a, transparent); animation-duration: 16s; }

html[data-look="opale"] .pane::before,
.look-stage[data-skin-preview="opale"] .look-stage-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.5px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #ff8ad8, #8ab4ff, #8affd0, #ffe080, #ff8ad8);
  background-size: 200% 100%;
  animation: fxOpale calc(var(--fx-beat) * 2) linear infinite;
}
html[data-look="opale"] .pane::after,
.look-stage[data-skin-preview="opale"] .look-stage-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #8affd0, #ffe080, #ff8ad8, #8ab4ff, #8affd0);
  background-size: 200% 100%;
  animation: fxOpale calc(var(--fx-beat) * 2) linear infinite reverse;
}
.look-stage[data-skin-preview="opale"] .look-stage-card,
.look-stage[data-skin-preview="smeraldo"] .look-stage-card,
.look-stage[data-skin-preview="lava"] .look-stage-card { position: relative; }
@keyframes fxOpale {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}

html[data-look="rame"] .wrap > header .chrome-circlet--lang::before,
html[data-look="rame"] .wrap > header .chrome-circlet--account::before {
  background: radial-gradient(circle, transparent 54%, rgba(212, 140, 72, 0.72) 58%, transparent 64%);
  animation-duration: 28s;
}
html[data-look="bronzo"] .wrap > header .chrome-circlet--lang::before,
html[data-look="bronzo"] .wrap > header .chrome-circlet--account::before {
  background: radial-gradient(circle, transparent 54%, rgba(200, 146, 72, 0.7) 58%, transparent 64%);
  animation-duration: 32s;
}
html[data-look="notte"] .wrap > header .chrome-circlet--lang::before,
html[data-look="notte"] .wrap > header .chrome-circlet--account::before {
  background: radial-gradient(circle, transparent 54%, rgba(96, 128, 208, 0.72) 58%, transparent 64%);
  animation-duration: 36s;
}

html[data-look="atelier"] .pane {
  animation: fxAtelierEdge calc(var(--fx-beat) * 2) ease-in-out infinite;
}
@keyframes fxAtelierEdge {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent); }
  50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 42%, transparent); }
}

/* Calm by request: no motion, a pleasant still frame instead */
/* Atmosphere shared by every theme. Colour comes from the theme, not a line. */
[data-fx] > .fx-atmo {
  left: 0;
  top: 0;
  width: 46%;
  height: 38%;
  background: radial-gradient(ellipse at 20% 10%, rgba(180, 210, 170, 0.22), transparent 70%);
  animation: fxAtmo var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
[data-fx="aurora"] > .fx-atmo { background: radial-gradient(ellipse at 30% 0%, var(--fx-atmo-aurora), transparent 68%); }
[data-fx="cosmo"] > .fx-atmo { background: radial-gradient(ellipse at 80% 0%, var(--fx-atmo-cosmo), transparent 70%); }
[data-fx="abissi"] > .fx-atmo { background: radial-gradient(ellipse at 50% 100%, var(--fx-atmo-abissi), transparent 62%); top: auto; bottom: 0; }
[data-fx="lucciole"] > .fx-atmo { background: radial-gradient(ellipse at 20% 80%, var(--fx-atmo-lucciole), transparent 70%); top: auto; bottom: 0; }
[data-fx="codice"] > .fx-atmo { background: radial-gradient(ellipse at 0% 0%, var(--fx-atmo-codice), transparent 70%); }
[data-fx="noir"] > .fx-atmo { background: radial-gradient(ellipse at 80% 0%, var(--fx-atmo-noir), transparent 60%); }
[data-fx="neon"] > .fx-atmo { background: radial-gradient(ellipse at 70% 20%, var(--fx-atmo-neon), transparent 64%); }
[data-fx="pixel"] > .fx-atmo { background: radial-gradient(ellipse at 10% 0%, var(--fx-atmo-pixel), transparent 70%); }
[data-fx="natale"] > .fx-atmo { background: radial-gradient(ellipse at 50% 0%, var(--fx-atmo-natale), transparent 68%); }
[data-fx="halloween"] > .fx-atmo { background: radial-gradient(ellipse at 10% 80%, var(--fx-atmo-halloween), transparent 68%); top: auto; bottom: 0; }
[data-fx="capodanno"] > .fx-atmo { background: radial-gradient(ellipse at 50% 0%, var(--fx-atmo-capodanno), transparent 66%); }
[data-fx="valentino"] > .fx-atmo { background: radial-gradient(ellipse at 80% 10%, var(--fx-atmo-valentino), transparent 68%); }
[data-fx="circuito"] > .fx-atmo { background: radial-gradient(ellipse at 0% 0%, var(--fx-atmo-circuito), transparent 70%); }
[data-fx="vetrata"] > .fx-atmo { background: radial-gradient(ellipse at 20% 0%, var(--fx-atmo-vetrata), transparent 68%); }
[data-fx="radar"] > .fx-atmo { background: radial-gradient(ellipse at 90% 10%, var(--fx-atmo-radar), transparent 66%); }
[data-fx="lanterna"] > .fx-atmo { background: radial-gradient(ellipse at 10% 20%, var(--fx-atmo-lanterna), transparent 68%); }
[data-fx="ciliegio"] > .fx-atmo { background: radial-gradient(ellipse at 30% 0%, var(--fx-atmo-ciliegio), transparent 70%); }
[data-fx="gru"] > .fx-atmo { background: radial-gradient(ellipse at 80% 0%, var(--fx-atmo-gru), transparent 66%); }
[data-fx="sumi"] > .fx-atmo { background: radial-gradient(ellipse at 10% 20%, var(--fx-atmo-sumi), transparent 70%); }
[data-fx="acquerello"] > .fx-atmo { background: radial-gradient(ellipse at 20% 30%, var(--fx-atmo-acquerello), transparent 70%); }
[data-fx="anime"] > .fx-atmo { background: radial-gradient(ellipse at 80% 0%, var(--fx-atmo-anime), transparent 64%); }
@keyframes fxAtmo {
  from { opacity: calc(0.45 * var(--fx-soft)); }
  to { opacity: calc(1 * var(--fx-soft)); }
}

[data-fx="circuito"] > .fx-node {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #eafff4 0 30%, #3dbe7a 55%, transparent 72%);
  box-shadow: 0 0 10px rgba(90, 220, 170, 0.8);
  animation: fxNode var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
[data-fx="circuito"] > .fx-bead {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4fff8;
  box-shadow: 0 0 12px #5adcaa;
  animation: fxBead var(--t) linear calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxNode {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50% { opacity: 1; scale: 1.15; }
}
@keyframes fxBead {
  0% { translate: 0 0; opacity: 1; }
  25% { translate: calc(var(--u) * 160) 0; opacity: 1; }
  50% { translate: calc(var(--u) * 160) calc(var(--u) * 120); opacity: 1; }
  75% { translate: 0 calc(var(--u) * 120); opacity: 1; }
  100% { translate: 0 0; opacity: 1; }
}

[data-fx="vetrata"] > .fx-rose {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255, 120, 160, 0.55), rgba(120, 180, 255, 0.5), rgba(255, 210, 120, 0.5), rgba(140, 220, 160, 0.5), rgba(255, 120, 160, 0.55));
  box-shadow: inset 0 0 0 8px rgba(20, 12, 18, 0.55), 0 0 18px rgba(255, 180, 210, 0.25);
  animation: fxRose var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
[data-fx="vetrata"] > .fx-glass.arch {
  width: calc(var(--u) * 54);
  height: calc(var(--u) * 78);
  border-radius: 40px 40px 8px 8px;
  background: var(--c);
  box-shadow: inset 0 0 0 3px rgba(12, 8, 14, 0.55), 0 0 16px var(--c);
  animation: fxGlass var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
[data-fx="vetrata"] > .fx-glass.slim { width: calc(var(--u) * 28); height: calc(var(--u) * 64); }
@keyframes fxRose {
  from { rotate: -8deg; opacity: 0.55; }
  to { rotate: 8deg; opacity: 0.95; }
}

[data-fx="radar"] > .fx-ring {
  width: calc(var(--u) * 120 * var(--s));
  height: calc(var(--u) * 120 * var(--s));
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fx-radar) 110%, #fff 10%);
  box-shadow: 0 0 12px var(--fx-radar);
  animation: fxRing calc(var(--fx-beat) * 2) ease-out infinite;
}
[data-fx="radar"] > .fx-ring.b { animation-delay: -5s; }
[data-fx="radar"] > .fx-ring.c { animation-delay: -10s; }
[data-fx="radar"] > .fx-blip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8f4ff;
  box-shadow: 0 0 10px #7ec8ff;
  animation: fxBlip var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
@keyframes fxRing {
  0%, 100% { opacity: 0.55; scale: 0.55; }
  45% { opacity: 0.75; scale: 0.92; }
  70% { opacity: 0.5; scale: 1.05; }
}
@keyframes fxBlip {
  0%, 70%, 100% { opacity: 0.15; scale: 0.6; }
  78% { opacity: 1; scale: 1.4; }
}

[data-fx="lanterna"] > .fx-lantern.big { --s: 22; }
[data-fx="lanterna"] > .fx-lantern::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 18%;
  bottom: 22%;
  border-radius: 40%;
  background: radial-gradient(circle, #fff6d0, #ffb450 60%, transparent 72%);
  animation: fxFlame calc(var(--fx-beat) * 0.5) ease-in-out infinite alternate;
}
@keyframes fxFlame {
  from { opacity: 0.65; scale: 0.9; }
  to { opacity: 1; scale: 1.08; }
}

[data-fx="ciliegio"] > .fx-branch {
  width: calc(var(--u) * 220);
  height: calc(var(--u) * 80);
  background:
    linear-gradient(115deg, transparent 46%, #3a242c 46% 52%, transparent 52%),
    linear-gradient(70deg, transparent 62%, #4a3038 62% 66%, transparent 66%);
  opacity: 0.85;
}
[data-fx="gru"] > .fx-moon {
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #e4e2dc 42%, rgba(228, 226, 220, 0.15) 70%, transparent 72%);
  box-shadow: 0 0 28px rgba(240, 236, 220, 0.35);
  animation: fxAtmo calc(var(--fx-beat) * 4) ease-in-out infinite alternate;
}
[data-fx="sumi"] > .fx-brush {
  width: calc(var(--u) * 180);
  height: calc(var(--u) * 28);
  border-radius: 40% 60% 50% 40%;
  background: linear-gradient(90deg, rgba(236, 228, 214, 0.55), rgba(40, 32, 28, 0.15) 70%, transparent);
  transform-origin: left center;
  animation: fxBrush calc(var(--fx-beat) * 2) ease-in-out infinite;
}
@keyframes fxBrush {
  0%, 100% { scale: 0.2 1; opacity: 0.8; }
  48% { scale: 1 1; opacity: 0.85; }
  52% { scale: 1 1; opacity: 0.85; }
}

[data-fx="anime"] > .fx-speed,
[data-combo="anime"] > .fx-speed {
  left: -6%;
  width: 42%;
  height: 18%;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 150, 190, 0.55) 18px 20px, transparent 20px 36px);
  transform: skewX(-16deg);
  opacity: 0.7;
  animation: fxSpeed var(--t) linear infinite;
}
[data-fx="anime"] > .fx-speed.b { left: auto; right: -6%; animation-direction: reverse; }
[data-fx="anime"] > .fx-cel {
  left: 0;
  top: 0;
  width: 100%;
  height: 22%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 46%, transparent 62%);
  animation: fxCel var(--t) ease-in-out infinite;
}
[data-fx="anime"] > .fx-sparkle {
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: fxNode var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite;
}
[data-sfx="anime"] > .fx-celbar {
  left: 0;
  top: 18%;
  width: 100%;
  height: 8%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: var(--fx-celbar);
  animation: fxCel var(--t) ease-in-out infinite;
}
@keyframes fxSpeed {
  from { background-position: 0 0; }
  to { background-position: 36px 0; }
}
@keyframes fxCel {
  0%, 100% { translate: -30% 0; opacity: 0.55; }
  50% { translate: 40% 0; opacity: 0.85; }
}

[data-combo] > .fx-union,
[data-combo] > .fx-bloom {
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 160);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold), transparent 68%);
  opacity: var(--fx-union-hi);
  animation: fxUnion var(--t) ease-in-out calc(var(--d, 0) * -1s) infinite alternate;
}
[data-combo="inchiostro"] > .fx-bloom {
  background: radial-gradient(circle, rgba(236, 228, 214, 0.55), transparent 70%);
}
[data-combo="synth"] > .fx-flash {
  left: 0;
  right: 0;
  bottom: 8%;
  height: 18%;
  background: linear-gradient(transparent, var(--gold));
  opacity: var(--fx-flash);
  animation: fxUnion var(--fx-beat) ease-in-out infinite alternate;
}
@keyframes fxUnion {
  from { opacity: var(--fx-union-lo); scale: 0.86; }
  to { opacity: var(--fx-union-hi); scale: 1.08; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-fx *,
  .combo-fx *,
  .look-stage-cfx *,
  .look-stage-cfx *::before,
  .look-stage-cfx *::after,
  .theme-fx *::before,
  .theme-fx *::after,
  .skin-fx *,
  .look-stage-fx *,
  .look-stage-fx *::before,
  .look-stage-fx *::after,
  .look-stage-sfx *,
  html[data-look="onda"] .pane::before,
  html[data-look="onda"] .pane::after,
  html[data-look="prisma"] .pane::before,
  html[data-look="prisma"] .pane::after,
  html[data-look="lava"] .pane::before,
  html[data-look="aurora"] .pane::before,
  html[data-look="ghiaccio"] .pane::before,
  html[data-look="nebbia"] .pane::before,
  html[data-look="corallo"] .pane::before,
  html[data-look="ametista"] .pane::before,
  html[data-look="oroantico"] .pane::before,
  html[data-look="forja"] .pane::before,
  html[data-look="sole"] .pane::before,
  html[data-look="smeraldo"] .pane::before,
  html[data-look="opale"] .pane::before,
  html[data-look="opale"] .pane::after,
  html[data-look="atelier"] .pane,
  html[data-look="cometa"] .wrap > header .chrome-circlet::after,
  html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::before,
  html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::after,
  .look-stage[data-skin-preview] .look-stage-card::before,
  .look-stage[data-skin-preview] .look-stage-card::after,
  .look-stage[data-skin-preview] .look-stage-orb::before,
  .look-stage[data-skin-preview] .look-stage-orb::after {
    animation: none !important;
  }
  [data-fx="natale"] > .fx-glow { opacity: 0.95; filter: drop-shadow(0 0 10px rgba(255, 220, 150, 0.7)) brightness(1.2); }
  [data-fx="capodanno"] > .fx-fw::after { opacity: 0.7; scale: 1; }
  [data-fx="valentino"] > .fx-heart,
  [data-fx="abissi"] > .fx-bubble,
  [data-sfx="fenice"] > .fx-ember { opacity: 0.6; translate: 0 calc(var(--H) * var(--p, 0.5) * -1); }
  [data-fx="lucciole"] > .fx-fly { opacity: 0.8; }
  [data-fx="codice"] > .fx-col { translate: 0 calc(var(--H) * var(--p, 0.5) - 50%); }
  html[data-look="onda"] .pane::before,
  html[data-look="onda"] .pane::after { opacity: 0; }
  html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::before,
  html[data-look="lucciola"] .wrap > header .chrome-circlet--mark::after { opacity: 0.8; }
}