/* ============================================================
   RESETS & BASE
   ============================================================ */

/* Box-sizing reset — everything uses border-box */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Smooth scrolling across the site */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* Base body styles — uses theme variables for light/dark switching */
body {
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

/* Headings use the serif font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-light);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

/* Reset links, lists, and images */
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* Custom Scrollbar — slim and themed */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-secondary); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

/* Main container — centered with max-width */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Section spacing */
.section { padding: var(--spacing-lg) 0; }

/* Flex helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }

/* Grid helpers */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   REVEAL ANIMATIONS (Intersection Observer)
   ============================================================ */

/* Base reveal — hidden until scrolled into view */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state — triggered by JS Intersection Observer */
.reveal.active { opacity: 1; transform: translate(0, 0); }

/* Reveal directions */
.reveal-up { transform: translateY(40px); }
.reveal-down { transform: translateY(-40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-zoom { transform: scale(0.95); }

/* Staggered delays for sequenced animations */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }