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

/* ===== Modern CSS Animations ===== */
/* Multi-Layer Spinner - A loading indicator made of three counter-rotating rings in the theme colours. */
.fx-multi-layer-spinner {
  position: relative; display: inline-block; width: 4rem; height: 4rem; border-radius: 50%;
  border: 4px solid transparent; border-top-color: var(--wt-primary);
  animation: fx-multi-layer-spinner-spin 1.1s linear infinite;
}
.fx-multi-layer-spinner::before, .fx-multi-layer-spinner::after { content: ""; position: absolute; border-radius: 50%; border: 4px solid transparent; }
.fx-multi-layer-spinner::before { inset: 4px; border-top-color: var(--wt-secondary); animation: fx-multi-layer-spinner-spin 1.7s linear infinite reverse; }
.fx-multi-layer-spinner::after { inset: 14px; border-top-color: var(--wt-accent); animation: fx-multi-layer-spinner-spin .8s linear infinite; }
@keyframes fx-multi-layer-spinner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-multi-layer-spinner, .fx-multi-layer-spinner::before, .fx-multi-layer-spinner::after, .fx-multi-layer-spinner *, .fx-multi-layer-spinner *::before, .fx-multi-layer-spinner *::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; }
}

/* ===== 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; }
}
/* 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; }
}
/* Inset Expand - A rounded inner window that expands to the full image edge when hovered. */
.fx-inset-expand { -webkit-clip-path: inset(12% 12% 12% 12% round 1.5rem); clip-path: inset(12% 12% 12% 12% round 1.5rem); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1); }
.fx-inset-expand:hover, .fx-inset-expand:focus-visible { -webkit-clip-path: inset(0 0 0 0 round 0); clip-path: inset(0 0 0 0 round 0); }
@media (prefers-reduced-motion: reduce) {
  .fx-inset-expand, .fx-inset-expand::before, .fx-inset-expand::after, .fx-inset-expand *, .fx-inset-expand *::before, .fx-inset-expand *::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; }
}
/* 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; }
}
/* 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; }
}

/* ===== Modern CSS Transform Effects ===== */
/* 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 ===== */
/* 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; }
}
/* 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 ===== */
/* Moving Stripes - Animated diagonal stripes for progress bars, sale banners and "in progress" states. */
.fx-moving-stripes {
  background-color: var(--wt-primary);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 12px, transparent 12px 24px);
  background-size: 34px 34px;
  color: var(--wt-on-primary, #fff);
  animation: fx-moving-stripes-move 1s linear infinite;
}
@keyframes fx-moving-stripes-move { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-moving-stripes, .fx-moving-stripes::before, .fx-moving-stripes::after, .fx-moving-stripes *, .fx-moving-stripes *::before, .fx-moving-stripes *::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; }
}

/* ===== Modern Shadow Effects ===== */
/* Layered Shadows - Five stacked, increasingly soft shadows give cards a realistic elevation that deepens on hover. */
.fx-layered-shadows {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .06), 0 4px 4px rgba(0, 0, 0, .06), 0 8px 8px rgba(0, 0, 0, .06), 0 16px 16px rgba(0, 0, 0, .06);
  transition: box-shadow .4s ease, transform .4s ease;
}
.fx-layered-shadows:hover, .fx-layered-shadows:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .07), 0 4px 4px rgba(0, 0, 0, .07), 0 8px 8px rgba(0, 0, 0, .07), 0 16px 16px rgba(0, 0, 0, .07), 0 32px 32px rgba(0, 0, 0, .07);
}
@media (prefers-reduced-motion: reduce) {
  .fx-layered-shadows, .fx-layered-shadows::before, .fx-layered-shadows::after, .fx-layered-shadows *, .fx-layered-shadows *::before, .fx-layered-shadows *::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; }
}
/* Outline Glow - A glowing focus ring for inputs, buttons and cards that appears on hover and keyboard focus. */
.fx-outline-glow { outline: 2px solid transparent; outline-offset: 2px; transition: box-shadow .3s ease, border-color .3s ease; }
.fx-outline-glow:hover, .fx-outline-glow:focus, .fx-outline-glow:focus-visible, .fx-outline-glow:focus-within {
  border-color: var(--wt-primary);
  box-shadow: 0 0 0 3px rgba(var(--wt-primary-rgb), .3), 0 0 18px rgba(var(--wt-primary-rgb), .45);
}
@media (prefers-reduced-motion: reduce) {
  .fx-outline-glow, .fx-outline-glow::before, .fx-outline-glow::after, .fx-outline-glow *, .fx-outline-glow *::before, .fx-outline-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; }
}
/* Wave/Blob - Soft colour blobs morph in the background while two layers of waves roll along the bottom edge. */
.fx-bg-wave-blob { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-wave-blob::before, .fx-bg-wave-blob::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-wave-blob::before {
  width: 55%; aspect-ratio: 1; top: -25%; left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--wt-primary-rgb), .32), transparent 68%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: fx-bg-wave-blob-blob 14s ease-in-out infinite alternate;
}
.fx-bg-wave-blob::after {
  left: 0; right: 0; bottom: 0; height: 60px;
  background:
    radial-gradient(84px 18px at 50% 100%, rgba(var(--wt-primary-rgb), .2) 99%, transparent 101%) 0 100% / 160px 30px repeat-x,
    radial-gradient(118px 24px at 50% 100%, rgba(var(--wt-accent-rgb), .18) 99%, transparent 101%) 0 100% / 220px 40px repeat-x,
    linear-gradient(rgba(var(--wt-primary-rgb), .14), rgba(var(--wt-primary-rgb), .14)) 0 100% / 100% 12px no-repeat;
  animation: fx-bg-wave-blob-wave 9s linear infinite;
}
@keyframes fx-bg-wave-blob-blob {
  0% { transform: translate(0, 0) rotate(0deg); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
  100% { transform: translate(110%, 35%) rotate(60deg); border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%; }
}
@keyframes fx-bg-wave-blob-wave { to { background-position: 160px 100%, -220px 100%, 0 100%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-wave-blob, .fx-bg-wave-blob::before, .fx-bg-wave-blob::after, .fx-bg-wave-blob *, .fx-bg-wave-blob *::before, .fx-bg-wave-blob *::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; }
}