/* Nothing — «luces que avisan sin encender la pantalla».
   Una pantalla de puntos con tres escenas: el nombre en letras de puntos, la barra de progreso del Phone (2) y la
   Glyph Matrix redonda del Phone (3) con el punto rojo. --q (0 → 1) es el avance: en escritorio, el de la portada
   fijada (--p); en móvil, una animación que se reproduce sola. */

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

.cv--nothing {
    --q: var(--p);
    --nt-paper: #f1f1ef;
    --nt-ink: #111111;
    --nt-muted: #5c5c5a;
    --nt-red: #d71921;
    --nt-off: #d8d8d5;
    --nt-dim: #bcbcb9;
    /* Escena 3 (la matriz): cuánto se atenúa el resto del panel */
    --s3: clamp(0, (var(--q) - 0.62) / 0.04, 1);
    --cv-bg: var(--nt-paper);
    --cv-ink: var(--nt-ink);
    --cv-muted: var(--nt-muted);
    --cv-hint: #6a6a67;
    --cv-accent: var(--nt-red);
    --cv-font-display: 'Doto', ui-monospace, monospace;
    --cv-font-body: 'Sora', system-ui, sans-serif;
    --cv-font-kicker: 'Sora', system-ui, sans-serif;
    color: var(--nt-ink);
    background: var(--nt-paper);
}

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

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

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

.cv-nt-paper {
    inset: 0;
    background: radial-gradient(70% 60% at 50% 38%, #fbfbfa 0%, rgba(251, 251, 250, 0) 70%);
}

/* —— La pantalla de puntos —— */
.cv-nt-kicker {
    margin: 0;
    font-family: 'Doto', ui-monospace, monospace;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--nt-ink);
}

.cv--nothing .cv-nt-title {
    margin: clamp(8px, 1.6vh, 16px) 0 0;
    font-size: 1rem;
    line-height: 0;
}

.cv-nt-svg {
    display: block;
    width: min(100%, 1000px);
    width: min(100%, 1000px, (100svh - 400px) * 2.44);
    height: auto;
    margin: 0 auto;
}

#cv-nt-grid circle {
    fill: var(--nt-off);
}

/* En la última escena se apagan los puntos de alrededor para que destaque la matriz redonda */
.cv-nt-off {
    opacity: calc(1 - 0.6 * var(--s3));
}

/* Escena 1: el nombre. Al cargar se enciende con un parpadeo, como un panel de luces; al bajar se borra
   punto a punto. Escena 2: la barra se llena columna a columna y el punto rojo salta a la siguiente.
   Escena 3: la matriz redonda; su borde se enciende dando la vuelta y el rojo crece desde el centro */
.cv-nt-boot {
    animation: cv-nt-boot 0.9s steps(1, end) 0.35s both;
}

@keyframes cv-nt-boot {
    0% { opacity: 0; }
    25% { opacity: 1; }
    40% { opacity: 0.2; }
    55%, 100% { opacity: 1; }
}

/* Cada LED está encendido o apagado, nunca a medias: vale 1 mientras --q está en [--a, --b) y el cambio es
   instantáneo (el ×100000 lo deja en una cienmilésima de avance). Así no hay puntos cortados ni a media luz */
.cv-nt-led {
    opacity: calc(clamp(0, (var(--q) - var(--a)) * 100000, 1) * clamp(0, (var(--b) - var(--q)) * 100000, 1));
}

.cv-nt-ink {
    fill: var(--nt-ink);
}

.cv-nt-dim {
    fill: var(--nt-dim);
}

.cv-nt-hot {
    fill: var(--nt-red);
}

/* Lo que enseña cada escena */
.cv-nt-caption {
    display: grid;
    justify-items: center;
    max-width: 62ch;
    min-height: 2.9em;
    margin: clamp(10px, 1.8vh, 16px) auto 0;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    color: var(--nt-muted);
}

.cv-nt-caption__item {
    --on: calc(clamp(0, (var(--q) - var(--a)) * 40 + 0.5, 1) * clamp(0, (var(--b) - var(--q)) * 40 + 0.5, 1));
    grid-area: 1 / 1;
    opacity: var(--on);
}

/* —— Texto —— */
.cv-nt-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px clamp(28px, 5vw, 72px);
    width: min(100%, 1000px);
    width: min(100%, 1000px, (100svh - 400px) * 2.44);
    margin: clamp(12px, 2.4vh, 26px) auto 0;
    padding-top: clamp(12px, 2vh, 18px);
    border-top: 1px solid rgba(17, 17, 17, 0.16);
}

.cv-nt-line {
    margin: 0;
    font-family: 'Doto', ui-monospace, monospace;
    font-size: clamp(1.6rem, 2.7vw, 2.45rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--nt-ink);
}

.cv--nothing .cv__lead {
    max-width: 40ch;
    margin-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    font-weight: 400;
    color: #2c2c2b;
}

.cv-nt-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.cv--nothing .cv__stats strong {
    color: var(--nt-ink);
}

/* —— Móvil: las escenas se reproducen solas —— */
@media (max-width: 900px) {
    .cv--nothing {
        --q: 0;
        animation: cv-nt-play 7s linear 1.6s both;
    }

    .cv-nt-svg,
    .cv-nt-foot {
        width: 100%;
    }

    .cv-nt-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cv-nt-caption {
        min-height: 4.4em;
    }

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

@keyframes cv-nt-play {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--nothing,
    .cv-nt-boot {
        animation: none;
    }

    /* Directamente la última escena */
    .cv--nothing {
        --q: 1;
    }
}