/*
 * Bloque Mission Statement.
 */
.okip-ms {
    position: relative;
    z-index: var(--okip-ms-z, 5);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: var(--okip-ms-minh, 100svh);
    padding: var(--okip-ms-pt, 7rem) var(--okip-container-pad) var(--okip-ms-pb, 6.5rem);
    color: #fff;
    --okip-ms-scroll: 0;
    --okip-ms-glow-boost: 0;
    --okip-ms-glow-shift: 0%;
    --okip-ms-glow-scale: 0;
    --okip-ms-news-lift: 0px;
    --okip-ms-news-scale: 1;
    --okip-ms-news-fade: 1;
    background: var(--okip-ms-bg, #000);
}

/* ScrollTrigger envuelve el bloque pineado en un .pin-spacer (mismo patrón que
   industry-carousel). Fondo negro para que en scroll rápido el frame de engrane/
   suelta del pin no deje asomar el fondo de la página (flash). */
.pin-spacer:has(> .okip-ms) {
    background: var(--okip-ms-bg, #000);
}

/* Depth-out al ser cubierta por News (cover-rise): la sección se aleja levemente
   (lift + scale) y se atenúa para dar profundidad mientras News sube encima. */
.okip-ms.is-news-lifting .okip-ms__background {
    transform: translate3d(0, var(--okip-ms-news-lift, 0px), 0);
    will-change: transform;
}

.okip-ms.is-news-lifting .okip-ms__inner {
    transform: translate3d(0, var(--okip-ms-news-lift, 0px), 0) scale(var(--okip-ms-news-scale, 1));
    opacity: var(--okip-ms-news-fade, 1);
    will-change: transform, opacity;
}

.okip-ms::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 2;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(153, 218, 255, .52), transparent);
    opacity: .48;
    pointer-events: none;
}

.okip-ms__background,
.okip-ms__background::before,
.okip-ms__background::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.okip-ms__background::before,
.okip-ms__background::after {
    content: "";
}

.okip-ms__background {
    opacity: 1;
    transition: opacity .2s linear;
}

.okip-ms--gradient .okip-ms__background {
    background:
        radial-gradient(ellipse 80% 38% at 50% 122%, rgba(0, 86, 170, .42), transparent 66%),
        linear-gradient(180deg, #000 0%, #000 62%, #00132a 100%);
}

.okip-ms--gradient .okip-ms__background::before {
    background:
        radial-gradient(
            ellipse 58% 34% at var(--okip-ms-x, 50%) var(--okip-ms-y, 108%),
            rgba(132, 207, 255, .72) 0%,
            var(--okip-ms-blue-glow, rgba(0, 111, 207, .95)) 16%,
            var(--okip-ms-blue-soft, rgba(0, 111, 207, .34)) 43%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 86% 58% at var(--okip-ms-x, 50%) 116%,
            var(--okip-ms-blue-glow, rgba(0, 111, 207, .82)) 0%,
            rgba(0, 44, 112, .32) 42%,
            transparent 74%
        );
    opacity: calc(.56 + var(--okip-ms-glow-boost, 0));
    transform: translateY(calc(12% - var(--okip-ms-glow-shift, 0%))) scale(calc(.9 + var(--okip-ms-glow-scale, 0)));
    filter: blur(7px) saturate(1.15);
    animation: okip-ms-glow var(--okip-ms-duration, 6500ms) var(--okip-ease) infinite alternate;
}

.okip-ms--gradient .okip-ms__background::after {
    background:
        radial-gradient(ellipse 44% 18% at 42% 104%, rgba(148, 218, 255, .34), transparent 72%),
        radial-gradient(ellipse 66% 26% at 58% 112%, rgba(0, 122, 235, .42), transparent 74%),
        radial-gradient(ellipse 92% 36% at 50% 124%, rgba(0, 48, 148, .56), transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .88) 45%, rgba(0, 0, 0, .46) 100%),
        radial-gradient(ellipse 100% 62% at 50% 118%, rgba(0, 127, 255, .22), transparent 64%);
    background-size: 125% 100%, 135% 100%, 155% 100%, 100% 100%, 100% 100%;
    background-position: 42% 104%, 58% 112%, 50% 124%, 50% 50%, 50% 50%;
    filter: blur(7px) saturate(1.12);
    opacity: .96;
    transform: translateY(2%) scaleX(1.02);
    animation: okip-ms-blue-viscous 14500ms cubic-bezier(.45, 0, .2, 1) infinite alternate;
    will-change: background-position, transform, filter;
}

/* Perf: cuando el bloque queda fuera del viewport, el JS añade .is-bg-paused y se
   CONGELAN las animaciones de fondo (glow + viscous, que repintan background-position
   en 5 capas) → sin compositing/repaint continuo off-screen. Sin JS la clase nunca se
   añade → el fondo sigue animando (comportamiento base intacto). */
.okip-ms.is-bg-paused .okip-ms__background::before,
.okip-ms.is-bg-paused .okip-ms__background::after {
    animation-play-state: paused;
}

.okip-ms__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.okip-ms--has-media .okip-ms__background::after {
    background: rgba(0, 0, 0, .42);
}

.okip-ms__inner {
    position: relative;
    width: min(100%, var(--okip-ms-cw, 820px));
    margin: 0 auto;
    text-align: center;
    z-index: 3;
    /* Sin will-change permanente: el inner solo se transforma en .is-news-lifting,
       que ya declara su propio will-change scoped (ver arriba). */
}

.okip-ms__statement {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(2.05rem, 4.2vw, 3.4rem);
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.12;
    text-wrap: balance;
}

.okip-ms__line {
    display: block;
    white-space: nowrap;
}

.okip-ms__char {
    display: inline-block;
    white-space: pre;
}

/* will-change SOLO mientras la letra está armada y aún no visible (a punto de
   animar). Al añadir .is-visible se suelta la capa → sin capas GPU ociosas (con
   filter, lo más caro) por cada carácter tras el reveal de una sola vez. */
.okip-js .okip-ms--animated:not(.is-visible) .okip-ms__char,
.okip-js .okip-ms--animated:not(.is-visible) .okip-ms__kicker {
    will-change: opacity, transform, filter;
}

.okip-ms__char--space {
    width: .28em;
}

.okip-ms__line--strong {
    color: #fff;
    font-weight: 700;
}

.okip-ms__kicker {
    margin: clamp(1rem, 2.4vh, 1.55rem) 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: clamp(1.4rem, 1.7vw, 1.6rem);
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.okip-js .okip-ms--animated .okip-ms__char,
.okip-js .okip-ms--animated .okip-ms__kicker {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
}

.okip-js .okip-ms--animated.is-visible .okip-ms__char,
.okip-js .okip-ms--animated.is-visible .okip-ms__kicker {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.okip-ms--anim-stagger-lines .okip-ms__line:nth-child(1) {
    transition-delay: .02s;
}

.okip-ms--anim-stagger-lines .okip-ms__line:nth-child(2) {
    transition-delay: .12s;
}

.okip-ms--anim-stagger-lines .okip-ms__line:nth-child(3) {
    transition-delay: .22s;
}

.okip-ms--anim-stagger-lines .okip-ms__line:nth-child(4) {
    transition-delay: .32s;
}

.okip-ms--anim-stagger-lines .okip-ms__kicker {
    transition-delay: .44s;
}

.okip-js .okip-ms--anim-reveal .okip-ms__char,
.okip-js .okip-ms--anim-reveal .okip-ms__kicker {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0);
    transition:
        opacity .64s var(--okip-ease),
        clip-path .84s var(--okip-ease);
}

.okip-js .okip-ms--anim-reveal.is-visible .okip-ms__char,
.okip-js .okip-ms--anim-reveal.is-visible .okip-ms__kicker {
    clip-path: inset(0);
}

/* ============================================================
   REVEAL POR PASOS (GSAP, .okip-ms--stepped): estados discretos animados por CSS.
   paso 1 → FRASE completa (líneas + strong) · paso 2 → KICKER.
   El FONDO no se anima (siempre visible). El stagger va inline desde el JS.
   ============================================================ */

/* Caracteres/kicker ocultos; se revelan al activar .is-on por paso.
   Transición corta + desplazamiento/blur leves → rápido y fluido. */
.okip-js .okip-ms--stepped .okip-ms__char,
.okip-js .okip-ms--stepped .okip-ms__kicker {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity .34s var(--okip-ease),
        transform .34s var(--okip-ease),
        filter .34s var(--okip-ease);
}
.okip-js .okip-ms--stepped .okip-ms__char.is-on,
.okip-js .okip-ms--stepped .okip-ms__kicker.is-on {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

@keyframes okip-ms-glow {
    0% {
        opacity: calc(.5 + var(--okip-ms-glow-boost, 0));
        transform: translateY(calc(13% - var(--okip-ms-glow-shift, 0%))) scale(calc(.86 + var(--okip-ms-glow-scale, 0)));
    }
    100% {
        opacity: calc(.72 + var(--okip-ms-glow-boost, 0));
        transform: translateY(calc(4% - var(--okip-ms-glow-shift, 0%))) scale(calc(1.02 + var(--okip-ms-glow-scale, 0)));
    }
}

@keyframes okip-ms-blue-viscous {
    0% {
        background-position: 38% 105%, 63% 113%, 47% 125%, 50% 50%, 50% 50%;
        filter: blur(8px) saturate(1.04);
        transform: translateY(4%) scaleX(.96) scaleY(.98);
    }
    42% {
        background-position: 52% 102%, 48% 108%, 55% 122%, 50% 50%, 50% 50%;
        filter: blur(10px) saturate(1.22);
        transform: translateY(1%) scaleX(1.09) scaleY(1.03);
    }
    100% {
        background-position: 62% 106%, 39% 112%, 51% 126%, 50% 50%, 50% 50%;
        filter: blur(8px) saturate(1.14);
        transform: translateY(3%) scaleX(1.01) scaleY(1.07);
    }
}

@media (max-width: 1024px) {
    .okip-ms {
        padding-top: 5.5rem;
        padding-bottom: 5.25rem;
    }

    .okip-ms__statement {
        font-size: clamp(1.62rem, 4.45vw, 2.45rem);
    }

    .okip-ms__line {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .okip-ms {
        padding-top: 4.5rem;
        padding-bottom: 4.25rem;
    }

    .okip-ms__statement {
        font-size: clamp(1.38rem, 6.4vw, 1.92rem);
        line-height: 1.16;
    }

    .okip-ms__kicker {
        font-size: .76rem;
        letter-spacing: .12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .okip-ms.is-news-lifting .okip-ms__background,
    .okip-ms.is-news-lifting .okip-ms__inner {
        transform: none !important;
        opacity: 1 !important;
    }

    .okip-ms--gradient .okip-ms__background::before,
    .okip-ms--gradient .okip-ms__background::after {
        animation: none;
    }

    .okip-ms--gradient .okip-ms__background::before {
        opacity: var(--okip-ms-intensity, .82);
        transform: translateY(0) scale(1);
    }

    .okip-js .okip-ms--animated .okip-ms__char,
    .okip-js .okip-ms--animated .okip-ms__kicker {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }

    .okip-js .okip-ms--stepped .okip-ms__char,
    .okip-js .okip-ms--stepped .okip-ms__kicker {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}