/* OPPO — la batería se carga con el scroll: el script mueve --vooc (0,2 → 1) y el número */

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

.cv--oppo {
    --cv-bg: #eef9f2;
    --cv-ink: #0c3a23;
    --cv-muted: #4b765f;
    --cv-accent: #10a04e;
    --cv-green: #10a04e;
    --cv-font-display: 'Nunito', system-ui, sans-serif;
    --cv-font-body: 'Nunito', system-ui, sans-serif;
    --cv-cta-bg: #10a04e;
    --cv-cta-ink: #fff;
    --cv-cta-radius: 999px;
    --cv-cta-shadow-hover: 0 14px 30px -12px rgba(16, 160, 78, 0.65);
    background:
        radial-gradient(60% 80% at 75% 50%, #dcf5e6 0%, rgba(220, 245, 230, 0) 70%),
        linear-gradient(170deg, #f4fbf7, #e6f5ec);
}

/* —— Fondo: ondas verdes y chispas que viajan hacia la batería —— */
.cv-op-wave {
    border-radius: 50%;
    filter: blur(30px);
    animation: cv-op-drift 16s ease-in-out infinite alternate;
}

.cv-op-wave--1 {
    left: -12%;
    bottom: -32%;
    width: 72vw;
    height: 62vh;
    background: radial-gradient(closest-side, rgba(16, 160, 78, 0.2), transparent);
}

.cv-op-wave--2 {
    right: -18%;
    top: -26%;
    width: 60vw;
    height: 58vh;
    background: radial-gradient(closest-side, rgba(0, 190, 170, 0.16), transparent);
    animation-duration: 20s;
    animation-direction: alternate-reverse;
}

@keyframes cv-op-drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(6vw, -4vh, 0) rotate(12deg); }
}

.cv-op-motes {
    inset: 0;
}

.cv-op-motes i {
    position: absolute;
    left: 0;
    top: calc(28% + var(--i) * 5.4%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10a04e;
    box-shadow: 0 0 10px 2px rgba(16, 160, 78, 0.45);
    opacity: 0;
    animation: cv-op-flow calc(5s + var(--i) * 0.45s) linear infinite;
    animation-delay: calc(var(--i) * -0.9s);
}

@keyframes cv-op-flow {
    0% { transform: translateX(-4vw); opacity: 0; }
    15% { opacity: 0.4; }
    85% { opacity: 0.25; }
    100% { transform: translateX(62vw); opacity: 0; }
}

/* —— Batería —— */
.cv--oppo .cv__art-in {
    transform: scale(calc(1 + var(--p) * 0.06));
}

.cv-op-batt {
    --bw: clamp(240px, min(34vw, 50vh), 500px);
    --bh: calc(var(--bw) * 0.5);
    --line: clamp(5px, 0.55vw, 8px);
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(12px, 2vh, 20px);
    padding-right: calc(var(--bw) * 0.12);
    animation: cv-op-in 1.3s var(--cv-ease) 0.1s both, cv-op-charge-in 1.6s var(--cv-ease) 0.5s backwards;
}

@keyframes cv-op-in {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(0.94);
    }
}

@keyframes cv-op-charge-in {
    from { --vooc: 0; }
}

.cv-op-shell {
    position: relative;
    width: var(--bw);
    height: var(--bh);
    border: var(--line) solid var(--cv-ink);
    border-radius: calc(var(--bh) * 0.24);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 24px 50px -28px rgba(12, 58, 35, 0.6);
    transition: box-shadow 0.6s var(--cv-ease);
}

.cv-op-fill {
    position: absolute;
    inset: calc(var(--line) * 0.9);
    overflow: hidden;
    border-radius: calc(var(--bh) * 0.15);
    background: linear-gradient(90deg, #0b8f43 0%, #1fc067 70%, #5ff0a0 100%);
    clip-path: inset(0 calc((1 - var(--vooc)) * 100%) 0 0 round calc(var(--bh) * 0.15));
}

.cv-op-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0 14px, transparent 14px 30px);
    background-size: 64px 100%;
    animation: cv-op-stripes 1.1s linear infinite;
}

@keyframes cv-op-stripes {
    to { background-position: 64px 0; }
}

.cv-op-readout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04em;
    font-family: 'Nunito', sans-serif;
    font-size: calc(var(--bh) * 0.46);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cv-ink);
    font-variant-numeric: tabular-nums;
}

.cv-op-num {
    display: inline-flex;
    align-items: baseline;
}

.cv-op-num i {
    font-style: normal;
    font-size: 0.45em;
    margin-left: 0.04em;
}

.cv-op-bolt {
    width: 0.62em;
    height: 0.62em;
    margin-right: 0.08em;
    fill: var(--cv-ink);
    animation: cv-pulse 1.4s ease-in-out infinite;
}

.cv-op-nub {
    position: absolute;
    top: calc(var(--bh) * 0.32);
    left: calc(var(--bw) + 2px);
    width: calc(var(--bw) * 0.035);
    height: calc(var(--bh) * 0.36);
    border-radius: 0 8px 8px 0;
    background: var(--cv-ink);
}

/* Cable USB-C que entra desde la derecha; un destello lo recorre hacia la batería */
.cv-op-cable {
    position: absolute;
    top: calc(var(--bh) * 0.5 - 6px);
    left: calc(var(--bw) + var(--bw) * 0.035 + 8px);
    width: calc(var(--bw) * 0.5);
    height: 12px;
    border-radius: 6px 0 0 6px;
    background: linear-gradient(90deg, #cfd8d2 0 22px, var(--cv-ink) 22px);
    overflow: hidden;
    animation: cv-op-plug 1s var(--cv-ease) 1.2s both;
}

.cv-op-cable i {
    position: absolute;
    top: 3px;
    left: 100%;
    width: 30px;
    height: 6px;
    border-radius: 3px;
    background: #5ff0a0;
    box-shadow: 0 0 12px 3px rgba(95, 240, 160, 0.8);
    animation: cv-op-current 1.6s linear 2s infinite;
}

@keyframes cv-op-plug {
    from {
        transform: translateX(60px);
        opacity: 0;
    }
}

@keyframes cv-op-current {
    from { left: 100%; }
    to { left: -30px; }
}

.cv-op-tag {
    font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    font-weight: 800;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--cv-green);
    margin-right: calc(var(--bw) * -0.12);
}

.cv-op-batt.is-charged .cv-op-shell {
    box-shadow:
        0 0 0 8px rgba(16, 160, 78, 0.14),
        0 0 70px 10px rgba(95, 240, 160, 0.55);
}

.cv-op-batt.is-charged .cv-op-bolt {
    animation: none;
}

/* —— Texto —— */
.cv--oppo .cv__kicker {
    letter-spacing: 0.26em;
}

.cv--oppo .cv__title {
    font-size: clamp(4.2rem, min(11vw, 19vh), 10rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--cv-green);
}

.cv--oppo .cv-ch {
    animation: cv-op-bounce 1s var(--cv-spring) both;
    animation-delay: calc((var(--d) + var(--i) * var(--step)) * 1ms);
}

@keyframes cv-op-bounce {
    from {
        opacity: 0;
        transform: translate3d(0, 0.4em, 0) scale(0.6);
    }
}

.cv--oppo .cv__lead {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 700;
}

@media (max-width: 900px) {
    .cv-op-batt {
        --bw: clamp(200px, min(62vw, 30vh * 2), 330px);
    }

    .cv-op-cable {
        width: calc(var(--bw) * 0.18);
    }

    .cv-op-motes {
        display: none;
    }

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