/* Sony — fotograma 21:9 que se revela como una película, visor de rodaje y cortinilla que cierra al bajar */

@property --cv-ss {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@property --cv-ff {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.cv--sony {
    --cv-bg: #f2eee6;
    --cv-ink: #121212;
    --cv-muted: #6b665c;
    --cv-accent: #121212;
    --cv-font-display: 'Barlow', system-ui, sans-serif;
    --cv-font-body: 'Barlow', system-ui, sans-serif;
    --cv-font-lead: 'Newsreader', Georgia, serif;
    --cv-cta-bg: #121212;
    --cv-cta-ink: #fff;
    --cv-cta-radius: 0;
    --cv-cta-shadow-hover: 0 14px 28px -14px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, #f5f2eb 0%, #ebe5d9 100%);
}

.cv-sn-grain {
    inset: 0;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.24 0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* —— Película —— */
.cv-sn-stack {
    --fw: clamp(300px, min(66vw, calc((100vh - 420px) * 2.333)), 960px);
    position: relative;
}

.cv-sn-film {
    position: relative;
    display: block;
    width: var(--fw);
    margin: 0;
    background: #141414;
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6);
    --cv-anim: cv-sn-in;
    --cv-dur: 1.3s;
}

@keyframes cv-sn-in {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.96);
    }
}

.cv-sn-strip {
    position: relative;
    display: block;
    height: clamp(18px, 2.6vh, 26px);
    overflow: hidden;
}

.cv-sn-holes {
    display: flex;
    width: 200%;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    translate: calc(var(--p) * -12%) 0;
    animation: cv-sn-run 9s linear infinite;
}

.cv-sn-holes i {
    width: clamp(8px, 0.9vw, 13px);
    height: 48%;
    border-radius: 2px;
    background: #efe9dd;
}

@keyframes cv-sn-run {
    to { transform: translateX(-50%); }
}

.cv-sn-code {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    background: #141414;
    font-family: 'Barlow', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #e8a23a;
}

.cv-sn-frame {
    position: relative;
    display: block;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: #000;
    animation: cv-sn-develop 2.2s ease 0.4s both;
}

@keyframes cv-sn-develop {
    from { filter: brightness(0) sepia(1); }
    40% { filter: brightness(0.5) sepia(0.8); }
}

.cv-sn-frame > span {
    position: absolute;
}

.cv-sn-sky {
    inset: 0;
    background: linear-gradient(180deg, #1c2747 0%, #5a3d6b 32%, #e07a5f 62%, #f6c27a 82%, #f8dca0 100%);
}

.cv-sn-sun {
    left: 58%;
    top: 46%;
    width: 14%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0%, #ffd27a 45%, rgba(255, 170, 90, 0) 72%);
    animation: cv-sn-sun 24s ease-in-out infinite alternate;
}

@keyframes cv-sn-sun {
    to { transform: translateY(18%) scale(1.06); }
}

.cv-sn-hills {
    left: -6%;
    right: -6%;
    bottom: 0;
    animation: cv-sn-pan 22s ease-in-out infinite alternate;
}

.cv-sn-hills--back {
    height: 52%;
    background: #6a3f5c;
    clip-path: polygon(0 62%, 12% 40%, 22% 52%, 36% 22%, 48% 46%, 60% 30%, 72% 50%, 84% 26%, 100% 48%, 100% 100%, 0 100%);
    opacity: 0.85;
}

.cv-sn-hills--front {
    height: 36%;
    background: #1b1424;
    clip-path: polygon(0 40%, 18% 62%, 30% 34%, 44% 58%, 58% 40%, 70% 66%, 86% 38%, 100% 56%, 100% 100%, 0 100%);
    animation-duration: 16s;
    animation-direction: alternate-reverse;
}

@keyframes cv-sn-pan {
    to { transform: translateX(4%); }
}

/* Visor */
.cv-sn-hud {
    inset: 7% 4%;
}

.cv-sn-hud i {
    position: absolute;
    width: 5%;
    height: 12%;
    border: 0 solid rgba(255, 255, 255, 0.75);
}

.cv-sn-hud i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.cv-sn-hud i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.cv-sn-hud i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.cv-sn-hud i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }

.cv-sn-rec,
.cv-sn-tc,
.cv-sn-spec {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(0.62rem, 0.85vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.88);
    animation: cv-fade 0.8s ease 2s both;
}

.cv-sn-rec {
    left: 7%;
    top: 11%;
}

.cv-sn-rec::before {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.5em;
    border-radius: 50%;
    background: #ff3b30;
    vertical-align: -0.05em;
    animation: cv-pulse 1s steps(2, jump-none) infinite;
}

.cv-sn-tc {
    right: 7%;
    top: 11%;
    font-variant-numeric: tabular-nums;
}

.cv-sn-ss {
    animation: cv-sn-ss 60s linear 2s infinite;
    counter-reset: ss var(--cv-ss);
}

.cv-sn-ff {
    animation: cv-sn-ff 1s steps(24, end) 2s infinite;
    counter-reset: ff var(--cv-ff);
}

.cv-sn-ss::after {
    content: counter(ss, decimal-leading-zero);
}

.cv-sn-ff::after {
    content: counter(ff, decimal-leading-zero);
}

.cv-sn-ss,
.cv-sn-ff {
    font-weight: 700;
}

@keyframes cv-sn-ss {
    from { --cv-ss: 0; }
    to { --cv-ss: 59; }
}

@keyframes cv-sn-ff {
    from { --cv-ff: 0; }
    to { --cv-ff: 24; }
}

.cv-sn-spec {
    right: 7%;
    bottom: 11%;
}

/* Cortinilla: las bandas negras se cierran al bajar */
.cv-sn-bars {
    inset: 0;
    pointer-events: none;
}

.cv-sn-bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--p) * 51%);
    background: #050505;
}

.cv-sn-bars i:first-child { top: 0; }
.cv-sn-bars i:last-child { bottom: 0; }

/* —— Título sobre el fotograma —— */
.cv-sn-title {
    position: absolute;
    left: calc(var(--fw) * 0.06);
    bottom: calc(clamp(18px, 2.6vh, 26px) + var(--fw) * 0.04);
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-align: left;
    opacity: calc(1 - var(--p) * 1.4);
}

.cv--sony .cv__title {
    margin: 0;
    font-size: clamp(2.6rem, calc(var(--fw) * 0.11), 6.4rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 0.9;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

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

.cv--sony .cv__kicker {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.1rem, calc(var(--fw) * 0.026), 1.6rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
}

.cv--sony .cv__lead {
    margin-top: clamp(14px, 2.4vh, 24px);
    max-width: 44ch;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-style: italic;
}

.cv--sony .cv__meta {
    color: var(--cv-muted);
}

/* La película se queda visible hasta que la cortinilla casi ha cerrado */
.cv--sony .cv__copy {
    opacity: calc(1 - max(0, var(--p) - 0.55) * 2);
}

@media (max-width: 900px) {
    .cv-sn-stack {
        --fw: calc(100vw - 40px);
    }

    .cv-sn-code,
    .cv-sn-spec {
        display: none;
    }
}