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

/* ===== Modern CSS Animations ===== */
/* Morphing Blob - Turns a shape or a photo frame into an organic blob that slowly changes its outline. */
.fx-morphing-blob {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
  overflow: hidden;
  animation: fx-morphing-blob-morph 9s ease-in-out infinite;
}
.fx-morphing-blob img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes fx-morphing-blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
  66% { border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-morphing-blob, .fx-morphing-blob::before, .fx-morphing-blob::after, .fx-morphing-blob *, .fx-morphing-blob *::before, .fx-morphing-blob *::after { animation: none !important; transition: none !important; }
}
/* Particle Float - Fills a card or panel with small glowing particles that rise behind its content. */
.fx-particle-float { position: relative; isolation: isolate; overflow: hidden; }
.fx-particle-float::before, .fx-particle-float::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(var(--wt-primary-rgb), .7) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 80%, rgba(var(--wt-accent-rgb), .7) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 45%, rgba(var(--wt-secondary-rgb), .6) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 15%, rgba(var(--wt-primary-rgb), .6) 0 3px, transparent 4px);
  background-size: 160px 160px;
  animation: fx-particle-float-rise 10s linear infinite;
}
.fx-particle-float::after { background-size: 230px 230px; opacity: .6; animation: fx-particle-float-rise-slow 16s linear infinite; }
@keyframes fx-particle-float-rise { to { background-position: 0 -160px; } }
@keyframes fx-particle-float-rise-slow { to { background-position: 0 -230px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-particle-float, .fx-particle-float::before, .fx-particle-float::after, .fx-particle-float *, .fx-particle-float *::before, .fx-particle-float *::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 ===== */
/* Grayscale to Color - Keeps images black and white until they are hovered or focused - ideal for logo walls and team grids. */
.fx-grayscale-to-color { filter: grayscale(1); transition: filter .5s ease; }
.fx-grayscale-to-color:hover, .fx-grayscale-to-color:focus-visible, :focus-visible > .fx-grayscale-to-color { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .fx-grayscale-to-color, .fx-grayscale-to-color::before, .fx-grayscale-to-color::after, .fx-grayscale-to-color *, .fx-grayscale-to-color *::before, .fx-grayscale-to-color *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}
/* Saturation Boost - Desaturated at rest, vivid on hover - draws attention to the product the visitor is looking at. */
.fx-saturation-boost { filter: saturate(.6); transition: filter .4s ease, transform .4s ease; }
.fx-saturation-boost:hover, .fx-saturation-boost:focus-visible { filter: saturate(1.8); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .fx-saturation-boost, .fx-saturation-boost::before, .fx-saturation-boost::after, .fx-saturation-boost *, .fx-saturation-boost *::before, .fx-saturation-boost *::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; }
}
/* Scale & Rotate - A springy scale-and-twist on hover for icons, avatars, logos and small buttons. */
.fx-scale-rotate { transition: transform .45s cubic-bezier(.34, 1.8, .64, 1); }
.fx-scale-rotate:hover, .fx-scale-rotate:focus-visible { transform: scale(1.15) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-scale-rotate, .fx-scale-rotate::before, .fx-scale-rotate::after, .fx-scale-rotate *, .fx-scale-rotate *::before, .fx-scale-rotate *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transitions ===== */
/* 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; }
}
/* Rainbow Glow - Surrounds a button or card with a glow that cycles through the theme colours while hovered. */
.fx-rainbow-glow { transition: box-shadow .4s ease, transform .4s ease; }
.fx-rainbow-glow:hover, .fx-rainbow-glow:focus-visible { transform: translateY(-2px); animation: fx-rainbow-glow-glow 2.4s linear infinite; }
@keyframes fx-rainbow-glow-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(var(--wt-primary-rgb), .75), 0 0 34px rgba(var(--wt-primary-rgb), .35); }
  33% { box-shadow: 0 0 14px rgba(var(--wt-accent-rgb), .75), 0 0 34px rgba(var(--wt-accent-rgb), .35); }
  66% { box-shadow: 0 0 14px rgba(var(--wt-secondary-rgb), .75), 0 0 34px rgba(var(--wt-secondary-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rainbow-glow, .fx-rainbow-glow::before, .fx-rainbow-glow::after, .fx-rainbow-glow *, .fx-rainbow-glow *::before, .fx-rainbow-glow *::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 ===== */
/* 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; }
}
/* Animated Border - A gradient border that rotates around a card or button; browsers without @property show it still. */
@property --fx-animated-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fx-animated-border {
  border: 3px solid transparent;
  background:
    linear-gradient(var(--wt-surface, #fff), var(--wt-surface, #fff)) padding-box,
    conic-gradient(from var(--fx-animated-border-angle), var(--wt-primary), var(--wt-accent), var(--wt-secondary), var(--wt-primary)) border-box;
  animation: fx-animated-border-turn 4s linear infinite;
}
@keyframes fx-animated-border-turn { to { --fx-animated-border-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .fx-animated-border, .fx-animated-border::before, .fx-animated-border::after, .fx-animated-border *, .fx-animated-border *::before, .fx-animated-border *::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; }
}
/* Neon Text - Glowing neon-sign lettering with a subtle flicker; looks best on a dark background. */
.fx-neon-text {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px rgba(var(--wt-primary-rgb), 1), 0 0 22px rgba(var(--wt-primary-rgb), .9), 0 0 42px rgba(var(--wt-primary-rgb), .7);
  animation: fx-neon-text-flicker 4s linear infinite;
}
@keyframes fx-neon-text-flicker {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: .55; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-neon-text, .fx-neon-text::before, .fx-neon-text::after, .fx-neon-text *, .fx-neon-text *::before, .fx-neon-text *::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 ===== */
/* Gradient - A slow, breathing wash of the primary, secondary and accent colours flowing behind the section. */
.fx-bg-gradient-flow { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-gradient-flow::before, .fx-bg-gradient-flow::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-gradient-flow::before {
  inset: 0;
  background: linear-gradient(120deg, rgba(var(--wt-primary-rgb), .30), rgba(var(--wt-secondary-rgb), .22), rgba(var(--wt-accent-rgb), .28), rgba(var(--wt-primary-rgb), .30));
  background-size: 300% 300%;
  animation: fx-bg-gradient-flow-flow 16s ease infinite;
}
@keyframes fx-bg-gradient-flow-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-gradient-flow, .fx-bg-gradient-flow::before, .fx-bg-gradient-flow::after, .fx-bg-gradient-flow *, .fx-bg-gradient-flow *::before, .fx-bg-gradient-flow *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}
/* Shapes - Rings, dots, squares and triangles in theme colours float and turn slowly behind the content. */
.fx-bg-shapes { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-shapes::before, .fx-bg-shapes::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-shapes::before, .fx-bg-shapes::after { inset: -10%; background-repeat: no-repeat; }
.fx-bg-shapes::before {
  background-image:
    radial-gradient(circle, transparent 0 38%, rgba(var(--wt-primary-rgb), .35) 40% 50%, transparent 52%),
    radial-gradient(circle, rgba(var(--wt-accent-rgb), .35) 0 48%, transparent 50%),
    conic-gradient(from 150deg at 50% 0, rgba(var(--wt-secondary-rgb), .3) 0 60deg, transparent 0);
  background-size: 90px 90px, 34px 34px, 70px 60px;
  background-position: 12% 22%, 82% 18%, 70% 82%;
  animation: fx-bg-shapes-float 12s ease-in-out infinite alternate;
}
.fx-bg-shapes::after {
  background-image:
    linear-gradient(rgba(var(--wt-secondary-rgb), .22), rgba(var(--wt-secondary-rgb), .22)),
    radial-gradient(circle, transparent 0 40%, rgba(var(--wt-accent-rgb), .3) 42% 52%, transparent 54%),
    radial-gradient(circle, rgba(var(--wt-primary-rgb), .3) 0 48%, transparent 50%);
  background-size: 38px 38px, 60px 60px, 22px 22px;
  background-position: 88% 62%, 22% 80%, 45% 12%;
  animation: fx-bg-shapes-turn 18s ease-in-out infinite alternate;
}
@keyframes fx-bg-shapes-float { to { transform: translate(3%, -5%) rotate(6deg); } }
@keyframes fx-bg-shapes-turn { to { transform: translate(-4%, 4%) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-shapes, .fx-bg-shapes::before, .fx-bg-shapes::after, .fx-bg-shapes *, .fx-bg-shapes *::before, .fx-bg-shapes *::after { animation: none !important; transition: none !important; }
}