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

/* ===== Modern CSS Clip-path Effects ===== */
/* Ellipse Morph - An elliptical frame that breathes between wide and tall - soft and organic for portraits. */
.fx-ellipse-morph { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); animation: fx-ellipse-morph-breathe 5s ease-in-out infinite alternate; }
@keyframes fx-ellipse-morph-breathe {
  0% { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); }
  100% { -webkit-clip-path: ellipse(32% 48% at 50% 50%); clip-path: ellipse(32% 48% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ellipse-morph, .fx-ellipse-morph::before, .fx-ellipse-morph::after, .fx-ellipse-morph *, .fx-ellipse-morph *::before, .fx-ellipse-morph *::after { animation: none !important; transition: none !important; }
}
/* Slide Reveal - Wipes an image or banner in from the left, holds it, then wipes it out to the right. */
.fx-slide-reveal { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation: fx-slide-reveal-wipe 5s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes fx-slide-reveal-wipe {
  0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  25%, 75% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
  100% { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-slide-reveal, .fx-slide-reveal::before, .fx-slide-reveal::after, .fx-slide-reveal *, .fx-slide-reveal *::before, .fx-slide-reveal *::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; }
}
/* 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; }
}
/* 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; }
}
/* 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; }
}
/* Transform Chain - Chains translate, rotate and scale as separate properties with staggered timing for a lively hover. */
.fx-transform-chain { transition: translate .3s ease, rotate .5s cubic-bezier(.34, 1.56, .64, 1) .08s, scale .4s ease .16s; }
.fx-transform-chain:hover, .fx-transform-chain:focus-visible { translate: 0 -8px; rotate: -3deg; scale: 1.06; }
@supports not (translate: 0) {
  .fx-transform-chain { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .fx-transform-chain:hover, .fx-transform-chain:focus-visible { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-transform-chain, .fx-transform-chain::before, .fx-transform-chain::after, .fx-transform-chain *, .fx-transform-chain *::before, .fx-transform-chain *::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; }
}
/* 3D Flip Card - Flips a card over in 3D on hover or focus to show its back; use the -inner, -front and -back child classes. */
.fx-3d-flip-card { perspective: 1000px; }
.fx-3d-flip-card .fx-3d-flip-card-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}
.fx-3d-flip-card:hover .fx-3d-flip-card-inner, .fx-3d-flip-card:focus-within .fx-3d-flip-card-inner { transform: rotateY(180deg); }
.fx-3d-flip-card .fx-3d-flip-card-front, .fx-3d-flip-card .fx-3d-flip-card-back {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--wt-radius-lg, 1rem); overflow: hidden;
}
.fx-3d-flip-card .fx-3d-flip-card-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: 1rem;
  color: var(--wt-on-primary, #fff); background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
}
@media (prefers-reduced-motion: reduce) {
  .fx-3d-flip-card, .fx-3d-flip-card::before, .fx-3d-flip-card::after, .fx-3d-flip-card *, .fx-3d-flip-card *::before, .fx-3d-flip-card *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Gradient Effects ===== */
/* Animated Rainbow - A full-spectrum gradient that flows endlessly across banners, buttons and progress bars. */
.fx-animated-rainbow {
  color: #fff;
  background: linear-gradient(90deg, #ff3d7f, #ff9f1c, #ffd23f, #3bce73, #2ec4ff, #7b5cff, #ff3d7f);
  background-size: 300% 100%;
  animation: fx-animated-rainbow-flow 8s linear infinite;
}
@keyframes fx-animated-rainbow-flow { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-animated-rainbow, .fx-animated-rainbow::before, .fx-animated-rainbow::after, .fx-animated-rainbow *, .fx-animated-rainbow *::before, .fx-animated-rainbow *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}

/* ===== Modern Shadow Effects ===== */
/* 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; }
}
/* 3D Text Shadow - Stacks hard shadows under a heading so the letters look extruded, with a soft ambient shadow below. */
.fx-3d-text-shadow {
  color: var(--wt-primary-ink);
  --fx-depth: rgba(0, 0, 0, .35);
  text-shadow: 0 1px 0 var(--fx-depth), 0 2px 0 var(--fx-depth), 0 3px 0 var(--fx-depth), 0 4px 0 var(--fx-depth), 0 5px 0 var(--fx-depth), 0 6px 0 var(--fx-depth),
    0 8px 6px rgba(0, 0, 0, .2), 0 14px 18px rgba(0, 0, 0, .18);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fx-3d-text-shadow { --fx-depth: color-mix(in srgb, var(--wt-primary) 60%, #000); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-3d-text-shadow, .fx-3d-text-shadow::before, .fx-3d-text-shadow::after, .fx-3d-text-shadow *, .fx-3d-text-shadow *::before, .fx-3d-text-shadow *::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 ===== */
/* 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; }
}
/* 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; }
}