/* =========================================================
   MÄO AGENCY · Motion System
   ---------------------------------------------------------
   Capa aditiva sobre style.css. No sustituye .fade-up.
   Piezas:
     1. Lenis (scroll suave)          · .lenis-*
     2. Clip-mask reveal              · .mao-line / .mao-word
     3. In-view escalonado            · [data-mao-stage]
     4. Parallax por seccion          · [data-mao-parallax]
     5. Cortina de entrada            · .mao-curtain
   Todo se apaga con prefers-reduced-motion.
   ========================================================= */


/* ── 1 · LENIS ──────────────────────────────────────────── */
/* Vendorizado en js/vendor/lenis.min.js · sin peticion externa */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ── 2 · CLIP-MASK REVEAL ───────────────────────────────── */
/* Cada linea (o palabra) vive en una caja de recorte. El span
   interior entra desde translateY(115%). La caja se ensancha un
   poco para que no se corten las descendentes de la Playfair
   (g, y, j) ni la inclinacion de la italica de acento.       */

.mao-clip {
    display: block;
    /* Reserva vertical para las descendentes de la Playfair (g, y, j).
       El margen negativo devuelve el hueco al layout.                 */
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.mao-clip--word {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    /* Y a la derecha, para la inclinacion de la italica */
    padding-right: 0.08em;
    margin-right: -0.08em;
}

/* Mejor camino donde exista: la region de recorte se ensancha sin
   tocar el layout. El truco de padding + margen negativo dejaba los
   titulares de varias lineas ~0.14em mas altos que el original,
   porque el margen negativo del ultimo hijo se colapsa hacia fuera
   en vez de restar altura al <h2>.                                   */
@supports (overflow: clip) and (overflow-clip-margin: 1px) {
    .mao-clip,
    .mao-clip--word {
        overflow: clip;
        overflow-clip-margin: 0.18em;
        padding-bottom: 0;
        margin-bottom: 0;
        padding-right: 0;
        margin-right: 0;
    }
}

.mao-clip > .mao-inner {
    display: block;
    transform: translateY(115%);
    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.mao-clip--word > .mao-inner { display: inline-block; }

.mao-clip.is-revealed > .mao-inner {
    transform: translateY(0);
    opacity: 1;
}


/* ── 3 · IN-VIEW ESCALONADO ─────────────────────────────── */
/* [data-mao-stage] en el wrapper · los hijos directos suben
   en secuencia. Sustituye a .fade-up en los bloques de
   cabecera para que el reveal del titular respire solo.    */

[data-mao-stage] > * {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity   0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* El titular con clip-mask no se desplaza: lo hacen sus lineas */
[data-mao-stage] > [data-mao-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

[data-mao-stage] > .is-in {
    opacity: 1;
    transform: translateY(0);
}


/* ── 4 · PARALLAX ───────────────────────────────────────── */
[data-mao-parallax] { will-change: transform; }

/* La foto del hero se sobredimensiona y se sube, para que el
   desplazamiento nunca deje al descubierto el borde superior.
   .hero-bg mide 120% del hero · la imagen 128% de .hero-bg,
   anclada a -14%, deja ~16.8vh de holgura arriba contra un
   recorrido maximo de ~15.4vh. Margen suficiente.            */
.hero-bg { overflow: hidden; }

.hero-img[data-mao-parallax] {
    position: absolute;
    top: -14%;
    left: 0;
    width: 100%;
    height: 128%;
}


/* ── 5 · CORTINA DE ENTRADA ─────────────────────────────── */
.mao-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: var(--color-charcoal, #1E1D1B);
    color: var(--color-bg, #F9F8F6);
    transform: translateY(0);
    /* Red de seguridad · si el JS no carga, la cortina se retira sola */
    animation: mao-curtain-failsafe 0s linear 4s forwards;
}

@keyframes mao-curtain-failsafe {
    to { transform: translateY(-105%); visibility: hidden; }
}

.mao-curtain.is-leaving {
    animation: none;
    transform: translateY(-105%);
    transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

.mao-curtain__mark {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mao-curtain.is-armed .mao-curtain__mark {
    opacity: 1;
    transform: translateY(0);
}

.mao-curtain__track {
    position: relative;
    width: 9rem;
    height: 1px;
    overflow: hidden;
    background-color: rgba(249, 248, 246, 0.22);
}

.mao-curtain__fill {
    position: absolute;
    inset: 0;
    background-color: var(--color-accent, #8E8372);
    transform: scaleX(0);
    transform-origin: left center;
}

.mao-curtain.is-armed .mao-curtain__fill {
    transform: scaleX(1);
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.12s;
}


/* ── 7 · CTA MAGNETICA ──────────────────────────────────── */
/* Tira suave hacia el cursor · solo puntero fino y >768px.
   Anula el translateY(-2px) plano del CSS para no pelearse. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .mao-magnetic { will-change: transform; }
    .mao-magnetic:hover { transform: none; }
}


/* ── 8 · REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mao-clip > .mao-inner {
        transform: none;
        opacity: 1;
        transition: none;
    }
    [data-mao-stage] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .mao-curtain {
        animation: none;
        display: none;
    }
    [data-mao-parallax] { transform: none !important; }
    .mao-magnetic { transform: none !important; }
}