/* ============================================================
   ZevsHost — Fluid Material layer (Liquid Glass)
   Additive over style.css — load AFTER it. Touches no layout.
   Apple principles applied: chrome is lighter than menus,
   menus lighter than sheets; glass never stacks on glass;
   every translucency has an opaque accessibility fallback.
============================================================ */

/* ===== 1. Depth tokens ===============================
   Elevation = distance from the canvas. Dark: neutral black
   shadows (colored shadows glow wrong on near-black). Light:
   slate-blue tint, softer — matches #f4f6fa body hue. */
:root,
[data-theme="dark"] {
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.18);
    --elev-2: 0 2px 4px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.24);
    --elev-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.32);
    --elev-4: 0 8px 16px rgba(0, 0, 0, 0.36), 0 32px 72px rgba(0, 0, 0, 0.42);
    /* Material tints: chrome < menu < sheet opacity ladder */
    --mat-chrome: rgba(15, 15, 24, 0.55);
    --mat-menu: rgba(20, 20, 32, 0.75);
    --mat-sheet: rgba(12, 12, 20, 0.8);
    --mat-edge: rgba(255, 255, 255, 0.06);   /* light catching top edge */
    --mat-edge-strong: rgba(255, 255, 255, 0.09);
    --mat-solid: #12121c;                     /* opaque fallback */
}
[data-theme="light"] {
    --elev-1: 0 1px 2px rgba(30, 41, 82, 0.06), 0 2px 8px rgba(30, 41, 82, 0.05);
    --elev-2: 0 2px 4px rgba(30, 41, 82, 0.07), 0 8px 20px rgba(30, 41, 82, 0.08);
    --elev-3: 0 4px 8px rgba(30, 41, 82, 0.08), 0 16px 40px rgba(30, 41, 82, 0.1);
    --elev-4: 0 8px 16px rgba(30, 41, 82, 0.1), 0 32px 72px rgba(30, 41, 82, 0.14);
    --mat-chrome: rgba(255, 255, 255, 0.6);
    --mat-menu: rgba(255, 255, 255, 0.8);
    --mat-sheet: rgba(244, 246, 250, 0.85);
    --mat-edge: rgba(255, 255, 255, 0.5);
    --mat-edge-strong: rgba(255, 255, 255, 0.75);
    --mat-solid: #ffffff;
}

/* ===== 2. Light-catch edges + elevation (blur-independent) ===
   Cards get a hairline of "light" on the top inner edge — the
   Apple cue that a surface is raised, without stacking glass
   on glass (translucency on translucency kills legibility). */
.feature-card,
.pricing-card,
.about-stat-card {
    box-shadow: inset 0 1px 0 var(--mat-edge), var(--elev-1);
}
/* Preserve the existing hover glow, keep the edge light */
.feature-card:hover,
.pricing-card:hover {
    box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-2), var(--shadow-glow);
}
.pricing-card.popular {
    box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-2), var(--shadow-glow);
}
.nav-drop-panel {
    box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-3);
}

/* Footer separator: a hard 1px rule becomes a gradient hairline —
   the edge appears lit in the middle, dissolving at both ends. */
.footer {
    border-top-color: transparent;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-glass) 20%, var(--border-glow) 50%, var(--border-glass) 80%, transparent);
}

/* ===== 3. Glass materials (feature-checked) ================ */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

    /* --- Header chrome: the lightest material on the page.
       saturate(180%) makes colors passing underneath vivid —
       content stays alive under the bar (Apple: chrome defers
       to content). Bottom edge dissolves via mask instead of a
       hard border, so content "peeks out" from under glass. */
    .header.scrolled,
    .header.is-scrolled {
        background: var(--mat-chrome);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom-color: transparent;
        box-shadow: inset 0 1px 0 var(--mat-edge);
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent);
    }
    /* Deeper scroll (fluid.js adds .is-scrolled): heavier blur +
       slightly more opacity — the bar "condenses" as you commit
       to scrolling. */
    .header.is-scrolled {
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 8px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 8px), transparent);
    }
    [data-theme="light"] .header.scrolled,
    [data-theme="light"] .header.is-scrolled {
        background: var(--mat-chrome);
        box-shadow: inset 0 1px 0 var(--mat-edge);
    }

    /* --- Menu material: heavier than chrome (a menu holds focus
       longer than a bar), lighter than a sheet. */
    .nav-drop-panel {
        background: var(--mat-menu);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
    }
    [data-theme="light"] .nav-drop-panel {
        background: var(--mat-menu);
        box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-3);
    }

    /* --- Mobile drawer: sheet-grade material (takes full focus →
       heaviest blur). Origin from the trailing edge it slides from. */
    #mobDrawer {
        background: var(--mat-sheet);
        -webkit-backdrop-filter: blur(30px) saturate(160%);
        backdrop-filter: blur(30px) saturate(160%);
        transform-origin: bottom center;
        box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-4);
    }

    /* --- Scrims: dim + defocus what's behind, so the sheet reads
       as the only interactive plane. */
    #mobOverlay,
    dialog::backdrop,
    .fluid-scrim {
        background: rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* --- Generic sheet/dialog material — opt-in for future
       modals (none exist in markup today). */
    dialog,
    .fluid-sheet {
        background: var(--mat-sheet);
        -webkit-backdrop-filter: blur(30px) saturate(160%);
        backdrop-filter: blur(30px) saturate(160%);
        border: 1px solid var(--border-glass);
        border-radius: var(--radius);
        color: var(--text-main);
        box-shadow: inset 0 1px 0 var(--mat-edge-strong), var(--elev-4);
        transform-origin: center;
    }

    /* --- Cookie banner: bottom-anchored chrome. Wins over the
       later inline <style> via id+attr specificity. Also fixes
       the current bug: inline style uses undefined --card-bg →
       banner was white even in dark theme. */
    #cookieBanner[role="dialog"] {
        background: var(--mat-menu);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        backdrop-filter: blur(24px) saturate(160%);
        border-top: none;
        box-shadow: inset 0 1px 0 var(--mat-edge-strong), 0 -8px 30px rgba(0, 0, 0, 0.35);
    }
    [data-theme="light"] #cookieBanner[role="dialog"] {
        box-shadow: inset 0 1px 0 var(--mat-edge-strong), 0 -8px 30px rgba(30, 41, 82, 0.12);
    }
}

/* No backdrop-filter support: themed opaque banner (still fixes
   the white-in-dark bug), everything else keeps style.css solids. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #cookieBanner[role="dialog"] {
        background: var(--mat-solid);
        border-top: 1px solid var(--border-glass);
    }
    dialog,
    .fluid-sheet {
        background: var(--mat-solid);
        border: 1px solid var(--border-glass);
        border-radius: var(--radius);
        color: var(--text-main);
        box-shadow: var(--elev-4);
    }
}

/* ===== 4. Vibrancy: text on frosted surfaces ===============
   Blur steals contrast — compensate with weight + tracking,
   not with brighter color (Apple: vibrancy, not neon). */
.on-material {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
}

/* ===== 5. Accessibility: transparency off =================
   Every translucent surface gets a solid twin. Blur → none. */
@media (prefers-reduced-transparency: reduce) {
    .header.scrolled,
    .header.is-scrolled,
    .nav-drop-panel,
    #mobDrawer,
    #cookieBanner[role="dialog"],
    dialog,
    .fluid-sheet {
        background: var(--mat-solid) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .header.scrolled,
    .header.is-scrolled {
        border-bottom: 1px solid var(--border-glass);
    }
    #mobOverlay,
    dialog::backdrop,
    .fluid-scrim {
        background: rgba(0, 0, 0, 0.65) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ===== 6. Accessibility: high contrast =====================
   Near-solid surfaces + a real border on every glass edge. */
@media (prefers-contrast: more) {
    .header.scrolled,
    .header.is-scrolled,
    .nav-drop-panel,
    #mobDrawer,
    #cookieBanner[role="dialog"],
    dialog,
    .fluid-sheet {
        background: var(--mat-solid) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        border: 1px solid var(--text-muted) !important;
    }
    .header.scrolled,
    .header.is-scrolled {
        border-width: 0 0 1px 0 !important;
    }
    .feature-card,
    .pricing-card,
    .about-stat-card {
        border-color: var(--text-muted);
        box-shadow: none;
    }
}

/* ===== 7. Small polish ===================================== */
/* Thin scrollbar tinted with the brand primary */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-glow) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-glow);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Selection in brand color, readable in both themes */
::selection {
    background: var(--primary-glow);
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--text-main);
}

/* List markers recede — content first */
::marker {
    color: var(--text-dim);
}

/* hr: gradient hairline instead of a solid stroke */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-glass) 15%, var(--border-glass) 85%, transparent);
}