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

/* ===== Modern CSS Animations ===== */
/* 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(--bs-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; }
}
/* Heartbeat - A double-beat pulse for like buttons, favourite icons and notification badges. */
.fx-heartbeat { display: inline-block; animation: fx-heartbeat-beat 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes fx-heartbeat-beat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.2); }
  24% { transform: scale(.96); }
  32% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-heartbeat, .fx-heartbeat::before, .fx-heartbeat::after, .fx-heartbeat *, .fx-heartbeat *::before, .fx-heartbeat *::after { animation: none !important; transition: none !important; }
}
/* Shimmer Skeleton - Loading placeholders with a light sweep; add the class to every grey block of a skeleton card. */
.fx-shimmer-skeleton {
  display: block; min-height: .9rem; border-radius: var(--wt-radius, .5rem);
  background: linear-gradient(90deg, rgba(var(--wt-primary-rgb), .08) 25%, rgba(var(--wt-primary-rgb), .22) 37%, rgba(var(--wt-primary-rgb), .08) 63%);
  background-size: 400% 100%;
  animation: fx-shimmer-skeleton-shine 1.4s ease infinite;
}
@keyframes fx-shimmer-skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-shimmer-skeleton, .fx-shimmer-skeleton::before, .fx-shimmer-skeleton::after, .fx-shimmer-skeleton *, .fx-shimmer-skeleton *::before, .fx-shimmer-skeleton *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Clip-path Effects ===== */
/* Polygon Morph - Morphs an image or block between a hexagon, a square and a diamond using six-point polygons. */
.fx-polygon-morph {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: fx-polygon-morph-morph 7s ease-in-out infinite;
}
@keyframes fx-polygon-morph-morph {
  0%, 100% { -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  33% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); }
  66% { -webkit-clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-polygon-morph, .fx-polygon-morph::before, .fx-polygon-morph::after, .fx-polygon-morph *, .fx-polygon-morph *::before, .fx-polygon-morph *::after { animation: none !important; transition: none !important; }
}
/* SVG Path (Heart) - A heart-shaped cut-out traced from the classic heart curve, scaling to any size, with a soft beat. */
.fx-svg-path-heart { -webkit-clip-path: polygon(50% 24.9%, 50.3% 22.9%, 52% 17.6%, 56.1% 10.8%, 63% 4.9%, 72% 2%, 81.8% 3.3%, 90.7% 8.8%, 96.8% 17.6%, 99% 28.2%, 96.8% 39.3%, 90.7% 49.9%, 81.8% 59.8%, 72% 69%, 63% 77.7%, 56.1% 85.6%, 52% 92.1%, 50.3% 96.5%, 50% 98%, 49.7% 96.5%, 48% 92.1%, 43.9% 85.6%, 37% 77.7%, 28% 69%, 18.2% 59.8%, 9.3% 49.9%, 3.2% 39.3%, 1% 28.2%, 3.2% 17.6%, 9.3% 8.8%, 18.2% 3.3%, 28% 2%, 37% 4.9%, 43.9% 10.8%, 48% 17.6%, 49.7% 22.9%); clip-path: polygon(50% 24.9%, 50.3% 22.9%, 52% 17.6%, 56.1% 10.8%, 63% 4.9%, 72% 2%, 81.8% 3.3%, 90.7% 8.8%, 96.8% 17.6%, 99% 28.2%, 96.8% 39.3%, 90.7% 49.9%, 81.8% 59.8%, 72% 69%, 63% 77.7%, 56.1% 85.6%, 52% 92.1%, 50.3% 96.5%, 50% 98%, 49.7% 96.5%, 48% 92.1%, 43.9% 85.6%, 37% 77.7%, 28% 69%, 18.2% 59.8%, 9.3% 49.9%, 3.2% 39.3%, 1% 28.2%, 3.2% 17.6%, 9.3% 8.8%, 18.2% 3.3%, 28% 2%, 37% 4.9%, 43.9% 10.8%, 48% 17.6%, 49.7% 22.9%); animation: fx-svg-path-heart-beat 1.8s ease-in-out infinite; }
@keyframes fx-svg-path-heart-beat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .fx-svg-path-heart, .fx-svg-path-heart::before, .fx-svg-path-heart::after, .fx-svg-path-heart *, .fx-svg-path-heart *::before, .fx-svg-path-heart *::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 ===== */
/* Brightness & Contrast - Images start slightly muted and pop with extra brightness and contrast on hover. */
.fx-brightness-contrast { filter: brightness(.82) contrast(.9); transition: filter .45s ease, transform .45s ease; }
.fx-brightness-contrast:hover, .fx-brightness-contrast:focus-visible { filter: brightness(1.12) contrast(1.2); transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .fx-brightness-contrast, .fx-brightness-contrast::before, .fx-brightness-contrast::after, .fx-brightness-contrast *, .fx-brightness-contrast *::before, .fx-brightness-contrast *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}

/* ===== Modern CSS Transform Effects ===== */
/* 3D Card Tilt - Tilts a card in 3D with a moving glare on hover - a pure CSS take on the mouse-follow tilt. */
.fx-3d-card-tilt {
  position: relative; overflow: hidden; transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s;
}
.fx-3d-card-tilt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
  transform: translateX(-60%); transition: transform .7s ease, opacity .4s;
}
.fx-3d-card-tilt:hover, .fx-3d-card-tilt:focus-within {
  transform: perspective(900px) rotateX(8deg) rotateY(-12deg) translateY(-4px);
  box-shadow: 18px 22px 40px -18px rgba(var(--wt-primary-rgb), .55);
}
.fx-3d-card-tilt:hover::after, .fx-3d-card-tilt:focus-within::after { opacity: 1; transform: translateX(60%); }
@media (prefers-reduced-motion: reduce) {
  .fx-3d-card-tilt, .fx-3d-card-tilt::before, .fx-3d-card-tilt::after, .fx-3d-card-tilt *, .fx-3d-card-tilt *::before, .fx-3d-card-tilt *::after { animation: none !important; transition: none !important; }
}
/* Matrix Transform - Uses a single matrix() to scale, skew and lift a tile at once on hover. */
.fx-matrix-transform { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s; }
.fx-matrix-transform:hover, .fx-matrix-transform:focus-visible { transform: matrix(1.05, -.08, .12, 1.05, 0, -8); box-shadow: 0 20px 30px -16px rgba(var(--wt-primary-rgb), .5); }
@media (prefers-reduced-motion: reduce) {
  .fx-matrix-transform, .fx-matrix-transform::before, .fx-matrix-transform::after, .fx-matrix-transform *, .fx-matrix-transform *::before, .fx-matrix-transform *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transitions ===== */
/* Morphing Gradient - A gradient button that softly changes to a second gradient and morphs into a pill on hover. */
.fx-morphing-gradient, .btn.fx-morphing-gradient {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0; border: 0;
  color: var(--wt-on-primary, #fff); border-radius: .6rem;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
  transition: border-radius .5s ease, transform .5s ease, box-shadow .5s;
}
.fx-morphing-gradient::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(135deg, var(--wt-accent), var(--wt-primary));
  transition: opacity .5s ease;
}
.fx-morphing-gradient:hover, .fx-morphing-gradient:focus-visible, .btn.fx-morphing-gradient:hover, .btn.fx-morphing-gradient:focus-visible {
  color: var(--wt-on-primary, #fff); border-radius: 2rem; transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(var(--wt-accent-rgb), .7);
}
.fx-morphing-gradient:hover::before, .fx-morphing-gradient:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fx-morphing-gradient, .fx-morphing-gradient::before, .fx-morphing-gradient::after, .fx-morphing-gradient *, .fx-morphing-gradient *::before, .fx-morphing-gradient *::after { animation: none !important; transition: none !important; }
}
/* Magnetic Hover - Fakes a magnetic pull: the element lifts toward the pointer and its icon leans further with an elastic ease. */
.fx-magnetic-hover { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
.fx-magnetic-hover > * { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.fx-magnetic-hover:hover, .fx-magnetic-hover:focus-visible { transform: translate(3px, -4px) scale(1.06); box-shadow: -6px 12px 22px -10px rgba(var(--wt-primary-rgb), .6); }
.fx-magnetic-hover:hover > *, .fx-magnetic-hover:focus-visible > * { transform: translate(3px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .fx-magnetic-hover, .fx-magnetic-hover::before, .fx-magnetic-hover::after, .fx-magnetic-hover *, .fx-magnetic-hover *::before, .fx-magnetic-hover *::after { animation: none !important; transition: none !important; }
}
/* Split Text Fill - Fills a heading or link with the primary colour from both sides at once on hover - top half from the left, bottom half from the right. */
.fx-split-text-fill {
  display: inline-block; text-decoration: none;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(var(--wt-primary), var(--wt-primary)), linear-gradient(var(--wt-primary), var(--wt-primary)), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 0, 100% 100%, 0 0;
  background-size: 0% 50%, 0% 50%, 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size .6s cubic-bezier(.7, 0, .3, 1);
}
.fx-split-text-fill:hover, .fx-split-text-fill:focus-visible { background-size: 100% 50%, 100% 50%, 100% 100%; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .fx-split-text-fill { -webkit-text-fill-color: currentColor; background: none; }
  .fx-split-text-fill:hover { color: var(--wt-primary-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-split-text-fill, .fx-split-text-fill::before, .fx-split-text-fill::after, .fx-split-text-fill *, .fx-split-text-fill *::before, .fx-split-text-fill *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Gradient Effects ===== */
/* Mesh Gradient - Soft blobs of the theme colours blended into a slowly drifting mesh - perfect for hero panels. */
.fx-mesh-gradient {
  background-color: var(--wt-primary);
  background-image:
    radial-gradient(at 15% 20%, var(--wt-accent) 0, transparent 55%),
    radial-gradient(at 85% 15%, var(--wt-secondary) 0, transparent 50%),
    radial-gradient(at 75% 85%, var(--wt-accent) 0, transparent 50%),
    radial-gradient(at 20% 90%, var(--wt-secondary) 0, transparent 55%);
  background-size: 160% 160%;
  color: var(--wt-on-primary, #fff);
  animation: fx-mesh-gradient-drift 14s ease-in-out infinite alternate;
}
@keyframes fx-mesh-gradient-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-mesh-gradient, .fx-mesh-gradient::before, .fx-mesh-gradient::after, .fx-mesh-gradient *, .fx-mesh-gradient *::before, .fx-mesh-gradient *::after { animation: none !important; transition: none !important; }
}
/* Color Morphing - Smoothly cycles a background and its glow through the theme colours - nice for badges and CTAs. */
.fx-color-morphing { color: var(--wt-on-primary, #fff); background-color: var(--wt-primary); animation: fx-color-morphing-morph 6s ease-in-out infinite; }
@keyframes fx-color-morphing-morph {
  0%, 100% { background-color: var(--wt-primary); box-shadow: 0 10px 24px -10px rgba(var(--wt-primary-rgb), .8); }
  33% { background-color: var(--wt-accent); box-shadow: 0 10px 24px -10px rgba(var(--wt-accent-rgb), .8); }
  66% { background-color: var(--wt-secondary); box-shadow: 0 10px 24px -10px rgba(var(--wt-secondary-rgb), .8); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-color-morphing, .fx-color-morphing::before, .fx-color-morphing::after, .fx-color-morphing *, .fx-color-morphing *::before, .fx-color-morphing *::after { animation: none !important; transition: none !important; }
}
/* Iridescent - A holographic, pearly sheen that shifts its colours as the card is hovered. */
.fx-iridescent {
  position: relative; overflow: hidden; color: #1d1d2b;
  background: linear-gradient(120deg, #f6d5f7, #fbe9d7, #d5f2ef, #d7e2fb, #e9d5fb, #f6d5f7);
  background-size: 300% 300%; background-position: 0% 50%;
  transition: background-position 1.2s ease;
}
.fx-iridescent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 100% 0; transition: background-position 1.2s ease;
}
.fx-iridescent:hover, .fx-iridescent:focus-within { background-position: 100% 50%; }
.fx-iridescent:hover::after, .fx-iridescent:focus-within::after { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .fx-iridescent, .fx-iridescent::before, .fx-iridescent::after, .fx-iridescent *, .fx-iridescent *::before, .fx-iridescent *::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; }
}
/* Retro Style - Hard offset shadows in two theme colours for a retro poster look; on .card or .btn it becomes a bold offset box. */
.fx-retro-style { text-shadow: 3px 3px 0 var(--wt-accent), 6px 6px 0 var(--wt-secondary); }
.fx-retro-style.card, .fx-retro-style.btn {
  text-shadow: none; border: 2px solid var(--wt-text, #212529);
  box-shadow: 6px 6px 0 var(--wt-text, #212529);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fx-retro-style.card:hover, .fx-retro-style.btn:hover, .fx-retro-style.btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--wt-text, #212529); }
.fx-retro-style.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--wt-text, #212529); }
@media (prefers-reduced-motion: reduce) {
  .fx-retro-style, .fx-retro-style::before, .fx-retro-style::after, .fx-retro-style *, .fx-retro-style *::before, .fx-retro-style *::after { animation: none !important; transition: none !important; }
}
/* Soft Glow - A gentle breathing halo in the primary colour that makes a card or avatar feel highlighted. */
.fx-soft-glow { box-shadow: 0 0 24px rgba(var(--wt-primary-rgb), .22); animation: fx-soft-glow-breathe 4s ease-in-out infinite; }
@keyframes fx-soft-glow-breathe { 50% { box-shadow: 0 0 44px rgba(var(--wt-primary-rgb), .42); } }
@media (prefers-reduced-motion: reduce) {
  .fx-soft-glow, .fx-soft-glow::before, .fx-soft-glow::after, .fx-soft-glow *, .fx-soft-glow *::before, .fx-soft-glow *::after { animation: none !important; transition: none !important; }
}

/* ===== Advanced Animated Backgrounds ===== */
/* Particles - Two layers of tiny glowing dots drifting upward at different speeds, like dust in light. */
.fx-bg-particles { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-particles::before, .fx-bg-particles::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-particles::before, .fx-bg-particles::after { inset: 0; }
.fx-bg-particles::before {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(var(--wt-primary-rgb), .65) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 70%, rgba(var(--wt-accent-rgb), .6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 35%, rgba(var(--wt-secondary-rgb), .55) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 80%, rgba(var(--wt-primary-rgb), .5) 0 1.5px, transparent 2.5px);
  background-size: 180px 180px;
  animation: fx-bg-particles-near 14s linear infinite;
}
.fx-bg-particles::after {
  opacity: .7;
  background-image:
    radial-gradient(circle at 20% 55%, rgba(var(--wt-accent-rgb), .55) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(var(--wt-primary-rgb), .45) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 50% 90%, rgba(var(--wt-secondary-rgb), .4) 0 2.5px, transparent 3.5px);
  background-size: 300px 300px;
  animation: fx-bg-particles-far 30s linear infinite;
}
@keyframes fx-bg-particles-near { to { background-position: 0 -180px; } }
@keyframes fx-bg-particles-far { to { background-position: 0 -300px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-particles, .fx-bg-particles::before, .fx-bg-particles::after, .fx-bg-particles *, .fx-bg-particles *::before, .fx-bg-particles *::after { animation: none !important; transition: none !important; }
}
/* Scrolling - A fine blueprint grid that scrolls diagonally forever and fades out towards the edges. */
.fx-bg-scrolling { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-scrolling::before, .fx-bg-scrolling::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-scrolling::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--wt-primary-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wt-primary-rgb), .16) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  animation: fx-bg-scrolling-scroll 6s linear infinite;
}
@keyframes fx-bg-scrolling-scroll { to { background-position: 36px 36px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-scrolling, .fx-bg-scrolling::before, .fx-bg-scrolling::after, .fx-bg-scrolling *, .fx-bg-scrolling *::before, .fx-bg-scrolling *::after { animation: none !important; transition: none !important; }
}