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

/* ===== Modern CSS Animations ===== */
/* 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; }
}
/* Shimmer Skeleton - Loading placeholders with a light sweep; add the class to every grey block of a skeleton card. */
.fx-shimmer-skeleton {
  display: block; min-height: .9rem; border-radius: var(--wt-radius, .5rem);
  background: linear-gradient(90deg, rgba(var(--wt-primary-rgb), .08) 25%, rgba(var(--wt-primary-rgb), .22) 37%, rgba(var(--wt-primary-rgb), .08) 63%);
  background-size: 400% 100%;
  animation: fx-shimmer-skeleton-shine 1.4s ease infinite;
}
@keyframes fx-shimmer-skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fx-shimmer-skeleton, .fx-shimmer-skeleton::before, .fx-shimmer-skeleton::after, .fx-shimmer-skeleton *, .fx-shimmer-skeleton *::before, .fx-shimmer-skeleton *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Clip-path Effects ===== */
/* Hexagon Scale - Crops avatars or product shots to a hexagon that grows and tilts slightly on hover. */
.fx-hexagon-scale {
  -webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .45s;
}
.fx-hexagon-scale:hover { transform: scale(1.1) rotate(4deg); filter: saturate(1.3); }
@media (prefers-reduced-motion: reduce) {
  .fx-hexagon-scale, .fx-hexagon-scale::before, .fx-hexagon-scale::after, .fx-hexagon-scale *, .fx-hexagon-scale *::before, .fx-hexagon-scale *::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 ===== */
/* Sepia Vintage - An old-photo look with sepia tones and a soft vignette; works on an img or a wrapper around one. */
.fx-sepia-vintage { position: relative; display: inline-block; overflow: hidden; }
img.fx-sepia-vintage, .fx-sepia-vintage img { filter: sepia(.75) contrast(1.1) brightness(.95) saturate(.85); transition: filter .5s ease; }
.fx-sepia-vintage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(60, 35, 10, .55); border-radius: inherit; }
img.fx-sepia-vintage:hover, .fx-sepia-vintage:hover img { filter: sepia(0) contrast(1) brightness(1) saturate(1); }
@media (prefers-reduced-motion: reduce) {
  .fx-sepia-vintage, .fx-sepia-vintage::before, .fx-sepia-vintage::after, .fx-sepia-vintage *, .fx-sepia-vintage *::before, .fx-sepia-vintage *::after { animation: none !important; transition: none !important; }
}
/* Duotone Effect - Turns any photo into a two-colour print in the theme colours; put the class on a wrapper around the img. */
.fx-duotone-effect { position: relative; display: inline-block; overflow: hidden; isolation: isolate; background: var(--wt-accent); }
.fx-duotone-effect img { display: block; filter: grayscale(1) contrast(1.2) brightness(1.1); mix-blend-mode: multiply; transition: filter .5s; }
.fx-duotone-effect::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--wt-primary); mix-blend-mode: lighten; transition: opacity .5s;
}
.fx-duotone-effect:hover::after { opacity: 0; }
.fx-duotone-effect:hover img { filter: grayscale(0); mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  .fx-duotone-effect, .fx-duotone-effect::before, .fx-duotone-effect::after, .fx-duotone-effect *, .fx-duotone-effect *::before, .fx-duotone-effect *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Transform Effects ===== */
/* 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; }
}
/* 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; }
}

/* ===== 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; }
}
/* Liquid Ripple - A button that fills with a swirling liquid from the bottom on hover. */
.fx-liquid-ripple, .btn.fx-liquid-ripple {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  color: var(--wt-primary-ink); background: var(--wt-surface, #fff); border: 2px solid var(--wt-primary);
  transition: color .5s ease;
}
.fx-liquid-ripple::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 240%; aspect-ratio: 1;
  margin-left: -120%; margin-top: 12%; border-radius: 42%;
  background: var(--wt-primary);
  transition: top .8s ease, margin-top .8s ease;
  animation: fx-liquid-ripple-swirl 5s linear infinite;
}
.fx-liquid-ripple:hover, .fx-liquid-ripple:focus-visible, .btn.fx-liquid-ripple:hover, .btn.fx-liquid-ripple:focus-visible { color: var(--wt-on-primary, #fff); border-color: var(--wt-primary); }
.fx-liquid-ripple:hover::before, .fx-liquid-ripple:focus-visible::before { top: 50%; margin-top: -120%; }
.fx-liquid-ripple:active { transform: scale(.97); }
@keyframes fx-liquid-ripple-swirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-liquid-ripple, .fx-liquid-ripple::before, .fx-liquid-ripple::after, .fx-liquid-ripple *, .fx-liquid-ripple *::before, .fx-liquid-ripple *::after { animation: none !important; transition: none !important; }
}
/* Magnetic Hover - Fakes a magnetic pull: the element lifts toward the pointer and its icon leans further with an elastic ease. */
.fx-magnetic-hover { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
.fx-magnetic-hover > * { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.fx-magnetic-hover:hover, .fx-magnetic-hover:focus-visible { transform: translate(3px, -4px) scale(1.06); box-shadow: -6px 12px 22px -10px rgba(var(--wt-primary-rgb), .6); }
.fx-magnetic-hover:hover > *, .fx-magnetic-hover:focus-visible > * { transform: translate(3px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .fx-magnetic-hover, .fx-magnetic-hover::before, .fx-magnetic-hover::after, .fx-magnetic-hover *, .fx-magnetic-hover *::before, .fx-magnetic-hover *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern CSS Gradient Effects ===== */
/* Aurora Hover - Northern-lights colour clouds that drift inside a card and brighten when it is hovered. */
.fx-aurora-hover { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora-hover::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .35;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(var(--wt-primary-rgb), .9), transparent),
    radial-gradient(closest-side at 70% 30%, rgba(var(--wt-accent-rgb), .8), transparent),
    radial-gradient(closest-side at 55% 70%, rgba(var(--wt-secondary-rgb), .8), transparent);
  filter: blur(24px);
  transition: opacity .6s ease;
  animation: fx-aurora-hover-drift 12s ease-in-out infinite alternate;
}
.fx-aurora-hover:hover::before, .fx-aurora-hover:focus-within::before { opacity: .85; }
@keyframes fx-aurora-hover-drift {
  from { transform: translate(-6%, -4%) rotate(0deg); }
  to { transform: translate(6%, 5%) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-aurora-hover, .fx-aurora-hover::before, .fx-aurora-hover::after, .fx-aurora-hover *, .fx-aurora-hover *::before, .fx-aurora-hover *::after { animation: none !important; transition: none !important; }
}
/* Gradient Shadow - A colourful multi-tone glow under cards and images built from layered tinted shadows. */
.fx-gradient-shadow {
  box-shadow: -14px 12px 30px -10px rgba(var(--wt-primary-rgb), .55), 14px 12px 30px -10px rgba(var(--wt-secondary-rgb), .55), 0 22px 36px -14px rgba(var(--wt-accent-rgb), .55);
  transition: box-shadow .4s ease, transform .4s ease;
}
.fx-gradient-shadow:hover, .fx-gradient-shadow:focus-visible {
  transform: translateY(-4px);
  box-shadow: -20px 18px 40px -10px rgba(var(--wt-primary-rgb), .7), 20px 18px 40px -10px rgba(var(--wt-secondary-rgb), .7), 0 30px 46px -14px rgba(var(--wt-accent-rgb), .7);
}
@media (prefers-reduced-motion: reduce) {
  .fx-gradient-shadow, .fx-gradient-shadow::before, .fx-gradient-shadow::after, .fx-gradient-shadow *, .fx-gradient-shadow *::before, .fx-gradient-shadow *::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; }
}
/* 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; }
}

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