/* ============================================
   LUCÍA PIRIS PORTFOLIO — BASE
   Variables (colours, font, easings), reset, custom cursor,
   shared animations, paper grain and text selection.
   ============================================ */

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

:root {
    --color-bg: #f2efe9;
    --color-bg-warm: #ece8e0;
    --color-text: #1a1a1a;
    --color-text-light: #6b6560;
    --color-accent-violet: #b8a9e8;
    --color-border: rgba(26, 26, 26, 0.12);
    
    --font-primary: 'Space Grotesk', sans-serif;
    --nav-height: 64px;
    --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;
}

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

/* ---- Custom Cursor ---- */
/* Hand-drawn cursors from img/cursor/ (arrow by default, finger on clickables).
   Hotspot = arrow tip / fingertip, in CSS px. The plain url() line is the
   fallback for browsers without image-set() support in cursor. */
body {
    cursor: url('../img/cursor/flecha@1x.png') 2 1, auto;
    cursor: image-set(url('../img/cursor/flecha@1x.png') 1x, url('../img/cursor/flecha@2x.png') 2x) 2 1, auto;
}

a,
button,
.nav__lang-inactive,
.hero__column[data-href],
.choice {
    cursor: url('../img/cursor/dedo@1x.png') 10 1, pointer;
    cursor: image-set(url('../img/cursor/dedo@1x.png') 1x, url('../img/cursor/dedo@2x.png') 2x) 10 1, pointer;
}

/* ---- 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-violet);
    color: var(--color-text);
}

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