/* ============================================================
   IvaniaTV · tv-app · css/intro.css
   La capa de la INTRO: el logotipo animado del estudio, una vez, al abrir.

   Es una capa POR ENCIMA del lienzo, no una pantalla del director. La
   televisión arranca por detrás —pareo, canal, primera pantalla— mientras
   esto se reproduce, y al terminar se retira y deja ver lo que haya. Por eso
   no hay aquí ni un rótulo: mientras la intro corre, la aplicación no ha
   dicho nada todavía, y una intro con letras encima sería una pantalla de
   carga disfrazada.

   Sin controles (orden de Roberto, 21/9/2026): no hay botón de saltar ni de
   sonido. **El vídeo SUENA** desde la 1.0.2 —segunda orden del mismo día,
   después de ver la 1.0.1 sin audio en la LG de recepción—: la pieza es
   `intro-logo-2x-*.mp4`, con pista AAC. El único mando que existe es el
   rótulo «Toca para empezar» de abajo, y sólo aparece donde hay dedos.

   Piso del motor de esta hoja: **Chromium 53** (webOS 4.5, la TV de
   recepción), por debajo del piso del programa. Por eso aquí no hay `inset`
   (Chromium 87), ni `gap` (84), ni las funciones de comparación de CSS (79),
   ni Grid (57). `object-fit` sí: está desde Chromium 31.

   Ocampo-Infra Agent System · autor Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */

/* El fondo es `--tv-fondo` (#1A1614, ESTETICA-TV §3.2) y no el negro del
   vídeo: si el motor tardara en pintar el primer cuadro, lo que se ve es el
   fondo de la casa y no un rectángulo negro de procedencia desconocida.
   Con el vídeo de 1920x1080 sobre un lienzo de 1920x1080 no queda ni un
   píxel de fondo a la vista; está para el instante anterior y para el caso
   en que el archivo no cargue. */
.tv-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tv-ancho);
  height: var(--tv-alto);
  z-index: 9000;
  /* Negro y no `--tv-fondo`: el ident v3b tiene los bordes y la cola
     (f114–f117) en 0,0,0; sobre #1A1614 se vería un rectángulo (revisor,
     stand-l7). El fundido de salida de la capa ya lleva al fondo de la app. */
  background-color: #000000;
  opacity: 1;
  transition: opacity var(--tv-dur-escena) var(--tv-ease);
}

/* La salida. La clase la pone `js/intro.js` y, pasada la transición, retira
   el nodo entero: una capa invisible que se queda encima del lienzo se come
   el foco del control remoto y nadie sabe por qué. */
.tv-intro.es-saliendo {
  opacity: 0;
}

.tv-intro-video {
  display: block;
  width: var(--tv-ancho);
  height: var(--tv-alto);
  /* `contain` y no `cover`: la pieza es 16:9 exacto sobre un lienzo 16:9
     exacto, así que no hay recorte que hacer; y si algún día se sustituye
     por otra de proporción distinta, `contain` la enseña entera —que es lo
     que se espera de un logotipo— en vez de cortarle un lado. */
  object-fit: contain;
  background-color: #000000;
}

/* EL INSTANTE DEL DEDO — sólo en aparatos táctiles (iPhone, iPad).

   WebKit no deja sonar sin un gesto: «If a <video> element gains an audio
   track or becomes un-muted without a user gesture, playback will pause»
   [WebKit, *New <video> Policies for iOS*,
    https://webkit.org/blog/6784/new-video-policies-for-ios/]. Así que ahí la
   intro enseña un instante este rótulo sobre el fondo de la casa; si llega
   el toque, suena, y si no llega en 1.6 s arranca en silencio.

   En la televisión NO se pinta nunca: `js/intro.js` sólo lo monta si el
   aparato declara puntos de toque. Un televisor da falso, y por eso en la
   pared no aparece un rótulo que nadie podría tocar.

   Centrado con `margin-left` negativo y no con `transform` ni con Grid:
   Chromium 53 tiene las dos cosas a medias y esta es la forma que no supone
   nada. `letter-spacing` y el cuerpo salen de los tokens del rótulo, que es
   lo que este texto es. */
.tv-intro-toque {
  position: absolute;
  left: 50%;
  bottom: var(--tv-e8);
  width: 600px;
  margin-left: -300px;
  text-align: center;
  font-size: var(--tv-fs-rotulo);
  line-height: var(--tv-cromo-linea);
  letter-spacing: var(--tv-tracking-rotulo);
  text-transform: uppercase;
  color: var(--tv-texto-2);
  /* Late despacio, con la misma animación del punto de «En línea», para que
     se lea como una invitación y no como un aviso. */
  animation: tv-latido 2000ms var(--tv-ease) infinite;
}
/* Bandera de la sala, no la consulta de medios de movimiento del sistema:
   las televisiones no la informan (ESTETICA-TV §7.4). */
.tv-motion-reduced .tv-intro-toque { animation: none; }