/* OnePlus — «Never Settle».
   El Alert Slider, enorme y de aluminio, sobre el rojo de la marca. --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 interruptor baja por sus tres
   posiciones (Silencio, Vibración, Sonido) y al final la ranura se cierra y queda la tecla Plus. */

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

.cv--oneplus {
    --q: var(--p);
    --o1-red: #d10f24;
    --o1-ink: #ffffff;
    --o1-muted: rgba(255, 255, 255, 0.78);
    /* Saltos del interruptor (con suavizado): a Vibración, a Sonido y de vuelta al centro; cierre de la ranura */
    --t1: clamp(0, (var(--q) - 0.18) / 0.08, 1);
    --t2: clamp(0, (var(--q) - 0.44) / 0.08, 1);
    --t3: clamp(0, (var(--q) - 0.66) / 0.08, 1);
    --t4: clamp(0, (var(--q) - 0.7) / 0.12, 1);
    --cv-bg: var(--o1-red);
    --cv-ink: var(--o1-ink);
    --cv-muted: var(--o1-muted);
    --cv-hint: rgba(255, 255, 255, 0.78);
    --cv-accent: #ffffff;
    --cv-font-display: 'Hanken Grotesk', system-ui, sans-serif;
    --cv-font-body: 'Hanken Grotesk', system-ui, sans-serif;
    color: var(--o1-ink);
    background: var(--o1-red);
}

.cv--oneplus ::selection {
    color: var(--o1-red);
    background: #ffffff;
}

/* La portada no se desvanece al bajar: la tecla Plus del final se lee con el texto */
.cv--oneplus .cv__copy {
    opacity: 1;
    transform: none;
}

/* Rojo con una luz suave desde arriba y la sombra del interruptor */
.cv-o1-field {
    inset: 0;
    background:
        radial-gradient(60% 70% at 70% 30%, rgba(255, 255, 255, 0.14), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, rgba(90, 0, 10, 0.35) 100%);
}

/* —— El interruptor —— */
.cv-o1-switch {
    position: relative;
    display: block;
    width: min(26vw, 44vh, 330px);
    aspect-ratio: 300 / 540;
}

.cv-o1-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 22px 26px rgba(70, 0, 8, 0.45));
}

/* La ranura se cierra al final hasta abrazar la tecla; el hueco corto (con sus esquinas bien redondas)
   toma el relevo para que no se vean las esquinas aplastadas por el escalado */
.cv-o1-track,
.cv-o1-socket {
    fill: url(#cv-o1-slot);
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2;
}

.cv-o1-track {
    transform-origin: 150px 270px;
    transform: scaleY(calc(1 - 0.64 * var(--t4) * var(--t4) * (3 - 2 * var(--t4))));
    opacity: calc(1 - clamp(0, (var(--t4) - 0.6) * 2.5, 1));
}

.cv-o1-socket {
    opacity: clamp(0, (var(--t4) - 0.6) * 2.5, 1);
}

.cv-o1-knob {
    --e1: calc(var(--t1) * var(--t1) * (3 - 2 * var(--t1)));
    --e2: calc(var(--t2) * var(--t2) * (3 - 2 * var(--t2)));
    --e3: calc(var(--t3) * var(--t3) * (3 - 2 * var(--t3)));
    transform: translateY(calc((var(--e1) + var(--e2) - var(--e3)) * 137px));
}

.cv-o1-cap {
    fill: url(#cv-o1-alu);
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 1;
}

.cv-o1-ridges {
    fill: rgba(0, 0, 0, 0.22);
    opacity: calc(1 - var(--t4));
}

/* El «+» grabado de la tecla Plus */
.cv-o1-plus {
    fill: rgba(0, 0, 0, 0.32);
    opacity: var(--t4);
}

/* Vibración: tiembla mientras está en esa posición */
.cv-o1-buzz {
    --amp: calc(clamp(0, (var(--q) - 0.26) * 40, 1) * clamp(0, (0.44 - var(--q)) * 40, 1));
    animation: cv-o1-buzz 0.09s linear infinite;
}

@keyframes cv-o1-buzz {
    0%, 100% { transform: translateX(calc(var(--amp) * -2.5px)); }
    50% { transform: translateX(calc(var(--amp) * 2.5px)); }
}

/* Sonido: ondas que salen del interruptor */
.cv-o1-waves {
    --on: calc(clamp(0, (var(--q) - 0.52) * 40, 1) * clamp(0, (0.68 - var(--q)) * 40, 1));
    position: absolute;
    left: 50%;
    top: 74%;
    width: 0;
    height: 0;
    opacity: var(--on);
}

.cv-o1-waves i {
    position: absolute;
    left: -60px;
    top: -60px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: cv-o1-wave 1.8s ease-out infinite;
    animation-delay: calc(var(--i) * 0.6s);
}

@keyframes cv-o1-wave {
    from {
        opacity: 0.9;
        transform: scale(0.6);
    }
    to {
        opacity: 0;
        transform: scale(2.6);
    }
}

/* Las tres posiciones marcadas junto a la ranura, cada una a su altura; se resalta la activa. Al final se
   borran y queda «Tecla Plus» en el centro */
.cv-o1-mode {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 12em;
    margin-left: clamp(4px, 0.8vw, 12px);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    white-space: nowrap;
    color: #ffffff;
}

.cv-o1-mode b,
.cv-o1-caption span {
    --on: calc(clamp(0, (var(--q) - var(--a)) * 40 + 0.5, 1) * clamp(0, (var(--b) - var(--q)) * 40 + 0.5, 1));
}

.cv-o1-mode b {
    position: absolute;
    left: 0;
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    transform: translateY(-50%);
}

/* Marca de la posición: una raya corta, como las serigrafías de un interruptor */
.cv-o1-mode b::before {
    content: '';
    width: 1.1em;
    height: 2px;
    background: currentColor;
}

.cv-o1-mode .is-pos {
    opacity: calc((0.4 + 0.6 * var(--on)) * (1 - var(--t4)));
}

.cv-o1-mode .is-plus {
    opacity: var(--on);
}

.cv-o1-caption span {
    grid-area: 1 / 1;
    opacity: var(--on);
}

/* —— Texto —— */
.cv-o1-kicker {
    margin: 0;
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--o1-muted);
}

.cv--oneplus .cv__title {
    margin-top: 6px;
    font-size: clamp(3.8rem, min(8.6vw, 16vh), 8rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
}

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

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

.cv-o1-line {
    margin: clamp(10px, 1.8vh, 16px) 0 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.cv--oneplus .cv__lead {
    max-width: 36ch;
    margin-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.cv-o1-caption {
    display: grid;
    max-width: 40ch;
    min-height: 2.9em;
    margin: clamp(14px, 2.2vh, 22px) 0 0;
    padding-left: 12px;
    border-left: 3px solid #ffffff;
    font-size: clamp(0.95rem, 1.05vw, 1.02rem);
    font-weight: 500;
    line-height: 1.45;
    color: #ffffff;
}

.cv-o1-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: clamp(14px, 2.2vh, 22px);
}

.cv--oneplus .cv__meta,
.cv--oneplus .cv__stats {
    margin: 0;
    color: var(--o1-muted);
}

.cv--oneplus .cv__stats strong {
    color: #ffffff;
}

.cv--oneplus .cv__stat--latest:hover {
    border-color: #ffffff;
}

/* —— Móvil: el interruptor arriba y el recorrido se reproduce solo —— */
@media (max-width: 900px) {
    .cv--oneplus {
        --q: 0;
        animation: cv-o1-run 7s linear 1.6s both;
    }

    .cv-o1-switch {
        width: min(30vw, 21vh, 150px);
        margin-right: 90px;
    }

    .cv--oneplus .cv__copy {
        align-items: flex-start;
        text-align: left;
    }

    .cv--oneplus .cv__title {
        font-size: clamp(3.2rem, 15vw, 4.6rem);
    }

    .cv-o1-line {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .cv--oneplus,
    .cv--oneplus .cv-ch,
    .cv-o1-buzz,
    .cv-o1-waves i {
        animation: none;
    }

    /* Directamente la tecla Plus */
    .cv--oneplus {
        --q: 1;
    }
}