/* ============================================
   GLASS WIDGETS — BASE CSS
   Apple-style liquid glass design system
   ============================================ */

/* ── Custom Properties ── */
:root {
    --gw-c-glass: #bbbbbc;
    --gw-c-light: #fff;
    --gw-c-dark: #000;
    --gw-glass-reflex-light: 1;
    --gw-glass-reflex-dark: 1;
    --gw-saturation: 150%;

    --gw-text-primary: rgba(0, 0, 0, 0.95);
    --gw-text-secondary: rgba(0, 0, 0, 0.70);
    --gw-text-tertiary: rgba(0, 0, 0, 0.40);
    --gw-text-quaternary: rgba(0, 0, 0, 0.20);

    --gw-border-primary: rgba(0, 0, 0, 0.08);
    --gw-border-secondary: rgba(0, 0, 0, 0.04);

    --gw-neutral-accent: rgba(0, 0, 0, 0.50);
    --gw-neutral-accent-dim: rgba(0, 0, 0, 0.06);

    --gw-shadow-image: 0 20px 60px rgba(0, 0, 0, 0.12);

    --gw-radius-xl: 48px;
    --gw-radius-lg: 32px;
    --gw-radius-md: 20px;
    --gw-radius-sm: 12px;
    --gw-radius-xs: 8px;

    --gw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark mode ── */
body.layout--switched {
    --gw-c-glass: #222225;
    --gw-glass-reflex-light: 0.3;
    --gw-glass-reflex-dark: 2;

    --gw-text-primary: rgba(255, 255, 255, 0.97);
    --gw-text-secondary: rgba(255, 255, 255, 0.85);
    --gw-text-tertiary: rgba(255, 255, 255, 0.65);
    --gw-text-quaternary: rgba(255, 255, 255, 0.40);

    --gw-border-primary: rgba(255, 255, 255, 0.08);
    --gw-border-secondary: rgba(255, 255, 255, 0.05);

    --gw-neutral-accent: rgba(248, 248, 248, 0.60);
    --gw-neutral-accent-dim: rgba(248, 248, 248, 0.08);

    --gw-shadow-image: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ── Glass reset ── */
[class*="gw-"] *, [class*="gw-"] *::before, [class*="gw-"] *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Liquid Glass (with SVG refraction) ── */
.glass {
    background-color: color-mix(in srgb, var(--gw-c-glass) 12%, transparent);
    backdrop-filter: blur(8px) url(#gw-liquid-glass) saturate(var(--gw-saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--gw-saturation));
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 8%), transparent);
    transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms var(--gw-ease);
}

/* ── Flat Glass (no SVG refraction — for thin/wide elements) ── */
.glass-flat {
    background-color: color-mix(in srgb, var(--gw-c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--gw-saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--gw-saturation));
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--gw-c-light) calc(var(--gw-glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--gw-c-dark) calc(var(--gw-glass-reflex-dark) * 8%), transparent);
    transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms var(--gw-ease);
}

/* ── Intensity variants ── */
.gw-intensity-subtle.glass,
.gw-intensity-subtle.glass-flat {
    background-color: color-mix(in srgb, var(--gw-c-glass) 8%, transparent);
}
.gw-intensity-strong.glass,
.gw-intensity-strong.glass-flat {
    background-color: color-mix(in srgb, var(--gw-c-glass) 20%, transparent);
}

/* ── Hover effects ── */
.gw-hover-lift:hover { transform: translateY(-6px) !important; }
.gw-hover-glow:hover { background-color: color-mix(in srgb, var(--gw-c-glass) 22%, transparent) !important; }
.gw-hover-scale:hover { transform: scale(1.02) !important; }

/* ── Scroll animations ── */
.gw-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--gw-ease), transform 0.9s var(--gw-ease);
}
.gw-animate.gw-visible { opacity: 1; transform: none; }

.gw-animate.gw-animate-left { transform: translateX(-60px); }
.gw-animate.gw-animate-left.gw-visible { transform: none; }
.gw-animate.gw-animate-right { transform: translateX(60px); }
.gw-animate.gw-animate-right.gw-visible { transform: none; }

.gw-stagger-1 { transition-delay: 0.1s !important; }
.gw-stagger-2 { transition-delay: 0.2s !important; }
.gw-stagger-3 { transition-delay: 0.35s !important; }
.gw-stagger-4 { transition-delay: 0.5s !important; }
.gw-stagger-5 { transition-delay: 0.65s !important; }
.gw-stagger-6 { transition-delay: 0.8s !important; }

/* ── Typography ── */
.gw-title {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 700;
    color: var(--gw-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    -webkit-font-smoothing: antialiased;
}
.gw-text {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 17px;
    color: var(--gw-text-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.gw-label {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gw-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    -webkit-font-smoothing: antialiased;
}
.gw-highlight {
    color: var(--gw-text-primary);
    font-weight: 600;
}

/* ── Section number ── */
.gw-section-number {
    font-size: 15px; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; color: var(--gw-text-tertiary);
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    font-family: 'Rubik', sans-serif;
}
.gw-section-number::after {
    content: ''; flex: 1; height: 1px;
    background: var(--gw-text-quaternary);
}

/* ── Image reveal animation ── */
.gw-img-reveal { overflow: hidden; position: relative; }
.gw-img-reveal::after {
    content: ''; position: absolute; inset: 0;
    background: var(--gw-c-glass);
    transform-origin: right;
    transition: transform 1.4s var(--gw-ease);
}
.gw-img-reveal.gw-revealed::after { transform: scaleX(0); }

/* ── Grain Texture ── */
.gw-grain::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}
body.layout--switched .gw-grain::after { opacity: 0.04; }

/* ── Star field ── */
.gw-star-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gw-star {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--gw-text-primary);
    border-radius: 50%;
    opacity: 0.12;
    animation: gwTwinkle var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}
body.layout--switched .gw-star { opacity: 0.6; }
@keyframes gwTwinkle {
    0%, 100% { opacity: var(--star-op, 0.12); transform: scale(1); }
    15% { opacity: 0; transform: scale(0.3); }
    30% { opacity: var(--star-op, 0.12); transform: scale(1); }
}

/* ── Gradient Orbs ── */
.gw-orbs {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.gw-orb {
    position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.12;
    will-change: transform; animation: gwOrbFloat 20s ease-in-out infinite alternate;
}
body.layout--switched .gw-orb { opacity: 0.18; filter: blur(120px); }
@keyframes gwOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -15px) scale(1.05); }
    66% { transform: translate(-15px, 10px) scale(0.95); }
    100% { transform: translate(10px, -20px) scale(1.02); }
}

/* ── Scroll progress ── */
.gw-scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px;
    background: var(--gw-text-tertiary);
    z-index: 10000; transition: width 0.12s linear; border-radius: 0 1px 1px 0;
}

/* ── Marquee ── */
.gw-marquee-strip {
    overflow: hidden; white-space: nowrap; padding: 24px 0;
    border-top: 1px solid var(--gw-border-primary);
    border-bottom: 1px solid var(--gw-border-primary);
    position: relative; z-index: 1;
}
.gw-marquee-content { display: inline-flex; animation: gwMarquee 30s linear infinite; }
.gw-marquee-content span {
    font-size: clamp(15px, 2vw, 20px); text-transform: uppercase;
    letter-spacing: 4px; color: var(--gw-text-quaternary); padding: 0 40px; font-weight: 500;
    font-family: 'Rubik', sans-serif;
}
@keyframes gwMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Color accent classes ── */
.gw-accent-green  { border-left-color: #4CAF50 !important; }
.gw-accent-blue   { border-left-color: #2196F3 !important; }
.gw-accent-purple { border-left-color: #9C27B0 !important; }
.gw-accent-orange { border-left-color: #FF9800 !important; }
.gw-accent-yellow { border-left-color: #FFC107 !important; }
.gw-accent-teal   { border-left-color: #009688 !important; }
.gw-accent-indigo { border-left-color: #3F51B5 !important; }
.gw-accent-mauve  { border-left-color: #CE93D8 !important; }

/* Color bg classes for principle headers */
.gw-bg-green  { background-color: color-mix(in srgb, #4CAF50 20%, transparent) !important; }
.gw-bg-blue   { background-color: color-mix(in srgb, #2196F3 20%, transparent) !important; }
.gw-bg-purple { background-color: color-mix(in srgb, #9C27B0 20%, transparent) !important; }
.gw-bg-orange { background-color: color-mix(in srgb, #FF9800 20%, transparent) !important; }
.gw-bg-yellow { background-color: color-mix(in srgb, #FFC107 20%, transparent) !important; }
.gw-bg-teal   { background-color: color-mix(in srgb, #009688 20%, transparent) !important; }
.gw-bg-green-light  { background-color: color-mix(in srgb, #4CAF50 8%, transparent) !important; }
.gw-bg-blue-light   { background-color: color-mix(in srgb, #2196F3 8%, transparent) !important; }
.gw-bg-purple-light { background-color: color-mix(in srgb, #9C27B0 8%, transparent) !important; }
.gw-bg-orange-light { background-color: color-mix(in srgb, #FF9800 8%, transparent) !important; }
.gw-bg-yellow-light { background-color: color-mix(in srgb, #FFC107 8%, transparent) !important; }

/* ── SVG Displacement Map container (injected by JS) ── */
.gw-svg-filter-wrap {
    position: absolute; width: 0; height: 0; z-index: -1;
}