/* ============================================
   EDUARDO GARCÍA PORTFOLIO — BASE
   Variables (colours, fonts, easings), reset, the mono type for labels,
   shared animations, grain and text selection.
   Colours: the palette of Lucía Piris's portfolio (warm paper, near-black
   ink, warm grey) with a pure red for the details. Type: Anybody, bold, for
   the titles and his name; Inter for text; Chivo Mono for labels.
   ============================================ */

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

:root {
    --color-bg: #f2efe9;               /* warm paper */
    --color-bg-warm: #ece8e0;          /* frames behind images while they load */
    --color-text: #1a1a1a;
    --color-text-light: #6b6560;
    --color-accent: #ff0000;           /* red: markers, hover and other details */
    --color-border: rgba(26, 26, 26, 0.12);

    --font-display: 'Anybody', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;   /* titles and his name */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Chivo Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --nav-height: 72px;
    --rule: 2px solid var(--color-text);   /* the site's frame: as solid as the drawings' ink */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

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

.hero__column[data-href],
.choice {
    cursor: pointer;
}

/* ---- Mono type ----
   Chivo Mono in capitals for navigation, labels, numbers, buttons and
   metadata; Inter for titles and text. */
.nav__menu-button,
.intro-counter,
.page-footer,
.side-menu__heading,
.side-menu__number,
.side-menu__project,
.side-menu__page,
.projects__heading,
.projects__count,
.projects__link-number,
.project__number,
.project__year,
.project__cta,
.media__caption,
.figura__pie,
.page-back,
.page-meta__number,
.page-meta__label,
.project-page__fact dt,
.project-page__block-title,
.project-page__pager-label,
.pill,
.text-link,
.contact__copy,
.contact__heading,
.contact__social a,
.field__label,
.choice,
.cv__title,
.cv__years,
.about__fact dt,
.gallery__discipline,
.gallery__count,
.cookie-notice__label,
.cookie-notice__button,
.cookie-notice__link,
.legal-list__tag,
.legal-list__meta,
.hero__star {
    font-family: var(--font-mono);
}

/* ---- Animations ---- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes arrowReveal {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(1.08);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Grain texture overlay ---- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
}

/* ---- Selection ---- */
::selection {
    background: var(--color-accent);
    color: var(--color-text);
}

::-moz-selection {
    background: var(--color-accent);
    color: var(--color-text);
}