/* nubia — «lleva un ventilador dentro».
   El ventilador de siete aspas de los RedMagic, enorme, tras una rejilla de panal. --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, el
   ventilador se acelera (las aspas se funden en un disco borroso), el anillo RGB cambia de color y se enciende,
   y el contador sube de 0 a 24.000 rpm (la cifra del RedMagic 11 Pro, según la marca). */

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

/* Miles de rpm del contador (entero: 0 → 24) */
@property --k {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

.cv--nubia {
    --q: var(--p);
    --k: calc(var(--q) * 24);
    --nb-red: #ff2b2b;
    --nb-ink: #f2f2f4;
    --nb-muted: rgba(232, 232, 238, 0.7);
    --cv-bg: #09090b;
    --cv-ink: var(--nb-ink);
    --cv-muted: var(--nb-muted);
    --cv-hint: rgba(232, 232, 238, 0.62);
    --cv-accent: var(--nb-red);
    --cv-font-display: 'Rajdhani', system-ui, sans-serif;
    --cv-font-body: 'Rajdhani', system-ui, sans-serif;
    --cv-font-kicker: 'Share Tech Mono', ui-monospace, monospace;
    color: var(--nb-ink);
    background: #09090b;
}

.cv--nubia ::selection {
    color: #09090b;
    background: var(--nb-red);
}

/* La portada no se desvanece al bajar: el ventilador a tope se ve con todo el texto */
.cv--nubia .cv__copy {
    opacity: 1;
    transform: none;
}

/* —— Fondo: rejilla de panal, como las tomas de aire, y el resplandor rojo tras el ventilador —— */
.cv-nb-honey {
    inset: 0;
    background-color: #09090b;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'><path d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08z M14 32.33 28 40.4v16.17' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.2'/></svg>");
    background-size: 28px 48.5px;
}

.cv-nb-glow {
    right: -10%;
    top: 50%;
    width: min(80vw, 1100px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(closest-side, rgba(255, 43, 43, calc(0.12 + var(--q) * 0.2)), transparent 72%);
}

/* —— El ventilador —— */
.cv-nb-fan {
    position: relative;
    display: block;
    width: min(42vw, 66vh, 560px);
    aspect-ratio: 1;
}

.cv-nb-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Anillo RGB: gira despacio y, al acelerar, cambia de color y brilla más */
.cv-nb-rgb {
    position: absolute;
    inset: -1.5%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff2b2b, #ff8a00, #ffe600, #2bff88, #00c8ff, #6a5cff, #ff2ad4, #ff2b2b);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px), #000 calc(100% - 3px), transparent calc(100% - 2px));
    opacity: calc(0.4 + var(--q) * 0.6);
    filter: hue-rotate(calc(var(--q) * 300deg)) drop-shadow(0 0 calc(3px + var(--q) * 16px) rgba(255, 43, 43, 0.65));
    animation: cv-nb-turn 9s linear infinite;
}

@keyframes cv-nb-turn {
    to { transform: rotate(360deg); }
}

.cv-nb-well {
    fill: #0c0c0f;
    stroke: #1c1d22;
    stroke-width: 2;
}

.cv-nb-frame {
    fill: none;
    stroke: #26272d;
    stroke-width: 10;
}

/* Aspas: giran con el avance (cada vez más deprisa) y sobre un giro lento constante; a tope casi
   desaparecen dentro del disco borroso, como un ventilador de verdad */
.cv-nb-spin {
    transform-origin: 200px 200px;
    transform: rotate(calc(var(--q) * var(--q) * 1440deg));
}

.cv-nb-idle {
    transform-origin: 200px 200px;
    animation: cv-nb-turn 3.2s linear infinite;
}

.cv-nb-blades {
    opacity: calc(1 - var(--q) * 0.7);
}

.cv-nb-blades path {
    fill: url(#cv-nb-blade);
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    stroke-linejoin: round;
}

/* Disco borroso de las aspas a toda velocidad (no tapa el buje) */
.cv-nb-blur {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.05) 0 7deg, transparent 7deg 51.4deg),
        radial-gradient(closest-side, rgba(40, 41, 48, 0.9), rgba(20, 21, 25, 0.75) 70%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 28%, #000 31%, #000 92%, transparent 95%);
    mask: radial-gradient(closest-side, transparent 28%, #000 31%, #000 92%, transparent 95%);
    filter: blur(3px);
    opacity: calc(var(--q) * 0.95);
    animation: cv-nb-turn 0.6s linear infinite;
}

.cv-nb-hubring {
    fill: #15161a;
    stroke: #2d2e35;
    stroke-width: 3;
}

.cv-nb-hubcap {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
}

.cv-nb-dot {
    fill: var(--nb-red);
    filter: drop-shadow(0 0 6px rgba(255, 43, 43, 0.8));
}

/* —— Texto —— */
.cv-nb-kicker {
    margin: 0;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
    font-size: clamp(0.8rem, 0.9vw, 0.9rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nb-red);
}

.cv--nubia .cv__title {
    margin-top: 4px;
    font-size: clamp(4rem, min(10vw, 18vh), 9rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: 0.01em;
}

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

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

.cv-nb-line {
    margin: clamp(10px, 1.8vh, 16px) 0 0;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--nb-ink);
}

.cv--nubia .cv__lead {
    max-width: 34ch;
    margin-top: clamp(6px, 1vh, 10px);
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    font-weight: 500;
    color: rgba(242, 242, 244, 0.86);
}

/* Contador: miles de rpm con el avance; «.000» aparece en cuanto pasa de cero */
.cv-nb-rpm {
    margin: clamp(14px, 2.4vh, 24px) 0 0;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
    font-size: clamp(2.4rem, 4.2vw, 3.9rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--nb-ink);
}

.cv-nb-rpm__k {
    counter-reset: k var(--k);
}

.cv-nb-rpm__k::before {
    content: counter(k);
}

.cv-nb-rpm__000 {
    display: inline-block;
    max-width: calc(clamp(0, var(--k), 1) * 2.4em);
    overflow: hidden;
    vertical-align: bottom;
}

.cv-nb-rpm__unit {
    font-size: 0.42em;
    letter-spacing: 0.12em;
    color: var(--nb-red);
}

.cv-nb-note {
    max-width: 46ch;
    margin: 8px 0 0;
    font-size: clamp(0.9rem, 1vw, 0.98rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--nb-muted);
}

.cv-nb-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: clamp(14px, 2.2vh, 22px);
    padding-top: 12px;
    border-top: 1px solid rgba(242, 242, 244, 0.14);
}

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

.cv--nubia .cv__stats strong {
    color: var(--nb-ink);
}

/* —— Móvil: el ventilador arriba y el acelerón se reproduce solo —— */
@media (max-width: 900px) {
    .cv--nubia {
        --q: 0;
        animation: cv-nb-boost 4.5s cubic-bezier(0.45, 0, 0.25, 1) 1.4s both;
    }

    .cv-nb-fan {
        width: min(64vw, 34vh, 300px);
    }

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

    .cv--nubia .cv__title {
        font-size: clamp(3.4rem, 17vw, 5rem);
    }

    .cv-nb-line {
        font-size: clamp(1.4rem, 6.4vw, 1.9rem);
    }

    .cv-nb-rpm {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }
}

@keyframes cv-nb-boost {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--nubia,
    .cv--nubia .cv-ch,
    .cv-nb-rgb,
    .cv-nb-idle,
    .cv-nb-blur {
        animation: none;
    }

    /* Directamente a tope */
    .cv--nubia {
        --q: 1;
    }
}