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

/* ===== Modern CSS Animations ===== */
/* 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; }
}
/* Orbital Motion - Two small planets circle around an avatar, logo or icon on separate orbits. */
.fx-orbital-motion {
  position: relative; display: inline-grid; place-items: center; width: 9rem; height: 9rem;
  border-radius: 50%; border: 1px dashed rgba(var(--wt-primary-rgb), .45);
}
.fx-orbital-motion::before, .fx-orbital-motion::after {
  content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none;
}
.fx-orbital-motion::before {
  width: 14px; height: 14px; margin: -7px; background: var(--wt-primary);
  box-shadow: 0 0 10px rgba(var(--wt-primary-rgb), .7);
  animation: fx-orbital-motion-outer 5s linear infinite;
}
.fx-orbital-motion::after {
  width: 10px; height: 10px; margin: -5px; background: var(--wt-accent);
  animation: fx-orbital-motion-inner 3.2s linear infinite reverse;
}
@keyframes fx-orbital-motion-outer { from { transform: rotate(0deg) translateX(4.5rem) rotate(0deg); } to { transform: rotate(360deg) translateX(4.5rem) rotate(-360deg); } }
@keyframes fx-orbital-motion-inner { from { transform: rotate(0deg) translateX(3.1rem); } to { transform: rotate(360deg) translateX(3.1rem); } }
@media (prefers-reduced-motion: reduce) {
  .fx-orbital-motion, .fx-orbital-motion::before, .fx-orbital-motion::after, .fx-orbital-motion *, .fx-orbital-motion *::before, .fx-orbital-motion *::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 ===== */
/* 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; }
}
/* 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 ===== */
/* 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; }
}
/* Glitch Filter - Short bursts of hue, contrast and position jumps make an image look like a corrupted signal. */
.fx-glitch-filter { animation: fx-glitch-filter-glitch 3.5s steps(1) infinite; }
@keyframes fx-glitch-filter-glitch {
  0%, 86%, 100% { filter: none; transform: none; }
  88% { filter: hue-rotate(90deg) saturate(3) contrast(1.6); transform: translate(-4px, 1px); }
  90% { filter: invert(.15) contrast(2); transform: translate(4px, -2px) skewX(6deg); }
  92% { filter: hue-rotate(-70deg) saturate(2); transform: translate(-2px, 0); }
  94% { filter: brightness(1.6); transform: translate(2px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glitch-filter, .fx-glitch-filter::before, .fx-glitch-filter::after, .fx-glitch-filter *, .fx-glitch-filter *::before, .fx-glitch-filter *::after { animation: none !important; transition: none !important; }
}
/* Advanced Combo - A figure whose blurred, muted image sharpens and zooms on hover while a frosted caption slides up. */
.fx-advanced-combo { position: relative; overflow: hidden; display: inline-block; margin: 0; }
.fx-advanced-combo img { display: block; filter: grayscale(.5) blur(1px) brightness(.85); transform: scale(1.05); transition: filter .5s, transform .6s; }
.fx-advanced-combo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; color: #fff;
  background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
  transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.fx-advanced-combo:hover img, .fx-advanced-combo:focus-within img { filter: none; transform: scale(1.12); }
.fx-advanced-combo:hover figcaption, .fx-advanced-combo:focus-within figcaption { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fx-advanced-combo, .fx-advanced-combo::before, .fx-advanced-combo::after, .fx-advanced-combo *, .fx-advanced-combo *::before, .fx-advanced-combo *::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; }
}
/* 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; }
}
/* 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 ===== */
/* 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; }
}
/* 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; }
}
/* 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 ===== */
/* Conic Rotation - A spinning conic gradient behind round content such as avatars, scores or loaders. */
.fx-conic-rotation { position: relative; isolation: isolate; overflow: hidden; border-radius: 50%; padding: 5px; }
.fx-conic-rotation::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: conic-gradient(var(--wt-primary), var(--wt-accent), var(--wt-secondary), var(--wt-primary));
  animation: fx-conic-rotation-spin 3s linear infinite;
}
.fx-conic-rotation > * { display: block; border-radius: 50%; }
@keyframes fx-conic-rotation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-conic-rotation, .fx-conic-rotation::before, .fx-conic-rotation::after, .fx-conic-rotation *, .fx-conic-rotation *::before, .fx-conic-rotation *::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 ===== */
/* 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; }
}
/* 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; }
}
/* Soft Glow - A gentle breathing halo in the primary colour that makes a card or avatar feel highlighted. */
.fx-soft-glow { box-shadow: 0 0 24px rgba(var(--wt-primary-rgb), .22); animation: fx-soft-glow-breathe 4s ease-in-out infinite; }
@keyframes fx-soft-glow-breathe { 50% { box-shadow: 0 0 44px rgba(var(--wt-primary-rgb), .42); } }
@media (prefers-reduced-motion: reduce) {
  .fx-soft-glow, .fx-soft-glow::before, .fx-soft-glow::after, .fx-soft-glow *, .fx-soft-glow *::before, .fx-soft-glow *::after { animation: none !important; transition: none !important; }
}

/* ===== Advanced Animated Backgrounds ===== */
/* 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; }
}
/* Parallax - Three layers of dots and soft orbs drift at different speeds, giving the section a sense of depth. */
.fx-bg-parallax { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-parallax::before, .fx-bg-parallax::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-parallax::before {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--wt-primary-rgb), .35) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(var(--wt-secondary-rgb), .4) 0 2px, transparent 2.5px);
  background-size: 24px 24px, 70px 70px;
  animation: fx-bg-parallax-layers 20s linear infinite;
}
.fx-bg-parallax::after {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(var(--wt-accent-rgb), .22) 0 18px, transparent 32px),
    radial-gradient(circle, rgba(var(--wt-primary-rgb), .18) 0 26px, transparent 44px);
  background-size: 220px 220px, 340px 340px;
  background-position: 30px 60px, 180px 10px;
  animation: fx-bg-parallax-near 20s linear infinite;
}
@keyframes fx-bg-parallax-layers { to { background-position: -24px 0, -140px 0; } }
@keyframes fx-bg-parallax-near { to { background-position: -410px 60px, -500px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-bg-parallax, .fx-bg-parallax::before, .fx-bg-parallax::after, .fx-bg-parallax *, .fx-bg-parallax *::before, .fx-bg-parallax *::after { animation: none !important; transition: none !important; }
}