/* Google — «la foto se resuelve con software».
   Una foto nocturna de ciudad que empieza como una sola toma (oscura, con grano, sin color) y se revela al
   combinar tomas. --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 y la foto saldría de pantalla antes de revelarse). */

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

.cv--google {
    --q: var(--p);
    --g-blue: #4285f4;
    --g-red: #ea4335;
    --g-yellow: #fbbc05;
    --g-green: #34a853;
    --cv-bg: #070b1f;
    --cv-ink: #ffffff;
    --cv-muted: rgba(255, 255, 255, 0.76);
    --cv-hint: rgba(255, 255, 255, 0.72);
    --cv-font-display: 'Figtree', system-ui, sans-serif;
    --cv-font-body: 'Figtree', system-ui, sans-serif;
    --cv-font-kicker: 'DM Mono', ui-monospace, monospace;
    justify-content: flex-end;
    color: #ffffff;
    background: #070b1f;
}

.cv--google ::selection {
    color: #ffffff;
    background: var(--g-blue);
}

/* El pie de foto no se desvanece al bajar: el final (la foto ya revelada) se lee con él */
.cv--google .cv__copy {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    opacity: 1;
    transform: none;
}

.cv--google .cv__stage {
    justify-items: stretch;
}

/* —— La escena —— */
.cv-gg-sky {
    inset: 0;
    background:
        radial-gradient(70% 26% at 50% 76%, rgba(255, 150, 90, 0.42), transparent 70%),
        linear-gradient(180deg, #070b1f 0%, #111a46 36%, #282660 60%, #47345f 72%, #2b2246 78%);
}

.cv-gg-stars {
    inset: 0 0 42% 0;
    background-image:
        radial-gradient(1px 1px at 37px 61px, #fff, transparent),
        radial-gradient(1px 1px at 211px 23px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.4px 1.4px at 131px 141px, #fff, transparent),
        radial-gradient(1px 1px at 289px 107px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 83px 197px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 331px 233px;
    opacity: calc(0.25 + var(--q) * 0.65);
}

.cv-gg-moon {
    top: 15%;
    right: 15%;
    width: clamp(46px, 5vw, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fffdf3 0%, #ece6d2 58%, #cfc7ad 100%);
    box-shadow:
        0 0 34px 10px rgba(255, 244, 210, 0.22),
        0 0 120px 40px rgba(180, 190, 255, 0.12);
}

/* La ciudad: edificios con ventanas; el reflejo en el agua lo hace -webkit-box-reflect (Chromium y Safari) */
.cv-gg-city {
    left: 0;
    right: 0;
    top: 0;
    bottom: 22%;
    -webkit-box-reflect: below 0 linear-gradient(transparent 38%, rgba(255, 255, 255, 0.3));
}

.cv-gg-bld {
    --wc: rgba(255, 206, 130, 0.95);
    position: absolute;
    bottom: 0;
    left: var(--x);
    width: var(--w);
    height: var(--h);
    background: linear-gradient(180deg, #171b37 0%, #0b0e22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cv-gg-bld--cool {
    --wc: rgba(176, 206, 255, 0.9);
    background: linear-gradient(180deg, #131a3a 0%, #0a0d24 100%);
}

/* Ventanas: una rejilla de luces y, encima, otra más ancha que apaga algunas para que no sea regular */
.cv-gg-bld::before {
    content: '';
    position: absolute;
    inset: 9% 12% 5%;
    background-image:
        radial-gradient(circle, #0d1028 0 1.9px, transparent 2.3px),
        radial-gradient(circle, var(--wc) 0 1.1px, transparent 1.6px);
    background-size: 19px 23px, 7px 9px;
    background-position: var(--o) 3px, 0 0;
    opacity: calc(0.18 + var(--q) * 0.82);
}

.cv-gg-water {
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(36, 30, 70, 0.55) 0%, rgba(6, 8, 22, 0.92) 100%);
}

/* Luces desenfocadas del paseo (bokeh) */
.cv-gg-bokeh {
    left: 0;
    right: 0;
    bottom: 4%;
    height: 18%;
}

.cv-gg-bokeh i {
    position: absolute;
    left: var(--x);
    bottom: 12%;
    width: var(--sz);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 120, 0.6) 0%, rgba(255, 196, 120, 0.16) 58%, transparent 72%);
    opacity: calc(0.25 + var(--q) * 0.75);
}

.cv-gg-bokeh i:nth-child(even) {
    bottom: 46%;
}

.cv-gg-bokeh i:nth-child(3n) {
    background: radial-gradient(circle, rgba(150, 190, 255, 0.55) 0%, rgba(150, 190, 255, 0.14) 58%, transparent 72%);
}

.cv-gg-bokeh i:nth-child(4n) {
    background: radial-gradient(circle, rgba(255, 110, 100, 0.5) 0%, rgba(255, 110, 100, 0.12) 58%, transparent 72%);
}

/* —— El «revelado»: lo que se va quitando al combinar tomas —— */

/* Subexposición de una sola toma */
.cv-gg-under {
    inset: 0;
    background: #000000;
    opacity: calc(0.62 * (1 - var(--q)));
}

/* Casi sin color */
.cv-gg-mono {
    inset: 0;
    background: #808080;
    mix-blend-mode: saturation;
    opacity: calc(0.9 * (1 - var(--q)));
}

/* Ruido del sensor: se reduce al combinar tomas (queda un grano fino, como en una foto real) */
.cv-gg-grain {
    inset: -40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    mix-blend-mode: soft-light;
    opacity: calc(0.14 + (1 - var(--q)) * 0.62);
    animation: cv-gg-noise 0.5s steps(4) infinite;
}

@keyframes cv-gg-noise {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-17px, 9px); }
    50% { transform: translate(11px, -13px); }
    75% { transform: translate(-7px, -19px); }
}

/* Viñeta y velo bajo el pie de foto, para que el texto se lea sobre cualquier zona */
.cv-gg-vignette {
    inset: 0;
    background:
        linear-gradient(0deg, rgba(4, 6, 18, 0.82) 0%, rgba(4, 6, 18, 0.35) 34%, transparent 58%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

/* —— Pie de foto —— */
.cv-gg-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.cv-gg-exif {
    display: flex;
    gap: 8px;
    margin: 0 0 clamp(10px, 2vh, 18px);
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.82rem;
}

.cv-gg-exif span {
    padding: 3px 9px;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 6px;
}

.cv--google .cv__title {
    font-size: clamp(4rem, min(13vw, 22vh), 11rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

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

@keyframes cv-gg-letter {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 0.1em, 0);
    }
}

.cv-gg-line {
    max-width: 22ch;
    margin: clamp(8px, 1.6vh, 14px) 0 0;
    font-size: clamp(1.45rem, 2.7vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.cv--google .cv__lead {
    margin-top: clamp(6px, 1.2vh, 12px);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.cv-gg-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    width: 100%;
    margin-top: clamp(16px, 3vh, 28px);
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cv-gg-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.cv--google .cv__stats strong {
    color: #ffffff;
}

/* Indicador de tomas (ilustrativo): se van encendiendo en los cuatro colores de Google */
.cv-gg-frames {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cv-gg-frames__ticks {
    display: flex;
    gap: 4px;
}

.cv-gg-frames__ticks i {
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: var(--g-blue);
    opacity: clamp(0.16, calc(var(--q) * 13 - var(--i)), 1);
}

.cv-gg-frames__ticks i:nth-child(4n + 2) { background: var(--g-red); }
.cv-gg-frames__ticks i:nth-child(4n + 3) { background: var(--g-yellow); }
.cv-gg-frames__ticks i:nth-child(4n) { background: var(--g-green); }

.cv-gg-frames__status {
    display: grid;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.cv-gg-frames__status b {
    grid-area: 1 / 1;
    font-weight: 500;
}

.cv-gg-frames__status b:first-child {
    opacity: calc(1 - clamp(0, (var(--q) - 0.86) * 10, 1));
}

.cv-gg-frames__status b:last-child {
    opacity: clamp(0, (var(--q) - 0.86) * 10, 1);
}

/* —— Móvil: el revelado se reproduce solo, con la foto a la vista —— */
@media (max-width: 900px) {
    .cv--google {
        --q: 0;
        animation: cv-gg-develop 3.4s var(--cv-ease) 1.3s both;
    }

    .cv--google .cv__title {
        font-size: clamp(3.4rem, 19vw, 6rem);
    }

    .cv-gg-moon {
        top: 18%;
        right: 10%;
    }

    .cv-gg-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@keyframes cv-gg-develop {
    from { --q: 0; }
    to { --q: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cv--google,
    .cv--google .cv-ch,
    .cv-gg-grain {
        animation: none;
    }

    /* Directamente la foto revelada */
    .cv--google {
        --q: 1;
    }
}