/* Delta - 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; }
}
/* Glitch Text - Splits a heading into offset colour slices that jitter like a broken screen; repeat the text in data-text. */
.fx-glitch-text { position: relative; display: inline-block; }
.fx-glitch-text::before, .fx-glitch-text::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0);
}
.fx-glitch-text::before { color: var(--wt-accent); left: 2px; text-shadow: -1px 0 var(--wt-primary); animation: fx-glitch-text-a 2.6s steps(1) infinite; }
.fx-glitch-text::after { color: var(--wt-secondary); left: -2px; text-shadow: 1px 0 var(--wt-accent); animation: fx-glitch-text-b 3.1s steps(1) infinite; }
@keyframes fx-glitch-text-a {
  0% { -webkit-clip-path: inset(0 0 82% 0); clip-path: inset(0 0 82% 0); transform: translate(-3px, -1px); }
  15% { -webkit-clip-path: inset(30% 0 52% 0); clip-path: inset(30% 0 52% 0); transform: translate(3px, 1px); }
  30% { -webkit-clip-path: inset(62% 0 20% 0); clip-path: inset(62% 0 20% 0); transform: translate(-2px, 0); }
  45% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
  80% { -webkit-clip-path: inset(12% 0 70% 0); clip-path: inset(12% 0 70% 0); transform: translate(2px, -1px); }
  90% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@keyframes fx-glitch-text-b {
  0% { -webkit-clip-path: inset(70% 0 8% 0); clip-path: inset(70% 0 8% 0); transform: translate(2px, 1px); }
  20% { -webkit-clip-path: inset(8% 0 76% 0); clip-path: inset(8% 0 76% 0); transform: translate(-3px, 0); }
  35% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
  70% { -webkit-clip-path: inset(40% 0 38% 0); clip-path: inset(40% 0 38% 0); transform: translate(3px, -1px); }
  85% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glitch-text, .fx-glitch-text::before, .fx-glitch-text::after, .fx-glitch-text *, .fx-glitch-text *::before, .fx-glitch-text *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}

/* ===== Modern CSS Clip-path Effects ===== */
/* Triangle Spin - Cuts an element into a triangle and spins it slowly - great for loaders and decorative badges. */
.fx-triangle-spin {
  -webkit-clip-path: polygon(50% 4%, 96% 88%, 4% 88%); clip-path: polygon(50% 4%, 96% 88%, 4% 88%);
  background: linear-gradient(160deg, var(--wt-primary), var(--wt-accent));
  animation: fx-triangle-spin-spin 6s linear infinite;
}
@keyframes fx-triangle-spin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-triangle-spin, .fx-triangle-spin::before, .fx-triangle-spin::after, .fx-triangle-spin *, .fx-triangle-spin *::before, .fx-triangle-spin *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}
/* Invert Colors - Flips an image or card to its negative on hover while hue-rotate keeps the colours recognisable. */
.fx-invert-colors { transition: filter .4s ease; }
.fx-invert-colors:hover, .fx-invert-colors:focus-visible { filter: invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-invert-colors, .fx-invert-colors::before, .fx-invert-colors::after, .fx-invert-colors *, .fx-invert-colors *::before, .fx-invert-colors *::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; }
}

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

/* ===== 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; }
}
/* Gradient Text - Paints any heading with a slowly shifting gradient of the primary, accent and secondary colours. */
.fx-gradient-text {
  color: var(--wt-primary-ink);
  background-image: linear-gradient(90deg, var(--wt-primary), var(--wt-accent), var(--wt-secondary), var(--wt-primary));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-text-shift 6s linear infinite;
}
@keyframes fx-gradient-text-shift { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) {
  .fx-gradient-text, .fx-gradient-text::before, .fx-gradient-text::after, .fx-gradient-text *, .fx-gradient-text *::before, .fx-gradient-text *::after { animation: none !important; transition: none !important; }
}

/* ===== Modern Shadow Effects ===== */
/* Neon Glow - A pulsing neon outline glow for cards, buttons and inputs, best on dark sections. */
.fx-shadow-neon-glow {
  border: 1px solid rgba(var(--wt-primary-rgb), .8);
  box-shadow: 0 0 8px rgba(var(--wt-primary-rgb), .6), 0 0 24px rgba(var(--wt-primary-rgb), .35), inset 0 0 12px rgba(var(--wt-primary-rgb), .25);
  animation: fx-shadow-neon-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes fx-shadow-neon-glow-pulse {
  50% { box-shadow: 0 0 14px rgba(var(--wt-primary-rgb), .8), 0 0 42px rgba(var(--wt-primary-rgb), .5), inset 0 0 18px rgba(var(--wt-primary-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-shadow-neon-glow, .fx-shadow-neon-glow::before, .fx-shadow-neon-glow::after, .fx-shadow-neon-glow *, .fx-shadow-neon-glow *::before, .fx-shadow-neon-glow *::after { animation: none !important; transition: none !important; }
}
/* 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; }
}

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