/* Education Today 2026 ─ Design System */

:root { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .reveal, .hero-el { opacity: 1 !important; transform: none !important; }
    :root { scroll-behavior: auto; }
}

/* ── Anchor offset ── */
section[id] { scroll-margin-top: 5rem; }

/* ── Focus ring ── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 3px;
}

/* ── Scroll progress ── */
#scroll-progress {
    position: fixed; top: 0; left: 0; z-index: 9999;
    height: 2px; width: 0%;
    background: linear-gradient(90deg, #0ea5e9, #1e40af, #38bdf8);
    transition: width 0.08s linear;
}

/* ── Header ── */
[data-header] {
    border-bottom: 1px solid transparent;
    transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
[data-header].is-scrolled {
    background: rgba(2,11,36,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ── Hero elements start invisible (GSAP animates them) ── */
.hero-el { opacity: 0; transform: translateY(18px); }

/* ── Reveal on scroll ── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--d, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Form inputs ── */
.rg-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: #f1f5f9;
    caret-color: #0ea5e9;
    font-family: inherit;
}
.rg-input:focus {
    border-color: rgba(14,165,233,0.5);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.rg-input.rg-error { border-color: rgba(239,68,68,0.5); }
.rg-input::placeholder { color: #334155; }
.rg-input option { background: #060e2e; color: #f1f5f9; }

/* ── Three.js canvas ── */
#three-canvas { display: block; width: 100%; height: 100%; }

/* ── Full-screen overlay menu ── */
#nav-overlay { will-change: clip-path; }
#nav-overlay .ovl-word { will-change: transform; }

/* ── FAQ / accordion — hide default browser markers ── */
details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ''; display: none; }
summary { list-style: none; }
details[open] { border-color: rgba(30,64,175,0.2) !important; }

/* ── Countdown tick ── */
[data-cd].tick { transform: scale(0.88); transition: transform 0.08s ease; }

/* ── Speaker modal — mobile layout ── */
@media (max-width: 600px) {
    #speakerModal { padding: 0.75rem; align-items: flex-end; }
    #speakerModalInner { border-radius: 20px 20px 16px 16px; max-height: 92vh; }
    .sm-modal-body { flex-direction: column; }
    #smPhotoCol {
        flex: 0 0 100% !important;
        min-height: 220px !important;
        max-height: 240px !important;
    }
    #smPhotoCol img { min-height: 220px !important; max-height: 240px !important; object-position: center 20% !important; }
    #smPhotoOverlay { background: linear-gradient(to bottom, transparent 50%, #081f3a) !important; }
    .sm-details { padding: 1.25rem 1.25rem 1.5rem !important; }
}

/* ── Pulse for badge dot ── */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}