/* ═══════════════════════════════════════════
   base.css — Reset, Variables, Typography,
   Keyframes & Reveal Animations
   ═══════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── CSS Variables ─── */
:root {
    --orange: #f1a636;
    --orange-light: #f5be6a;
    --cream: #faf8f4;
    --cream-dark: #f0ece4;
    --charcoal: #1a1a1a;
    --charcoal-light: #2a2a2a;
    --text-dark: #1a1a1a;
    --text-muted: #6b6560;
    --text-light: #f0ece4;
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'DM Sans', Helvetica, Arial, sans-serif;
    --border-radius: 16px;
    --section-padding: clamp(80px, 12vh, 160px);
    --side-margin: clamp(24px, 5vw, 120px);
}

/* ─── Base Typography ─── */
html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--sans);
    color: var(--text-dark);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.6;
    font-weight: 400;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── Keyframes ─── */
@keyframes loaderPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── Reveal Animations ─── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }