/**
 * Websly 5.1 — Button & Shape Expansion
 * 
 * Includes creative border-radius logic and premium button style presets.
 */

/* ─── Creative Radius Logic ─── */
.ws-radius-squircle { border-radius: 40px !important; } /* Approximation */
[class*="ws-radius-squircle"] { border-radius: 20% / 50% !important; } /* More "squircly" */

.ws-radius-leaf-alt { border-radius: 0 500px 0 500px !important; }
.ws-radius-pill-asym { border-radius: 500px 0 500px 0 !important; }

/* Scalloped (Wavy approximation using border-radius patterns) */
.ws-radius-scalloped { border-radius: 40px 10px 40px 10px !important; }

/* Beveled (Geometric clip) */
.ws-radius-beveled { 
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ─── Button Style Presets (Expansion) ─── */

/* 1. Holographic (Prismatic Shimmer) */
.btn-holographic {
    background: linear-gradient(135deg, #ff00cc, #3333ff, #00d4ff, #ff00cc);
    background-size: 300% 300%;
    color: #fff !important;
    border: none;
    position: relative;
    overflow: hidden;
    animation: holographic-flow 6s infinite linear;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-holographic:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 0, 204, 0.6);
}
@keyframes holographic-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. Cyber Outline (Racing Neon) */
.btn-cyber-outline {
    background: transparent;
    color: var(--ws-primary) !important;
    border: 1px solid var(--ws-primary);
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: inset 0 0 0 0 var(--ws-primary);
}
.btn-cyber-outline::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 1px solid var(--ws-primary);
    opacity: 0;
    transition: all 0.3s;
}
.btn-cyber-outline:hover {
    color: #fff !important;
    box-shadow: inset 0 0 40px 0 var(--ws-primary), 0 0 20px rgba(var(--ws-primary-rgb), 0.5);
}
.btn-cyber-outline:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

/* 3. Magnetic Ghost (Reveal) */
.btn-magnetic-ghost {
    background: rgba(var(--ws-text-rgb), 0.05);
    backdrop-filter: blur(0px);
    border: 1px solid rgba(var(--ws-text-rgb), 0.1);
    color: var(--ws-text) !important;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-magnetic-ghost:hover {
    background: rgba(var(--ws-text-rgb), 0.15);
    backdrop-filter: blur(10px);
    border-color: var(--ws-primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* 4. 3D Primitive (Tactile) */
.btn-3d-primitive {
    background: var(--ws-primary);
    color: #fff !important;
    border-bottom: 5px solid rgba(0,0,0,0.3);
    border-right: 2px solid rgba(0,0,0,0.1);
    transition: all 0.1s;
    transform: translateY(0);
}
.btn-3d-primitive:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

/* ─── Hyper-Aesthetic (5.2 Models) ─── */

/* 5. Obsidian Chrome (Polished Edge) */
.btn-obsidian-chrome {
    background: linear-gradient(180deg, #1A1A24 0%, #0D0D12 100%);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-obsidian-chrome:hover {
    transform: translateY(-2px);
    border-top-color: rgba(255,255,255,0.4) !important;
    background: linear-gradient(180deg, #242431 0%, #171721 100%);
    box-shadow: 0 12px 24px rgba(0,0,0,0.6);
}

/* 6. Silk Pressed (Light Depth) */
.btn-silk-pressed {
    background: #FAF8F5;
    color: #1A1A24 !important;
    border: none;
    box-shadow: 
        inset 4px 4px 10px rgba(0,0,0,0.05),
        inset -4px -4px 10px rgba(255,255,255,0.8),
        0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.4s ease;
}
.btn-silk-pressed:hover {
    box-shadow: 
        inset 6px 6px 12px rgba(0,0,0,0.08),
        inset -6px -6px 12px rgba(255,255,255,0.9);
    transform: scale(0.98);
}

/* 7. Aurora Border (Neon Edge Glow) */
.btn-aurora-border {
    position: relative;
    background: #0D0D12;
    color: #fff !important;
    border: 2px solid transparent;
    background-clip: padding-box;
    z-index: 1;
}
.btn-aurora-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    background: linear-gradient(90deg, #ff00cc, #3333ff, #00d4ff, #ff00cc);
    background-size: 300% 100%;
    border-radius: inherit;
    animation: aurora-border-anim 4s linear infinite;
}
@keyframes aurora-border-anim {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 8. Hologram Prism (Refractive) */
.btn-hologram-prism {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
    overflow: hidden;
    position: relative;
}
.btn-hologram-prism::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}
.btn-hologram-prism:hover::after {
    opacity: 1;
    animation: prism-glint 2s infinite linear;
}
@keyframes prism-glint {
    0% { transform: translate(-30%, -30%); }
    100% { transform: translate(30%, 30%); }
}

/* 9. Velvet Glow (Aura Matte) */
.btn-velvet-glow {
    background: #111;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 0 rgba(var(--theme-accent-rgb), 0);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-velvet-glow:hover {
    background: #000;
    border-color: var(--theme-accent);
    box-shadow: 0 0 40px rgba(var(--theme-accent-rgb), 0.5);
    transform: translateY(-4px);
}

/* 10. Cosmic Shimmer (Starry Surface) */
.btn-cosmic-shimmer {
    background: #0D0D12;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}
.btn-cosmic-shimmer::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
}
.btn-cosmic-shimmer:hover::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: cosmic-sweep 1s forwards;
}
@keyframes cosmic-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}
.btn-3d-primitive:hover {
    filter: brightness(1.1);
}

/* 5. Glass Neon (Pulse) */
.btn-glass-neon {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--ws-primary-rgb), 0.3);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(var(--ws-primary-rgb), 0.2);
    animation: neon-pulse 3s infinite alternate;
}
.btn-glass-neon:hover {
    border-color: var(--ws-primary);
    box-shadow: 0 0 25px rgba(var(--ws-primary-rgb), 0.6);
    background: rgba(var(--ws-primary-rgb), 0.1);
}
@keyframes neon-pulse {
    0% { box-shadow: 0 0 5px rgba(var(--ws-primary-rgb), 0.2); }
    100% { box-shadow: 0 0 15px rgba(var(--ws-primary-rgb), 0.5); }
}

/* Supporting class for better Squircle look */
.ws-radius-squircle {
    border-radius: 35% !important;
}
/* ─── Alternative (No Color Shift) (5.2) ─── */

.btn-holographic-alt { background: linear-gradient(135deg, #ff00cc, #3333ff, #00d4ff, #ff00cc); background-size: 300% 300%; color: #fff !important; border: none; position: relative; overflow: hidden; animation: holographic-flow 6s infinite linear; box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.btn-holographic-alt:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 10px 30px rgba(255, 0, 204, 0.6); color: #fff !important; }

.btn-cyber-outline-alt { background: transparent; color: var(--ws-primary) !important; border: 1px solid var(--ws-primary); position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: inset 0 0 0 0 var(--ws-primary); }
.btn-cyber-outline-alt::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 1px solid var(--ws-primary); opacity: 0; transition: all 0.3s; }
.btn-cyber-outline-alt:hover { box-shadow: inset 0 0 40px 0 var(--ws-primary), 0 0 20px rgba(var(--ws-primary-rgb), 0.5); color: var(--ws-primary) !important; }
.btn-cyber-outline-alt:hover::before { opacity: 1; transform: scale(1.1); }

.btn-magnetic-ghost-alt { background: rgba(var(--ws-text-rgb), 0.05); backdrop-filter: blur(0px); border: 1px solid rgba(var(--ws-text-rgb), 0.1); color: var(--ws-text) !important; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.btn-magnetic-ghost-alt:hover { background: rgba(var(--ws-text-rgb), 0.15); backdrop-filter: blur(10px); border-color: var(--ws-primary); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); color: var(--ws-text) !important; }

.btn-3d-primitive-alt { background: var(--ws-primary); color: #fff !important; border-bottom: 5px solid rgba(0,0,0,0.3); border-right: 2px solid rgba(0,0,0,0.1); transition: all 0.1s; transform: translateY(0); }
.btn-3d-primitive-alt:hover { filter: brightness(1.1); color: #fff !important; }
.btn-3d-primitive-alt:active { transform: translateY(3px); border-bottom-width: 2px; }

.btn-glass-neon-alt { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(var(--ws-primary-rgb), 0.3); color: #fff !important; box-shadow: 0 0 10px rgba(var(--ws-primary-rgb), 0.2); animation: neon-pulse 3s infinite alternate; }
.btn-glass-neon-alt:hover { border-color: var(--ws-primary); box-shadow: 0 0 25px rgba(var(--ws-primary-rgb), 0.6); background: rgba(var(--ws-primary-rgb), 0.1); color: #fff !important; }

.btn-liquid-steel-alt { background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%); color: #333 !important; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.5s ease; }
.btn-liquid-steel-alt:hover { background: linear-gradient(135deg, #eef2f3 0%, #8e9eab 100%); color: #333 !important; transform: scale(1.02); }

.btn-obsidian-chrome-alt { background: linear-gradient(180deg, #1A1A24 0%, #0D0D12 100%); color: #fff !important; border: 1px solid rgba(255,255,255,0.05); border-top-color: rgba(255,255,255,0.2) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-obsidian-chrome-alt:hover { transform: translateY(-2px); border-top-color: rgba(255,255,255,0.4) !important; background: linear-gradient(180deg, #242431 0%, #171721 100%); box-shadow: 0 12px 24px rgba(0,0,0,0.6); color: #fff !important; }

.btn-silk-pressed-alt { background: #FAF8F5; color: #1A1A24 !important; border: none; box-shadow: inset 4px 4px 10px rgba(0,0,0,0.05), inset -4px -4px 10px rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.02); transition: all 0.4s ease; }
.btn-silk-pressed-alt:hover { box-shadow: inset 6px 6px 12px rgba(0,0,0,0.08), inset -6px -6px 12px rgba(255,255,255,0.9); transform: scale(0.98); color: #1A1A24 !important; }

.btn-velvet-glow-alt { background: #111; color: #fff !important; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 0 rgba(var(--theme-accent-rgb), 0); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-velvet-glow-alt:hover { background: #000; border-color: var(--theme-accent); box-shadow: 0 0 40px rgba(var(--theme-accent-rgb), 0.5); transform: translateY(-4px); color: #fff !important; }

.btn-cosmic-shimmer-alt { background: #0D0D12; color: #fff !important; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.btn-cosmic-shimmer-alt::before { content: ''; position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px; opacity: 0.1; }
.btn-cosmic-shimmer-alt:hover::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: cosmic-sweep 1s forwards; }
.btn-cosmic-shimmer-alt:hover { color: #fff !important; }

/* ─── Standard & Modern Core Alternatives (5.2) ─── */

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

.btn-kinetic-slide-alt { position: relative; overflow: hidden; color: var(--theme-text) !important; border: 1px solid rgba(var(--text-base-rgb), 0.1); }
.btn-kinetic-slide-alt::before { content: ""; position: absolute; inset: 0; width: 0; background: var(--theme-accent); opacity: 0.1; transition: width 0.6s var(--ease-in-out-expo); z-index: -1; }
.btn-kinetic-slide-alt:hover::before { width: 100%; }
.btn-kinetic-slide-alt:hover { color: var(--theme-text) !important; }

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

.btn-glass-vibrant-alt { background: rgba(var(--theme-accent-rgb), 0.15); backdrop-filter: blur(12px); color: var(--theme-accent) !important; border: 1px solid rgba(var(--theme-accent-rgb), 0.3); }
.btn-glass-vibrant-alt:hover { background: rgba(var(--theme-accent-rgb), 0.25); border-color: var(--theme-accent); color: var(--theme-accent) !important; }

.btn-aurora-shimmer-alt { background: color-mix(in srgb, var(--bg-surface) 40%, transparent); backdrop-filter: blur(16px); color: var(--theme-text) !important; position: relative; }
.btn-aurora-shimmer-alt::before { content: ""; position: absolute; inset: -2px; 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; }
.btn-aurora-shimmer-alt:hover { background: color-mix(in srgb, var(--theme-accent) 10%, transparent); color: var(--theme-text) !important; }

.btn-liquid-fill-alt { background: transparent; color: var(--theme-accent) !important; border: 2px solid var(--theme-accent); position: relative; overflow: hidden; isolation: isolate; }
.btn-liquid-fill-alt::before { content: ""; position: absolute; bottom: 0; left: -5%; width: 110%; height: 0; background: var(--theme-accent); opacity: 0.15; transition: height 0.6s var(--ease-out-expo); z-index: -1; }
.btn-liquid-fill-alt:hover::before { height: 110%; }
.btn-liquid-fill-alt:hover { color: var(--theme-accent) !important; }

.btn-pulse-edge-alt { background: var(--bg-base); color: var(--theme-text) !important; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent); position: relative; }
.btn-pulse-edge-alt:hover { background: color-mix(in oklch, var(--theme-accent) 5%, var(--bg-base)); color: var(--theme-text) !important; }

.btn-halo-ring-alt { background: var(--theme-accent); color: var(--theme-text-on-accent, #fff) !important; border: none; position: relative; }
.btn-halo-ring-alt::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-alt:hover::after { inset: -10px; opacity: 0.4; }
.btn-halo-ring-alt:hover { filter: brightness(1.15); color: var(--theme-text-on-accent, #fff) !important; }

.btn-outline-alt { background: transparent; border: 1px solid currentColor !important; color: var(--theme-accent) !important; }
.btn-outline-alt:hover { background: color-mix(in srgb, var(--theme-accent) 10%, transparent); color: var(--theme-accent) !important; }

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

/* ─── Logo Mark Variants (5.1 Expansion) ─── */

.websly-logo-mark {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 1. Modern Glossy */
.mark-variant-modern {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 2. Frosted Glass (Glassmorphism) */
.mark-variant-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.dark .mark-variant-glass {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* 3. Neon Aura (Aura Glow) */
.mark-variant-neon {
    box-shadow: 0 0 15px color-mix(in srgb, var(--theme-primary, #007bff) 40%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mark-variant-neon span {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* 4. Premium Sheen (Animated Reflection) */
.mark-variant-sheen {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.mark-variant-sheen::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: websly-mark-sheen-sweep 4s infinite linear;
    pointer-events: none;
    z-index: 10;
}

@keyframes websly-mark-sheen-sweep {
    0% { transform: translate(-30%, -30%); }
    25% { transform: translate(30%, 30%); }
    100% { transform: translate(30%, 30%); }
}

/* ─── New Minimalist Impact Presets (5.1.1) ─── */

/* 11. Minimal Echo (Architectural) */
.btn-minimal-echo {
    background: transparent;
    color: var(--text-base) !important;
    border: 1px solid color-mix(in srgb, var(--text-base) 15%, transparent) !important;
    position: relative;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-minimal-echo::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--theme-accent);
    border-radius: inherit;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
}
.btn-minimal-echo:hover {
    border-color: var(--theme-accent) !important;
    background: color-mix(in srgb, var(--theme-accent) 4%, transparent);
}
.btn-minimal-echo:hover::before {
    animation: websly-echo-pulse 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes websly-echo-pulse {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* 12. Luxe Split (Functional Premium) */
.btn-luxe-split {
    background: var(--text-base);
    color: var(--bg-base) !important;
    border: none !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.btn-luxe-split .websly-btn-inner {
    gap: 0 !important;
}
.btn-luxe-split::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--theme-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}
.btn-luxe-split:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.btn-luxe-split .websly-btn-inner > * {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    z-index: 2;
}
.btn-luxe-split:hover .websly-btn-inner > span {
    transform: translateX(-4px);
}
.btn-luxe-split:hover .websly-btn-inner > svg,
.btn-luxe-split:hover .websly-btn-inner > .ml-2 {
    transform: translateX(4px);
}

/* 13. Ethereal Blur (Dreamy Modern) */
.btn-ethereal-blur {
    background: transparent;
    color: var(--text-strong) !important;
    border: none !important;
    letter-spacing: 0.02em;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-ethereal-blur::after {
    content: '';
    position: absolute;
    inset: 15%;
    background: var(--theme-accent);
    filter: blur(20px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    border-radius: 50%;
}
.btn-ethereal-blur:hover {
    letter-spacing: 0.1em;
    transform: translateY(-2px);
}
.btn-ethereal-blur:hover::after {
    opacity: 0.25;
    inset: -10%;
}

/* 14. Liquid Glass (Tahoe) — Apple-style refractive frosted glass.
 * Pairs with an SVG <filter id="websly-liquid-glass-filter"> injected once
 * via wp_footer in inc/websly-presets-registry.php. The ::before is the
 * isolated lens layer — it must remain content-empty so backdrop-filter
 * only refracts the page behind the button (no text ghosting). */
.btn-liquid-glass-tahoe {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: none !important;
    color: var(--text-base);
    border-radius: 9999px;
    transition: transform 300ms ease-out;
    --glass-reflex-light: 1;
    --glass-reflex-dark: 1;
}
.btn-liquid-glass-tahoe::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px) url(#websly-liquid-glass-filter) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, white calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0 -2px color-mix(in srgb, white calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0 -2px color-mix(in srgb, white calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, white calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0 color-mix(in srgb, black calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0 -2px color-mix(in srgb, black calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0 3px 4px -2px color-mix(in srgb, black calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, black calc(var(--glass-reflex-dark) * 10%), transparent),
        0 1px 5px 0 color-mix(in srgb, black calc(var(--glass-reflex-dark) * 10%), transparent),
        0 6px 16px 0 color-mix(in srgb, black calc(var(--glass-reflex-dark) * 8%), transparent);
    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}
.btn-liquid-glass-tahoe .websly-btn-inner {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
    .btn-liquid-glass-tahoe:not(:disabled):hover { transform: scale(1.03); }
    .btn-liquid-glass-tahoe:not(:disabled):hover::before {
        background-color: rgba(255, 255, 255, 0.08);
    }
}
.btn-liquid-glass-tahoe:not(:disabled):active { transform: scale(0.96); }

/* ─────────────────────────────────────────────────────────────────────────────
 *  WEBSLY CONNECT WITH US SOCIAL SYSTEM (5.1.2)
 * ───────────────────────────────────────────────────────────────────────────── */
.ws-connect-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.ws-connect-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .ws-connect-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.ws-connect-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
    text-decoration: none !important;
    background: color-mix(in srgb, var(--bg-surface, #F8FAFC) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-text, #000) 8%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.dark .ws-connect-card {
    background: color-mix(in srgb, var(--theme-strong, #0D0D12) 80%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ws-connect-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, transparent, transparent);
    -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;
    transition: all 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.ws-connect-card:hover {
    transform: translateY(-6px);
}

.ws-connect-card:hover::before {
    opacity: 1;
}

.ws-connect-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--theme-text, #000) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-text, #000) 8%, transparent);
    transition: all 0.4s ease;
    margin-bottom: 0.75rem;
}

.dark .ws-connect-icon-wrap {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.ws-connect-icon-wrap svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: #000000; /* Pure black icon stroke */
    stroke-width: 2.25; /* Slightly bolder stroke for maximum legibility */
    transition: all 0.4s ease;
}

.dark .ws-connect-icon-wrap svg {
    stroke: #ffffff; /* Pure white icon stroke */
}

.ws-connect-label {
    font-size: 0.875rem;
    font-weight: 700; /* Bold weight for maximum legibility */
    color: #000000 !important; /* Pure black text */
    transition: all 0.3s ease;
}

.dark .ws-connect-label {
    color: #ffffff !important; /* Pure white text */
}

.ws-connect-card:hover .ws-connect-icon-wrap {
    animation: ws-social-shake 0.5s ease-in-out infinite;
}

@keyframes ws-social-shake {
    0%, 100% { transform: rotate(0deg) scale(1.05); }
    25% { transform: rotate(-8deg) scale(1.05); }
    75% { transform: rotate(8deg) scale(1.05); }
}

/* --- Brand Hover Ecosystem --- */
/* Facebook */
.ws-connect-card.facebook:hover {
    box-shadow: 0 10px 30px rgba(24, 119, 242, 0.35);
    border-color: rgba(24, 119, 242, 0.5);
}
.ws-connect-card.facebook:hover::before {
    background: linear-gradient(135deg, #1877f2, #0056b3);
}
.ws-connect-card.facebook:hover .ws-connect-icon-wrap {
    background: rgba(24, 119, 242, 0.1);
}
.ws-connect-card.facebook:hover .ws-connect-icon-wrap svg {
    stroke: #1877f2;
}
.ws-connect-card.facebook:hover .ws-connect-label {
    color: #1877f2;
}

/* Instagram */
.ws-connect-card.instagram:hover {
    box-shadow: 0 10px 30px rgba(225, 48, 108, 0.35);
    border-color: rgba(225, 48, 108, 0.5);
}
.ws-connect-card.instagram:hover::before {
    background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
}
.ws-connect-card.instagram:hover .ws-connect-icon-wrap {
    background: rgba(225, 48, 108, 0.1);
}
.ws-connect-card.instagram:hover .ws-connect-icon-wrap svg {
    stroke: #e1306c;
}
.ws-connect-card.instagram:hover .ws-connect-label {
    color: #e1306c;
}

/* X / Twitter */
.ws-connect-card.x:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border-color: var(--theme-text, #0f172a);
}
.dark .ws-connect-card.x:hover {
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
    border-color: var(--text-strong, #f8fafc);
}
.ws-connect-card.x:hover::before {
    background: linear-gradient(135deg, var(--theme-text, #0f172a), var(--text-muted, #64748b));
}
.dark .ws-connect-card.x:hover::before {
    background: linear-gradient(135deg, var(--text-strong, #f8fafc), var(--text-muted, #64748b));
}
.ws-connect-card.x:hover .ws-connect-icon-wrap {
    background: rgba(15, 23, 42, 0.05);
}
.dark .ws-connect-card.x:hover .ws-connect-icon-wrap {
    background: rgba(255, 255, 255, 0.05);
}
.ws-connect-card.x:hover .ws-connect-icon-wrap svg {
    stroke: var(--theme-text, #0f172a);
}
.dark .ws-connect-card.x:hover .ws-connect-icon-wrap svg {
    stroke: var(--text-strong, #f8fafc);
}
.ws-connect-card.x:hover .ws-connect-label {
    color: var(--theme-text, #0f172a);
}
.dark .ws-connect-card.x:hover .ws-connect-label {
    color: var(--text-strong, #f8fafc);
}

/* Email */
.ws-connect-card.email:hover {
    box-shadow: 0 10px 30px rgba(234, 67, 53, 0.35);
    border-color: rgba(234, 67, 53, 0.5);
}
.ws-connect-card.email:hover::before {
    background: linear-gradient(135deg, #ea4335, #c5221f);
}
.ws-connect-card.email:hover .ws-connect-icon-wrap {
    background: rgba(234, 67, 53, 0.1);
}
.ws-connect-card.email:hover .ws-connect-icon-wrap svg {
    stroke: #ea4335;
}
.ws-connect-card.email:hover .ws-connect-label {
    color: #c5221f; /* slightly darker red in light mode for better contrast */
}
.dark .ws-connect-card.email:hover .ws-connect-label {
    color: #ea4335;
}

/* Phone */
.ws-connect-card.phone:hover {
    box-shadow: 0 10px 30px rgba(52, 168, 83, 0.35);
    border-color: rgba(52, 168, 83, 0.5);
}
.ws-connect-card.phone:hover::before {
    background: linear-gradient(135deg, #34a853, #1e7e34);
}
.ws-connect-card.phone:hover .ws-connect-icon-wrap {
    background: rgba(52, 168, 83, 0.1);
}
.ws-connect-card.phone:hover .ws-connect-icon-wrap svg {
    stroke: #34a853;
}
.ws-connect-card.phone:hover .ws-connect-label {
    color: #1e7e34; /* slightly darker green in light mode for better contrast */
}
.dark .ws-connect-card.phone:hover .ws-connect-label {
    color: #34a853;
}

/* LinkedIn */
.ws-connect-card.linkedin:hover {
    box-shadow: 0 10px 30px rgba(0, 119, 181, 0.35);
    border-color: rgba(0, 119, 181, 0.5);
}
.ws-connect-card.linkedin:hover::before {
    background: linear-gradient(135deg, #0077b5, #005987);
}
.ws-connect-card.linkedin:hover .ws-connect-icon-wrap {
    background: rgba(0, 119, 181, 0.1);
}
.ws-connect-card.linkedin:hover .ws-connect-icon-wrap svg {
    stroke: #0077b5;
}
.ws-connect-card.linkedin:hover .ws-connect-label {
    color: #0077b5;
}

/* YouTube */
.ws-connect-card.youtube:hover {
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.35);
    border-color: rgba(255, 0, 0, 0.5);
}
.ws-connect-card.youtube:hover::before {
    background: linear-gradient(135deg, #ff0000, #b30000);
}
.ws-connect-card.youtube:hover .ws-connect-icon-wrap {
    background: rgba(255, 0, 0, 0.1);
}
.ws-connect-card.youtube:hover .ws-connect-icon-wrap svg {
    stroke: #ff0000;
}
.ws-connect-card.youtube:hover .ws-connect-label {
    color: #b30000; /* slightly darker red in light mode for better contrast */
}
.dark .ws-connect-card.youtube:hover .ws-connect-label {
    color: #ff0000;
}

/* Discord */
.ws-connect-card.discord:hover {
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.35);
    border-color: rgba(88, 101, 242, 0.5);
}
.ws-connect-card.discord:hover::before {
    background: linear-gradient(135deg, #5865f2, #404eed);
}
.ws-connect-card.discord:hover .ws-connect-icon-wrap {
    background: rgba(88, 101, 242, 0.1);
}
.ws-connect-card.discord:hover .ws-connect-icon-wrap svg {
    stroke: #5865f2;
}
.ws-connect-card.discord:hover .ws-connect-label {
    color: #5865f2;
}

/* GitHub */
.ws-connect-card.github:hover {
    box-shadow: 0 10px 30px rgba(36, 41, 46, 0.35);
    border-color: rgba(36, 41, 46, 0.5);
}
.dark .ws-connect-card.github:hover {
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
.ws-connect-card.github:hover::before {
    background: linear-gradient(135deg, #24292e, #1b1f23);
}
.ws-connect-card.github:hover .ws-connect-icon-wrap {
    background: rgba(36, 41, 46, 0.1);
}
.ws-connect-card.github:hover .ws-connect-icon-wrap svg {
    stroke: var(--theme-text, #0f172a);
}
.dark .ws-connect-card.github:hover .ws-connect-icon-wrap svg {
    stroke: var(--text-strong, #f8fafc);
}
.ws-connect-card.github:hover .ws-connect-label {
    color: var(--theme-text, #0f172a);
}
.dark .ws-connect-card.github:hover .ws-connect-label {
    color: var(--text-strong, #f8fafc);
}

/* TikTok */
.ws-connect-card.tiktok:hover {
    box-shadow: 0 10px 30px rgba(0, 242, 254, 0.25);
    border-color: rgba(0, 242, 254, 0.5);
}
.ws-connect-card.tiktok:hover::before {
    background: linear-gradient(135deg, #ff0050, #00f2fe);
}
.ws-connect-card.tiktok:hover .ws-connect-icon-wrap {
    background: rgba(0, 242, 254, 0.08);
}
.ws-connect-card.tiktok:hover .ws-connect-icon-wrap svg {
    stroke: #00f2fe;
}
.ws-connect-card.tiktok:hover .ws-connect-label {
    color: #00808b; /* dark cyan for excellent contrast in light mode */
}
.dark .ws-connect-card.tiktok:hover .ws-connect-label {
    color: #00f2fe; /* glowing cyan in dark mode */
}

/* ─────────────────────────────────────────────────────────────────
   Websly Tab Cards (websly/tab-cards)
   Sizes:  small | medium | large (default) | full
   BG:     glass-dark (ref) | glass-light | solid-dark | solid-light
           tone-base | tone-subtle | tone-strong | tone-accent | tone-inverted
   Scroll: off | pin-scrub
   ───────────────────────────────────────────────────────────────── */

.ws-tab-cards { position: relative; }
.ws-tab-cards.ws-tc-fullwidth { width: 100%; }

.ws-tc-shell {
    position: relative;
    border-radius: 1.25rem;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    background: var(--ws-tc-shell-bg, transparent);
    color: var(--ws-tc-text, inherit);
}

/* ── Tab list (pill nav) ──────────────────────────────────────────── */
.ws-tc-tablist { width: 100%; }
.ws-tc-taglist-track {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    background: var(--ws-tc-track-bg, rgba(17, 17, 17, 0.55));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.85rem;
    border: 1px solid var(--ws-tc-track-border, rgba(255, 255, 255, 0.08));
}

.ws-tc-pill {
    position: absolute;
    top: 0; left: 0;
    border-radius: 0.6rem;
    background: var(--ws-tc-pill-bg, rgba(17, 17, 17, 0.82));
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.ws-tc-tab {
    position: relative;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ws-tc-tab-color, currentColor);
    font: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0.55rem 0.95rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: color 0.25s ease, opacity 0.25s ease;
    opacity: 0.75;
}
.ws-tc-tab:hover { opacity: 1; }
.ws-tc-tab.is-active { opacity: 1; color: var(--ws-tc-tab-active-color, currentColor); }
.ws-tc-tab:focus-visible { outline: 2px solid var(--text-theme-accent, #4a90e2); outline-offset: 2px; }

/* ── Panels & transition ──────────────────────────────────────────── */
/* Panels grid-stack in the same cell so the box height equals the
   tallest panel (not the sum). Inactive panels fade out *over* the
   active one — no layout shift, no gap. */
.ws-tc-panels {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    border-radius: 1rem;
    padding: clamp(1rem, 2vw, 1.75rem);
    background: var(--ws-tc-panel-bg, rgba(17, 17, 17, 0.55));
    border: var(--ws-tc-panel-border, 1px solid rgba(255, 255, 255, 0.08));
    box-shadow: var(--ws-tc-panel-shadow, 0 0 20px rgba(0, 0, 0, 0.2));
    backdrop-filter: var(--ws-tc-panel-blur, blur(14px));
    -webkit-backdrop-filter: var(--ws-tc-panel-blur, blur(14px));
}

.ws-tc-panel {
    grid-area: stack;
    min-width: 0;
    opacity: 0;
    transform: translateX(-8px) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 0.35s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s ease,
        visibility 0s linear 0.4s;
    visibility: hidden;
    pointer-events: none;
}
.ws-tc-panel.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease,
        visibility 0s linear 0s;
}

.ws-tc-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: center;
}
@media (max-width: 760px) {
    .ws-tc-panel-grid { grid-template-columns: 1fr; }
}

.ws-tc-media { margin: 0; border-radius: 0.85rem; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.ws-tc-media img {
    display: block;
    width: 100%;
    height: clamp(14rem, 28vw, 22rem);
    object-fit: cover;
    border: 0;
}

.ws-tc-copy { display: flex; flex-direction: column; gap: 1rem; }
.ws-tc-heading { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
.ws-tc-text    { margin: 0; opacity: 0.85; }
.ws-tc-cta     { margin-top: 0.5rem; }

/* Size profiles control the inner max-width only — height is content-driven.
   We no longer force a min-height on the panel container, so there's no
   blank space below content. */

/* Pin+scrub mode pins the section to the viewport; the panel box itself
   stays content-sized, the section provides the pinned stage. */

/* ── BG presets ──────────────────────────────────────────────────── */
.ws-tc-bg-glass-dark {
    --ws-tc-text: #ffffff;
    --ws-tc-track-bg: rgba(17, 17, 17, 0.6);
    --ws-tc-track-border: rgba(255, 255, 255, 0.08);
    --ws-tc-pill-bg: rgba(17, 17, 17, 0.82);
    --ws-tc-tab-color: rgba(255, 255, 255, 0.78);
    --ws-tc-tab-active-color: #fff;
    --ws-tc-panel-bg: rgba(17, 17, 17, 0.6);
    --ws-tc-panel-border: 1px solid rgba(255, 255, 255, 0.08);
    --ws-tc-panel-blur: blur(14px);
}
.ws-tc-bg-glass-light {
    --ws-tc-text: #0a0a0a;
    --ws-tc-track-bg: rgba(255, 255, 255, 0.55);
    --ws-tc-track-border: rgba(0, 0, 0, 0.06);
    --ws-tc-pill-bg: rgba(255, 255, 255, 0.92);
    --ws-tc-tab-color: rgba(15, 15, 15, 0.7);
    --ws-tc-tab-active-color: #0a0a0a;
    --ws-tc-panel-bg: rgba(255, 255, 255, 0.55);
    --ws-tc-panel-border: 1px solid rgba(0, 0, 0, 0.06);
    --ws-tc-panel-blur: blur(14px);
}
.ws-tc-bg-solid-dark {
    --ws-tc-text: #fff;
    --ws-tc-track-bg: #111;
    --ws-tc-track-border: rgba(255, 255, 255, 0.1);
    --ws-tc-pill-bg: #1f1f1f;
    --ws-tc-tab-color: rgba(255, 255, 255, 0.75);
    --ws-tc-tab-active-color: #fff;
    --ws-tc-panel-bg: #0e0e0e;
    --ws-tc-panel-border: 1px solid rgba(255, 255, 255, 0.08);
    --ws-tc-panel-blur: none;
    --ws-tc-panel-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.ws-tc-bg-solid-light {
    --ws-tc-text: #111;
    --ws-tc-track-bg: #f4f4f5;
    --ws-tc-track-border: rgba(0, 0, 0, 0.06);
    --ws-tc-pill-bg: #ffffff;
    --ws-tc-tab-color: rgba(15, 15, 15, 0.65);
    --ws-tc-tab-active-color: #0a0a0a;
    --ws-tc-panel-bg: #ffffff;
    --ws-tc-panel-border: 1px solid rgba(0, 0, 0, 0.06);
    --ws-tc-panel-blur: none;
    --ws-tc-panel-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}

/* Semantic tones (resolve against site tokens) */
.ws-tc-bg-tone-base,
.ws-tc-bg-tone-subtle,
.ws-tc-bg-tone-strong,
.ws-tc-bg-tone-accent,
.ws-tc-bg-tone-inverted {
    --ws-tc-pill-bg: var(--text-theme-accent, #4a90e2);
    --ws-tc-tab-color: var(--text-theme-text-muted, rgba(0, 0, 0, 0.6));
    --ws-tc-tab-active-color: var(--text-theme-text-strong, #0a0a0a);
    --ws-tc-panel-blur: none;
    --ws-tc-panel-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.22);
}
.ws-tc-bg-tone-base {
    --ws-tc-text: var(--text-theme-text-base, #111);
    --ws-tc-track-bg: var(--page-bg-surface, #fafafa);
    --ws-tc-panel-bg: var(--page-bg-surface, #fafafa);
}
.ws-tc-bg-tone-subtle {
    --ws-tc-text: var(--text-theme-text-base, #111);
    --ws-tc-track-bg: var(--page-bg-surface-soft, #f0f0f1);
    --ws-tc-panel-bg: var(--page-bg-surface-soft, #f0f0f1);
}
.ws-tc-bg-tone-strong {
    --ws-tc-text: var(--page-text-strong, #fff);
    --ws-tc-track-bg: var(--page-bg-strong, #111);
    --ws-tc-panel-bg: var(--page-bg-strong, #111);
    --ws-tc-tab-color: rgba(255,255,255,0.7);
    --ws-tc-tab-active-color: #fff;
}
.ws-tc-bg-tone-accent {
    --ws-tc-text: var(--text-theme-accent-contrast, #fff);
    --ws-tc-track-bg: color-mix(in oklab, var(--text-theme-accent, #4a90e2) 18%, transparent);
    --ws-tc-panel-bg: color-mix(in oklab, var(--text-theme-accent, #4a90e2) 12%, transparent);
    --ws-tc-tab-active-color: var(--text-theme-accent, #4a90e2);
}
.ws-tc-bg-tone-inverted {
    --ws-tc-text: var(--page-text-inverted, #fff);
    --ws-tc-track-bg: var(--page-bg-inverted, #000);
    --ws-tc-panel-bg: var(--page-bg-inverted, #000);
    --ws-tc-tab-color: rgba(255,255,255,0.7);
    --ws-tc-tab-active-color: #fff;
}

/* Pin-scrub: section needs to fill the viewport so the pinned stage
   doesn't show empty space below the panels. Inner content stays
   vertically centred. */
.ws-tc-scroll-pin-scrub          { min-height: 100vh; display: flex; align-items: center; }
.ws-tc-scroll-pin-scrub .ws-tc-inner { width: 100%; }
.ws-tc-scroll-pin-scrub.is-pinned    { will-change: transform; }

/* Editor preview — keep all panels visible-ish so editor doesn't look broken */
.editor-styles-wrapper .ws-tc-panel { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .ws-tc-pill,
    .ws-tc-panel,
    .ws-tc-panel.ws-tc-anim-in {
        transition: none !important;
        animation: none !important;
        filter: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Section Header Region Primitive (5.1 — GAP 1)
   Rendered by inc/websly-section-header.php → websly_render_section_header().
   Used by all Tier-A blocks; globals come from the 🪧 Section Headers
   Customizer section.
   ───────────────────────────────────────────────────────────────── */

.ws-section-header {
    /* Internal spacing rhythm — overridable per-rhythm class below */
    --ws-sh-badge-gap:    1.25rem;   /* badge → title */
    --ws-sh-title-gap:    1rem;      /* title → subtitle */
    --ws-sh-section-gap:  3rem;      /* section header → following content */

    /* Layout */
    --ws-sh-max-width:    56rem;

    width: 100%;
    max-width: var(--ws-sh-max-width);
    margin-bottom: var(--ws-sh-section-gap);
}

/* Alignment */
.ws-section-header--align-left   { text-align: left;   margin-left: 0;    margin-right: auto; }
.ws-section-header--align-center { text-align: center; margin-left: auto; margin-right: auto; }
.ws-section-header--align-right  { text-align: right;  margin-left: auto; margin-right: 0; }

/* Max width tokens */
.ws-section-header--max-narrow { --ws-sh-max-width: 40rem; }
.ws-section-header--max-medium { --ws-sh-max-width: 56rem; }
.ws-section-header--max-wide   { --ws-sh-max-width: 72rem; }
.ws-section-header--max-full   { --ws-sh-max-width: none;  max-width: none; }

/* Rhythm tokens */
.ws-section-header--rhythm-compact {
    --ws-sh-badge-gap:   0.85rem;
    --ws-sh-title-gap:   0.6rem;
    --ws-sh-section-gap: 2rem;
}
.ws-section-header--rhythm-standard {
    --ws-sh-badge-gap:   1.25rem;
    --ws-sh-title-gap:   1rem;
    --ws-sh-section-gap: 3rem;
}
.ws-section-header--rhythm-spacious {
    --ws-sh-badge-gap:   1.75rem;
    --ws-sh-title-gap:   1.5rem;
    --ws-sh-section-gap: 4.5rem;
}

/* Inner element spacing */
.ws-section-header__badge    { margin: 0 0 var(--ws-sh-badge-gap); display: inline-flex; }
.ws-section-header__title    { margin: 0 0 var(--ws-sh-title-gap); }
.ws-section-header__subtitle { margin: 0; }

.ws-section-header--align-center .ws-section-header__badge { justify-content: center; }
.ws-section-header--align-right  .ws-section-header__badge { justify-content: flex-end; }

/* Subtitle keeps a max-width so it doesn't run wider than the title block */
.ws-section-header__subtitle { max-width: 42rem; }
.ws-section-header--align-center .ws-section-header__subtitle { margin-left: auto; margin-right: auto; }
.ws-section-header--align-right  .ws-section-header__subtitle { margin-left: auto; margin-right: 0; }

/* ── Presets ─────────────────────────────────────────────────────── */
/* classic = identical to base — kept as a named opt-in for future evolution */
.ws-section-header--classic {
    /* Intentionally inherits the base */
}

/* editorial-left — narrower column, left-anchored, tighter title rhythm */
.ws-section-header--editorial {
    --ws-sh-max-width: 44rem;
    --ws-sh-title-gap: 0.75rem;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}
.ws-section-header--editorial .ws-section-header__badge    { justify-content: flex-start; }
.ws-section-header--editorial .ws-section-header__subtitle { margin-left: 0; margin-right: auto; }

/* minimal-tight — compressed everything */
.ws-section-header--minimal {
    --ws-sh-badge-gap:   0.6rem;
    --ws-sh-title-gap:   0.5rem;
    --ws-sh-section-gap: 1.75rem;
    --ws-sh-max-width:   48rem;
}

/* split — grid: badge+title on the left, subtitle on the right */
@media (min-width: 768px) {
    .ws-section-header--split {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 4vw, 4rem);
        align-items: end;
        text-align: left;
        --ws-sh-max-width: 72rem;
    }
    .ws-section-header--split .ws-section-header__badge    { grid-column: 1; justify-content: flex-start; margin-bottom: var(--ws-sh-badge-gap); }
    .ws-section-header--split .ws-section-header__title    { grid-column: 1; grid-row: 2; margin-bottom: 0; }
    .ws-section-header--split .ws-section-header__subtitle { grid-column: 2; grid-row: 2; margin-left: 0; max-width: none; }
}