/* ── 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;
}

/* ── Parchment Texture (full page) ──────────────── */

body {
    background-color: #E8DCCA;
    background-image:
        /* Micro-noise — tiny irregular dots, not a grid */
        radial-gradient(circle at 20% 35%, rgba(160, 130, 75, 0.06) 0px, transparent 1px),
        radial-gradient(circle at 60% 15%, rgba(140, 110, 60, 0.05) 0px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(150, 120, 65, 0.06) 0px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(135, 105, 55, 0.05) 0px, transparent 1px),
        radial-gradient(circle at 10% 60%, rgba(145, 115, 60, 0.04) 0px, transparent 1px),
        /* Broad tonal variation — parchment is never uniform */
        radial-gradient(ellipse at 25% 20%, rgba(180, 150, 90, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 55%, rgba(165, 130, 75, 0.10) 0%, transparent 40%),
        radial-gradient(ellipse at 15% 75%, rgba(170, 140, 85, 0.08) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 20%, rgba(155, 125, 70, 0.07) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 50%, rgba(175, 145, 85, 0.06) 0%, transparent 50%),
        /* Edge darkening — old parchment vignette */
        radial-gradient(
            ellipse at 50% 50%,
            transparent 25%,
            rgba(130, 95, 45, 0.12) 70%,
            rgba(95, 65, 30, 0.22) 100%
        );
    background-position: 0 0, 3px 7px, 5px 2px, 8px 6px, 1px 4px, center, center, center, center, center, center;
    background-size: 11px 13px, 13px 11px, 9px 14px, 14px 9px, 12px 11px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Section-level texture overlay (optional extra layer) */
.texture-bg {
    position: relative;
}

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

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

.hero-image {
    image-rendering: auto;
    -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; }

/* ── Typewriter cursor blink ────────────────────── */
@keyframes blink {
    50% { opacity: 0; }
}

/* ── Page-wide Ceremonial Light Sweep ───────────── */

@keyframes pageLightSweep {
    0% {
        opacity: 0;
        transform: translateX(-100%) skewX(-10deg);
    }
    15% {
        opacity: 0.7;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
        transform: translateX(200%) skewX(-10deg);
    }
}

/* Applied on <body> — sweeps the entire viewport once */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(198, 122, 40, 0.12) 20%,
        rgba(255, 223, 160, 0.22) 40%,
        rgba(255, 241, 213, 0.18) 55%,
        rgba(198, 122, 40, 0.12) 75%,
        transparent 100%
    );
    animation: pageLightSweep 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s both;
}

/* ── Edificios — Simple Fade In ─────────────────── */

.edificios-enter {
    animation: heroFadeIn 1.8s ease-out 0.3s both;
}