/* ================================================
   MAIN.CSS — Reset, Variables, Typography, Anim
   Light mode — matching AgentBrowser website
   ================================================ */

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

:root {
    --bg: #f8f5f0;
    --bg-card: #ffffff;
    --text: #1a1a1a;
    --text-dim: rgba(26, 26, 26, 0.55);
    --text-faint: rgba(26, 26, 26, 0.12);
    --text-ghost: rgba(26, 26, 26, 0.05);
    --dark: #1a1a1a;
    --dark-soft: #2c2c2c;

    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "SF Mono", "Fira Mono", Menlo, Monaco, Consolas, monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.55s;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(26, 26, 26, 0.12); }

img { display: block; max-width: 100%; }

/* Subtle vignette — light mode */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.04) 100%);
    pointer-events: none;
    z-index: 9998;
}

/* ---- Typography ---- */

.label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 28px;
}

.hd {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 28px;
}

.hd i, .hd em {
    font-style: italic;
    color: var(--text-dim);
}

.hd--sm { font-size: clamp(28px, 3.5vw, 48px); }

.hd--inv { color: var(--text-dim); }
.hd--inv i, .hd--inv em { color: var(--text); }

.bd {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 520px;
}

.bd--lg { max-width: 600px; }

.pullquote {
    font-family: var(--serif);
    font-size: clamp(20px, 2.5vw, 28px);
    font-style: italic;
    color: var(--text);
    opacity: 0.6;
    border-left: 2px solid var(--text-faint);
    padding-left: 24px;
    margin-top: 20px;
    max-width: 520px;
}

.prompt {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-dim);
    border-left: 2px solid var(--text-faint);
    padding-left: 20px;
    margin-top: 16px;
    max-width: 440px;
}

.badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border: 1px solid var(--text-faint);
    border-radius: 100px;
    padding: 8px 20px;
    margin-top: 32px;
}

/* ---- Animation System ---- */

.anim {
    opacity: 0;
    transform: translateY(22px);
}

.slide.active .anim {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.slide.active .anim[data-d="0"] { transition-delay: 0.05s; }
.slide.active .anim[data-d="1"] { transition-delay: 0.2s; }
.slide.active .anim[data-d="2"] { transition-delay: 0.35s; }
.slide.active .anim[data-d="3"] { transition-delay: 0.5s; }
.slide.active .anim[data-d="4"] { transition-delay: 0.65s; }
.slide.active .anim[data-d="5"] { transition-delay: 0.8s; }
.slide.active .anim[data-d="6"] { transition-delay: 0.95s; }