/* Apple — «menos ruido».
   Un muro de funciones del iPhone que se apaga palabra a palabra al bajar hasta dejar el lema.
   --q (0 → 1) es el avance: en escritorio, el de la portada fijada (--p); en móvil, el del scroll
   (o una animación que la resuelve sola si el navegador no enlaza animaciones al scroll). */

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

.cv--apple {
    --q: var(--p);
    --cv-bg: #fbfbfd;
    --cv-ink: #1d1d1f;
    --cv-muted: #6e6e73;
    --cv-hint: #86868b;
    --cv-font-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --cv-font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    color: var(--cv-ink);
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
}

.cv--apple ::selection {
    color: #ffffff;
    background: #0071e3;
}

/* Luz cenital muy suave, como un estudio fotográfico */
.cv-ap-sheen {
    inset: 0;
    background:
        radial-gradient(70% 55% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(90% 60% at 50% 110%, rgba(210, 210, 215, 0.45), transparent 70%);
}

/* El remate (el lema) llega al final del recorrido: aquí el texto no se desvanece al bajar como en las demás portadas */
.cv--apple .cv__copy {
    opacity: 1;
    transform: none;
}

/* —— Nombre —— */
.cv--apple .cv__title {
    font-size: clamp(4.2rem, min(15vw, 24vh), 12.5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #1d1d1f;
    transform: translateY(calc(var(--q) * -1.2vh)) scale(calc(1 - var(--q) * 0.08));
    transform-origin: 50% 0;
}

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

@keyframes cv-ap-letter {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 0.12em, 0);
    }
}

/* —— El muro y el lema, en el mismo sitio —— */
.cv-ap-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(1000px, 100%);
    height: clamp(230px, 37vh, 390px);
    margin: clamp(12px, 3vh, 30px) auto 0;
}

.cv-ap-noise {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 0.25em 0.6em;
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
}

/* --x: cuánto se ha apagado esta palabra (0 → 1) según su momento --t */
.cv-ap-w {
    --x: clamp(0, calc((var(--q) - var(--t)) * 6), 1);
    display: inline-block;
    white-space: nowrap;
    opacity: max(0.07, calc(1 - var(--x)));
    filter: blur(calc(var(--x) * 3px));
    transform: translateY(calc(var(--x) * -10px)) scale(calc(1 - var(--x) * 0.06));
    animation: cv-ap-word-in 0.8s var(--cv-ease) backwards;
    animation-delay: calc(560ms + var(--i) * 26ms);
}

/* Entrada sin fijar valores finales: al terminar manda el avance del scroll */
@keyframes cv-ap-word-in {
    from {
        opacity: 0;
        translate: 0 10px;
    }
}

.cv-ap-w--s {
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    color: #a1a1a6;
}

.cv-ap-w--m {
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    color: #86868b;
}

.cv-ap-w--l {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    color: #6e6e73;
}

.cv-ap-essence {
    position: relative;
    text-align: center;
    pointer-events: none;
}

.cv-ap-essence__a {
    --y: clamp(0, calc((var(--q) - 0.42) * 3.2), 1);
    margin: 0;
    font-size: clamp(2.6rem, 6.2vw, 5.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #1d1d1f;
    opacity: var(--y);
    filter: blur(calc((1 - var(--y)) * 8px));
    transform: scale(calc(1.08 - var(--y) * 0.08));
}

.cv-ap-essence__b {
    --z: clamp(0, calc((var(--q) - 0.6) * 3.5), 1);
    margin: 0.45em 0 0;
    font-size: clamp(1.25rem, 2.3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #424245;
    opacity: var(--z);
    transform: translateY(calc((1 - var(--z)) * 12px));
}

.cv-ap-essence__c {
    --w: clamp(0, calc((var(--q) - 0.74) * 4), 1);
    margin: 1.2em 0 0;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 500;
    color: #6e6e73;
    opacity: var(--w);
    transform: translateY(calc((1 - var(--w)) * 10px));
}

/* —— Pie —— */
.cv-ap-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: clamp(10px, 2.4vh, 24px);
}

.cv--apple .cv__meta {
    margin: 0;
    letter-spacing: 0.1em;
    color: #6e6e73;
}

.cv--apple .cv__stats {
    margin: 0;
    color: #6e6e73;
}

.cv--apple .cv__stats strong {
    color: #1d1d1f;
}

.cv--apple .cv__stat--latest {
    color: #0066cc;
}

/* —— Móvil: la portada no se fija; el avance va con el scroll de la página —— */
@media (max-width: 900px) {
    .cv--apple {
        --q: 0;
        animation: cv-ap-resolve 2.4s var(--cv-ease) 2.6s both; /* sin animaciones enlazadas al scroll: se resuelve sola */
    }

    @supports (animation-timeline: scroll()) {
        .cv--apple {
            animation: cv-ap-resolve linear both;
            animation-timeline: scroll(root);
            animation-range: 0 60vh;
        }
    }

    .cv--apple .cv__title {
        font-size: clamp(3.6rem, 22vw, 6.5rem);
    }

    .cv-ap-stage {
        height: clamp(300px, 50vh, 440px);
    }

    .cv-ap-noise {
        gap: 0.2em 0.5em;
    }

    .cv-ap-w--s { font-size: 0.82rem; }
    .cv-ap-w--m { font-size: 0.98rem; }
    .cv-ap-w--l { font-size: 1.2rem; }
}

@keyframes cv-ap-resolve {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--apple,
    .cv--apple .cv-ch,
    .cv-ap-w {
        animation: none;
    }

    /* Directamente el resultado: el lema, con el muro como un rastro tenue detrás */
    .cv--apple {
        --q: 1;
    }

    .cv--apple .cv__title {
        transform: none;
    }
}