/* Dynamic glass: ambient light, a scroll-aware header and two glass materials that react to the pointer. */
:root {
    /* Neutral light: warm stone, cool mist and a single faint slate accent. */
    --aura-stone: rgba(198, 190, 178, 0.34);
    --aura-mist: rgba(176, 182, 190, 0.3);
    --aura-slate: rgba(150, 160, 178, 0.16);
    --shadow-tone: 30, 32, 36;
}

/* Ambient light drifts slowly behind the page, so glass always has something to bend. */
body::before {
    content: "";
    position: fixed;
    inset: -12vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42vmax 32vmax at 10% 14%, var(--aura-mist), transparent 70%),
        radial-gradient(38vmax 30vmax at 90% 10%, var(--aura-stone), transparent 70%),
        radial-gradient(40vmax 32vmax at 76% 90%, var(--aura-slate), transparent 70%),
        radial-gradient(34vmax 28vmax at 20% 86%, var(--aura-stone), transparent 72%);
    animation: ambient-drift 48s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
    from { transform: translate3d(-2vmax, -1vmax, 0) scale(1); }
    to { transform: translate3d(2vmax, 1.5vmax, 0) scale(1.06); }
}

.hero, .page-hero, .section, .section--white { background: transparent; }
.section--dark {
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(255, 255, 255, 0.07), transparent 70%),
        radial-gradient(50% 70% at 5% 95%, rgba(214, 200, 180, 0.05), transparent 70%),
        var(--c-dark);
}

/* Header: clear at the top of the page, glass once content scrolls beneath it. */
.header {
    transition: background var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
    background: rgba(247, 248, 248, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
}
.glass-ready .header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.glass-ready .header.is-scrolled, body.menu-open .header { background: rgba(247, 248, 248, 0.62); box-shadow: 0 16px 36px -28px rgba(var(--shadow-tone), 0.35); }

.btn--hero-secondary {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.btn--hero-secondary:hover { background: rgba(255, 255, 255, 0.8); }
.btn--hero-primary { box-shadow: 0 10px 28px -12px rgba(18, 19, 23, 0.55); }

/* Glass materials. Each surface sets its own density; the pointer moves the light. */
[data-glass] {
    --light-x: 28%;
    --light-y: 0%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
[data-glass] > * { position: relative; z-index: 1; }
[data-glass]::before,
[data-glass]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity var(--t-slow);
}
/* Specular light that follows the pointer across the surface. */
[data-glass]::before {
    background: radial-gradient(520px circle at var(--light-x) var(--light-y), rgba(255, 255, 255, var(--glass-shine)), transparent 62%);
}
/* Light caught by the edge of the glass, brightest nearest the pointer. */
[data-glass]::after {
    padding: 1px;
    background: radial-gradient(360px circle at var(--light-x) var(--light-y), rgba(255, 255, 255, 1), rgba(255, 255, 255, var(--glass-rim)) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@keyframes orb-float {
    from { transform: translate3d(-12px, -10px, 0) rotate(0deg); }
    to { transform: translate3d(14px, 12px, 0) rotate(18deg); }
}

/* Deep: dense frosted glass that carries the ambient tone. */
[data-glass="deep"] {
    --glass-shine: 0.6;
    --glass-rim: 0.45;
    background: linear-gradient(160deg, rgba(232, 229, 223, 0.66), rgba(255, 255, 255, 0.32) 52%, rgba(224, 228, 234, 0.6));
    backdrop-filter: blur(34px) saturate(160%);
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    box-shadow: 0 40px 90px -50px rgba(var(--shadow-tone), 0.42);
}

#get-started .container { position: relative; }
#get-started .container::before {
    content: "";
    position: absolute;
    inset: 12% 18%;
    border-radius: 50%;
    background: radial-gradient(closest-side at 30% 50%, rgba(184, 176, 164, 0.6), transparent), radial-gradient(closest-side at 72% 55%, rgba(156, 166, 182, 0.45), transparent);
    filter: blur(30px);
    animation: orb-float 16s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Frost: the most opaque material, chosen for reading and typing. */
[data-glass="frost"] {
    --glass-shine: 0.35;
    --glass-rim: 0.6;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 24px 60px -36px rgba(var(--shadow-tone), 0.32);
}
.early-form input { background: rgba(255, 255, 255, 0.86); border-color: #b3b8c1; }

.demo-placeholder { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-glass="deep"] { background: rgba(255, 255, 255, 0.88); }
    [data-glass="frost"], .glass-ready .header.is-scrolled { background: rgba(255, 255, 255, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
    body::before, #get-started .container::before { animation: none; }
}