/* 
 * 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(--accent-default-rgb);
    --ws-fx-color-2-rgb: var(--accent-secondary-rgb, var(--accent-default-rgb));
    --ws-fx-color-3-rgb: var(--accent-tertiary-rgb, var(--accent-default-rgb));
    --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;
}

/* 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(--accent-default) 22%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 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(--accent-default) 28%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 24%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--accent-default)) 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(--accent-default) 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(--accent-default)) 14%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 44% 72%, color-mix(in srgb, var(--accent-tertiary, var(--accent-default)) 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(--accent-default) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 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(--accent-default) 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(--accent-default)) 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(--accent-default) 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(--accent-default) 24%, transparent) 0, color-mix(in srgb, var(--accent-default) 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(--accent-default) 14%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--accent-tertiary, var(--accent-default)) 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(--accent-default) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 76% 82%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 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(--accent-default) 14%, transparent) 0%, transparent 30%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 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(--accent-default) 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(--accent-default)) 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(--accent-default)) 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(--accent-default) 16%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--accent-secondary, var(--accent-default)) 16%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--accent-default)) 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(--accent-default-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--accent-default-rgb), 0.25);
    transform: translateY(-2px);
}

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

.btn-kinetic-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--accent-default);
    transition: width 0.6s var(--ease-in-out-expo);
    z-index: -1;
}
.btn-kinetic-slide:hover::before {
    width: 100%;
}
.btn-kinetic-slide:hover {
    color: var(--text-on-accent);
}

.btn-ambient-bounce {
    background: rgba(var(--accent-default-rgb), 0.1);
    color: var(--accent-default);
    border: 1px solid transparent;
    transition: all 0.5s var(--ease-out-back);
}
.btn-ambient-bounce:hover {
    transform: scale(1.05);
    background: rgba(var(--accent-default-rgb), 0.15);
    box-shadow: 0 20px 40px -10px rgba(var(--accent-default-rgb), 0.3);
}

.btn-liquid-metal {
    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-metal::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--accent-default-rgb), 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.btn-liquid-metal:hover::after {
    opacity: 1;
}
.btn-liquid-metal:hover {
    transform: scale(1.02);
    border-color: rgba(var(--accent-default-rgb), 0.3);
}

/* 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(--accent-default);
    color: var(--text-on-accent);
}

.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(--accent-default);
    /* 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%);
}

.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 rgba(var(--accent-default-rgb), 0.2);
}

.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(--accent-default);
    transition: width 0.5s var(--ease-smooth);
    border-radius: 99px;
}

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