/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Reveal Animations ── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hidden state for scroll-reveal — progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
    .reveal, .reveal-left, .reveal-right {
        opacity: 0;
        transform: translateY(24px);
    }
    .reveal-left { transform: translateX(-24px); }
    .reveal-right { transform: translateX(24px); }
    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* ── Focus styles ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

/* ── Selection ── */
::selection { background: #5eead4; color: #0F2B4C; }