/* =====================================================================================
   EL JINGLE CON VIDRIO AHUMADO (DESIGN.md §8c, decidido con Christian el 18-oct)
   Lo arma js/jingle-vidrio.js la primera vez que alguien toca "¿Bailamos?" en la portada.
   Es la segunda excepción a "sin vidrio" (§6): al sonar, una pared de vidrio ahumado CAE sobre
   toda la app (header, barra de abajo y carril incluidos) y lo de atrás sigue latiendo al ritmo,
   visto a través del vidrio. Encima corre EL VIDEO DEL JINGLE en vivo (js/jingle-video.js), con el
   fondo transparente: lo de atrás se ve medio desenfocado. Abajo, la barra de avance y "Parar".
   Al final (18-oct, Christian pidió mucho más confeti, de celebración): el confeti sale DELANTE de todo con profundidad
   (lienzo .jv-cfx) en tres oleadas, con cañones desde los dos costados y serpentinas, y un papelito
   cae tan cerca del lente que tapa la pantalla. Detrás de ese tapón el vidrio se retira; cuando el
   papelito termina de pasar, la app ya está como antes.
   Capas dentro de .jv: el vidrio (1) · el video y los controles (2) · el confeti y el tapón (3).
   OJO: ningún ancestro de .jv-vidrio puede llevar opacity, filter, mask ni clip-path: cualquiera
   de esos corta el backdrop-filter (el vidrio dejaría de ver la página). Por eso .jv no se
   desvanece nunca entero; se desvanecen sus hijos.
   Con "reducir movimiento" (.jv-rm): sin caída, sin tapón y sin confeti; el vidrio entra y sale
   con un fundido (el video sigue, sin golpes de cámara).
   ===================================================================================== */
.jv{position:fixed;inset:0;z-index:2147483000;pointer-events:none;font-family:var(--fuente);color:var(--blanco-tibio);
  -webkit-tap-highlight-color:transparent}
/* con la pared puesta la página de atrás no se desplaza: ni el dedo ni la rueda (además del
   preventDefault de js/jingle-vidrio.js, que cubre los navegadores sin touch-action) */
.jv.on{pointer-events:auto;touch-action:none;overscroll-behavior:contain}
.jv.suelta{pointer-events:none}

/* ---- la pared: tinta translúcida + desenfoque de lo de atrás (9 px: con 16 la app de atrás
   parecía una foto quieta y Christian pidió ver siempre la animación de las cosas atrás). Cae desde arriba con un asiento
   corto (como algo pesado que toca el piso) y su canto de abajo brilla en damasco mientras baja.
   taste-skill-ignore: el vidrio es la excepción de DESIGN.md §8c */
.jv-vidrio{position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,28,57,.5) 0%,rgba(12,28,57,.62) 55%,rgba(12,28,57,.76) 100%);
  -webkit-backdrop-filter:blur(9px) saturate(1.45);backdrop-filter:blur(9px) saturate(1.45);
  transform:translate3d(0,-104%,0)}
/* en la compu la app de atrás tiene titulares grandes y una barra de navegación que, con 9 px y el
   velo de arriba en .5, se leían como un segundo titular al lado del karaoke. Ahí el velo de
   arriba sube a .66 y el desenfoque a 14 px: la animación de atrás se sigue viendo, el texto no */
@media (min-width:1024px){
  .jv-vidrio{background:linear-gradient(180deg,rgba(12,28,57,.66) 0%,rgba(12,28,57,.7) 55%,rgba(12,28,57,.78) 100%);
    -webkit-backdrop-filter:blur(14px) saturate(1.45);backdrop-filter:blur(14px) saturate(1.45)}
}
/* el canto: una línea de luz y la sombra que la pared proyecta sobre la app mientras cae */
.jv-vidrio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(255,176,136,0) 0%,rgba(255,176,136,.85) 50%,rgba(255,176,136,0) 100%);
  box-shadow:0 0 28px 4px rgba(255,176,136,.18)}
/* el reflejo: una banda diagonal que cruza el vidrio una vez, cuando la pared se asienta */
.jv-brillo{position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,rgba(247,240,232,0) 0%,rgba(247,240,232,.07) 45%,rgba(247,240,232,.11) 50%,rgba(247,240,232,.07) 55%,rgba(247,240,232,0) 100%);
  transform:translate3d(-180%,0,0) skewX(-12deg)}

/* ---- la escena: el video del jingle a pantalla completa (js/jingle-video.js) y, abajo, el pie ---- */
.jv-escena{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 320ms ease}
.jv.on .jv-escena{opacity:1;transition-delay:420ms}
/* el video: un lienzo transparente sobre el vidrio. Vertical en el celular, horizontal en la compu;
   js/jingle-video.js lo escala sin deformar en lo que queda arriba del pie */
.jv-video{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}

/* ---- el pie: el tiempo, la barra de avance y el botón para parar, en una píldora tinta que se lee
   también encima de la banda coral del video ---- */
.jv-pie{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 2 * var(--p-margen,16px)),620px);box-sizing:border-box;
  display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:var(--pildora,999px);
  background:rgba(12,28,57,.8);box-shadow:0 10px 30px rgba(12,28,57,.35)}
.jv-avance{display:flex;align-items:center;gap:12px;flex:1;min-width:0;font-size:var(--t-chico,.875rem);font-variant-numeric:tabular-nums;color:rgba(247,240,232,.82)}
.jv-t,.jv-d{flex:none;min-width:2.6em}
.jv-d{text-align:right}
.jv-barra{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(247,240,232,.2);overflow:hidden}
.jv-barra i{position:absolute;inset:0;display:block;border-radius:2px;background:var(--coral);transform-origin:0 50%;transform:scaleX(0)}
/* mientras baja la música: una luz corre por la barra (la página todavía no late) */
.jv.carga .jv-barra i{width:28%;transform:translateX(-110%);background:rgba(247,240,232,.55)}
.jv-parar{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;min-width:120px;padding:0 20px;border-radius:var(--pildora,999px);
  background:rgba(247,240,232,.12);border:1px solid rgba(247,240,232,.3);color:var(--blanco-tibio);
  font:inherit;font-size:1rem;font-weight:var(--peso-boton,600);line-height:1;cursor:pointer;touch-action:manipulation;
  transition:background-color 180ms ease,border-color 180ms ease,transform 140ms ease}
.jv-parar i{flex:none;display:block;width:11px;height:11px;border-radius:2px;background:currentColor}
.jv.fin .jv-parar i{display:none}
.jv-parar:active{transform:scale(.97)}
.jv-parar:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media (hover:hover){ .jv-parar:hover{background:rgba(247,240,232,.2);border-color:rgba(247,240,232,.45)} }
.jv.fin .jv-avance{opacity:.5}

/* ---- delante de todo: el confeti con profundidad y el tapón (un solo lienzo) ---- */
.jv-cfx{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}

/* lo que lee el lector de pantalla */
.jv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- celular: el pie más compacto ---- */
@media (max-width:379px){ .jv-pie{gap:10px;padding-left:14px} .jv-avance{gap:8px} .jv-parar{min-width:96px;padding:0 14px} }

/* =====================================================================================
   MOVIMIENTO
   ===================================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* la caída: entra rápido, toca abajo, sube apenas y se asienta */
  .jv.on .jv-vidrio{animation:jvCae 820ms cubic-bezier(.3,.05,.35,1) both}
  @keyframes jvCae{
    0%{transform:translate3d(0,-104%,0)}
    62%{transform:translate3d(0,1.2%,0)}
    80%{transform:translate3d(0,-.5%,0)}
    100%{transform:translate3d(0,0,0)}
  }
  /* el canto brilla mientras cae y se apaga al asentarse (si no, queda una línea al pie) */
  .jv.on .jv-vidrio::after{animation:jvCanto 820ms ease both}
  @keyframes jvCanto{0%,62%{opacity:1}100%{opacity:0}}
  .jv.sube .jv-vidrio::after{animation:none;opacity:1}
  .jv.on .jv-brillo{animation:jvBrillo 1300ms cubic-bezier(.4,0,.2,1) 640ms both}
  @keyframes jvBrillo{to{transform:translate3d(340%,0,0) skewX(-12deg)}}
  /* parar a mitad: la pared vuelve a subir */
  .jv.sube .jv-vidrio{animation:jvSube 520ms cubic-bezier(.55,0,.75,.2) both}
  @keyframes jvSube{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-104%,0)}}
  .jv.sube .jv-escena{opacity:0;transition-delay:0ms;transition-duration:180ms}
  .jv.carga .jv-barra i{animation:jvCorre 1100ms cubic-bezier(.45,0,.55,1) infinite}
  @keyframes jvCorre{from{transform:translateX(-110%)}to{transform:translateX(370%)}}
  .jv.fin .jv-avance{transition:opacity 400ms ease}
}
/* con "reducir movimiento" (lo pone también el script con .jv-rm): fundido, nada cae ni pasa */
.jv-rm .jv-vidrio{transform:none;opacity:0;transition:opacity 320ms ease;animation:none}
.jv-rm.on .jv-vidrio{opacity:1}
.jv-rm.sube .jv-vidrio{opacity:0}
.jv-rm .jv-brillo,.jv-rm .jv-vidrio::after{display:none}
.jv-rm.on .jv-escena{transition-delay:0ms}
.jv-rm.sube .jv-escena{opacity:0;transition-delay:0ms}
@media (prefers-reduced-motion:reduce){
  .jv-vidrio{transform:none;opacity:0;transition:opacity 320ms ease}
  .jv.on .jv-vidrio{opacity:1}
  .jv.sube .jv-vidrio{opacity:0}
  .jv-brillo,.jv-vidrio::after{display:none}
}
/* Windows en contraste alto: sin vidrio, un fondo liso del sistema para que la letra se lea */
@media (forced-colors:active){
  .jv-vidrio{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none}
  .jv-pie{background:Canvas;border:1px solid CanvasText}
  .jv-barra i{background:Highlight}
}