/* ── DM Sans ── */
@font-face {
    font-family: 'DM Sans';
    src: url('./fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('./fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ── DM Serif Display ── */
@font-face {
    font-family: 'DM Serif Display';
    src: url('./fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Serif Display';
    src: url('./fonts/DM_Serif_Display/DMSerifDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ── Bebas Neue ── */
@font-face {
    font-family: 'Bebas Neue';
    src: url('./fonts/Bebas_Neue/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --green: #1c6d45;
    --green-dark: #0f3d26;
    --green-light: #2a9460;
    --beige: #f6f1e4;
    --beige-dim: rgba(246, 241, 228, 0.6);
    --beige-faint: rgba(246, 241, 228, 0.08);
    --accent: #c8f564;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--beige);
    background: var(--green-dark);
    overflow-x: hidden;
    cursor: none;
}

/* ── Custom cursor ── */
/* Only apply custom cursor on desktop devices */
@media (hover: hover) and (pointer: fine) {

    .cursor {
        position: fixed;
        width: 10px;
        height: 10px;
        background: var(--accent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: transform 0.08s ease, width 0.2s, height 0.2s, background 0.2s;
        mix-blend-mode: difference;
    }

    .cursor-ring {
        position: fixed;
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--beige);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: transform 0.18s ease, width 0.25s, height 0.25s, opacity 0.2s;
        opacity: 0.4;
    }

    body:hover .cursor {
        opacity: 1;
    }
}

/* Optional: completely hide on touch devices */
@media (hover: none) and (pointer: coarse) {

    .cursor,
    .cursor-ring {
        display: none !important;
    }
}