/* ============================================================================
   ahri-alfa.css — Ahri con transparencia real (assets/js/ahri-alfa.js) · landing «MejorIA × LHC TFT»
   4.ª ronda de Josema (03/10): Ahri (su 2.º vídeo, con fondo) en un marco de oro redondeado, sin caja alrededor.
   Uso: <figure class="ahri-alfa …" data-ahri-alfa aria-hidden="true"></figure>. Quien la coloca le da
   solo el ancho (o el alto): la caja guarda 5:6, la proporción del vídeo. El módulo mete dentro un
   <canvas class="ahri-alfa__lienzo"> (lo que se ve) y un <video class="ahri-alfa__video"> (no se ve).
   El marco de oro va horneado en el vídeo (ver ahri-alfa.js); aquí solo va la caja y el lienzo.
   La base va con :where() (peso cero): cualquier clase del sitio (.sorteo__ahri, .intro__ahri-cuadro)
   manda sobre ella sin depender del orden de las hojas.
   ========================================================================== */
:where(.ahri-alfa) {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 5 / 6;
}

/* El lienzo ocupa el alto de la caja, guarda 5:6 y se centra. Si la caja es más estrecha que 5:6 (la de la
   intro), sobresale por los lados: ahí el vídeo ya es transparente */
.ahri-alfa__lienzo {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  aspect-ratio: 5 / 6;
  transform: translateX(-50%);
  pointer-events: none;
}

/* El vídeo no se ve (lo pinta el lienzo), pero está dentro de la caja: Safari solo deja arrancar solos los vídeos
   que están en pantalla. Va a su tamaño natural (1200 × 720) y reducido con transform a 120 × 72: WebKit entrega
   al lienzo el fotograma al tamaño de maquetación del <video> (más pequeño, saldría borroso; medido con el WebKit
   de Playwright), y reducido no desborda ni en la caja más estrecha (150 px en la intro en móvil) */
.ahri-alfa__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  max-width: none;
  height: 720px;
  transform: scale(0.1);
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}

/* El marco de oro y su sombra vienen horneados en el vídeo (_scripts/ahri_marco.py): aquí no se dibuja ningún filo. */
/* Colores forzados (alto contraste de Windows): sin filtros */
@media (forced-colors: active) {
  .ahri-alfa--2d .ahri-alfa__lienzo { filter: none; }
}