/*
 * Bloque Video con Título (video-w-title).
 *
 * Estructura: `.okip-vwt` (OUTER — es el elemento STICKY y reserva el scroll del hold)
 * > `.okip-vwt__stage` (.okip-cover-stage, la escena visible de 100svh anclada al top)
 * > capas (bg / overlay / inner). El sticky (en el OUTER, no en el stage) + el hold los
 * aporta assets/css/transitions.css vía `data-transition-mode="sticky-cover"`; aquí solo
 * va presentación.
 *
 * Namespacing: .okip-vwt__* — sin dependencias de otros bloques.
 *
 * Fallback sobrio: sin video real, el fondo queda en color sólido (--okip-color-bg).
 *
 * Reveal de entrada: lo ARMA el JS (clase `is-anim-armed`), no `.okip-js` global →
 * si el script del bloque falla, el texto queda visible (nunca oculto). Respeta
 * prefers-reduced-motion.
 */

/* ---------- OUTER: reserva de scroll ---------- */
.okip-vwt {
    position: relative;
    z-index: var(--okip-vwt-z, 2);
    min-height: var(--okip-vwt-minh, 100svh);
    background-color: var(--okip-color-bg, #020711);
    color: var(--okip-color-text, #f4f7fb);
}

/* ---------- STAGE: viewport visible (sticky en desktop vía transitions.css) ---------- */
.okip-vwt__stage {
    position: relative;
    display: flex;
    align-items: center;
    /* En desktop, transitions.css reduce esta altura a (100svh - navbar) y ancla el
       outer bajo el navbar → el bloque entero (video incluido) queda DEBAJO del navbar,
       con su propio espacio. El contenido centrado cae naturalmente bajo el navbar. */
    min-height: var(--okip-vwt-minh, 100svh);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--okip-color-bg, #020711);
}

/* ---------- Capa 1: video de fondo ---------- */
.okip-vwt__bg {
    position: absolute;
    /* A sangre completa: el video pasa por DETRÁS del navbar (comparten espacio).
       No se recorta para no dejar una línea visible durante la transición. */
    inset: 0;
    z-index: 1;
    /* Fallback sobrio (sin media): color sólido, coherente con el Hero. */
    background-color: var(--okip-color-bg, #020711);
}

.okip-vwt__bg-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- Capa 2: overlay ---------- */
.okip-vwt__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--okip-vwt-overlay-color, #05080f);
    opacity: var(--okip-vwt-overlay-opacity, 0.45);
    pointer-events: none;
}

/* ---------- Capa 3: texto ---------- */
.okip-vwt__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--okip-vwt-cw, 1100px);
    margin: 0 auto;
    padding: var(--okip-space-6, 4rem) var(--okip-space-4, 1.5rem);
}

.okip-vwt__text {
    display: flex;
    flex-direction: column;
    gap: var(--okip-space-3, 1rem);
}

.okip-vwt--align-center .okip-vwt__text {
    align-items: center;
    text-align: center;
}

.okip-vwt--align-left .okip-vwt__text {
    align-items: flex-start;
    text-align: left;
}

.okip-vwt__eyebrow {
    margin: 0;
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--okip-color-accent-2, #3c8cff);
}

.okip-vwt__title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(1.9rem, 4.4vw, 3.6rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--okip-color-text, #f4f7fb);
}

.okip-vwt--align-left .okip-vwt__title {
    max-width: 22ch;
}

/* Resaltado = negrita blanca (no color), según convención del tema. */
.okip-vwt__highlight {
    font-weight: 700;
    color: #ffffff;
}

.okip-vwt__subtitle {
    margin: 0;
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--okip-color-text-muted, #b9c4d4);
}

.okip-vwt__desc {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    color: var(--okip-color-text-muted, #b9c4d4);
}

/* ---------- Capa 3 (modelo nuevo): cuadros de texto posicionables ---------- */
.okip-vwt__boxes {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.okip-vwt__box {
    position: absolute;
    left: var(--okip-vwtb-x, 50%);
    top: var(--okip-vwtb-y, 50%);
    width: var(--okip-vwtb-w, 60%);
    height: var(--okip-vwtb-h, auto);
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: var(--okip-vwtb-ff, var(--okip-font-base));
    font-size: var(--okip-vwtb-fs, 2rem);
    font-weight: var(--okip-vwtb-fw, 400);
    line-height: var(--okip-vwtb-lh, 1.2);
    letter-spacing: var(--okip-vwtb-ls, 0);
    color: var(--okip-vwtb-color, #ffffff);
}

.okip-vwt__box--align-left { text-align: left; }
.okip-vwt__box--align-center { text-align: center; }
.okip-vwt__box--align-right { text-align: right; }

.okip-vwt__box--subtitle { text-transform: uppercase; }

/* ---------- Reveal de entrada (armado por JS: .is-anim-armed) ----------
   Dos modos coexisten:
   - Bloque: elementos NO divididos (.okip-vwt__desc, eyebrow…) → fade + translateY.
   - Letra: elementos con `.is-split` (título, subtítulo, cuadros) animan sus
     `.okip-vwt__char` en cascada; el contenedor se queda quieto. */
.okip-vwt--animated.is-anim-armed .okip-vwt__text > *:not(.is-split),
.okip-vwt--animated.is-anim-armed .okip-vwt__box:not(.is-split) {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px));
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

/* El texto legacy no usa el centrado por transform: anima solo en Y. */
.okip-vwt--animated.is-anim-armed .okip-vwt__text > *:not(.is-split) {
    transform: translateY(18px);
}

.okip-vwt--animated.is-anim-armed.is-revealed .okip-vwt__text > *:not(.is-split) {
    opacity: 1;
    transform: none;
}

.okip-vwt--animated.is-anim-armed.is-revealed .okip-vwt__box:not(.is-split) {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ---------- Reveal por letra (.is-split, dividido por JS) ---------- */
/* La palabra es inline-block para no cortar a mitad; el salto cae en los espacios. */
.okip-vwt__word {
    display: inline-block;
    white-space: pre;
}

.okip-vwt__char {
    display: inline-block;
}

/* will-change SOLO mientras la letra está armada y aún sin revelar (a punto de
   animar). Al añadir .is-revealed se suelta la capa → sin capas GPU ociosas por
   cada carácter tras el reveal de una sola vez. */
.okip-vwt--animated.is-anim-armed:not(.is-revealed) .okip-vwt__char {
    will-change: opacity, transform;
}

.okip-vwt--animated.is-anim-armed .is-split .okip-vwt__char {
    opacity: 0;
    transform: translateY(0.55em);
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    /* Cascada por índice de carácter (lo fija el JS en --okip-char-i). */
    transition-delay: calc(var(--okip-char-i, 0) * 0.028s);
}

.okip-vwt--animated.is-anim-armed.is-revealed .is-split .okip-vwt__char {
    opacity: 1;
    transform: none;
}

/* Escalonado suave por orden de aparición. */
.okip-vwt--animated.is-anim-armed.is-revealed .okip-vwt__text > *:nth-child(2) {
    transition-delay: 0.08s;
}
.okip-vwt--animated.is-anim-armed.is-revealed .okip-vwt__text > *:nth-child(3) {
    transition-delay: 0.16s;
}
.okip-vwt--animated.is-anim-armed.is-revealed .okip-vwt__text > *:nth-child(4) {
    transition-delay: 0.24s;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .okip-vwt__inner {
        padding: var(--okip-space-5, 2.5rem) var(--okip-space-3, 1rem);
    }

    .okip-vwt__title {
        max-width: 100%;
    }

    /* En móvil las posiciones absolutas no caben: los cuadros se apilan en flujo. */
    .okip-vwt__boxes {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--okip-space-3, 1rem);
        align-items: center;
        justify-content: center;
        min-height: var(--okip-vwt-minh, 100svh);
        padding: var(--okip-space-5, 2.5rem) var(--okip-space-3, 1rem);
    }

    .okip-vwt__box {
        position: static;
        width: min(100%, 40ch);
        height: auto;
        transform: none;
    }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    .okip-vwt--animated.is-anim-armed .okip-vwt__text > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .okip-vwt--animated.is-anim-armed .okip-vwt__box {
        opacity: 1;
        transform: translate(-50%, -50%);
        transition: none;
    }

    .okip-vwt--animated.is-anim-armed .okip-vwt__char {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}