/* === Glassmorphism ===
 * Frosted-glass panels with backdrop-filter blur.
 * Requires: Firefox 103+, Safari 15.4+, Chrome 94+.
 * Fallback: solid rgba background on unsupported browsers.
 * Uses @keyframes glassGlow from animations.css.
 * Version: 1.0.0
 */

/* ── Base glass ─────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: var(--glass-bg-heavy);
    }
    .glass--strong {
        background: var(--glass-bg-heavy);
    }
}

/* ── Strong glass (more opaque) ─────────────────── */
.glass--strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Primary-tinted glass ───────────────────────── */
.glass--primary {
    background: linear-gradient(
        135deg,
        var(--glass-primary-tint) 0%,
        rgba(37, 99, 235, 0.04) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-primary-border);
}

/* ── Dark glass (for dark backgrounds) ──────────── */
.glass--dark {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* ═══════════════════════════════════════════════════
   Hero block with animated glow
   ═══════════════════════════════════════════════════ */
.hero-glow {
    position: relative;
    overflow: hidden;
}
.hero-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 30% 50%,
        var(--glass-primary-tint) 0%,
        transparent 50%
    );
    animation: glassGlow 8s var(--ease-in-out) infinite;
    pointer-events: none;
    z-index: 0;
}
.hero-glow > * {
    position: relative;
    z-index: 1;
}