/* vivo — el teleobjetivo es la estrella.
   Un concierto visto desde lejos que se acerca, a escala, con las focales del vivo X300 Pro: 24 mm (principal),
   85 mm (teleobjetivo de 200 MP) y 200 mm (con el teleconversor ZEISS de 2,35×). --q (0 → 1) es el avance: en
   escritorio, el de la portada fijada (--p); en móvil, una animación que se reproduce sola. El aumento se calcula
   en escala logarítmica, para que los dos saltos se sientan igual de largos. */

@property --q {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* Focal del momento, en mm enteros */
@property --mm {
    syntax: '<integer>';
    inherits: true;
    initial-value: 24;
}

.cv--vivo {
    --q: var(--p);
    /* De 24 a 85 mm entre 0,12 y 0,4; de 85 a 200 mm entre 0,55 y 0,82. Suaves al empezar y al acabar */
    --a0: clamp(0, (var(--q) - 0.12) / 0.28, 1);
    --a: calc(var(--a0) * var(--a0) * (3 - 2 * var(--a0)));
    --b0: clamp(0, (var(--q) - 0.55) / 0.27, 1);
    --b: calc(var(--b0) * var(--b0) * (3 - 2 * var(--b0)));
    /* Aumento respecto a 24 mm: ×85/24 y luego ×200/85 (el teleconversor de 2,35×) */
    --z: calc(pow(3.5417, var(--a)) * pow(2.3529, var(--b)));
    --mm: calc(24 * var(--z));
    --s: calc(var(--a) + var(--b));
    --vv-blue: #415fff;
    --vv-ink: #f3f5ff;
    --vv-muted: rgba(243, 245, 255, 0.7);
    --vv-night: #05060c;
    --cv-bg: var(--vv-night);
    --cv-ink: var(--vv-ink);
    --cv-muted: var(--vv-muted);
    --cv-hint: var(--vv-muted);
    --cv-accent: var(--vv-blue);
    --cv-font-display: 'Host Grotesk', system-ui, sans-serif;
    --cv-font-body: 'Host Grotesk', system-ui, sans-serif;
    color: var(--vv-ink);
    background: var(--vv-night);
}

.cv--vivo ::selection {
    color: #ffffff;
    background: var(--vv-blue);
}

/* En escritorio el concierto ocupa toda la portada: el escenario y el texto dejan de ser la referencia
   y el visor se coloca respecto a la portada entera */
.cv--vivo .cv__stage {
    position: static;
    width: min(1180px, 100%);
    justify-items: start;
    text-align: left;
}

.cv--vivo .cv__copy {
    position: static;
    width: 100%;
    align-items: flex-start;
    opacity: 1;
    transform: none;
}

/* —— Texto —— */
.cv-vv-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(520px, 44%);
}

.cv-vv-kicker {
    margin: 0;
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9fb0ff;
}

.cv--vivo .cv__title {
    margin-top: 6px;
    font-size: clamp(4.4rem, min(11vw, 20vh), 9.5rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.045em;
}

.cv--vivo .cv-ch {
    animation: cv-vv-letter 0.8s var(--cv-ease) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

@keyframes cv-vv-letter {
    from {
        opacity: 0;
        transform: translate3d(0, 0.15em, 0);
    }
}

.cv-vv-line {
    margin: clamp(12px, 2vh, 20px) 0 0;
    font-size: clamp(1.5rem, 2.5vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.cv--vivo .cv__lead {
    max-width: 40ch;
    margin-top: 12px;
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    font-weight: 400;
    color: var(--vv-muted);
}

.cv-vv-facts {
    margin-top: clamp(16px, 3vh, 28px);
}

.cv--vivo .cv__meta {
    margin: 0;
}

.cv--vivo .cv__stats strong {
    color: var(--vv-ink);
}

/* —— El concierto —— */
.cv-vv-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    overflow: hidden;
}

/* Sombra a la izquierda para que el texto se lea sobre las luces */
.cv-vv-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 6, 12, 0.88) 0%, rgba(5, 6, 12, 0.6) 34%, rgba(5, 6, 12, 0) 58%);
    pointer-events: none;
}

.cv-vv-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.cv-vv-zoom {
    transform-box: view-box;
    transform-origin: 420px 222px;
    transform: scale(var(--z));
}

.cv-vv-beams polygon {
    fill: url(#cv-vv-beam);
    mix-blend-mode: screen;
}

.cv-vv-led {
    fill: url(#cv-vv-led);
    opacity: 0.32;
}

/* Luz cenital con el borde difuminado: a 200 mm se lee como luz y no como una mancha */
.cv-vv-spot {
    fill: url(#cv-vv-spot);
    opacity: 0.7;
    filter: blur(2px);
}

.cv-vv-stage {
    fill: #11142a;
}

.cv-vv-halo {
    fill: #fff4dc;
    opacity: 0.4;
}

.cv-vv-singer {
    fill: #05060c;
}

.cv-vv-stand {
    fill: none;
    stroke: #05060c;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.cv-vv-crowd {
    fill: #020308;
}

/* —— Datos de la cámara: focal, paradas y qué cámara es —— */
.cv-vv-hud {
    position: absolute;
    right: var(--cv-gutter);
    bottom: calc(var(--cv-bottom) + 6px);
    z-index: 2;
    display: grid;
    justify-items: end;
    gap: 8px;
}

.cv-vv-mm {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.cv-vv-mm-n::before {
    counter-reset: mm var(--mm);
    content: counter(mm);
}

.cv-vv-pills {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 4px;
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
}

.cv-vv-pill {
    --on: clamp(0, 1 - max(var(--s) - var(--k), var(--k) - var(--s)), 1);
    padding: 0.4em 0.85em;
    color: color-mix(in srgb, #ffffff calc(var(--on) * 100%), var(--vv-muted));
    background: color-mix(in srgb, var(--vv-blue) calc(var(--on) * 100%), transparent);
    border-radius: 999px;
}

.cv-vv-caps {
    display: grid;
    justify-items: end;
    margin: 0;
    font-size: clamp(0.78rem, 0.9vw, 0.86rem);
    color: var(--vv-muted);
}

.cv-vv-cap {
    grid-area: 1 / 1;
    opacity: clamp(0, 1 - max(var(--s) - var(--k), var(--k) - var(--s)), 1);
}

/* —— Móvil: el concierto va en un visor bajo el texto y se acerca solo —— */
@media (max-width: 900px) {
    .cv--vivo {
        --q: 0;
        animation: cv-vv-run 7s linear 1.6s both;
    }

    .cv--vivo .cv__stage,
    .cv--vivo .cv__copy {
        position: relative;
    }

    .cv-vv-copy {
        max-width: none;
    }

    .cv--vivo .cv__title {
        font-size: clamp(3.6rem, 21vw, 5.4rem);
    }

    .cv-vv-line {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .cv--vivo .cv__lead {
        font-size: 0.95rem;
    }

    .cv-vv-facts {
        margin-top: 12px;
    }

    .cv-vv-scene {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 3 / 2;
        margin-top: 18px;
        border: 1px solid rgba(243, 245, 255, 0.14);
        border-radius: 14px;
    }

    .cv-vv-scene::after {
        content: none;
    }

    /* Arriba a la izquierda, lejos de la cantante en cualquier focal */
    .cv-vv-hud {
        top: 10px;
        right: auto;
        bottom: auto;
        left: 10px;
        justify-items: start;
        gap: 4px;
    }

    .cv-vv-caps {
        justify-items: start;
    }

    .cv-vv-mm {
        font-size: 1.5rem;
    }

    .cv-vv-pills {
        font-size: 0.64rem;
    }

    .cv-vv-caps {
        font-size: 0.66rem;
    }
}

@keyframes cv-vv-run {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--vivo,
    .cv--vivo .cv-ch {
        animation: none;
    }

    /* Directamente a 200 mm */
    .cv--vivo {
        --q: 1;
    }
}