/* 
 * Websly Theme 2.0 - Advanced Background & Texture Effects
 * performance-optimized CSS-only effects using semantic tokens.
 */

:root {
    --ws-glass-opacity: 0.72;
    --ws-blur-amount: 18px;
    --ws-fx-color-1-rgb: var(--theme-accent-rgb, 37, 99, 235);
    --ws-fx-color-2-rgb: var(--theme-accent-secondary-rgb, var(--theme-accent-rgb, 37, 99, 235));
    --ws-fx-color-3-rgb: var(--theme-accent-tertiary-rgb, var(--theme-accent-rgb, 37, 99, 235));
    --ws-fx-text-rgb: var(--text-base-rgb);
    --ws-fx-highlight-rgb: 255, 255, 255;
    --ws-fx-shadow-rgb: 15, 23, 42;
    --ws-fx-base-rgb: var(--bg-base-rgb);
    --ws-fx-surface-rgb: var(--bg-surface-rgb);
    --ws-fx-vignette-rgb: var(--text-base-rgb);
    --ws-fx-surface-alpha: 0.96;
    --ws-fx-base-alpha: 0.98;
    --ws-fx-grain-opacity: 0.042;
    --ws-fx-pattern-opacity: 0.095;
    --ws-fx-pattern-spot-opacity: 0.11;
    --ws-fx-isometric-opacity: 0.10;
    --ws-fx-isometric-accent-opacity: 0.13;
    --ws-fx-vignette-opacity: 0.16;
    --ws-fx-divider-opacity: 0.22;
    --ws-fx-gradient-opacity-a: 0.16;
    --ws-fx-gradient-opacity-b: 0.12;
    --ws-fx-gradient-opacity-c: 0.09;
    --ws-fx-neumorph-shadow-alpha: 0.09;
    --ws-fx-neumorph-highlight-alpha: 0.84;
    --ws-fx-neumorph-inset-shadow-alpha: 0.05;
    --ws-fx-neumorph-inset-highlight-alpha: 0.42;
}

.dark {
    --ws-glass-opacity: 0.16;
    --ws-blur-amount: 20px;
    --ws-fx-highlight-rgb: 255, 255, 255;
    --ws-fx-shadow-rgb: 0, 0, 0;
    --ws-fx-base-rgb: var(--bg-base-rgb);
    --ws-fx-surface-rgb: var(--bg-strong-rgb, var(--bg-surface-rgb));
    --ws-fx-vignette-rgb: 0, 0, 0;
    --ws-fx-surface-alpha: 0.92;
    --ws-fx-base-alpha: 0.96;
    --ws-fx-grain-opacity: 0.052;
    --ws-fx-pattern-opacity: 0.10;
    --ws-fx-pattern-spot-opacity: 0.13;
    --ws-fx-isometric-opacity: 0.12;
    --ws-fx-isometric-accent-opacity: 0.16;
    --ws-fx-vignette-opacity: 0.22;
    --ws-fx-divider-opacity: 0.18;
    --ws-fx-gradient-opacity-a: 0.20;
    --ws-fx-gradient-opacity-b: 0.15;
    --ws-fx-gradient-opacity-c: 0.11;
    --ws-fx-neumorph-shadow-alpha: 0.18;
    --ws-fx-neumorph-highlight-alpha: 0.08;
    --ws-fx-neumorph-inset-shadow-alpha: 0.12;
    --ws-fx-neumorph-inset-highlight-alpha: 0.05;
}

.ws-effect-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha));
}

.ws-effect-host::before,
.ws-effect-host::after {
    content: "";

    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.ws-effect-host>* {
    position: relative;
    z-index: 1;
}

.websly-fx-container.ws-effect-host {
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
}

/* Perf 5.1: skip layout/paint on scoped fx containers when they're scrolled
   far off-screen. `content-visibility: auto` lets the browser elide work for
   off-screen subtrees; `contain-intrinsic-size` reserves layout so the scroll
   position doesn't jump as containers enter/leave the viewport. Only scoped
   effects opt in — full-page body effects need to keep painting. */
.websly-fx-container.websly-fx-scoped {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
    contain: layout paint;
}

/* 1. Mesh Gradients - Fluid multi-color blobs */
.ws-effect-mesh {
    position: relative;
    background:
        linear-gradient(180deg, rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 0%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%),
        radial-gradient(circle at 0% 0%, rgb(var(--ws-fx-color-1-rgb) / var(--ws-fx-gradient-opacity-a)) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-gradient-opacity-b)) 0%, transparent 44%),
        radial-gradient(circle at 50% 100%, rgb(var(--ws-fx-color-3-rgb) / var(--ws-fx-gradient-opacity-c)) 0%, transparent 54%);
}

.ws-effect-mesh::before {
    background:
        radial-gradient(circle at 18% 18%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) + 0.10)) 0%, transparent 32%),
        radial-gradient(circle at 78% 24%, rgb(var(--ws-fx-color-2-rgb) / calc(var(--ws-fx-gradient-opacity-b) + 0.08)) 0%, transparent 28%),
        radial-gradient(circle at 72% 78%, rgb(var(--ws-fx-color-3-rgb) / calc(var(--ws-fx-gradient-opacity-c) + 0.08)) 0%, transparent 34%);
    filter: blur(48px);
    opacity: 0.96;
}

.ws-effect-mesh::after {
    inset: -10%;
    background:
        radial-gradient(circle at 50% 50%, rgb(var(--ws-fx-highlight-rgb) / 0.16) 0%, transparent 36%),
        radial-gradient(circle at 50% 50%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) + 0.04)) 0%, transparent 58%);
    filter: blur(72px);
}

/* 2. Aurora/Glow - Soft radial light spill */
.ws-effect-aurora {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-accent) 22%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 20%, transparent) 0%, transparent 36%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-aurora::before {
    content: "";

    position: absolute;
    inset: -35%;
    background:
        radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--theme-accent) 28%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 24%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 24%, transparent) 0%, transparent 24%);
    animation: ws-aurora 18s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.98;
}

.ws-effect-aurora::after {
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 80% 18%, color-mix(in srgb, white 16%, transparent) 0%, transparent 16%),
        radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 14%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 44% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 16%, transparent) 0%, transparent 20%);
    filter: blur(96px);
    opacity: 0.92;
}

@keyframes ws-aurora {
    0% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-5%, 5%);
    }

    66% {
        transform: translate(5%, -5%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* 3. Noise & Grain - Subtle static overlay */
.ws-effect-noise {
    position: relative;
    background: linear-gradient(180deg, rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 0%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%);
}

.ws-effect-noise::before {
    background:
        radial-gradient(circle at 18% 14%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) * 0.48)) 0%, transparent 34%),
        radial-gradient(circle at 86% 82%, rgb(var(--ws-fx-color-2-rgb) / calc(var(--ws-fx-gradient-opacity-b) * 0.42)) 0%, transparent 30%);
    filter: blur(46px);
    opacity: 0.82;
}

.ws-effect-noise::after {
    content: "";

    position: absolute;
    inset: 0;
    opacity: var(--ws-fx-grain-opacity);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 4. Glassmorphism - Semi-transparent blur layer */
.ws-effect-glass {
    background:
        linear-gradient(180deg, color-mix(in srgb, white 32%, transparent) 0%, color-mix(in srgb, var(--bg-surface) 82%, transparent) 18%, color-mix(in srgb, var(--bg-surface) 90%, transparent) 56%, color-mix(in srgb, var(--bg-base) 94%, transparent) 100%),
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 26%);
    background-color: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(var(--ws-blur-amount)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--ws-blur-amount)) saturate(1.8);
    border: 1px solid color-mix(in srgb, white 18%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), 0 18px 40px color-mix(in srgb, black 12%, transparent), inset 0 -12px 24px color-mix(in srgb, black 4%, transparent);
}

.ws-effect-glass::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, white 24%, transparent), transparent 36%),
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%, transparent 28%);
    opacity: 0.92;
}

.ws-effect-glass::after {
    background:
        linear-gradient(120deg, transparent 18%, color-mix(in srgb, white 16%, transparent) 34%, color-mix(in srgb, white 10%, transparent) 44%, transparent 58%),
        radial-gradient(circle at 74% 76%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 10%, transparent) 0%, transparent 24%);
    opacity: 0.86;
}

/* 5. Neumorphism - Dual shadows for molded look */
.ws-effect-neumorphic {
    background:
        linear-gradient(145deg, color-mix(in srgb, white 28%, var(--bg-surface)) 0%, color-mix(in srgb, var(--bg-surface) 94%, transparent) 26%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    box-shadow:
        18px 18px 34px color-mix(in srgb, black 12%, transparent),
        -16px -16px 30px color-mix(in srgb, white 42%, transparent),
        inset 1px 1px 0 color-mix(in srgb, white 28%, transparent),
        inset -10px -10px 22px color-mix(in srgb, black 6%, transparent);
    border: 1px solid color-mix(in srgb, white 16%, transparent);
}

.ws-effect-neumorphic::before {
    background:
        radial-gradient(circle at 20% 14%, color-mix(in srgb, white 28%, transparent) 0%, transparent 32%),
        radial-gradient(circle at 80% 84%, color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%, transparent 28%);
    opacity: 0.92;
}

.ws-effect-neumorphic::after {
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, black 7%, transparent) 100%);
    opacity: 0.5;
}

/* 6. Geometric/Dot Grid */
.ws-effect-geometric {
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    background-image:
        linear-gradient(color-mix(in srgb, var(--text-strong) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-strong) 10%, transparent) 1px, transparent 1px),
        radial-gradient(circle at center, color-mix(in srgb, var(--theme-accent) 24%, transparent) 0, color-mix(in srgb, var(--theme-accent) 24%, transparent) 1.4px, transparent 2px);
    background-size: 28px 28px, 28px 28px, 28px 28px;
    background-position: 0 0, 0 0, 14px 14px;
}

.ws-effect-geometric::before {
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 14%, transparent) 0%, transparent 22%);
    filter: blur(52px);
    opacity: 0.9;
}

.ws-effect-isometric {
    background-color: rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha));
    background-image:
        linear-gradient(30deg, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 12%, transparent 12.5%, transparent 87%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 87.5%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity))),
        linear-gradient(150deg, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 12%, transparent 12.5%, transparent 87%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 87.5%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity))),
        linear-gradient(90deg, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)) 2%, transparent 2.5%, transparent 97%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)) 97.5%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)));
    background-size: 36px 62px;
    background-position: 0 0, 0 0, 18px 31px;
}

.ws-effect-paper {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle, var(--bg-surface)) 96%, white 4%) 0%, color-mix(in srgb, var(--bg-surface) 96%, transparent) 52%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
    background-color: color-mix(in srgb, var(--bg-surface) 98%, transparent);
}

.ws-effect-paper::before {
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--text-strong) 3%, transparent), color-mix(in srgb, var(--text-strong) 3%, transparent)),
        repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--text-strong) 4%, transparent) 3px 4px);
    mix-blend-mode: multiply;
    opacity: 0.88;
}

.ws-effect-paper::after {
    opacity: calc(var(--ws-fx-grain-opacity) * 1.9);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.ws-effect-vignette {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 76% 82%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 28%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-vignette::before {
    background: radial-gradient(circle at center, transparent 24%, color-mix(in srgb, white 10%, transparent) 54%, transparent 72%);
    opacity: 0.9;
}

.ws-effect-vignette::after {
    background: radial-gradient(circle at center, transparent 38%, color-mix(in srgb, black 22%, transparent) 100%);
    opacity: 0.92;
}

.ws-effect-wave-divider,
.ws-effect-wave-blob {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 30%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 28%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-wave-divider::before,
.ws-effect-wave-blob::before {
    top: auto;
    bottom: -12%;
    height: 54%;
    background:
        radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--theme-accent) 24%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse at 50% 12%, color-mix(in srgb, white 22%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 18%, transparent) 0%, transparent 56%);
    filter: blur(28px);
    opacity: 0.96;
}

.ws-effect-wave-divider::after,
.ws-effect-wave-blob::after {
    inset: -10% 12% auto;
    height: 38%;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 18%, transparent) 0%, transparent 64%);
    filter: blur(36px);
    opacity: 0.92;
}

.ws-effect-wave-divider::before {
    bottom: -16%;
    height: 48%;
}

.ws-effect-wave-divider::after {
    inset: auto 12% -12%;
    height: 30%;
    box-shadow: 0 0 15px rgb(var(--ws-fx-color-1-rgb) / 0.08);
}

.ws-effect-wave-blob::before {
    bottom: -8%;
    height: 62%;
}

.ws-effect-wave-blob::after {
    inset: 38% -8% -16%;
    height: auto;
    background:
        radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--theme-accent) 16%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 16%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 14%, transparent) 0%, transparent 24%);
}

/* 7. Soft Top Gradient */
.ws-effect-grad-top {
    background: linear-gradient(to bottom, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) * 0.52)), rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 42%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%);
}

/* 8. Minimal Border Glow */
.ws-effect-border-glow {
    position: relative;
    border: 1px solid rgb(var(--ws-fx-color-1-rgb) / 0.20);
    box-shadow: 0 0 15px rgb(var(--ws-fx-color-1-rgb) / 0.08);
}

.ws-effect-border-glow:hover {
    border-color: rgb(var(--ws-fx-color-1-rgb) / 0.40);
    box-shadow: 0 0 25px rgb(var(--ws-fx-color-1-rgb) / 0.14);
}

/* 9. Depth Layer (Subtle inner shadow) */
.ws-effect-depth {
    box-shadow: inset 0 2px 10px rgb(var(--ws-fx-shadow-rgb) / 0.08);
}

.dark .ws-effect-depth {
    box-shadow: inset 0 2px 10px rgb(var(--ws-fx-shadow-rgb) / 0.32);
}

/* 10. Accent Pulse (Animated border) */
.ws-effect-pulse-border {
    position: relative;
}

.ws-effect-pulse-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgb(var(--ws-fx-color-1-rgb));
    border-radius: inherit;
    opacity: 0;
    animation: ws-pulse-border 3s infinite;
}

@keyframes ws-pulse-border {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 0;
    }
}

/* Utility: Reduce Motion support */
@media (prefers-reduced-motion: reduce) {

    .ws-effect-aurora::before,
    .ws-effect-pulse-border::after {
        animation: none !important;
    }
}

/* Abstract Process Illustrations */
.ws-rotate-slow {
    animation: ws-rotate 12s linear infinite;
    transform-origin: center;
}

@keyframes ws-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ws-dash-anim {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ws-dash 3s ease-in-out infinite alternate;
}

@keyframes ws-dash {
    to {
        stroke-dashoffset: 0;
    }
}

.ws-scan-anim {
    animation: ws-scan 4s ease-in-out infinite;
}

@keyframes ws-scan {

    0%,
    100% {
        transform: translateY(-10px);
        opacity: 0.2;
    }

    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* 12. Ultra-Modern Button Presets (v5.1) */
.btn-glass-glow {
    background: rgba(var(--bg-surface-rgb), 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--text-base-rgb), 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.5s var(--ease-out-expo);
}

.btn-glass-glow:hover {
    background: rgba(var(--bg-surface-rgb), 0.6);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.25);
}

.btn-neon-sharp {
    background: transparent;
    border: 1px solid rgba(var(--theme-accent-rgb), 1);
    color: var(--theme-accent);
    text-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: inset 0 0 0 rgba(var(--theme-accent-rgb), 0);
    transition: all 0.4s var(--ease-out-expo);
}

.btn-neon-sharp:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb, 37, 99, 235), 0.6);
    text-shadow: none;
}

.btn-kinetic-slide {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

.btn-kinetic-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--theme-accent);
    transition: width 0.6s var(--ease-in-out-expo);
    z-index: 0;
}

.btn-kinetic-slide:hover::before {
    width: 100%;
}

.btn-kinetic-slide:hover {
    color: var(--theme-text-on-accent, #fff);
}

.btn-ambient-bounce {
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
    border: 1px solid transparent;
    transition: all 0.5s var(--ease-out-back);
}

.btn-ambient-bounce:hover {
    background: color-mix(in srgb, var(--theme-accent) 15%, transparent);
    box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

.btn-liquid-steel {
    background: linear-gradient(135deg, rgba(var(--text-base-rgb), 0.05) 0%, rgba(var(--text-base-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--text-base-rgb), 0.1);
    position: relative;
    overflow: hidden;
}

.btn-liquid-steel::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--theme-accent-rgb), 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.btn-liquid-steel:hover::after {
    opacity: 1;
}

.btn-liquid-steel:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.3);
}

/* Cyber Neon Button (Premium 5.1) */
.btn-cyber-neon {
    position: relative !important;
    background: color-mix(in srgb, var(--theme-accent, #2563eb) 5%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #2563eb) 20%, transparent) !important;
    color: var(--theme-text) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: visible !important;
}

.btn-cyber-neon:hover {
    background: color-mix(in srgb, var(--theme-accent, #2563eb) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-accent, #2563eb) 40%, transparent) !important;
    color: var(--theme-accent, #2563eb) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--theme-accent, #2563eb) 12%, transparent) !important;
}

/* Top Glowing Line */
.btn-cyber-neon::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, var(--theme-accent, #2563eb), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Bottom Muted Glowing Line */
.btn-cyber-neon::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, var(--theme-accent, #2563eb), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.btn-cyber-neon:hover::before {
    opacity: 1 !important;
}

.btn-cyber-neon:hover::after {
    opacity: 0.4 !important;
}

/* 14. Button Interaction Axes (5.1 Governance) */
.btn-interaction-scale {
    transition: transform 0.4s var(--ease-out-expo) !important;
}

.btn-interaction-scale:hover {
    transform: scale(1.05);
}

.btn-interaction-scale:active {
    transform: scale(0.96);
}

.btn-interaction-float {
    transition: transform 0.5s var(--ease-out-back) !important;
}

.btn-interaction-float:hover {
    transform: translateY(-4px);
}

.btn-interaction-glow {
    transition: box-shadow 0.4s ease !important;
}

.btn-interaction-glow:hover {
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb), 0.5);
}

.btn-interaction-slide-right .group-hover\:translate-x-1 {
    transform: translateX(4px);
}

/* Customized Hover Animations */
.ws-hover-bg-shift {
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.ws-hover-bg-shift:hover {
    background-color: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
}

.ws-hover-bg-shift-static-text {
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.ws-hover-bg-shift-static-text:hover {
    background-color: var(--theme-accent);
    /* Text color intentionally remains same as non-hover state */
}

/* 13. Advanced Shapes & Interactions (v5.1) */
.ws-shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Title underline only — no lift */
.ws-hover-underline .ws-h3 {
    position: relative;
    display: inline-block;
}

.ws-hover-underline .ws-h3::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-accent);
    transition: width 0.5s var(--ease-smooth);
    border-radius: 99px;
}

.ws-hover-underline:hover .ws-h3::after {
    width: 100%;
}

/* Simple lift — no underline */
.ws-hover-lift {
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
    position: relative;
}

.ws-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.ws-hover-lift-underline {
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
    position: relative;
}

.ws-hover-lift-underline:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.ws-hover-lift-underline .ws-h3 {
    position: relative;
    display: inline-block;
}

.ws-hover-lift-underline .ws-h3::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-accent);
    transition: width 0.5s var(--ease-smooth);
    border-radius: 99px;
}

.ws-hover-lift-underline:hover .ws-h3::after {
    width: 100%;
}

/* 15. Restored & Theme-Aware Skins (v5.1 Governance) */

/* Primary - The main brand action */
.btn-primary {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
}

.btn-primary:hover {
    filter: brightness(1.3);
}

/* Secondary - Lower contrast branded action (Soft Border + Tint) */
.btn-secondary {
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
    color: var(--theme-text);
    border: 1px solid rgba(var(--text-base-rgb), 0.12);
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
    border-color: rgba(var(--text-base-rgb), 0.25);
}

/* CTA - High impact Call to Action */
.btn-cta {
    background: var(--theme-grad-brand);
    color: var(--theme-text-on-accent, #fff);
    position: relative;
    overflow: hidden;
}

.btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.6s;
}

.btn-cta:hover::before {
    left: 100%;
}

.btn-cta:hover {
    filter: brightness(1.3);
}


/* Tertiary - Branded secondary accent */
.btn-tertiary {
    background: var(--theme-accent-secondary, var(--theme-accent));
    color: var(--theme-text-on-accent);
}

.btn-tertiary:hover {
    filter: brightness(1.3);
}

/* Soft - Low contrast tinted background */
.btn-soft {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
    border: 1px solid transparent;
}

.btn-soft:hover {
    background: color-mix(in srgb, var(--theme-accent) 35%, transparent);
}

/* Nav Pill — clean pill for navigation links (no rest background, hover reveals) */
.nav-pill {
    border-radius: 999px;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.nav-pill:hover {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
}

/* Glass - Standard Glassmorphism */
.btn-glass {
    background: rgba(var(--bg-surface-rgb), 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--theme-text);
}

.btn-glass:hover {
    background: rgba(var(--bg-surface-rgb), 0.6);
    border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

/* Outline - Transparent with border */
.btn-outline-dynamic {
    background: transparent;
    border: 2px solid var(--theme-accent);
    color: var(--theme-accent);
}

/* --- 16. REVERSE / INVERTED VARIANTS --- */

.btn-liquid-steel-light {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(220, 220, 220, 0.9) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255,255,255,1) !important;
}
.btn-liquid-steel-light:hover { border-color: rgba(var(--theme-accent-rgb), 0.3) !important; }

.btn-liquid-steel-dark {
    background: linear-gradient(135deg, rgba(15, 15, 20, 0.98) 0%, rgba(35, 35, 45, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}
.btn-liquid-steel-dark:hover { border-color: rgba(var(--theme-accent-rgb), 0.5) !important; }

.btn-obsidian-chrome-inv {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 15px 35px -10px rgba(0,0,0,0.15) !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.btn-obsidian-chrome-inv:hover {
    background: #fdfdfd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 20px 45px -12px rgba(0,0,0,0.25) !important;
}

.btn-silk-white {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1) !important;
    transition: all 0.5s var(--ease-out-expo) !important;
}
.btn-silk-white:hover {
    background: #fafafa !important;
    box-shadow: 0 15px 40px -12px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
}

.btn-holo-white {
    background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%) !important;
    color: #000 !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-holo-white::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #ff0080, #7928ca, #0070f3, #00dfd8, #ff0080);
    background-size: 400% 400%;
    z-index: -1;
    animation: ws-holo-border 8s linear infinite;
    opacity: 0.25;
}

.btn-glass-nocturnal {
    background: rgba(10, 10, 15, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important;
}

.btn-aurora-void {
    background: #080812 !important;
    color: #fff !important;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.2) !important;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.8) !important;
}

.btn-neon-ice {
    background: #fff !important;
    color: var(--theme-accent) !important;
    border: 2px solid var(--theme-accent) !important;
    box-shadow: 0 0 15px rgba(var(--theme-accent-rgb), 0.2) !important;
}
.btn-neon-ice:hover {
    background: var(--theme-accent) !important;
    color: #fff !important;
    box-shadow: 0 0 30px var(--theme-accent) !important;
}

.btn-clay-dark {
    background: #1a1a20 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 
        inset 0 -4px 8px rgba(0,0,0,0.6),
        inset 0 4px 8px rgba(255,255,255,0.1),
        0 12px 24px rgba(0,0,0,0.5) !important;
}
@keyframes ws-holo-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.btn-outline-dynamic:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    filter: brightness(1.2);
}

/* Smooth Accent - Minimalist tint transition */
.btn-smooth-accent {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-smooth-accent:hover {
    background: color-mix(in srgb, var(--theme-accent) 20%, transparent);
    filter: brightness(1.2);
}

/* Link Underline - Fixed standard 5.1 implementation */
.btn-link-underline {
    background: transparent;
    color: var(--theme-accent);
    padding: 0 0 2px 0 !important;
    border-radius: 0;
    position: relative;
    font-weight: 600;
    border: none;
}

.btn-link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--theme-accent);
    transition: transform 0.3s ease;
    transform-origin: right;
    transform: scaleX(1);
}

.btn-link-underline:hover::after {
    transform: scaleX(0);
}

.btn-outline {
    background: transparent;
    border: 1px solid currentColor !important;
    color: var(--theme-accent);
}

.btn-outline:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent);
    filter: brightness(1.3);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent !important;
    color: var(--theme-text);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--theme-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-text) 15%, transparent) !important;
}

/* Borderless - Minimalist */
.btn-borderless {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--theme-accent);
}

.btn-borderless:hover {
    opacity: 0.8;
}

/* Neumorphic */
.btn-neumorphic {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--text-base-rgb), 0.05);
    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.1),
        -6px -6px 12px rgba(255, 255, 255, 0.8),
        inset 0 0 0 transparent;
    transition: all 0.4s var(--ease-out-expo);
}

.btn-neumorphic:hover {
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.1),
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        inset 2px 2px 5px rgba(0, 0, 0, 0.05);
    filter: brightness(1.02);
}

.dark .btn-neumorphic {
    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.05);
}

/* Monochrome */
.btn-monochrome {
    background: var(--theme-text);
    color: var(--bg-base);
}

.btn-monochrome:hover {
    opacity: 0.9;
}

/* 16. Theme Gradients (OKLCH Precision - Gemini Polish) */
/* 16. Theme Gradients (OKLCH Precision - 5.1 System) */
.btn-gradient-theme {
    background: linear-gradient(135deg,
            var(--theme-accent),
            var(--accent-secondary, var(--theme-accent)));
    color: var(--theme-text-on-accent, #fff);
    border: none;
    transition: filter 0.4s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

.btn-gradient-theme:hover {
    filter: brightness(1.4) saturate(1.1);
}

.btn-gradient-premium {
    background: var(--theme-grad-brand-bold);
    color: var(--theme-text-on-accent);
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.btn-gradient-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-grad-accent-bold);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    border-radius: inherit;
}

.btn-gradient-premium:hover::before {
    opacity: 1;
}

/* Dynamic OKLCH Gradients using semantic ramps */
.btn-gradient-sunset {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    /* Fallback */
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent), #f59e0b 40%),
            color-mix(in oklch, var(--accent-secondary, var(--theme-accent)), #ef4444 60%));
    color: white;
}

.btn-gradient-ocean {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent), #0ea5e9 40%),
            color-mix(in oklch, var(--accent-secondary, var(--theme-accent)), #6366f1 60%));
    color: white;
}

.btn-gradient-matrix {
    background: linear-gradient(135deg, #22c55e, #14532d);
    color: white;
}

.btn-gradient-neon {
    background: #000;
    color: #22c55e;
    border: 1px solid #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.btn-gradient-neon:hover {
    background: #22c55e;
    color: #000;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8);
}

/* 17. 2026 Ultra-Modern Library (5.1 Governance) */

/* Glass 2026: Prismatic edge refraction & internal stroke */
.btn-glass-2026 {
    background: color-mix(in srgb, var(--bg-surface) 35%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--text-base) 15%, transparent);
    box-shadow:
        inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent),
        0 12px 24px -10px rgba(0, 0, 0, 0.2);
    color: var(--theme-text);
    position: relative;
    overflow: hidden;
}

.btn-glass-2026::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 40%, color-mix(in oklch, var(--theme-accent), transparent 80%) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s var(--ease-out-expo);
}

.btn-glass-2026:hover::after {
    transform: translateX(100%);
}

.btn-glass-2026:hover {
    border-color: color-mix(in oklch, var(--theme-accent) 40%, transparent);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.25);
}

/* Neu-Retro: Geometric brutalism with floating accent shadows */
.btn-neu-retro {
    background: var(--bg-surface);
    border: 2.5px solid var(--theme-text);
    color: var(--theme-text);
    font-weight: 800;
    box-shadow: 4px 4px 0 0 var(--theme-accent);
    transition: all 0.2s var(--ease-out-expo);
}

.btn-neu-retro:hover {
    box-shadow: 8px 8px 0 0 var(--accent-secondary, var(--theme-accent));
    filter: brightness(1.2);
}

.btn-neu-retro:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0 0 var(--theme-accent);
}

/* Clay-Volumetric: Internal dimension & squishy tactile feel */
.btn-clay-volumetric {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border-radius: var(--radius-xl);
    border: none;
    box-shadow:
        inset 0 -6px 8px rgba(0, 0, 0, 0.2),
        inset 0 6px 8px rgba(255, 255, 255, 0.3),
        0 8px 20px -6px rgba(var(--theme-accent-rgb), 0.5);
    transition: all 0.4s var(--ease-out-back);
}

.btn-clay-volumetric:hover {
    filter: brightness(1.15);
    box-shadow:
        inset 0 -4px 6px rgba(0, 0, 0, 0.2),
        inset 0 4px 6px rgba(255, 255, 255, 0.3),
        0 12px 28px -6px rgba(var(--theme-accent-rgb), 0.6);
}

/* Pulse-Edge: Continuous brand-color neon edge animation */
.btn-pulse-edge {
    background: var(--bg-base);
    color: var(--theme-text);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent);
    position: relative;
    z-index: 1;
}

.btn-pulse-edge::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, var(--theme-accent), var(--accent-secondary, var(--theme-accent)), var(--theme-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ws-spin 4s linear infinite;
    opacity: 0.6;
}

@keyframes ws-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-pulse-edge:hover {
    background: color-mix(in oklch, var(--theme-accent) 5%, var(--bg-base));
}

/* Prism-Shimmer: Iridescent holographic foil shift */
.btn-prism-shimmer {
    background: var(--theme-grad-brand);
    color: var(--theme-text-on-accent, #fff);
    position: relative;
    border: none;
    isolation: isolate;
    z-index: 1;
}

.btn-prism-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            transparent 25%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 75%);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: 0;
    border-radius: inherit;
}

.btn-prism-shimmer:hover::before {
    opacity: 1;
    animation: ws-prism 1.5s var(--ease-in-out-expo) infinite;
}

/* 18. 5.1 Extension: Modern Presets */

.btn-modern-minimal {
    background: transparent;
    color: var(--theme-text);
    border: 1px solid rgba(var(--text-base-rgb), 0.15);
    transition: all 0.3s var(--ease-smooth);
}
.btn-modern-minimal:hover {
    border-color: var(--theme-accent);
}

.btn-glow-outline {
    background: transparent;
    color: var(--theme-accent);
    border: 1px solid var(--theme-accent);
    box-shadow: 0 0 10px rgba(var(--theme-accent-rgb), 0.2);
    transition: all 0.4s ease;
}
.btn-glow-outline:hover {
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.btn-brutalist {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s ease;
    font-weight: 800 !important;
}
.btn-brutalist:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px #000;
}
.btn-brutalist:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #000;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BRUTALIST COMIC PRESETS (2026 Premium)
   ───────────────────────────────────────────────────────────────────────────── */
.btn-brutalist-comic {
    background: var(--theme-accent) !important;
    color: var(--theme-text-on-accent, #ffffff) !important;
    border: 2px solid var(--theme-text-strong, #000000) !important;
    box-shadow: 4px 4px 0px var(--theme-text-strong, #000000) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    transform: translate(0, 0);
}
.btn-brutalist-comic:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}
.btn-brutalist-comic:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}

.btn-brutalist-comic-light {
    background: color-mix(in srgb, var(--theme-accent) 15%, var(--bg-base, #ffffff)) !important;
    color: var(--theme-accent, #000000) !important;
    border: 2px solid var(--theme-text-strong, #000000) !important;
    box-shadow: 4px 4px 0px var(--theme-text-strong, #000000) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    transform: translate(0, 0);
}
.btn-brutalist-comic-light:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}
.btn-brutalist-comic-light:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}

.btn-brutalist-comic-dark {
    background: color-mix(in srgb, var(--theme-accent) 80%, #000000) !important;
    color: var(--theme-text-on-accent, #ffffff) !important;
    border: 2px solid var(--theme-text-strong, #000000) !important;
    box-shadow: 4px 4px 0px var(--theme-text-strong, #000000) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    transform: translate(0, 0);
}
.btn-brutalist-comic-dark:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}
.btn-brutalist-comic-dark:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}

.btn-brutalist-comic-secondary {
    background: var(--bg-base, #ffffff) !important;
    color: var(--theme-text-strong, #000000) !important;
    border: 2px solid var(--theme-text-strong, #000000) !important;
    box-shadow: 4px 4px 0px var(--theme-text-strong, #000000) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    transform: translate(0, 0);
}
.btn-brutalist-comic-secondary:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}
.btn-brutalist-comic-secondary:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--theme-text-strong, #000000) !important;
}


.btn-soft-shadow {
    background: var(--bg-surface);
    color: var(--text-base);
    border: 1px solid rgba(var(--text-base-rgb), 0.05);
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.btn-soft-shadow:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.btn-glass-vibrant {
    background: rgba(var(--theme-accent-rgb), 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--theme-accent);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    box-shadow: 0 8px 32px 0 rgba(var(--theme-accent-rgb), 0.1);
}
.btn-glass-vibrant:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: var(--theme-accent);
}

@keyframes ws-prism {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── btn-gradient-primary ────────────────────────────────────────────── */
/* A monochromatic gradient variant using exclusively the primary color */
.btn-gradient-primary {
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent) 82%, white) 0%,
            var(--theme-accent) 50%,
            color-mix(in oklch, var(--theme-accent) 88%, black) 100%) !important;
    background-size: 200% 200% !important;
    color: var(--theme-text-on-accent, #fff) !important;
    border: none !important;
    transition: all var(--duration-normal) var(--ease-out-expo) !important;
    box-shadow: 0 4px 15px rgba(var(--theme-accent-rgb), 0.25);
}

.btn-gradient-primary:hover {
    background-position: 100% 100% !important;
    box-shadow: 0 8px 25px rgba(var(--theme-accent-rgb), 0.4);
    filter: brightness(1.3);
}

/*  nav-pill (Gemini Polish)  */
.nav-pill {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent) !important;
    color: var(--theme-primary-dark) !important;
    border-radius: 9999px !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border: 1px solid var(--accent-weak) !important;
    transition: all var(--duration-fast) var(--ease-out-expo) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    isolation: isolate;
    z-index: 1;
}

.nav-pill:hover {
    background: var(--theme-accent) !important;
    color: var(--theme-text-on-accent, #fff) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: var(--shadow-sm);
    filter: brightness(1.3);
}

/*  btn-glass-glow (Premium Material)  */
.btn-glass-glow {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-base) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    z-index: 1;
}

.btn-glass-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(var(--theme-accent-rgb), 0.15) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.btn-glass-glow:hover::before {
    opacity: 1;
}

.btn-glass-glow:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-primary-dark) !important;
}

.dark .btn-glass-glow {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── CONTEXTUAL COMPONENT REFINEMENTS (v5.2) ── */

/* Hero Button Pairing: Ensures balanced weights for paired CTAs on mobile and desktop */
.hero-element > a.group, 
.hero-element > button.group {
    flex: 1 1 0%;
    min-width: 140px;
    white-space: nowrap;
}

/* On desktop, we don't want them to stretch to fill the whole screen if the container is wide */
@media (min-width: 768px) {
    .hero-element > a.group, 
    .hero-element > button.group {
        flex: 0 1 auto;
        min-width: 180px;
    }
}

/* ── INTERACTION LIBRARY (v5.1 Decoupled) ── */
.btn-interaction-lift {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.btn-interaction-lift:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2) !important;
}

.btn-interaction-scale {
    transition: transform 0.3s var(--ease-out-expo);
}

.btn-interaction-scale:hover {
    transform: scale(1.05) !important;
}

.btn-interaction-glow {
    transition: box-shadow 0.4s ease;
}

.btn-interaction-glow:hover {
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.4) !important;
}

.btn-interaction-slide {
    position: relative;
    overflow: hidden;
}

.btn-interaction-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 0;
}

.btn-interaction-slide:hover::after {
    transform: translateX(0);
}

/* Luxe Shimmer - Animated Sweep */
.btn-interaction-shimmer {
    position: relative;
    overflow: hidden;
}
.btn-interaction-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
}
.btn-interaction-shimmer:hover::before {
    left: 150%;
    transition: left 0.7s ease-in-out;
}

/* Liquid Fill - Expanding radial background */
.btn-interaction-liquid {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-interaction-liquid::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(var(--theme-accent-rgb, 59, 130, 246), 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}
.btn-interaction-liquid:hover::after {
    width: 300%;
    height: 300%;
}

/* Power - Combined Scale + Double Glow */
.btn-interaction-power {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-interaction-power:hover {
    transform: scale(1.08) translateY(-1px) !important;
    box-shadow: 
        0 0 15px rgba(var(--theme-accent-rgb), 0.3),
        0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
}

/* ── EXPANDED RADIUS LIBRARY ── */
.rounded-3xl {
    border-radius: 1.5rem !important;
}

.rounded-4xl {
    border-radius: 2rem !important;
}

/* Asymmetric Fun Options */
/* Blob: Top-Left/Bottom-Right 4rem, others 8rem */
.rounded-blob {
    border-radius: 4rem 8rem 4rem 8rem !important;
}

/* Curved TL: Sharp with one expressive rounded corner */
.rounded-curved-tl {
    border-radius: 24px 0 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ── 5.1 GLOBAL SHADOW-TO-GLOW (Dark Mode Governance) ──
   Ensures depth is visible in dark mode via subtle accent-colored glows.
   ───────────────────────────────────────────────────────────────────────────── */
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark .ws-surface-card,
.dark .ws-surface-card.shadow-2xl {
    /* Keep a very dark base shadow for structure, add accent glow for visibility */
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 
                0 0 25px -5px color-mix(in srgb, var(--theme-accent) 15%, transparent) !important;
}

.dark .shadow-2xl,
.dark .ws-surface-card.shadow-2xl {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.9), 
                0 0 45px -10px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
}

/* Hover Enhancement for Glow */
.dark .ws-surface-card:hover {
    box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.95),
                0 0 55px -5px color-mix(in srgb, var(--theme-accent) 35%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ██  19. ULTRA-PREMIUM SECTION EFFECTS (2026)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Liquid Chrome: Animated metallic fluid surface ── */
.ws-effect-liquid-chrome {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--bg-surface) 92%, white) 0%,
            color-mix(in oklch, var(--bg-surface) 96%, transparent) 30%,
            color-mix(in oklch, var(--bg-base) 94%, transparent) 70%,
            color-mix(in oklch, var(--bg-surface) 90%, white) 100%);
    background-size: 400% 400%;
    animation: ws-chrome-flow 12s ease-in-out infinite;
}
.ws-effect-liquid-chrome::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        conic-gradient(from 0deg at 30% 30%,
            color-mix(in oklch, var(--theme-accent) 18%, transparent),
            color-mix(in oklch, white 20%, transparent),
            color-mix(in oklch, var(--accent-secondary, var(--theme-accent)) 14%, transparent),
            color-mix(in oklch, white 16%, transparent),
            color-mix(in oklch, var(--theme-accent) 18%, transparent));
    filter: blur(80px);
    animation: ws-chrome-rotate 20s linear infinite;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-liquid-chrome::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(170deg, color-mix(in srgb, white 10%, transparent) 0%, transparent 30%),
        linear-gradient(350deg, transparent 70%, color-mix(in srgb, white 8%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
@keyframes ws-chrome-flow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}
@keyframes ws-chrome-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ws-effect-liquid-chrome > * { position: relative; z-index: 1; }

/* ── Frosted Morphism: Ultra-premium frosted glass with depth layers ── */
.ws-effect-frosted-morph {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
    backdrop-filter: blur(40px) saturate(2.0);
    -webkit-backdrop-filter: blur(40px) saturate(2.0);
    border: 1px solid color-mix(in srgb, white 12%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 20%, transparent),
        inset 0 -1px 0 color-mix(in srgb, black 5%, transparent),
        0 32px 64px -16px rgba(0, 0, 0, 0.15);
}
.ws-effect-frosted-morph::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in oklch, var(--theme-accent) 20%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, color-mix(in oklch, var(--accent-secondary, var(--theme-accent)) 16%, transparent) 0%, transparent 50%);
    filter: blur(60px);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-frosted-morph::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, white 40%, transparent) 50%, transparent);
    pointer-events: none;
    z-index: 0;
}
.ws-effect-frosted-morph > * { position: relative; z-index: 1; }
.dark .ws-effect-frosted-morph {
    background: color-mix(in srgb, var(--bg-surface) 30%, transparent);
    border-color: color-mix(in srgb, white 6%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
        0 32px 64px -16px rgba(0, 0, 0, 0.5);
}

/* ── Prismatic Glass: Rainbow refraction edge highlights ── */
.ws-effect-prismatic {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
}
.ws-effect-prismatic::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        oklch(0.7 0.2 0),
        oklch(0.7 0.2 60),
        oklch(0.7 0.2 120),
        oklch(0.7 0.2 180),
        oklch(0.7 0.2 240),
        oklch(0.7 0.2 300),
        oklch(0.7 0.2 360));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    border-radius: inherit;
    opacity: 0.3;
    animation: ws-prismatic-spin 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-prismatic::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 40%, color-mix(in oklch, var(--theme-accent) 8%, transparent) 50%, transparent 60%);
    animation: ws-prismatic-sweep 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
@keyframes ws-prismatic-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ws-prismatic-sweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.ws-effect-prismatic > * { position: relative; z-index: 1; }

/* ── Neon Grid: Cyberpunk luminescent grid lines ── */
.ws-effect-neon-grid {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in oklch, var(--bg-base) 98%, black);
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-accent) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 8%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
}
.ws-effect-neon-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-accent) 15%, transparent) 0%, transparent 60%);
    filter: blur(40px);
    animation: ws-neon-pulse 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-neon-grid::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(0deg, color-mix(in oklch, var(--bg-base) 95%, transparent) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
@keyframes ws-neon-pulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}
.ws-effect-neon-grid > * { position: relative; z-index: 1; }

/* ── Soft Clay: Ultra-soft neumorphic with warm depth ── */
.ws-effect-soft-clay {
    position: relative;
    background: var(--bg-surface);
    box-shadow:
        20px 20px 60px color-mix(in srgb, var(--bg-base) 80%, black),
        -20px -20px 60px color-mix(in srgb, var(--bg-surface) 80%, white),
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
    border: 1px solid color-mix(in srgb, white 8%, transparent);
    border-radius: var(--radius-2xl, 1.5rem);
}
.ws-effect-soft-clay::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg,
        color-mix(in srgb, white 6%, transparent) 0%,
        transparent 40%,
        color-mix(in srgb, black 3%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
}
.ws-effect-soft-clay > * { position: relative; z-index: 1; }
.dark .ws-effect-soft-clay {
    box-shadow:
        20px 20px 60px rgba(0, 0, 0, 0.6),
        -20px -20px 60px color-mix(in srgb, var(--bg-surface) 30%, black),
        inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
    border-color: color-mix(in srgb, white 4%, transparent);
}

/* ── Holographic Foil: Iridescent animated sheen ── */
.ws-effect-holographic {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
}
.ws-effect-holographic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        oklch(0.8 0.15 0 / 0.12) 28%,
        oklch(0.8 0.15 60 / 0.10) 34%,
        oklch(0.8 0.15 120 / 0.12) 40%,
        oklch(0.8 0.15 180 / 0.10) 46%,
        oklch(0.8 0.15 240 / 0.12) 52%,
        oklch(0.8 0.15 300 / 0.10) 58%,
        transparent 70%);
    background-size: 300% 100%;
    animation: ws-holo-sweep 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-holographic::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
@keyframes ws-holo-sweep {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}
.ws-effect-holographic > * { position: relative; z-index: 1; }

/* ── Cinematic Grain: Film-stock texture with muted color wash ── */
.ws-effect-cinematic-grain {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in oklch, var(--bg-surface) 90%, oklch(0.4 0.02 60)) 0%,
            color-mix(in oklch, var(--bg-base) 92%, oklch(0.3 0.01 200)) 100%);
}
.ws-effect-cinematic-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--theme-accent) 10%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.ws-effect-cinematic-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    animation: ws-grain-shift 0.5s steps(4) infinite;
}
@keyframes ws-grain-shift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(1px, -2px); }
    75% { transform: translate(-1px, 2px); }
    100% { transform: translate(2px, -1px); }
}
.ws-effect-cinematic-grain > * { position: relative; z-index: 1; }

/* ── Iridescent Mesh: Animated multi-color gradient mesh ── */
.ws-effect-iridescent-mesh {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, transparent) 0%, color-mix(in srgb, var(--bg-base) 96%, transparent) 100%);
}
.ws-effect-iridescent-mesh::before {
    content: "";
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 20% 20%, oklch(0.75 0.18 330 / 0.2) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, oklch(0.75 0.18 200 / 0.18) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, oklch(0.75 0.18 130 / 0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, oklch(0.75 0.18 50 / 0.15) 0%, transparent 35%);
    filter: blur(60px);
    animation: ws-iridescent-drift 16s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
.ws-effect-iridescent-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
@keyframes ws-iridescent-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-5%, 3%) scale(1.05); }
    66% { transform: translate(3%, -5%) scale(0.98); }
    100% { transform: translate(-2%, 2%) scale(1.02); }
}
.ws-effect-iridescent-mesh > * { position: relative; z-index: 1; }

/* ── Spotlight: Radial follow-light effect ── */
.ws-effect-spotlight {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklch, var(--bg-base) 98%, black);
}
.ws-effect-spotlight::before {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: ws-spotlight-breathe 6s ease-in-out infinite alternate;
}
@keyframes ws-spotlight-breathe {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
}
.ws-effect-spotlight > * { position: relative; z-index: 1; }

/* ── Carbon Fiber: Technical premium texture ── */
.ws-effect-carbon-fiber {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in oklch, var(--bg-base) 96%, black);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            color-mix(in srgb, var(--text-base) 3%, transparent) 2px,
            color-mix(in srgb, var(--text-base) 3%, transparent) 4px),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            color-mix(in srgb, var(--text-base) 3%, transparent) 2px,
            color-mix(in srgb, var(--text-base) 3%, transparent) 4px);
    background-size: 4px 4px;
}
.ws-effect-carbon-fiber::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg-base) 50%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
}
.ws-effect-carbon-fiber::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.ws-effect-carbon-fiber > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ██  20. PREMIUM CARD HOVER ANIMATIONS (2026)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 3D Tilt: Perspective rotation on hover ── */
.ws-hover-3d-tilt {
    transition: transform 0.6s var(--ease-out-expo);
    transform-style: preserve-3d;
    perspective: 1000px;
}
.ws-hover-3d-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateZ(10px);
    box-shadow: 20px 20px 60px -20px rgba(0, 0, 0, 0.2),
                0 0 30px -10px color-mix(in srgb, var(--theme-accent) 15%, transparent);
}

/* ── Glass Reveal: Frosted glass overlay slides in ── */
.ws-hover-glass-reveal {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}
.ws-hover-glass-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo);
    z-index: 2;
    border-radius: inherit;
}
.ws-hover-glass-reveal:hover::before {
    opacity: 1;
    transform: translateY(0);
}
.ws-hover-glass-reveal:hover {
    transform: translateY(-4px);
}

/* ── Border Trace: Animated border draws around card ── */
.ws-hover-border-trace {
    position: relative;
    transition: transform 0.4s var(--ease-out-expo);
}
.ws-hover-border-trace::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 0deg, var(--theme-accent), var(--accent-secondary, var(--theme-accent)), var(--theme-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ws-hover-border-trace:hover::after {
    opacity: 1;
    animation: ws-border-trace-spin 3s linear infinite;
}
.ws-hover-border-trace:hover {
    transform: translateY(-4px);
}
@keyframes ws-border-trace-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Morph Expand: Smooth scale with glow burst ── */
.ws-hover-morph-expand {
    transition: transform 0.5s var(--ease-out-back), box-shadow 0.5s var(--ease-out-expo);
}
.ws-hover-morph-expand:hover {
    transform: scale(1.03);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 40px -8px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

/* ── Neon Glow: Accent-colored edge glow on hover ── */
.ws-hover-neon-glow {
    transition: box-shadow 0.4s var(--ease-out-expo), border-color 0.4s ease;
    border: 1px solid transparent;
}
.ws-hover-neon-glow:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--theme-accent) 25%, transparent),
        0 0 40px color-mix(in srgb, var(--theme-accent) 10%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--theme-accent) 5%, transparent);
}

/* ── Spotlight Hover: Radial light follows hover position ── */
.ws-hover-spotlight {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo);
}
.ws-hover-spotlight::before {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    top: var(--mouse-y, 50%); left: var(--mouse-x, 50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 20%, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
.ws-hover-spotlight:hover::before {
    opacity: 1;
}
.ws-hover-spotlight:hover {
    transform: translateY(-2px);
}

/* ── Shimmer Slide: Diagonal light sweep on hover ── */
.ws-hover-shimmer-slide {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.ws-hover-shimmer-slide::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, white 15%, transparent) 50%, transparent 60%);
    transition: left 0.8s var(--ease-out-expo);
    pointer-events: none;
    z-index: 2;
}
.ws-hover-shimmer-slide:hover::after {
    left: 150%;
}
.ws-hover-shimmer-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* ── Soft Float: Gentle levitation with ambient shadow ── */
.ws-hover-soft-float {
    transition: transform 0.6s var(--ease-out-back), box-shadow 0.6s var(--ease-out-expo);
}
.ws-hover-soft-float:hover {
    transform: translateY(-12px);
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.12),
        0 15px 30px -10px color-mix(in srgb, var(--theme-accent) 8%, transparent);
}

/* ── Depth Press: Inward press tactile feel ── */
.ws-hover-depth-press {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.ws-hover-depth-press:hover {
    transform: scale(0.98);
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ██  21. PREMIUM ENTRANCE ANIMATIONS (GSAP-compatible, CSS fallback)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fade Up Blur: Blur-to-sharp entrance ── */
.ws-entrance-fade-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}
.ws-entrance-fade-blur.ws-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ── Scale Reveal: Scale from center with fade ── */
.ws-entrance-scale-reveal {
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.7s var(--ease-out-back);
}
.ws-entrance-scale-reveal.ws-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Slide Clip: Clip-path reveal from direction ── */
.ws-entrance-clip-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s var(--ease-out-expo);
}
.ws-entrance-clip-up.ws-visible {
    clip-path: inset(0 0 0 0);
}

.ws-entrance-clip-left {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s var(--ease-out-expo);
}
.ws-entrance-clip-left.ws-visible {
    clip-path: inset(0 0 0 0);
}

.ws-entrance-clip-right {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.8s var(--ease-out-expo);
}
.ws-entrance-clip-right.ws-visible {
    clip-path: inset(0 0 0 0);
}

/* ── Rotate In: Slight rotation entrance ── */
.ws-entrance-rotate-in {
    opacity: 0;
    transform: rotate(-3deg) translateY(20px);
    transition: all 0.7s var(--ease-out-expo);
}
.ws-entrance-rotate-in.ws-visible {
    opacity: 1;
    transform: rotate(0) translateY(0);
}

/* ── Stagger Children: Sequential child reveal ── */
.ws-stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s var(--ease-out-expo);
}
.ws-stagger-children.ws-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.ws-stagger-children.ws-visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════════
   ██  22. PREMIUM BUTTON PRESETS (2026 Ultra-Modern)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Aurora Shimmer: Animated gradient border with glass fill ── */
.btn-aurora-shimmer {
    background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--theme-text);
    border: none;
    position: relative;
    isolation: isolate;
    z-index: 1;
    overflow: hidden;
}
.btn-aurora-shimmer::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
        var(--theme-accent),
        var(--accent-secondary, var(--theme-accent)),
        oklch(0.75 0.18 200),
        var(--theme-accent));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ws-aurora-btn 4s ease-in-out infinite;
    z-index: -1;
}
@keyframes ws-aurora-btn {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn-aurora-shimmer:hover {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

/* ── Liquid Fill: Fluid rising fill animation ── */
.btn-liquid-fill {
    background: transparent;
    color: var(--theme-accent);
    border: 2px solid var(--theme-accent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    transition: color 0.5s ease;
}
.btn-liquid-fill::before {
    content: "";
    position: absolute;
    bottom: 0; left: -5%;
    width: 110%; height: 0;
    background: var(--theme-accent);
    border-radius: 0 0 0 0;
    transition: height 0.6s var(--ease-out-expo);
    z-index: -1;
}
.btn-liquid-fill:hover::before {
    height: 110%;
    border-radius: 0 0 50% 50%;
}
.btn-liquid-fill:hover {
    color: var(--theme-text-on-accent, #fff);
}

/* ── Magnetic Pull: Scale + glow on approach ── */
.btn-magnetic-pull {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border: none;
    transition: all 0.4s var(--ease-out-back);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}
.btn-magnetic-pull:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--theme-accent) 50%, transparent);
    filter: brightness(1.15);
}
.btn-magnetic-pull:active {
    transform: scale(0.97);
}

/* ── Frosted Pill: Ultra-premium frosted capsule ── */
.btn-frosted-pill {
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    color: var(--theme-text);
    border: 1px solid color-mix(in srgb, white 15%, transparent);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 20%, transparent),
        0 8px 24px -8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s var(--ease-out-expo);
}
.btn-frosted-pill:hover {
    background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 25%, transparent),
        0 12px 32px -8px rgba(0, 0, 0, 0.15);
    border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

/* ── Morphing Gradient: Animated gradient that shifts colors ── */
.btn-morphing-gradient {
    background: linear-gradient(135deg,
        var(--theme-accent),
        var(--accent-secondary, color-mix(in oklch, var(--theme-accent), purple 40%)),
        var(--theme-accent));
    background-size: 200% 200%;
    color: var(--theme-text-on-accent, #fff);
    border: none;
    animation: ws-morph-grad 4s ease-in-out infinite;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-accent) 30%, transparent);
    transition: box-shadow 0.4s ease, filter 0.4s ease;
}
@keyframes ws-morph-grad {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn-morphing-gradient:hover {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--theme-accent) 50%, transparent);
    filter: brightness(1.15);
}

/* ── Chrome Liquid: Metallic reflective surface ── */
.btn-chrome-liquid {
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--bg-surface) 80%, white) 0%,
        color-mix(in oklch, var(--bg-surface) 60%, white) 30%,
        color-mix(in oklch, var(--bg-surface) 90%, black) 60%,
        color-mix(in oklch, var(--bg-surface) 70%, white) 100%);
    background-size: 200% 200%;
    color: var(--theme-text);
    border: 1px solid color-mix(in srgb, white 20%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
        0 8px 20px -8px rgba(0, 0, 0, 0.15);
    transition: all 0.4s var(--ease-out-expo);
}
.btn-chrome-liquid:hover {
    background-position: 100% 100%;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
        0 12px 30px -8px rgba(0, 0, 0, 0.2);
}

/* ── Halo Ring: Expanding ring pulse on hover ── */
.btn-halo-ring {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border: none;
    position: relative;
    overflow: visible;
    transition: all 0.3s var(--ease-out-expo);
}
.btn-halo-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--theme-accent);
    border-radius: inherit;
    opacity: 0;
    transform: scale(1);
    transition: all 0.5s var(--ease-out-expo);
}
.btn-halo-ring:hover::after {
    inset: -10px;
    opacity: 0.4;
}
.btn-halo-ring:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 20px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

/* ── Ghost Underlined: Text only with animated slide-line ── */
.btn-ghost-underlined {
    background: transparent !important;
    color: var(--theme-text);
    border: none !important;
    padding: 0.5rem 0 !important;
    position: relative;
    overflow: visible;
}
.btn-ghost-underlined::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-accent);
    transition: width 0.4s var(--ease-out-expo);
}
.btn-ghost-underlined:hover::after {
    width: 100%;
}
.btn-ghost-underlined:hover {
    color: var(--theme-accent);
}

/* ── Minimal Outline: Ultra-thin technical border ── */
.btn-minimal-outline {
    background: transparent;
    color: var(--theme-text);
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.25)) !important;
    transition: all 0.3s ease;
}
.btn-minimal-outline:hover {
    border-color: var(--theme-accent) !important;
    color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 4%, transparent);
}

/* ── 3D Primitive: Raised tactile block ── */
.btn-3d-primitive {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border: none;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--theme-accent) 80%, black);
    transition: all 0.1s ease;
    transform: translateY(-2px);
}
.btn-3d-primitive:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-accent) 80%, black);
}
.btn-3d-primitive:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 color-mix(in srgb, var(--theme-accent) 80%, black);
}

/* ── Glass Neon: Frosted glass with vibrant light-leak edge ── */
.btn-glass-neon {
    background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--theme-text);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3) !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--theme-accent) 15%, transparent);
    transition: all 0.4s var(--ease-out-expo);
}
.btn-glass-neon:hover {
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
    box-shadow: 0 0 25px color-mix(in srgb, var(--theme-accent) 40%, transparent);
    border-color: var(--theme-accent) !important;
}

/* ── Holographic: Iridescent metallic shift ── */
.btn-holographic {
    background: linear-gradient(135deg, #fceaff 0%, #f9d1ff 25%, #e8bbff 50%, #d1f2ff 75%, #dbfdff 100%);
    background-size: 200% 200%;
    color: #4a0072;
    border: none;
    animation: ws-holo-shift 6s ease infinite;
    box-shadow: 0 4px 15px rgba(220, 180, 255, 0.4);
}
@keyframes ws-holo-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.btn-holographic:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 25px rgba(220, 180, 255, 0.6);
}

/* ── Cyber Outline: Tech-frame with corner accents ── */
.btn-cyber-outline {
    background: transparent;
    color: var(--theme-accent);
    border: 1px solid var(--theme-accent) !important;
    position: relative;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.3s ease;
}
.btn-cyber-outline:hover {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    box-shadow: 0 0 15px var(--theme-accent);
}

@media (prefers-reduced-motion: reduce) {
    .ws-effect-liquid-chrome,
    .ws-effect-liquid-chrome::before,
    .ws-effect-prismatic::before,
    .ws-effect-prismatic::after,
    .ws-effect-holographic::before,
    .ws-effect-cinematic-grain::after,
    .ws-effect-iridescent-mesh::before,
    .ws-effect-spotlight::before,
    .ws-effect-neon-grid::before,
    .btn-aurora-shimmer::before,
    .btn-morphing-gradient,
    .btn-pulse-edge::before {
        animation: none !important;
    }
    .ws-entrance-fade-blur,
    .ws-entrance-scale-reveal,
    .ws-entrance-clip-up,
    .ws-entrance-clip-left,
    .ws-entrance-clip-right,
    .ws-entrance-rotate-in,
    .ws-stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}
/* ============================================================================
 * Liquid Orbs (2026) — animated gooey radial-gradient blobs.
 *
 * Five blobs orbit/drift inside a `filter: url(#websly-goo) blur(...)` wrapper
 * to produce the "metaball" look. The hidden SVG goo filter is injected once
 * by websly-bg-effects.js (see EFFECTS['bg-liquid-orbs*']).
 *
 * Five flavours via CSS-variable swaps:
 *   bg-liquid-orbs           → theme-adaptive (uses --theme-accent + secondary/tertiary)
 *   bg-liquid-orbs-indigo    → indigo / violet (Aceternity classic)
 *   bg-liquid-orbs-emerald   → emerald / lime
 *   bg-liquid-orbs-crimson   → crimson / amber
 *   bg-liquid-orbs-cyan      → cyan / rose
 *
 * Works both as a global atmosphere (.websly-fx-container on <body>) and as a
 * per-block bg (data-bg-effect="bg-liquid-orbs*" on any wrapper) — the engine
 * injects the same markup either way.
 * ========================================================================== */

@keyframes ws-orb-vertical {
    0%   { transform: translateY(-50%); }
    50%  { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}
@keyframes ws-orb-horizontal {
    0%   { transform: translateX(-50%) translateY(-10%); }
    50%  { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}
@keyframes ws-orb-circle {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.websly-fx-container[class*="bg-liquid-orbs"] {
    /* Use HEX brand tokens directly, NOT the *-rgb forms. The codebase has a
       known gotcha: `--theme-accent-rgb` from inc/websly-color-engine.php is
       the rgb of `--accent-default` (the engine's *monochrome* accent), not
       the rgb of `--theme-accent` (the brand). Using the *-rgb form here made
       every orb look black-and-white in light mode and disappear in dark mode.
       Pattern matches `btn-gradient-theme` in inc/themes.php:1210. */
    /* Palette pinned to mode-agnostic tokens — only ones set on :root WITHOUT
       per-mode overrides. The previous version used --theme-accent / --accent-*
       which flip on .dark vs html:not(.dark), so light mode rendered different
       colors than dark mode and the goo filter's alpha threshold produced
       hard edge rings on the flipped variants ("weird borders"). These tokens
       (`--websly-accent`, `--theme-primary-dark`, `--theme-secondary`,
       `--theme-tertiary`, `--websly-tertiary`) are all emitted once at :root
       by inc/customizer.php so the orbs look identical across modes. */
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--websly-accent, #2563eb);
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--theme-primary-dark, #1e40af);
    /* c5 was --theme-tertiary which renders as a pale/light palette colour in
       most themes — one of the "very light orbs" the user wanted swapped.
       --theme-primary is the user's brand mid-tone (set at :root by the
       customizer), giving the goo a saturated medium-primary blob instead of
       a washed-out tertiary one. */
    --orb-c5: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-pointer: var(--websly-accent, #8c64ff);

    /* Backdrop pinned to --websly-accent (dark-mode brand value, set once at
       :root, no flip). color-mix toward `#0a0814` keeps the surface a tinted
       dark in both modes so screen-blended orbs read identically. */
    --orb-bg-start: color-mix(in oklch, var(--websly-accent, #1271ff) 55%, #0a0814);
    --orb-bg-end:   color-mix(in oklch, var(--websly-accent, #1271ff) 18%, #04030d);
    --orb-size: 80%;
    /* `screen` always lightens — brand-coloured blobs stay visible against
       the dark backdrop regardless of the active mode. `hard-light` collapsed
       to b/w when either backdrop or blob colour was near-neutral. */
    --orb-blend: screen;
    --orb-blur: 40px;

    /* NOTE on positioning: we intentionally do NOT override `position`,
       `inset`, `z-index`, `width`, `height`, or `opacity` here. The base
       `.websly-fx-container` rule in websly-extra-bgs.css gives us
       `position: fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;
       opacity:0; transition: opacity 1.2s ease;` — exactly the atmosphere
       behaviour we want (sticks to the viewport, fades in via the .active
       class). An earlier draft overrode these with `position: absolute;
       inset: 0;` which pinned the layer to the initial containing block at
       document top — so orbs only rendered behind the top of the page (Hero
       / Bookings) and everything below looked black/white because nothing
       was painting behind it. */
    background: linear-gradient(40deg, var(--orb-bg-start), var(--orb-bg-end));
    isolation: isolate;
}

/* Dim the active orb container — content stays readable. Container-level
   (not per-orb) so the goo filter still gets full-alpha input for clean
   metaball edges. The html-bg bleed-through this would normally cause in
   light mode is neutralised by the light-mode backdrop+blend rule below
   (light backdrop + light html bg = no contrast = no fuzzy edges). */
.websly-fx-container.active[class*="bg-liquid-orbs"] {
    opacity: 0.65;
}

/* Dim variant — same palette, lower container opacity for a subtler
   atmosphere. Must come AFTER the rule above so source-order tiebreaks
   the equal-specificity selectors. */
.websly-fx-container.active.bg-liquid-orbs-dim {
    opacity: 0.35;
}

/* Extra orbs (6-10) are emitted by the JS engine but hidden by default —
   they only render in light mode where the doubled blob population is the
   mechanism that brightens the atmosphere. */
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-extra {
    display: none;
}

/* Reuse the existing animations + palette but with different transform-
   origins so the doubled set spreads across more of the viewport rather
   than stacking on the original 5. */
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-6 {
    background: radial-gradient(circle at center, var(--orb-c1), transparent 50%) no-repeat;
    transform-origin: calc(50% + 200px) calc(50% - 200px);
    animation: ws-orb-vertical 35s ease infinite reverse;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-7 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c2) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% + 500px) calc(50% + 200px);
    animation: ws-orb-circle 25s linear infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-8 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c3) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% - 500px) calc(50% - 200px);
    animation: ws-orb-circle 32s reverse infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-9 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c4) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% + 200px) calc(50% + 400px);
    animation: ws-orb-horizontal 45s ease infinite reverse;
    opacity: 0.7;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-10 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c5) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% + 600px) calc(50% - 600px);
    animation: ws-orb-circle 28s linear infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-11 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c2) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% - 700px) calc(50% + 500px);
    animation: ws-orb-horizontal 38s ease infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-12 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c5) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% + 350px) calc(50% + 700px);
    animation: ws-orb-circle 42s reverse infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-13 {
    background: radial-gradient(circle at center, var(--orb-c1), transparent 50%) no-repeat;
    transform-origin: calc(50% - 350px) calc(50% - 600px);
    animation: ws-orb-vertical 50s ease infinite;
    opacity: 0.7;
}

/* Light-mode strategy: don't touch how dark mode renders. Instead grow the
   orbs, double the blob population, and remove the container dim so the
   orbs themselves dominate the viewport, naturally producing a brighter
   atmosphere. With bigger + more blobs covering more of the layer, less of
   the dark backdrop is visible, and the container at opacity 1 means html's
   white bg can no longer bleed through to fuzz the goo edges. Same palette,
   same blend, same backdrop — only size, count, and container dim change. */
html:not(.dark) .websly-fx-container[class*="bg-liquid-orbs"] {
    --orb-size: 240%;
}
html:not(.dark) .websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-extra {
    display: block;
}
html:not(.dark) .websly-fx-container[class*="bg-liquid-orbs"] .ws-orbs {
    /* Brighten orbs in light mode — saturate boost is cheaper than per-orb
       opacity tweaks and keeps the goo-blur filter chain GPU-friendly. */
    filter: blur(60px) saturate(1.25);
}
html:not(.dark) .websly-fx-container.active[class*="bg-liquid-orbs"] {
    opacity: 1;
}

/* Contrast variant — push brighter than the standard light-mode atmosphere.
   Larger orbs (280% vs 240%) + a heavier saturate + a small brightness bump.
   Placed after the global light-mode rules so source-order tiebreaks the
   equal-specificity selectors. */
html:not(.dark) .websly-fx-container.bg-liquid-orbs-contrast {
    --orb-size: 280%;
}
html:not(.dark) .websly-fx-container.bg-liquid-orbs-contrast .ws-orbs {
    filter: blur(60px) saturate(1.5) brightness(1.1);
}

/* Keep the dim variant subtler than the normal one in light mode too. */
html:not(.dark) .websly-fx-container.active.bg-liquid-orbs-dim {
    opacity: 0.7;
}

/* Per-block scope: when attached to a block wrapper instead of <body>, the
   engine adds .websly-fx-scoped. Here we DO need explicit positioning since
   the base global rule (position: fixed; viewport-sized) is wrong inside a
   bounded block. */
.websly-fx-container.websly-fx-scoped[class*="bg-liquid-orbs"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.websly-fx-container[class*="bg-liquid-orbs"] .ws-orbs {
    width: 100%;
    height: 100%;
    /* Pure CSS blur (GPU-accelerated) instead of `url(#websly-goo) blur(...)`.
       The SVG goo filter is CPU-bound in every major browser (Skia path) and
       was being re-rasterised every animation frame against 10-13 animated
       children — the source of the perf glitch. A 60px CSS blur approximates
       the metaball merging visually (overlapping vivid blobs bleed into each
       other smoothly) at a fraction of the cost. The hidden <svg> goo defs
       injected by bg-effects.js are now harmless dead weight; leaving them
       avoids touching the JS layer. */
    filter: blur(60px);
    /* Compositor hints — keep the whole layer on its own GPU surface and
       scope repaints to it so the rest of the page doesn't get dragged in. */
    will-change: transform, filter;
    contain: layout paint;
}

.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb {
    position: absolute;
    width: var(--orb-size);
    height: var(--orb-size);
    top: calc(50% - var(--orb-size) / 2);
    left: calc(50% - var(--orb-size) / 2);
    mix-blend-mode: var(--orb-blend);
    opacity: 1;
}

.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-1 {
    background: radial-gradient(circle at center, var(--orb-c1), transparent 50%) no-repeat;
    transform-origin: center center;
    animation: ws-orb-vertical 30s ease infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-2 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c2) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: ws-orb-circle 20s reverse infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-3 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c3) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% + 400px);
    animation: ws-orb-circle 40s linear infinite;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-4 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c4) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% - 200px);
    animation: ws-orb-horizontal 40s ease infinite;
    opacity: 0.7;
}
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-5 {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-c5) 80%, transparent), transparent 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 800px);
    animation: ws-orb-circle 20s ease infinite;
}

/* Cursor-reactive blob — only rendered when the customizer toggle is on
   (websly_bg_liquid_orbs_pointer). Position is updated by JS via translate(). */
.websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-pointer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--orb-pointer) 80%, transparent), transparent 50%) no-repeat;
    mix-blend-mode: var(--orb-blend);
    opacity: 0.7;
    pointer-events: none;
    will-change: transform;
}

/* ---- Fixed-palette variants (overrides) ----
   Selectors must match the specificity of the base rule above
   (`.websly-fx-container[class*="bg-liquid-orbs"]`, 0,1,1) — a bare class
   selector (0,1,0) would be silently shadowed and every variant would render
   identically. Compound the class with `.websly-fx-container` to get 0,2,0. */

.websly-fx-container.bg-liquid-orbs-indigo {
    --orb-c1: #1271ff;          /* indigo */
    --orb-c2: #dd4aff;           /* magenta */
    --orb-c3: #64dcff;           /* cyan */
    --orb-c4: #c83232;           /* crimson accent */
    --orb-c5: #b4b432;           /* warm tint */
    --orb-pointer: #8c64ff;
    --orb-bg-start: #6c00a2;
    --orb-bg-end:   #001152;
}

.websly-fx-container.bg-liquid-orbs-emerald {
    --orb-c1: #10b981;           /* emerald */
    --orb-c2: #84cc16;           /* lime */
    --orb-c3: #facc15;           /* yellow */
    --orb-c4: #065f46;           /* deep emerald */
    --orb-c5: #d9f99d;           /* pale lime */
    --orb-pointer: #86efac;
    --orb-bg-start: #064e3b;
    --orb-bg-end:   #14532d;
}

.websly-fx-container.bg-liquid-orbs-crimson {
    --orb-c1: #f43f5e;           /* crimson */
    --orb-c2: #fb923c;           /* amber */
    --orb-c3: #fde047;           /* gold */
    --orb-c4: #be123c;           /* deep crimson */
    --orb-c5: #fed7aa;           /* pale amber */
    --orb-pointer: #feb2b2;
    --orb-bg-start: #781023;
    --orb-bg-end:   #4a132f;
}

.websly-fx-container.bg-liquid-orbs-cyan {
    --orb-c1: #22d3ee;           /* cyan */
    --orb-c2: #f472b6;           /* rose */
    --orb-c3: #a78bfa;           /* lavender */
    --orb-c4: #0e7490;           /* deep teal */
    --orb-c5: #fbcfe8;           /* pale rose */
    --orb-pointer: #a5f3fc;
    --orb-bg-start: #083344;
    --orb-bg-end:   #4c0550;
}

/* ──────────────────────────────────────────────────────────────────────────
   Brand-adaptive variants (semantic palette mixes, varied count/size/dim)

   Each variant overrides one or more of:
     - --orb-c1..c5  → palette
     - --orb-size    → blob coverage
     - .active opacity (container dim)
     - display:none on specific .ws-orb-N to limit orb count

   `display:none` overrides on individual orbs use !important so they win
   over the html:not(.dark) light-mode `display:block` rule for extras —
   otherwise a 3-orb variant would balloon to 11 orbs in light mode.
   ────────────────────────────────────────────────────────────────────── */

/* 1. Minimalist — 3 dark-brand orbs, smaller, dim. Quiet anchor atmosphere. */
.websly-fx-container.bg-liquid-orbs-minimal {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--accent-strong, var(--theme-primary-dark, #1e40af));
    --orb-c3: var(--theme-primary-dark, #1e40af);
    --orb-size: 60%;
}
.websly-fx-container.bg-liquid-orbs-minimal .ws-orb-4,
.websly-fx-container.bg-liquid-orbs-minimal .ws-orb-5,
.websly-fx-container.bg-liquid-orbs-minimal .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-minimal {
    opacity: 0.45;
}

/* 2. Whisper — 3 weakest semantic orbs, very dim. Barely-there ambience. */
.websly-fx-container.bg-liquid-orbs-whisper {
    --orb-c1: var(--accent-weak, var(--theme-primary-dark, #1e40af));
    --orb-c2: var(--theme-primary-dark, #1e40af);
    --orb-c3: var(--accent-weak, var(--theme-primary-dark, #1e40af));
    --orb-size: 70%;
}
.websly-fx-container.bg-liquid-orbs-whisper .ws-orb-4,
.websly-fx-container.bg-liquid-orbs-whisper .ws-orb-5,
.websly-fx-container.bg-liquid-orbs-whisper .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-whisper {
    opacity: 0.30;
}

/* 3. Anchor — 4 brand-heavy orbs, no light tones. Confident brand presence. */
.websly-fx-container.bg-liquid-orbs-anchor {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-primary-dark, #1e40af);
    --orb-c4: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-size: 75%;
}
.websly-fx-container.bg-liquid-orbs-anchor .ws-orb-5,
.websly-fx-container.bg-liquid-orbs-anchor .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-anchor {
    opacity: 0.55;
}

/* 4. Brand Duo — primary + secondary across 5 orbs. */
.websly-fx-container.bg-liquid-orbs-duo {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--theme-primary-dark, #1e40af);
    --orb-c5: var(--theme-secondary, #6366f1);
}
.websly-fx-container.bg-liquid-orbs-duo .ws-orb-extra {
    display: none !important;
}

/* 5. Brand Triad — primary + secondary + tertiary across 5 orbs. */
.websly-fx-container.bg-liquid-orbs-triad {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--theme-tertiary, var(--websly-tertiary, #64dcff));
    --orb-c5: var(--theme-primary, var(--websly-accent, #2563eb));
}
.websly-fx-container.bg-liquid-orbs-triad .ws-orb-extra {
    display: none !important;
}

/* 6. Soft Halo — large + dim semantic-weak orbs. Cloud-like ambient fog. */
.websly-fx-container.bg-liquid-orbs-halo {
    --orb-c1: var(--accent-weak, var(--theme-primary-dark, #1e40af));
    --orb-c2: var(--accent-secondary, var(--websly-accent, #2563eb));
    --orb-c3: var(--accent-tertiary, var(--theme-secondary, #6366f1));
    --orb-c4: var(--accent-strong, var(--theme-primary-dark, #1e40af));
    --orb-c5: var(--accent-secondary, var(--websly-accent, #2563eb));
    --orb-size: 120%;
}
.websly-fx-container.bg-liquid-orbs-halo .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-halo {
    opacity: 0.40;
}

/* 7. Vivid Spectrum — full palette + extras visible in dark mode too. */
.websly-fx-container.bg-liquid-orbs-spectrum {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--accent-strong, var(--theme-primary-dark, #1e40af));
    --orb-c5: var(--theme-tertiary, var(--websly-tertiary, #64dcff));
    --orb-size: 90%;
}
.websly-fx-container.bg-liquid-orbs-spectrum .ws-orb-extra {
    display: block;
}
.websly-fx-container.active.bg-liquid-orbs-spectrum {
    opacity: 0.70;
}

/* 8. Compact Cluster — 5 small tight orbs. Less dominant atmosphere. */
.websly-fx-container.bg-liquid-orbs-cluster {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--accent-strong, var(--theme-primary-dark, #1e40af));
    --orb-c5: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-size: 45%;
}
.websly-fx-container.bg-liquid-orbs-cluster .ws-orb-extra {
    display: none !important;
}

/* 9. Sparse — 3 very large orbs spread wide. Minimal but impactful. */
.websly-fx-container.bg-liquid-orbs-sparse {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-size: 130%;
}
.websly-fx-container.bg-liquid-orbs-sparse .ws-orb-4,
.websly-fx-container.bg-liquid-orbs-sparse .ws-orb-5,
.websly-fx-container.bg-liquid-orbs-sparse .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-sparse {
    opacity: 0.45;
}

/* 10a. Mono — every orb uses the same colour as the cursor-following orb
        (--websly-accent). Monochromatic atmosphere where the brand colour
        dominates without distraction from secondary/tertiary tones. The
        pointer blob blends seamlessly into the rest of the layer. */
.websly-fx-container.bg-liquid-orbs-mono {
    --orb-c1: var(--websly-accent, #2563eb);
    --orb-c2: var(--websly-accent, #2563eb);
    --orb-c3: var(--websly-accent, #2563eb);
    --orb-c4: var(--websly-accent, #2563eb);
    --orb-c5: var(--websly-accent, #2563eb);
}
.websly-fx-container.bg-liquid-orbs-mono .ws-orb-extra {
    display: none !important;
}

/* 10b. Contrast — mode-asymmetric: dimmer in dark mode (quiet, content-first
        on dark backgrounds), and pushed brighter than the default in light
        mode (vivid presence to compensate for the light page bg). One slug,
        two visual modes — handy when a site is browsed at night vs day.
        Dark-mode dim is set here; the light-mode brightness bump lives just
        after the global light-mode rules below to win on source order. */
.websly-fx-container.bg-liquid-orbs-contrast {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary, var(--websly-accent, #2563eb));
    --orb-c3: var(--theme-secondary, #6366f1);
    --orb-c4: var(--accent-strong, var(--theme-primary-dark, #1e40af));
    --orb-c5: var(--theme-primary, var(--websly-accent, #2563eb));
}
.websly-fx-container.bg-liquid-orbs-contrast .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-contrast {
    opacity: 0.40;
}

/* 10. Twilight — uses only deep "-dark" semantic variants. Moody atmosphere
       with no bright orbs at all (the user explicitly asked for this kind). */
.websly-fx-container.bg-liquid-orbs-twilight {
    --orb-c1: var(--theme-primary-dark, #1e40af);
    --orb-c2: var(--theme-primary-very-dark, #1e3a8a);
    --orb-c3: var(--theme-secondary-dark, #4338ca);
    --orb-c4: var(--theme-tertiary-dark, #475569);
    --orb-c5: var(--theme-primary-very-dark, #1e3a8a);
}
.websly-fx-container.bg-liquid-orbs-twilight .ws-orb-extra {
    display: none !important;
}
.websly-fx-container.active.bg-liquid-orbs-twilight {
    opacity: 0.55;
}

/* No separate dark-mode override needed: `--theme-accent-rgb` is already
   swapped per-mode by inc/websly-color-engine.php, so the color-mix backdrop
   re-tints automatically when the user toggles light/dark. */

/* Reduced motion: kill orb animations, keep static gradient + blobs. */
@media (prefers-reduced-motion: reduce) {
    .websly-fx-container[class*="bg-liquid-orbs"] .ws-orb,
    .websly-fx-container[class*="bg-liquid-orbs"] .ws-orb-pointer {
        animation: none !important;
        transition: none !important;
    }
}