/* Honor — «cada año, más fino».
   Un calibre digital mide el trazo de la «H» sobre una mesa de granito negro, la de un laboratorio de
   metrología. --q (0 → 1) es el avance: en escritorio, el de la portada fijada (--p); en móvil, una animación
   que se reproduce sola (la portada no se fija). Al avanzar, el trazo de las letras (--sw) baja por escalones,
   la mordaza del calibre lo sigue y la pantalla pasa por el grosor plegado de cada Magic V. */

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

.cv--honor {
    --q: var(--p);
    --ho-ink: #f2f2f4;
    --ho-muted: rgba(232, 233, 237, 0.7);
    --ho-line: rgba(232, 233, 237, 0.16);
    --ho-lcd: #b9c4a8;
    --cv-bg: #141416;
    --cv-ink: var(--ho-ink);
    --cv-muted: var(--ho-muted);
    --cv-hint: rgba(232, 233, 237, 0.66);
    --cv-accent: var(--ho-lcd);
    --cv-font-display: 'Barlow', system-ui, sans-serif;
    --cv-font-body: 'Barlow', system-ui, sans-serif;
    --cv-font-kicker: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    color: var(--ho-ink);
    background: #141416;
}

.cv--honor ::selection {
    color: #141416;
    background: var(--ho-lcd);
}

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

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

/* —— Mesa de granito: motas oscuras y claras sobre negro, y la luz cenital del laboratorio —— */
.cv-ho-stone {
    inset: 0;
    background-color: #141416;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -8 0 0 0 3.4'/></filter><rect width='320' height='320' filter='url(%23f)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.22 0 0 0 -0.08'/></filter><rect width='600' height='600' filter='url(%23f)'/></svg>");
    background-size: 320px 320px, 600px 600px;
}

.cv-ho-flecks {
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.8  0 0 0 0 0.82  12 0 0 0 -7.9'/></filter><rect width='280' height='280' filter='url(%23f)'/></svg>");
    background-size: 280px 280px;
    opacity: 0.16;
}

.cv-ho-light {
    inset: 0;
    background:
        radial-gradient(70% 60% at 50% 16%, rgba(255, 255, 255, 0.08), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* —— El dibujo: letras y calibre en un mismo SVG —— */
.cv--honor .cv-ho-title {
    margin: 0;
    font-size: 1rem;
    line-height: 0;
}

.cv-ho-svg {
    /* Escalones del trazo: cada uno se recorre en 0,12 de avance, centrado en el cambio de lectura */
    --c1: clamp(0, (var(--q) - 0.14) / 0.12, 1);
    --c2: clamp(0, (var(--q) - 0.42) / 0.12, 1);
    --c3: clamp(0, (var(--q) - 0.7) / 0.12, 1);
    --sw: calc(var(--sw0) - (var(--sw0) - var(--sw1)) * var(--c1) - (var(--sw1) - var(--sw2)) * var(--c2) - (var(--sw2) - var(--sw3)) * var(--c3));
    display: block;
    width: min(100%, 1060px);
    width: min(100%, 1060px, (100svh - 400px) * 2.57);
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

/* Letras hechas de piezas (barras de 1 unidad y aros) que cambian de grueso sin moverse de su sitio.
   Color liso de aluminio satinado: un degradado se deformaría al escalar cada pieza y no casaría entre ellas */
.cv-ho-l {
    fill: #e4e5e9;
    transform-box: fill-box;
}

.cv-ho-stem {
    transform-origin: 0 0;
    transform: scaleX(var(--sw));
}

.cv-ho-stem--r {
    transform-origin: 100% 0;
}

.cv-ho-bar {
    transform-origin: 50% 50%;
    transform: scaleY(var(--sw));
}

.cv-ho-bar--top {
    transform-origin: 50% 0;
}

.cv-ho-bar--bottom {
    transform-origin: 50% 100%;
}

.cv-ho-diag {
    transform-origin: 50% 50%;
    transform: rotate(52.77deg) scaleY(var(--sw));
}

.cv-ho-leg {
    transform-origin: 50% 50%;
    transform: rotate(50.71deg) scaleY(var(--sw));
}

/* Aros (las «O» y la panza de la «R»): el borde exterior se queda quieto y el hueco crece; se escala el aro
   y se compensa el grosor del trazo para que quede exactamente --sw */
.cv-ho-ring,
.cv-ho-bowl {
    fill: none;
    stroke: #e4e5e9;
    transform-box: fill-box;
}

.cv-ho-ring {
    --s: calc(1 - var(--sw) / 100);
    transform-origin: 50% 50%;
    transform: scale(var(--s));
    stroke-width: calc(var(--sw) * 1px / var(--s));
}

.cv-ho-bowl {
    --s: calc(1 - var(--sw) / 60);
    transform-origin: 0 50%;
    transform: scale(var(--s));
    stroke-width: calc(var(--sw) * 1px / var(--s));
}

/* El calibre: acero satinado y una corredera de plástico negro con su pantalla */
.cv-ho-steel {
    fill: url(#cv-ho-steel);
    stroke: rgba(20, 22, 26, 0.35);
    stroke-width: 0.6;
}

.cv-ho-groove {
    stroke: rgba(30, 33, 38, 0.3);
    stroke-width: 0.8;
}

.cv-ho-ticks {
    fill: none;
    stroke: #33363c;
    stroke-width: 0.7;
}

.cv-ho-body {
    fill: url(#cv-ho-plastic);
    stroke: #0e0f11;
    stroke-width: 0.8;
}

.cv-ho-sheen {
    fill: rgba(255, 255, 255, 0.16);
}

.cv-ho-screw {
    fill: url(#cv-ho-steel);
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 0.6;
}

.cv-ho-glass {
    fill: url(#cv-ho-glass);
    stroke: #0d0e10;
    stroke-width: 2.2;
}

.cv-ho-ghost,
.cv-ho-reads {
    fill: #222a1c;
}

/* Segmentos apagados: se adivinan, como en cualquier pantalla LCD */
.cv-ho-ghost {
    opacity: 0.08;
}

.cv-ho-unit {
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    fill: #222a1c;
}

.cv-ho-key {
    fill: #4a4d55;
    stroke: #0e0f11;
    stroke-width: 0.6;
}

.cv-ho-wheel {
    fill: url(#cv-ho-steel);
    stroke: #4a4f57;
    stroke-width: 2.4;
    stroke-dasharray: 1.1 1.1;
}

/* —— Al bajar: la corredera sigue al trazo y la pantalla cambia de lectura —— */
.cv-ho-slider {
    transform: translateX(calc(var(--sw) * 1px));
}

.cv-ho-read,
.cv-ho-steps li {
    /* 1 mientras --q está en [--a, --b): la lectura de ese Magic V */
    --on: calc(clamp(0, (var(--q) - var(--a)) * 60 + 0.5, 1) * clamp(0, (var(--b) - var(--q)) * 60 + 0.5, 1));
}

.cv-ho-read {
    opacity: var(--on);
}

/* —— Entrada: aparecen las letras, el calibre llega abierto y en alto, se cierra al ancho del trazo y baja
   hasta abrazar la «H»; luego se enciende la pantalla —— */
.cv-ho-letters {
    animation: cv-ho-letters 1.1s var(--cv-ease) 0.1s both;
}

@keyframes cv-ho-letters {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.cv-ho-caliper {
    animation: cv-ho-arrive 2.4s var(--cv-ease) 0.3s both;
}

@keyframes cv-ho-arrive {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    25% {
        opacity: 1;
        transform: translateY(-60px);
    }
    58% {
        transform: translateY(-60px);
        animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cv-ho-slider-in {
    animation: cv-ho-close 1.3s var(--cv-ease-io) 0.6s both;
}

@keyframes cv-ho-close {
    from { transform: translateX(150px); }
}

.cv-ho-reads {
    animation: cv-ho-power 0.5s linear 2.55s both;
}

@keyframes cv-ho-power {
    0%, 30% { opacity: 0; }
    31%, 55% { opacity: 1; }
    56%, 70% { opacity: 0.15; }
    71%, 100% { opacity: 1; }
}

@media (min-width: 901px) {
    .cv-ho-letters {
        filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.45));
    }

    .cv-ho-caliper {
        filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));
    }
}

/* —— Texto —— */
.cv-ho-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px clamp(28px, 5vw, 72px);
    /* Mismo ancho que el dibujo, para que el texto arranque donde empieza el calibre */
    width: min(100%, 1060px);
    width: min(100%, 1060px, (100svh - 400px) * 2.57);
    margin: clamp(10px, 2.6vh, 30px) auto 0;
    padding-top: clamp(14px, 2.2vh, 22px);
    border-top: 1px solid var(--ho-line);
}

.cv-ho-line {
    margin: 0;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: clamp(1.7rem, 3.1vw, 2.75rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ho-ink);
}

.cv--honor .cv__lead {
    margin-top: clamp(6px, 1.2vh, 12px);
    max-width: 36ch;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    font-weight: 400;
    color: rgba(242, 242, 244, 0.86);
}

.cv-ho-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 22px;
    margin-top: clamp(12px, 2vh, 20px);
}

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

.cv--honor .cv__stats strong {
    color: var(--ho-ink);
}

/* Las cuatro lecturas: se marca la que enseña la pantalla */
.cv-ho-gauge {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cv-ho-steps {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0 clamp(14px, 2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-ho-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 2px solid var(--ho-line);
}

.cv-ho-steps li::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: var(--ho-lcd);
    transform: scaleX(var(--on));
    transform-origin: left;
}

.cv-ho-steps__year {
    font-family: var(--cv-font-kicker);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--ho-lcd) calc(var(--on) * 100%), rgba(232, 233, 237, 0.7));
}

.cv-ho-steps__mm {
    font-size: 0.9rem;
    color: var(--ho-muted);
    white-space: nowrap;
}

.cv-ho-steps__mm b {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ho-ink);
    opacity: calc(0.6 + var(--on) * 0.4);
}

.cv-ho-steps__model {
    font-size: 0.86rem;
    color: var(--ho-muted);
    white-space: nowrap;
}

.cv-ho-steps__model a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    pointer-events: auto;
    transition: color 0.25s, border-color 0.25s;
}

.cv-ho-steps__model a:hover {
    color: var(--ho-ink);
    border-color: var(--ho-lcd);
}

.cv-ho-steps__model a:focus-visible {
    outline: 2px solid var(--ho-lcd);
    outline-offset: 3px;
}

.cv-ho-note {
    margin: 0;
    max-width: 38ch;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ho-muted);
}

/* —— Móvil: la medición se reproduce sola tras la entrada; el calibre se sale por la derecha —— */
@media (max-width: 900px) {
    .cv--honor {
        --q: 0;
        animation: cv-ho-measure 4s linear 2.9s both;
    }

    .cv-ho-svg {
        width: calc(100% + 64px);
        max-width: none;
        margin: 0 -58px 0 -6px;
    }

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

    .cv-ho-line {
        font-size: clamp(1.6rem, 7.4vw, 2.2rem);
    }

    .cv-ho-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 10px;
    }

    .cv-ho-steps__mm b {
        font-size: 1.3rem;
    }
}

@keyframes cv-ho-measure {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--honor,
    .cv-ho-letters,
    .cv-ho-caliper,
    .cv-ho-slider-in,
    .cv-ho-reads {
        animation: none;
    }

    /* Directamente la última lectura */
    .cv--honor {
        --q: 1;
    }
}