/* Brand name 9 - modern CSS effects used by this template. Each effect is one class: fx-NAME. */

/* ===== Modern CSS Animations ===== */
/* Glitch Text - Splits a heading into offset colour slices that jitter like a broken screen; repeat the text in data-text. */
.fx-glitch-text { position: relative; display: inline-block; }
.fx-glitch-text::before, .fx-glitch-text::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0);
}
.fx-glitch-text::before { color: var(--wt-accent); left: 2px; text-shadow: -1px 0 var(--wt-primary); animation: fx-glitch-text-a 2.6s steps(1) infinite; }
.fx-glitch-text::after { color: var(--wt-secondary); left: -2px; text-shadow: 1px 0 var(--wt-accent); animation: fx-glitch-text-b 3.1s steps(1) infinite; }
@keyframes fx-glitch-text-a {
  0% { -webkit-clip-path: inset(0 0 82% 0); clip-path: inset(0 0 82% 0); transform: translate(-3px, -1px); }
  15% { -webkit-clip-path: inset(30% 0 52% 0); clip-path: inset(30% 0 52% 0); transform: translate(3px, 1px); }
  30% { -webkit-clip-path: inset(62% 0 20% 0); clip-path: inset(62% 0 20% 0); transform: translate(-2px, 0); }
  45% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
  80% { -webkit-clip-path: inset(12% 0 70% 0); clip-path: inset(12% 0 70% 0); transform: translate(2px, -1px); }
  90% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@keyframes fx-glitch-text-b {
  0% { -webkit-clip-path: inset(70% 0 8% 0); clip-path: inset(70% 0 8% 0); transform: translate(2px, 1px); }
  20% { -webkit-clip-path: inset(8% 0 76% 0); clip-path: inset(8% 0 76% 0); transform: translate(-3px, 0); }
  35% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
  70% { -webkit-clip-path: inset(40% 0 38% 0); clip-path: inset(40% 0 38% 0); transform: translate(3px, -1px); }
  85% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glitch-text, .fx-glitch-text::before, .fx-glitch-text::after, .fx-glitch-text *, .fx-glitch-text *::before, .fx-glitch-text *::after { animation: none !important; transition: none !important; }
}
/* Typewriter - Types a single line of monospace text letter by letter with a blinking caret; set --fx-ch to the character count. */
.fx-typewriter {
  display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  font-family: var(--ui-font-monospace, monospace);
  width: calc(var(--fx-ch, 20) * 1ch + .15em);
  border-right: .12em solid var(--wt-primary);
  animation: fx-typewriter-type 4.5s steps(var(--fx-ch, 20)) infinite, fx-typewriter-caret .8s step-end infinite;
}
@keyframes fx-typewriter-type { 0% { width: 0; } 65%, 100% { width: calc(var(--fx-ch, 20) * 1ch + .15em); } }
@keyframes fx-typewriter-caret { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .fx-typewriter, .fx-typewriter::before, .fx-typewriter::after, .fx-typewriter *, .fx-typewriter *::before, .fx-typewriter *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Clip-path Effects ===== */
/* Wave Animation - Gives the bottom edge of a hero image or header a gently rolling wave. */
.fx-wave-animation { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); animation: fx-wave-animation-wave 4s ease-in-out infinite alternate; }
@keyframes fx-wave-animation-wave { from { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 91.7%, 87.5% 94%, 81.3% 91.7%, 75% 86%, 68.8% 80.3%, 62.5% 78%, 56.3% 80.3%, 50% 86%, 43.8% 91.7%, 37.5% 94%, 31.3% 91.7%, 25% 86%, 18.8% 80.3%, 12.5% 78%, 6.3% 80.3%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 91.7%, 87.5% 94%, 81.3% 91.7%, 75% 86%, 68.8% 80.3%, 62.5% 78%, 56.3% 80.3%, 50% 86%, 43.8% 91.7%, 37.5% 94%, 31.3% 91.7%, 25% 86%, 18.8% 80.3%, 12.5% 78%, 6.3% 80.3%, 0 86%); } }
@media (prefers-reduced-motion: reduce) {
  .fx-wave-animation, .fx-wave-animation::before, .fx-wave-animation::after, .fx-wave-animation *, .fx-wave-animation *::before, .fx-wave-animation *::after { animation: none !important; transition: none !important; }
}
/* Shape Shifter - A twelve-corner circle that snaps into a plus sign on hover - handy for add buttons and icons. */
.fx-shape-shifter {
  -webkit-clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%); clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%);
  transition: clip-path .5s cubic-bezier(.68, -.4, .27, 1.4), transform .5s;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
}
.fx-shape-shifter:hover, .fx-shape-shifter:focus-visible { -webkit-clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-shape-shifter, .fx-shape-shifter::before, .fx-shape-shifter::after, .fx-shape-shifter *, .fx-shape-shifter *::before, .fx-shape-shifter *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Filter Effects ===== */
/* Hue Rotation - Continuously cycles the colours of a gradient, illustration or image through the colour wheel. */
.fx-hue-rotation { animation: fx-hue-rotation-hue 8s linear infinite; }
@keyframes fx-hue-rotation-hue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-hue-rotation, .fx-hue-rotation::before, .fx-hue-rotation::after, .fx-hue-rotation *, .fx-hue-rotation *::before, .fx-hue-rotation *::after { animation: none !important; transition: none !important; }
}
/* Invert Colors - Flips an image or card to its negative on hover while hue-rotate keeps the colours recognisable. */
.fx-invert-colors { transition: filter .4s ease; }
.fx-invert-colors:hover, .fx-invert-colors:focus-visible { filter: invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-invert-colors, .fx-invert-colors::before, .fx-invert-colors::after, .fx-invert-colors *, .fx-invert-colors *::before, .fx-invert-colors *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transform Effects ===== */
/* Skew Parallax - On hover the card skews one way and its image drifts the other, creating a quick sense of depth. */
.fx-skew-parallax { overflow: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fx-skew-parallax img { transform: scale(1.12); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx-skew-parallax:hover { transform: skewY(-2deg) translateY(-3px); }
.fx-skew-parallax:hover img { transform: scale(1.18) skewY(2deg) translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .fx-skew-parallax, .fx-skew-parallax::before, .fx-skew-parallax::after, .fx-skew-parallax *, .fx-skew-parallax *::before, .fx-skew-parallax *::after { animation: none !important; transition: none !important; }
}
/* Transform Chain - Chains translate, rotate and scale as separate properties with staggered timing for a lively hover. */
.fx-transform-chain { transition: translate .3s ease, rotate .5s cubic-bezier(.34, 1.56, .64, 1) .08s, scale .4s ease .16s; }
.fx-transform-chain:hover, .fx-transform-chain:focus-visible { translate: 0 -8px; rotate: -3deg; scale: 1.06; }
@supports not (translate: 0) {
  .fx-transform-chain { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .fx-transform-chain:hover, .fx-transform-chain:focus-visible { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-transform-chain, .fx-transform-chain::before, .fx-transform-chain::after, .fx-transform-chain *, .fx-transform-chain *::before, .fx-transform-chain *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transitions ===== */
/* 3D Flip Card - Flips a card over in 3D on hover or focus to show its back; use the -inner, -front and -back child classes. */
.fx-3d-flip-card { perspective: 1000px; }
.fx-3d-flip-card .fx-3d-flip-card-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}
.fx-3d-flip-card:hover .fx-3d-flip-card-inner, .fx-3d-flip-card:focus-within .fx-3d-flip-card-inner { transform: rotateY(180deg); }
.fx-3d-flip-card .fx-3d-flip-card-front, .fx-3d-flip-card .fx-3d-flip-card-back {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--wt-radius-lg, 1rem); overflow: hidden;
}
.fx-3d-flip-card .fx-3d-flip-card-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: 1rem;
  color: var(--wt-on-primary, #fff); background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
}
@media (prefers-reduced-motion: reduce) {
  .fx-3d-flip-card, .fx-3d-flip-card::before, .fx-3d-flip-card::after, .fx-3d-flip-card *, .fx-3d-flip-card *::before, .fx-3d-flip-card *::after { animation: none !important; transition: none !important; }
}
/* Liquid Ripple - A button that fills with a swirling liquid from the bottom on hover. */
.fx-liquid-ripple, .btn.fx-liquid-ripple {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  color: var(--wt-primary); background: var(--wt-surface, #fff); border: 2px solid var(--wt-primary);
  transition: color .5s ease;
}
.fx-liquid-ripple::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 240%; aspect-ratio: 1;
  margin-left: -120%; margin-top: 12%; border-radius: 42%;
  background: var(--wt-primary);
  transition: top .8s ease, margin-top .8s ease;
  animation: fx-liquid-ripple-swirl 5s linear infinite;
}
.fx-liquid-ripple:hover, .fx-liquid-ripple:focus-visible, .btn.fx-liquid-ripple:hover, .btn.fx-liquid-ripple:focus-visible { color: var(--wt-on-primary, #fff); border-color: var(--wt-primary); }
.fx-liquid-ripple:hover::before, .fx-liquid-ripple:focus-visible::before { top: 50%; margin-top: -120%; }
.fx-liquid-ripple:active { transform: scale(.97); }
@keyframes fx-liquid-ripple-swirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-liquid-ripple, .fx-liquid-ripple::before, .fx-liquid-ripple::after, .fx-liquid-ripple *, .fx-liquid-ripple *::before, .fx-liquid-ripple *::after { animation: none !important; transition: none !important; }
}
/* Elastic Scale - Buttons, chips and cards that grow with a rubbery overshoot on hover and squash when pressed. */
.fx-elastic-scale { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.fx-elastic-scale:hover, .fx-elastic-scale:focus-visible { transform: scale(1.08); }
.fx-elastic-scale:active { transform: scale(.94); transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
  .fx-elastic-scale, .fx-elastic-scale::before, .fx-elastic-scale::after, .fx-elastic-scale *, .fx-elastic-scale *::before, .fx-elastic-scale *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Gradient Effects ===== */
/* Gradient Shadow - A colourful multi-tone glow under cards and images built from layered tinted shadows. */
.fx-gradient-shadow {
  box-shadow: -14px 12px 30px -10px rgba(var(--wt-primary-rgb), .55), 14px 12px 30px -10px rgba(var(--wt-secondary-rgb), .55), 0 22px 36px -14px rgba(var(--wt-accent-rgb), .55);
  transition: box-shadow .4s ease, transform .4s ease;
}
.fx-gradient-shadow:hover, .fx-gradient-shadow:focus-visible {
  transform: translateY(-4px);
  box-shadow: -20px 18px 40px -10px rgba(var(--wt-primary-rgb), .7), 20px 18px 40px -10px rgba(var(--wt-secondary-rgb), .7), 0 30px 46px -14px rgba(var(--wt-accent-rgb), .7);
}
@media (prefers-reduced-motion: reduce) {
  .fx-gradient-shadow, .fx-gradient-shadow::before, .fx-gradient-shadow::after, .fx-gradient-shadow *, .fx-gradient-shadow *::before, .fx-gradient-shadow *::after { animation: none !important; transition: none !important; }
}
/* Text Mask - Large text that works as a window onto a moving gradient - or onto an image set with an inline background-image. */
.fx-text-mask {
  color: var(--wt-primary);
  background-image: var(--fx-mask-img, linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-accent) 30%, var(--wt-secondary) 60%, var(--wt-primary) 100%));
  background-size: cover; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-text-mask-pan 10s ease-in-out infinite alternate;
}
.fx-text-mask:not([style*="--fx-mask-img"]) { background-size: 300% 300%; }
@keyframes fx-text-mask-pan { to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-text-mask, .fx-text-mask::before, .fx-text-mask::after, .fx-text-mask *, .fx-text-mask *::before, .fx-text-mask *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern Shadow Effects ===== */
/* Neumorphism - Soft extruded surfaces that match the page background; they press in on hover and adapt to dark mode. */
.fx-neumorphism {
  --fx-neu-bg: var(--wt-bg, #e9edf2);
  background: var(--fx-neu-bg); border: 0;
  --fx-neu-dark: rgba(0, 0, 0, .14); --fx-neu-light: rgba(255, 255, 255, .75);
  box-shadow: 8px 8px 18px var(--fx-neu-dark), -8px -8px 18px var(--fx-neu-light);
  transition: box-shadow .35s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fx-neumorphism {
    --fx-neu-dark: color-mix(in srgb, var(--fx-neu-bg) 78%, #000);
    --fx-neu-light: color-mix(in srgb, var(--fx-neu-bg) 70%, #fff);
  }
}
.fx-neumorphism:hover, .fx-neumorphism:focus-visible, .fx-neumorphism:active { box-shadow: inset 6px 6px 12px var(--fx-neu-dark), inset -6px -6px 12px var(--fx-neu-light); }
@media (prefers-reduced-motion: reduce) {
  .fx-neumorphism, .fx-neumorphism::before, .fx-neumorphism::after, .fx-neumorphism *, .fx-neumorphism *::before, .fx-neumorphism *::after { animation: none !important; transition: none !important; }
}
/* Long Shadow - A flat-design long diagonal shadow for headings and icon glyphs; set --fx-long to change its colour. */
.fx-long-shadow { --fx-long: rgba(var(--wt-primary-rgb), .12); text-shadow: 1px 1px 0 var(--fx-long), 2px 2px 0 var(--fx-long), 3px 3px 0 var(--fx-long), 4px 4px 0 var(--fx-long), 5px 5px 0 var(--fx-long), 6px 6px 0 var(--fx-long), 7px 7px 0 var(--fx-long), 8px 8px 0 var(--fx-long), 9px 9px 0 var(--fx-long), 10px 10px 0 var(--fx-long), 11px 11px 0 var(--fx-long), 12px 12px 0 var(--fx-long), 13px 13px 0 var(--fx-long), 14px 14px 0 var(--fx-long), 15px 15px 0 var(--fx-long), 16px 16px 0 var(--fx-long), 17px 17px 0 var(--fx-long), 18px 18px 0 var(--fx-long), 19px 19px 0 var(--fx-long), 20px 20px 0 var(--fx-long), 21px 21px 0 var(--fx-long), 22px 22px 0 var(--fx-long), 23px 23px 0 var(--fx-long), 24px 24px 0 var(--fx-long), 25px 25px 0 var(--fx-long), 26px 26px 0 var(--fx-long), 27px 27px 0 var(--fx-long), 28px 28px 0 var(--fx-long), 29px 29px 0 var(--fx-long), 30px 30px 0 var(--fx-long); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fx-long-shadow { --fx-long: color-mix(in srgb, var(--wt-primary) 22%, var(--wt-bg, #fff)); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-long-shadow, .fx-long-shadow::before, .fx-long-shadow::after, .fx-long-shadow *, .fx-long-shadow *::before, .fx-long-shadow *::after { animation: none !important; transition: none !important; }
}
/* Fire Text - Flickering flame-coloured shadows rise from the letters of a heading. */
.fx-fire-text {
  color: #fff4d6;
  text-shadow: 0 0 4px #fff3c4, 0 -4px 6px #ffd23f, 0 -10px 14px #ff9f1c, 0 -18px 24px #ff5a1f, 0 -26px 36px #c81d25;
  animation: fx-fire-text-burn 1.2s ease-in-out infinite alternate;
}
@keyframes fx-fire-text-burn {
  to { text-shadow: 0 0 4px #fff3c4, 2px -6px 8px #ffd23f, -2px -12px 16px #ff9f1c, 2px -20px 26px #ff5a1f, -2px -30px 40px #c81d25; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-fire-text, .fx-fire-text::before, .fx-fire-text::after, .fx-fire-text *, .fx-fire-text *::before, .fx-fire-text *::after { animation: none !important; transition: none !important; }
}

/* ===== Advanced Animated Backgrounds ===== */
/* Glitch - Faint scanlines with short bursts of shifted colour bands - a cyber look that keeps the text calm. */
.fx-bg-glitch { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-glitch::before, .fx-bg-glitch::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-glitch::before {
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(var(--wt-primary-rgb), .07) 0 2px, transparent 2px 5px);
}
.fx-bg-glitch::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--wt-accent-rgb), .22), rgba(var(--wt-primary-rgb), .22) 50%, rgba(var(--wt-secondary-rgb), .22));
  -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0);
  animation: fx-bg-glitch-bands 4s steps(1) infinite;
}
@keyframes fx-bg-glitch-bands {
  0%, 70%, 100% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); transform: none; }
  72% { -webkit-clip-path: inset(12% 0 78% 0); clip-path: inset(12% 0 78% 0); transform: translateX(-3%); }
  75% { -webkit-clip-path: inset(58% 0 30% 0); clip-path: inset(58% 0 30% 0); transform: translateX(4%); }
  78% { -webkit-clip-path: inset(30% 0 62% 0); clip-path: inset(30% 0 62% 0); transform: translateX(-2%); }
  81% { -webkit-clip-path: inset(80% 0 6% 0); clip-path: inset(80% 0 6% 0); transform: translateX(3%); }
  84% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bg-glitch, .fx-bg-glitch::before, .fx-bg-glitch::after, .fx-bg-glitch *, .fx-bg-glitch *::before, .fx-bg-glitch *::after { animation: none !important; transition: none !important; }
}
/* Parallax - Three layers of dots and soft orbs drift at different speeds, giving the section a sense of depth. */
.fx-bg-parallax { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-parallax::before, .fx-bg-parallax::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-parallax::before {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--wt-primary-rgb), .35) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(var(--wt-secondary-rgb), .4) 0 2px, transparent 2.5px);
  background-size: 24px 24px, 70px 70px;
  animation: fx-bg-parallax-layers 20s linear infinite;
}
.fx-bg-parallax::after {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--wt-accent-rgb), .22) 0 18px, transparent 32px),
    radial-gradient(circle, rgba(var(--wt-primary-rgb), .18) 0 26px, transparent 44px);
  background-size: 220px 220px, 340px 340px;
  background-position: 30px 60px, 180px 10px;
  animation: fx-bg-parallax-near 20s linear infinite;
}
@keyframes fx-bg-parallax-layers { to { background-position: -24px 0, -140px 0; } }
@keyframes fx-bg-parallax-near { to { background-position: -410px 60px, -500px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-parallax, .fx-bg-parallax::before, .fx-bg-parallax::after, .fx-bg-parallax *, .fx-bg-parallax *::before, .fx-bg-parallax *::after { animation: none !important; transition: none !important; }
}