/**
 * Erebora Landing - Multi-Layer Glass Depth System
 * Creates "looking through layers of glass" effect
 * Layer 0: body bg (white + noise)
 * Layer 1: cursor mesh gradient (in glass.css)
 * Layer 2: section glass panes (this file)
 * Layer 3: card glass panels (in components.css)
 * Layer 4: content (text, images)
 */

/* ===== SECTION GLASS PANES ===== */
/* Each section gets a frosted glass overlay — cursor gradient shines through */

.funnel-section {
    isolation: isolate;
}

.funnel-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(250, 248, 245, 0.5) 50%,
        rgba(255, 255, 255, 0.3) 100%);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    z-index: 1;
    pointer-events: none;
}

/* Alternating section tints — warm cream for visual rhythm */
.funnel-section:nth-child(even)::before {
    background: linear-gradient(180deg,
        rgba(240, 237, 232, 0.45) 0%,
        rgba(250, 248, 245, 0.55) 50%,
        rgba(240, 237, 232, 0.4) 100%);
}

/* Hero gets warm gold atmospheric glow */
#section-hero::before {
    background: radial-gradient(ellipse at 50% 20%,
        rgba(212, 175, 55, 0.08) 0%,
        rgba(250, 245, 235, 0.45) 40%,
        rgba(250, 248, 245, 0.3) 70%,
        transparent 100%);
    backdrop-filter: blur(4px) saturate(125%);
    -webkit-backdrop-filter: blur(4px) saturate(125%);
}

/* Calculator section — visible gold center glow */
#section-calculator::before {
    background: radial-gradient(circle at 50% 50%,
        rgba(212, 175, 55, 0.10) 0%,
        rgba(250, 245, 235, 0.45) 40%,
        transparent 70%);
}

/* Benefits — warm cream tint */
#section-benefits::before {
    background: linear-gradient(180deg,
        rgba(240, 237, 232, 0.5) 0%,
        rgba(250, 248, 245, 0.45) 100%);
}

/* Ensure section content sits above glass pane */
.funnel-section > .section-content,
.funnel-section > .progress-indicator,
.funnel-section > .section-nav {
    position: relative;
    z-index: 2;
}

/* ===== MOBILE PERFORMANCE ===== */
@media (max-width: 768px) {
    .funnel-section::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Keep gradient tints for depth, just no blur */
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .funnel-section::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}