/* ── Font Faces ─────────────────────────────────── */

@font-face {
    font-family: 'Andada Pro';
    src: url('../fonts/AndadaPro-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Andada Pro';
    src: url('../fonts/AndadaPro-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Charlotte';
    src: url('../fonts/Charlotte.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── Base ───────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: #C67A28;
    color: #fff;
}

/* ── Subtle Paper Texture ───────────────────────── */

.texture-bg {
    position: relative;
}

.texture-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        repeating-conic-gradient(#8B7355 0% 25%, transparent 0% 50%) 0 0 / 3px 3px,
        repeating-conic-gradient(#6B5B45 0% 25%, transparent 0% 50%) 1px 1px / 3px 3px;
    mix-blend-mode: multiply;
}

/* ── Image Rendering ────────────────────────────── */

.hero-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: auto;
}

/* ── Hero Animations ────────────────────────────── */

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

@keyframes heroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.anim-nav      { animation: navSlideDown 0.6s ease-out both; }
.anim-fade-up  { animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-in  { animation: heroFadeIn 1.2s ease-out both; }

.anim-delay-1 { animation-delay: 150ms; }
.anim-delay-2 { animation-delay: 300ms; }
.anim-delay-3 { animation-delay: 500ms; }
.anim-delay-4 { animation-delay: 700ms; }