/* Custom CSS for DC Voice Agent Theme */

:root {
    --primary: #0A0A0A;
    --secondary: #F2F1EE;
    --accent: #10B981;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--secondary);
    color: var(--primary);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Syne', sans-serif;
}

/* ── Glassmorphism ────────────────────────────────────── */
.glass-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-panel-dark {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Marquee ──────────────────────────────────────────── */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

/* ── Noise Overlay ────────────────────────────────────── */
/*
 * FIX: was position:fixed z-index:50 opacity:0.03 which overrode
 * Tailwind's 'absolute inset-0 opacity-20' on the section element,
 * bleeding a fixed reddish noise layer across the whole page.
 * Now: pure texture utility — layout is 100% controlled by Tailwind.
 */
.noise-overlay {
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ── Red Glow Orb Animation ───────────────────────────── */
/*
 * FIX: .red-glow had NO CSS definition. The decay section's
 * pulsing red orb was a completely static blob — no motion at all.
 */
@keyframes redGlowPulse {
    0%   { opacity: 0.15; transform: translate(-50%, -50%) scale(1);    }
    50%  { opacity: 0.30; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1);    }
}

.red-glow {
    animation: redGlowPulse 6s ease-in-out infinite;
    will-change: opacity, transform;
}

/* ── Slow Pulse (hero orb) ────────────────────────────── */
/*
 * FIX: animate-pulse-slow was used on the hero emerald orb
 * but never defined — caused no animation.
 */
@keyframes pulseSlow {
    0%, 100% { opacity: 0.4; transform: scale(1);    }
    50%       { opacity: 0.7; transform: scale(1.08); }
}

.animate-pulse-slow {
    animation: pulseSlow 4s ease-in-out infinite;
}

/* ── GSAP Initial States ──────────────────────────────── */
/* Decay section — elements start invisible, GSAP reveals on scroll */
.decay-title,
.decay-col {
    opacity: 0;
    transform: translateY(40px);
}

/* GSAP Helper Classes */
.moz-hero-text {
    opacity: 0;
}
.moz-fade-up {
    opacity: 0;
}