/* =============================================================
   elevation.css — shared premium-elevation layer for every page.

   Two things, applied site-wide so the pages read as one system:
     1. .ambient-orb — soft sunrise light fields for atmospheric depth.
     2. .glass-card  — translucent, blurred, hairline card treatment
        with a natural hover lift.

   Self-contained on purpose: brand tokens are referenced with hex
   fallbacks (var(--db-green, #39B15A)) so this file works whether or
   not a given page links brand-colors.css. Load it LAST in the head.
   ============================================================= */

/* ---- Ambient sunrise orbs -------------------------------------- */
.ambient-orb {
    position: absolute;
    width: 450px; height: 450px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle,
        var(--db-green, #39B15A),
        var(--db-skyline, #3B9CD9));
    filter: blur(140px);
    opacity: 0.12;
    animation: db-ambient-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
.ambient-orb--hero { top: 12%; left: -8%; }
.ambient-orb--cta  { bottom: -16%; right: -6%; animation-duration: 32s; animation-delay: -8s; }

@keyframes db-ambient-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(4%, -5%) scale(1.1); }
}

/* Host sections need a positioning + stacking context so the orb sits
   behind their content and cannot leak horizontal scroll. */
.hero, .hero-full, .hero-codex, .offer-hero, .careers-hero-section,
.cta, .finalcta, .s7-bottom-cta, .ab-cta, .careers-cta {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

/* ---- Glass card treatment ------------------------------------- */
.glass-card {
    background: rgba(255, 255, 255, 0.85);            /* --db-white @ 85% */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--db-grey-3, #D4D4D4);
    box-shadow: 0 20px 40px -10px rgba(34, 34, 34, 0.05); /* --db-dark @ 5% */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 64px -14px rgba(34, 34, 34, 0.12); /* deeper on lift */
}

@media (prefers-reduced-motion: reduce) {
    .ambient-orb { animation: none; }
    .glass-card { transition: none; }
    .glass-card:hover { transform: none; }
}

/* ---- Per-page glass application ------------------------------
   Light-background primary cards only. Selectors match each page's
   own specificity and this file loads last, so these win. Dark and
   tinted cards (e.g. .offer-pricing-card, .cta-card, .ab-cta-card,
   stepper step 4) are deliberately excluded. */
.benefit-card,
.ab-leader,
.offer-proof-card, .offer-stat-row, .offer-deliverable,
.als .spk, .als .lv-card, .als .peek-card {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--db-grey-3, #D4D4D4);
    box-shadow: 0 20px 40px -10px rgba(34, 34, 34, 0.05);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.benefit-card:hover,
.ab-leader:hover,
.offer-proof-card:hover, .offer-stat-row:hover, .offer-deliverable:hover,
.als .spk:hover, .als .lv-card:hover, .als .peek-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 64px -14px rgba(34, 34, 34, 0.12);
}