/* Infinix — «para jugar sin gastar mucho».
   «INFINIX» montado con placas blindadas al estilo «Cyber Mecha» de los GT, sobre el verde lima 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. Al avanzar, las luces de las placas se encienden letra a letra y al final un brillo recorre
   el blindaje. */

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

.cv--infinix {
    --q: var(--p);
    --ix-volt: #d4ff00;
    --ix-ink: #0e1011;
    --ix-muted: rgba(14, 16, 17, 0.72);
    --ix-line: rgba(14, 16, 17, 0.2);
    --cv-bg: #d4ff00;
    --cv-ink: var(--ix-ink);
    --cv-muted: var(--ix-muted);
    --cv-hint: rgba(14, 16, 17, 0.7);
    --cv-accent: var(--ix-ink);
    --cv-font-display: 'Chakra Petch', system-ui, sans-serif;
    --cv-font-body: 'Chakra Petch', system-ui, sans-serif;
    color: var(--ix-ink);
    background: #d4ff00;
}

.cv--infinix ::selection {
    color: #d4ff00;
    background: #0e1011;
}

/* La portada no se desvanece al bajar: el final (todo encendido) se lee con el texto */
.cv--infinix .cv__stage {
    width: min(1180px, 100%);
    justify-items: stretch;
    text-align: left;
}

.cv--infinix .cv__copy {
    width: 100%;
    align-items: stretch;
    opacity: 1;
    transform: none;
}

/* —— Fondo: juntas de blindaje muy suaves y una luz que cae en diagonal —— */
.cv-ix-panels {
    inset: 0;
    background:
        linear-gradient(118deg, transparent 0 31%, rgba(14, 16, 17, 0.07) 31% calc(31% + 1px), transparent calc(31% + 1px) 100%),
        linear-gradient(118deg, transparent 0 68%, rgba(14, 16, 17, 0.07) 68% calc(68% + 1px), transparent calc(68% + 1px) 100%),
        linear-gradient(0deg, transparent 0 22%, rgba(14, 16, 17, 0.06) 22% calc(22% + 1px), transparent calc(22% + 1px) 100%);
}

.cv-ix-light {
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 40%, rgba(255, 255, 255, 0.32), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, rgba(60, 80, 0, 0.18) 100%);
}

/* —— El nombre —— */
.cv-ix-kicker {
    margin: 0 0 clamp(8px, 1.6vh, 16px);
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-align: center;
    text-transform: uppercase;
    color: var(--ix-ink);
}

.cv--infinix .cv-ix-title {
    margin: 0;
    font-size: 1rem;
    line-height: 0;
}

.cv-ix-svg {
    display: block;
    width: min(100%, 1120px);
    width: min(100%, 1120px, (100svh - 420px) * 3.29);
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.cv-ix-plates polygon {
    fill: url(#cv-ix-plate);
    stroke: #0b0d0e;
    stroke-width: 0.8;
    stroke-linejoin: round;
}

.cv-ix-plates {
    filter: drop-shadow(0 5px 7px rgba(40, 55, 0, 0.35));
}

/* Entrada: placas y luces de cada letra se colocan juntas, letra a letra */
.cv-ix-letter {
    animation: cv-ix-in 0.8s var(--cv-ease) both;
    animation-delay: calc(0.1s + var(--i) * 0.07s);
}

@keyframes cv-ix-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* Luces: apagadas son una ranura gris; encendidas, una línea blanca que recorre la placa */
.cv-ix-leds path,
.cv-ix-lit path {
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.cv-ix-leds path {
    stroke: #4a5458;
}

.cv-ix-lit {
    filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.55));
}

.cv-ix-lit path {
    --on: clamp(0, (var(--q) - var(--t0)) / 0.12, 1);
    stroke: #ffffff;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--on));
    opacity: clamp(0, var(--on) * 6, 1);
}

/* Brillo final sobre el blindaje (recortado a las placas) */
.cv-ix-shine__band {
    fill: url(#cv-ix-gleam);
    transform: translateX(calc(clamp(0, (var(--q) - 0.66) / 0.3, 1) * 600px)) skewX(-22deg);
}

/* —— Texto —— */
.cv-ix-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 20px clamp(28px, 5vw, 72px);
    width: min(100%, 1120px);
    width: min(100%, 1120px, (100svh - 420px) * 3.29);
    margin: clamp(14px, 3vh, 34px) auto 0;
    padding-top: clamp(14px, 2.2vh, 22px);
    border-top: 2px solid var(--ix-ink);
}

.cv-ix-line {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ix-ink);
}

.cv--infinix .cv__lead {
    max-width: 38ch;
    margin-top: clamp(8px, 1.4vh, 12px);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    font-weight: 500;
    color: rgba(14, 16, 17, 0.86);
}

.cv-ix-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.cv--infinix .cv__stats strong {
    color: var(--ix-ink);
}

.cv-ix-note {
    max-width: 44ch;
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ix-muted);
}

/* —— Móvil: el encendido se reproduce solo tras la entrada —— */
@media (max-width: 900px) {
    .cv--infinix {
        --q: 0;
        animation: cv-ix-power 4.6s linear 1.4s both;
    }

    .cv-ix-svg {
        width: calc(100% + 20px);
        max-width: none;
        margin: 0 -10px;
    }

    .cv-ix-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
    }

    .cv-ix-line {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
}

@keyframes cv-ix-power {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--infinix,
    .cv-ix-letter {
        animation: none;
    }

    /* Directamente todo encendido */
    .cv--infinix {
        --q: 1;
    }
}