/* Viña Rock · portada en bucle (tarjeta de la home) y dispositivos (portada del caso).
   La tarjeta se mide en unidades de una composición de 1920 × 1080 (× --u) que cubre
   su caja; si la caja es vertical, pasa a una de 1080 × 1350. Los dispositivos se
   miden en cqw de su propio contenedor, así que valen igual en la tarjeta y en el caso. */

.vr-loop{position:absolute;inset:0;overflow:hidden;background:#141110;container-type:size;--ax:.5;--ay:.5}
.vr-stage{--u:max(100cqw / 1920,100cqh / 1080);position:absolute;width:calc(1920 * var(--u));height:calc(1080 * var(--u));left:calc((100cqw - 1920 * var(--u)) * var(--ax));top:calc((100cqh - 1080 * var(--u)) * var(--ay))}
.vr-stage>*{position:absolute}
/* dentro de la tarjeta, las imágenes no heredan el relleno ni el contain de .sc-work-media img */
.vr-loop img{max-width:none;min-height:0;padding:0;transition:none;align-self:auto;justify-self:auto}
.vr-loop .vr-stage-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.vr-stage-veil{inset:0;background:linear-gradient(90deg,rgba(20,17,16,.94) 0%,rgba(20,17,16,.82) 30%,rgba(20,17,16,.2) 58%,rgba(20,17,16,.28) 100%),linear-gradient(0deg,rgba(20,17,16,.7) 0%,rgba(20,17,16,0) 34%)}
.vr-stage-copy{left:calc(150 * var(--u));top:calc(330 * var(--u));width:calc(720 * var(--u));display:flex;flex-direction:column;align-items:flex-start}
.vr-loop .vr-stage-logo{width:calc(700 * var(--u));height:auto}
.vr-stage-sub{margin-top:calc(34 * var(--u));font:600 calc(44 * var(--u))/1.18 Saira,"Bricolage Grotesque",sans-serif;color:#F6F5F4}
.vr-stage-chips{display:flex;flex-wrap:wrap;gap:calc(12 * var(--u));margin-top:calc(34 * var(--u))}
.vr-stage-chips span{display:flex;align-items:center;height:calc(52 * var(--u));padding:0 calc(22 * var(--u));border-radius:calc(26 * var(--u));background:rgba(246,245,244,.12);font:600 calc(24 * var(--u))/1 Saira,"Bricolage Grotesque",sans-serif;color:#F6F5F4;white-space:nowrap}
.vr-stage-dev{left:calc(905 * var(--u));top:calc(128 * var(--u));width:calc(880 * var(--u))}
.vr-stage .vr-stage-ticker{left:calc(-60 * var(--u));width:calc(2040 * var(--u));top:calc(938 * var(--u));--th:calc(64 * var(--u));rotate:-2deg}

/* tarjeta vertical (la home en el móvil): logo arriba, dispositivos debajo */
@container (aspect-ratio < 1.15){
.vr-stage{--u:max(100cqw / 1080,100cqh / 1350);width:calc(1080 * var(--u));height:calc(1350 * var(--u));left:calc((100cqw - 1080 * var(--u)) * .5);top:calc((100cqh - 1350 * var(--u)) * .5)}
.vr-loop .vr-stage-photo{object-position:72% 40%}
.vr-stage-veil{background:linear-gradient(180deg,rgba(20,17,16,.9) 0%,rgba(20,17,16,.66) 34%,rgba(20,17,16,.22) 62%,rgba(20,17,16,.5) 100%)}
.vr-stage-copy{left:calc(90 * var(--u));top:calc(110 * var(--u));width:calc(900 * var(--u))}
.vr-loop .vr-stage-logo{width:calc(760 * var(--u))}
.vr-stage-sub{font-size:calc(50 * var(--u))}
.vr-stage-chips span{height:calc(60 * var(--u));padding:0 calc(26 * var(--u));border-radius:calc(30 * var(--u));font-size:calc(28 * var(--u))}
.vr-stage-dev{left:calc(80 * var(--u));top:calc(560 * var(--u));width:calc(920 * var(--u))}
.vr-stage .vr-stage-ticker{top:calc(486 * var(--u));--th:calc(72 * var(--u))}
}

/* cinta: fondo rojo de la marca, texto en Saira como Industry en la web del festival */
.vr-ticker{--th:48px;height:var(--th);overflow:hidden;display:flex;align-items:center;background:#D71E17;color:#F6F5F4;box-shadow:0 calc(var(--th) * .25) calc(var(--th) * .6) rgba(0,0,0,.35)}
.vr-ticker-in{display:flex;width:max-content;animation:vrTick 46s linear infinite}
.vr-ticker-run{display:flex;align-items:center}
.vr-ticker-run>span{display:flex;align-items:center;gap:calc(var(--th) * .42);padding-right:calc(var(--th) * .42);font:800 calc(var(--th) * .46)/1 Saira,"Bricolage Grotesque",sans-serif;font-stretch:88%;white-space:nowrap;text-transform:uppercase}
.vr-ticker-run i{display:block;width:calc(var(--th) * .14);height:calc(var(--th) * .14);border-radius:50%;background:#F6F5F4}
@keyframes vrTick{to{transform:translateX(-50%)}}

/* dispositivos: 1000 × 880 de diseño, en cqw */
.vr-dev{position:relative;width:100%;aspect-ratio:1000/880;container-type:inline-size}
.vr-dev>span{position:absolute;display:block}
.vr-win{left:12cqw;top:0;width:88cqw;border-radius:1.4cqw;overflow:hidden;background:#EDEBE8;box-shadow:0 3.2cqw 6cqw -1cqw rgba(0,0,0,.55),0 .4cqw 1.2cqw rgba(0,0,0,.25)}
.vr-win-bar{display:flex;align-items:center;gap:.8cqw;height:3.6cqw;padding:0 1.6cqw}
.vr-win-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#C9C5C0}
.vr-win-bar b{flex:0 0 34%;height:1.9cqw;margin-left:auto;margin-right:auto;border-radius:1cqw;background:#FAF9F7;transform:translateX(-2cqw)}
.vr-win-scr{position:relative;display:block;height:55cqw;overflow:hidden;background:#F6F5F4}
.vr-dev .vr-win-scr img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.vr-dev.is-on .vr-win-scr img{animation:vrDesk 26s ease-in-out infinite}
@keyframes vrDesk{0%,10%{transform:translateY(0)}36%,48%{transform:translateY(-24%)}70%,80%{transform:translateY(-46%)}100%{transform:translateY(0)}}
.vr-ph{left:0;top:25.5cqw;width:28cqw;padding:.9cqw;border-radius:4.4cqw;background:#121212;box-shadow:0 3.4cqw 5.4cqw -1cqw rgba(0,0,0,.6),0 0 0 .25cqw #3A3A3A inset}
.vr-ph-scr{position:relative;display:block;aspect-ratio:393/852;overflow:hidden;border-radius:3.5cqw;background:#F6F5F4}
.vr-ph-scr img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;opacity:0;translate:16% 0;transition:opacity .32s cubic-bezier(.2,0,0,1),translate .48s cubic-bezier(.2,0,0,1)}
.vr-ph-scr img.is-prev{translate:-16% 0}
.vr-ph-scr img.is-on{opacity:1;translate:0 0}
.vr-tap{position:absolute;z-index:2;width:24%;aspect-ratio:1;margin:-12% 0 0 -12%;border-radius:50%;background:rgba(246,245,244,.55);box-shadow:0 0 0 .3cqw rgba(215,30,23,.8);opacity:0;animation:vrTap .62s cubic-bezier(0,0,.4,1) forwards}
@keyframes vrTap{0%{opacity:.95;scale:.25}100%{opacity:0;scale:1.25}}

.vr-loop.is-paused *,.vr-loop.is-paused{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
.vr-ticker-in,.vr-dev.is-on .vr-win-scr img,.vr-tap{animation:none!important}
.vr-ph-scr img{transition:none!important}
}