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

/* ===== Modern CSS Animations ===== */
/* Floating Animation - Lets any card, icon or image drift gently up and down as if it were weightless. */
.fx-floating-animation { animation: fx-floating-animation-float 3.6s ease-in-out infinite; will-change: transform; }
.fx-floating-animation:hover { animation-play-state: paused; }
@keyframes fx-floating-animation-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-floating-animation, .fx-floating-animation::before, .fx-floating-animation::after, .fx-floating-animation *, .fx-floating-animation *::before, .fx-floating-animation *::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; }
}
/* 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; }
}

/* ===== 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; }
}
/* Star Rotate - A five-point star cut-out that turns slowly and speeds up on hover; use it for ratings or promo badges. */
.fx-star-rotate { -webkit-clip-path: polygon(50% 0, 62.3% 33%, 97.6% 34.5%, 70% 56.5%, 79.4% 90.5%, 50% 71%, 20.6% 90.5%, 30% 56.5%, 2.4% 34.5%, 37.7% 33%); clip-path: polygon(50% 0, 62.3% 33%, 97.6% 34.5%, 70% 56.5%, 79.4% 90.5%, 50% 71%, 20.6% 90.5%, 30% 56.5%, 2.4% 34.5%, 37.7% 33%); animation: fx-star-rotate-turn 14s linear infinite; }
.fx-star-rotate:hover { animation-duration: 3s; }
@keyframes fx-star-rotate-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-star-rotate, .fx-star-rotate::before, .fx-star-rotate::after, .fx-star-rotate *, .fx-star-rotate *::before, .fx-star-rotate *::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; }
}

/* ===== Modern CSS Filter Effects ===== */
/* Blur Focus - Put it on a row of cards or images: the hovered item stays sharp while its siblings blur and fade. */
.fx-blur-focus > * { transition: filter .4s ease, opacity .4s ease, transform .4s ease; }
.fx-blur-focus:hover > :not(:hover) { filter: blur(3px) saturate(.6); opacity: .65; }
.fx-blur-focus > :hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .fx-blur-focus, .fx-blur-focus::before, .fx-blur-focus::after, .fx-blur-focus *, .fx-blur-focus *::before, .fx-blur-focus *::after { animation: none !important; transition: none !important; }
}
/* Multiple Filters - Stacks contrast, saturation and a drop shadow, then swaps to a warmer combination on hover. */
.fx-multiple-filters { filter: contrast(1.15) saturate(1.3) drop-shadow(0 10px 14px rgba(var(--wt-primary-rgb), .35)); transition: filter .5s ease; }
.fx-multiple-filters:hover { filter: contrast(1.25) saturate(1.6) sepia(.25) drop-shadow(0 16px 22px rgba(var(--wt-accent-rgb), .45)); }
@media (prefers-reduced-motion: reduce) {
  .fx-multiple-filters, .fx-multiple-filters::before, .fx-multiple-filters::after, .fx-multiple-filters *, .fx-multiple-filters *::before, .fx-multiple-filters *::after { animation: none !important; transition: none !important; }
}
/* Neon Glow - Wraps icons, logos and transparent images in a flickering neon halo using drop-shadow. */
.fx-filter-neon-glow {
  color: var(--wt-primary-ink);
  filter: drop-shadow(0 0 4px var(--wt-primary)) drop-shadow(0 0 12px var(--wt-primary));
  animation: fx-filter-neon-glow-flicker 3s linear infinite;
}
@keyframes fx-filter-neon-glow-flicker {
  0%, 18%, 22%, 62%, 64%, 100% { filter: drop-shadow(0 0 4px var(--wt-primary)) drop-shadow(0 0 12px var(--wt-primary)); }
  20%, 63% { filter: drop-shadow(0 0 1px var(--wt-primary)); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-filter-neon-glow, .fx-filter-neon-glow::before, .fx-filter-neon-glow::after, .fx-filter-neon-glow *, .fx-filter-neon-glow *::before, .fx-filter-neon-glow *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transform Effects ===== */
/* Perspective Text - Lays a heading back in 3D perspective with depth layers; it stands up straight on hover. */
.fx-perspective-text {
  display: inline-block; transform: perspective(500px) rotateX(28deg); transform-origin: 50% 100%;
  text-shadow: 0 1px 0 rgba(var(--wt-primary-rgb), .6), 0 2px 0 rgba(var(--wt-primary-rgb), .5), 0 3px 0 rgba(var(--wt-primary-rgb), .4), 0 10px 14px rgba(0, 0, 0, .25);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.fx-perspective-text:hover { transform: perspective(500px) rotateX(0deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-perspective-text, .fx-perspective-text::before, .fx-perspective-text::after, .fx-perspective-text *, .fx-perspective-text *::before, .fx-perspective-text *::after { animation: none !important; transition: none !important; }
}
/* Rotate 3D - A badge or tile that rocks around a diagonal axis with rotate3d() - eye-catching for feature icons. */
.fx-rotate-3d { animation: fx-rotate-3d-rock 4s ease-in-out infinite; }
.fx-rotate-3d:hover { animation-play-state: paused; }
@keyframes fx-rotate-3d-rock {
  0%, 100% { transform: perspective(600px) rotate3d(1, 1, 0, 0deg); }
  50% { transform: perspective(600px) rotate3d(1, 1, 0, 32deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rotate-3d, .fx-rotate-3d::before, .fx-rotate-3d::after, .fx-rotate-3d *, .fx-rotate-3d *::before, .fx-rotate-3d *::after { animation: none !important; transition: none !important; }
}
/* Translate 3D - Stacked layers separate along the Z axis on hover, like an exploded view of your interface. */
.fx-translate-3d { position: relative; transform-style: preserve-3d; transform: perspective(800px); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx-translate-3d > * { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx-translate-3d:hover { transform: perspective(800px) rotateX(48deg) rotateZ(-28deg); }
.fx-translate-3d:hover > :nth-child(1) { transform: translate3d(0, 0, 0); }
.fx-translate-3d:hover > :nth-child(2) { transform: translate3d(0, 0, 30px); }
.fx-translate-3d:hover > :nth-child(3) { transform: translate3d(0, 0, 60px); }
.fx-translate-3d:hover > :nth-child(4) { transform: translate3d(0, 0, 90px); }
@media (prefers-reduced-motion: reduce) {
  .fx-translate-3d, .fx-translate-3d::before, .fx-translate-3d::after, .fx-translate-3d *, .fx-translate-3d *::before, .fx-translate-3d *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transitions ===== */
/* Glassmorphism Hover - A frosted-glass card that turns clearer, brighter and lifts when hovered; place it over a colourful background. */
.fx-glassmorphism-hover {
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: background .45s, backdrop-filter .45s, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
.fx-glassmorphism-hover:hover, .fx-glassmorphism-hover:focus-within {
  background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glassmorphism-hover { background: rgba(var(--wt-primary-rgb), .82); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glassmorphism-hover, .fx-glassmorphism-hover::before, .fx-glassmorphism-hover::after, .fx-glassmorphism-hover *, .fx-glassmorphism-hover *::before, .fx-glassmorphism-hover *::after { animation: none !important; transition: none !important; }
}
/* Neon Fill Button - An outline button that fills with colour from the left and glows; works on any .btn or link. */
.fx-neon-fill-button, .btn.fx-neon-fill-button {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  color: var(--wt-primary-ink); background: transparent; border: 2px solid var(--wt-primary);
  transition: color .35s ease, box-shadow .35s ease;
}
.fx-neon-fill-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wt-primary);
  transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.7, 0, .3, 1);
}
.fx-neon-fill-button:hover, .fx-neon-fill-button:focus-visible, .btn.fx-neon-fill-button:hover, .btn.fx-neon-fill-button:focus-visible {
  color: var(--wt-on-primary, #fff); border-color: var(--wt-primary);
  box-shadow: 0 0 12px rgba(var(--wt-primary-rgb), .6), 0 0 32px rgba(var(--wt-primary-rgb), .35);
}
.fx-neon-fill-button:hover::before, .fx-neon-fill-button:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .fx-neon-fill-button, .fx-neon-fill-button::before, .fx-neon-fill-button::after, .fx-neon-fill-button *, .fx-neon-fill-button *::before, .fx-neon-fill-button *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Gradient Effects ===== */
/* Shimmer Effect - A diagonal light sweep that glides across buttons, cards or images every few seconds. */
.fx-shimmer-effect { position: relative; overflow: hidden; isolation: isolate; }
.fx-shimmer-effect::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: fx-shimmer-effect-sweep 3.2s ease-in-out infinite;
}
@keyframes fx-shimmer-effect-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .fx-shimmer-effect, .fx-shimmer-effect::before, .fx-shimmer-effect::after, .fx-shimmer-effect *, .fx-shimmer-effect *::before, .fx-shimmer-effect *::after { animation: none !important; transition: none !important; }
}
/* Gradient Text - Paints any heading with a slowly shifting gradient of the primary, accent and secondary colours. */
.fx-gradient-text {
  color: var(--wt-primary-ink);
  background-image: linear-gradient(90deg, var(--wt-primary), var(--wt-accent), var(--wt-secondary), var(--wt-primary));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-text-shift 6s linear infinite;
}
@keyframes fx-gradient-text-shift { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) {
  .fx-gradient-text, .fx-gradient-text::before, .fx-gradient-text::after, .fx-gradient-text *, .fx-gradient-text *::before, .fx-gradient-text *::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; }
}
/* Neon Glow - A pulsing neon outline glow for cards, buttons and inputs, best on dark sections. */
.fx-shadow-neon-glow {
  border: 1px solid rgba(var(--wt-primary-rgb), .8);
  box-shadow: 0 0 8px rgba(var(--wt-primary-rgb), .6), 0 0 24px rgba(var(--wt-primary-rgb), .35), inset 0 0 12px rgba(var(--wt-primary-rgb), .25);
  animation: fx-shadow-neon-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes fx-shadow-neon-glow-pulse {
  50% { box-shadow: 0 0 14px rgba(var(--wt-primary-rgb), .8), 0 0 42px rgba(var(--wt-primary-rgb), .5), inset 0 0 18px rgba(var(--wt-primary-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-shadow-neon-glow, .fx-shadow-neon-glow::before, .fx-shadow-neon-glow::after, .fx-shadow-neon-glow *, .fx-shadow-neon-glow *::before, .fx-shadow-neon-glow *::after { animation: none !important; transition: none !important; }
}
/* Colored Shadows - Tinted shadows in the primary colour (override with --fx-shadow-rgb) that make buttons and images glow softly. */
.fx-colored-shadows {
  box-shadow: 0 14px 28px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .65);
  transition: box-shadow .35s ease, transform .35s ease;
}
.fx-colored-shadows:hover, .fx-colored-shadows:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .8); }
@media (prefers-reduced-motion: reduce) {
  .fx-colored-shadows, .fx-colored-shadows::before, .fx-colored-shadows::after, .fx-colored-shadows *, .fx-colored-shadows *::before, .fx-colored-shadows *::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; }
}
/* 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; }
}