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

/* ===== Modern CSS Animations ===== */
/* Pulse Wave Effect - Sends expanding rings out of a button, avatar or status dot to draw the eye. */
.fx-pulse-wave-effect { animation: fx-pulse-wave-effect-pulse 2s ease-out infinite; }
@keyframes fx-pulse-wave-effect-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--wt-primary-rgb), .55), 0 0 0 0 rgba(var(--wt-primary-rgb), .35); }
  70% { box-shadow: 0 0 0 16px rgba(var(--wt-primary-rgb), 0), 0 0 0 32px rgba(var(--wt-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--wt-primary-rgb), 0), 0 0 0 0 rgba(var(--wt-primary-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-pulse-wave-effect, .fx-pulse-wave-effect::before, .fx-pulse-wave-effect::after, .fx-pulse-wave-effect *, .fx-pulse-wave-effect *::before, .fx-pulse-wave-effect *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}
/* Bouncing Text - Makes each letter of a short word hop in turn; wrap every letter in a span with --i set to its index. */
.fx-bouncing-text { display: inline-flex; }
.fx-bouncing-text > span {
  display: inline-block;
  animation: fx-bouncing-text-bounce 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .09s);
}
@keyframes fx-bouncing-text-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  25% { transform: translateY(-14px); color: var(--wt-primary-ink); }
  40% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bouncing-text, .fx-bouncing-text::before, .fx-bouncing-text::after, .fx-bouncing-text *, .fx-bouncing-text *::before, .fx-bouncing-text *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Clip-path Effects ===== */
/* 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 ===== */
/* 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; }
}
/* 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; }
}
/* Text Filter Effects - Headings come into focus from a blur with a coloured drop shadow - a cinematic title reveal. */
.fx-text-filter-effects { filter: drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); animation: fx-text-filter-effects-focus 5s ease-in-out infinite; }
@keyframes fx-text-filter-effects-focus {
  0% { filter: blur(8px) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), 0)); opacity: .2; letter-spacing: .25em; }
  30%, 85% { filter: blur(0) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); opacity: 1; letter-spacing: normal; }
  100% { filter: blur(0) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-text-filter-effects, .fx-text-filter-effects::before, .fx-text-filter-effects::after, .fx-text-filter-effects *, .fx-text-filter-effects *::before, .fx-text-filter-effects *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transform Effects ===== */
/* 3D Rotating Cube - A spinning six-sided cube; give the element six children for the faces and set --fx-size if needed. */
.fx-3d-rotating-cube {
  --fx-half: calc(var(--fx-size, 6rem) / 2);
  position: relative; width: var(--fx-size, 6rem); height: var(--fx-size, 6rem);
  transform-style: preserve-3d;
  animation: fx-3d-rotating-cube-spin 12s linear infinite;
}
.fx-3d-rotating-cube:hover { animation-play-state: paused; }
.fx-3d-rotating-cube > * {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem;
  color: var(--wt-on-primary, #fff); border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(var(--wt-primary-rgb), .88);
}
.fx-3d-rotating-cube > :nth-child(1) { transform: translateZ(var(--fx-half)); }
.fx-3d-rotating-cube > :nth-child(2) { transform: rotateY(180deg) translateZ(var(--fx-half)); background: rgba(var(--wt-secondary-rgb), .88); }
.fx-3d-rotating-cube > :nth-child(3) { transform: rotateY(90deg) translateZ(var(--fx-half)); background: rgba(var(--wt-accent-rgb), .88); }
.fx-3d-rotating-cube > :nth-child(4) { transform: rotateY(-90deg) translateZ(var(--fx-half)); background: rgba(var(--wt-secondary-rgb), .88); }
.fx-3d-rotating-cube > :nth-child(5) { transform: rotateX(90deg) translateZ(var(--fx-half)); background: rgba(var(--wt-accent-rgb), .88); }
.fx-3d-rotating-cube > :nth-child(6) { transform: rotateX(-90deg) translateZ(var(--fx-half)); }
@keyframes fx-3d-rotating-cube-spin {
  from { transform: perspective(700px) rotateX(-22deg) rotateY(0deg); }
  to { transform: perspective(700px) rotateX(-22deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-3d-rotating-cube, .fx-3d-rotating-cube::before, .fx-3d-rotating-cube::after, .fx-3d-rotating-cube *, .fx-3d-rotating-cube *::before, .fx-3d-rotating-cube *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}

/* ===== 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; }
}
/* 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 ===== */
/* 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; }
}
/* 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; }
}

/* ===== Modern Shadow Effects ===== */
/* Glassmorphism - A frosted translucent panel with an inner highlight and soft drop shadow for overlays on images or gradients. */
.fx-glassmorphism {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glassmorphism { background: rgba(var(--wt-primary-rgb), .85); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glassmorphism, .fx-glassmorphism::before, .fx-glassmorphism::after, .fx-glassmorphism *, .fx-glassmorphism *::before, .fx-glassmorphism *::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; }
}

/* ===== 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; }
}
/* 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; }
}