/* ========================
   RESET & BASE
======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-stone);
    color: var(--text);
    line-height: 1.65;
}

img { display: block; max-width: 100%; }
a, button, input, select, textarea, label, [role="button"] {
    touch-action: manipulation;
}

/* Accessible Placeholders */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Ensure full color is used for contrast */
}

svg { display: block; }

/* ========================
   FOCUS VISIBILITY
======================== */
:focus-visible {
    outline: 3px solid var(--forest);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ========================
   SCROLL ANIMATIONS
======================== */
.fade-in,
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.fade-in-delay              { transition-delay: 0.22s; }
.reveal:nth-child(2)        { transition-delay: 0.12s; }
.reveal:nth-child(3)        { transition-delay: 0.24s; }

.fade-in.visible,
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}