/* Animacion de entrada: un video de marca que se reproduce una sola vez por
   sesion, la primera vez que se abre el sitio. Vive aparte de estilos.css
   porque solo la usa el inicio.

   Va justo despues de </header>, y no antes de <header>: asi el script
   inline de al lado (ver catalogo.html) puede medir el alto real ya
   renderizado de la cabecera y dejar `top` exacto, sin taparla ni dejar un
   hueco. Igual corre antes de <main>, asi que el resto de la pagina real
   sigue sin parpadear detras.

   Antes vivia DENTRO de <main>, en flujo normal debajo de la cabecera -- pero
   el inicio tiene un orden de secciones editable desde el panel interno
   (aplicarLayout(), en comun.js) que reordena todo lo que trae
   `data-seccion` dentro de <main> despues de que carga /api/sitio. Ese
   reacomodo sacaba el video de su lugar (y de paso lo pausaba) unos
   segundos despues de la carga. Por eso es un overlay `fixed`, inmune a ese
   reacomodo, con un z-index MENOR al de la cabecera (que ya trae su propio
   `isolation: isolate`) para que el navbar se siga viendo y se pueda usar
   por encima del video. */

html.con-intro { overflow: hidden; }

.intro-video {
  position: fixed;
  /* `top` lo pone el script inline, midiendo el alto real de la cabecera. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Negro puro, no el #181923 del resto del sitio: es el mismo fondo con el
     que esta grabado el video, asi el letterbox de abajo no se nota como una
     franja de otro color. */
  background: #000;
  opacity: 1;
  transition: opacity .55s ease;
}
.intro-video[hidden] { display: none; }
.intro-video.saliendo { opacity: 0; pointer-events: none; }

.intro-video video {
  width: 100%;
  height: 100%;
  /* "cover" recortaba el logo y la mascota en pantallas muy anchas y bajas
     (ultrawide): con el ancho lleno, el alto se desbordaba y se comia el
     texto por arriba. "contain" siempre muestra el cuadro completo del video;
     el espacio sobrante lo llena el fondo negro de arriba. */
  object-fit: contain;
}

.intro-video-saltar {
  position: absolute;
  /* Abajo a la izquierda, no a la derecha: ahi vive siempre el boton
     flotante de contacto (.contacto-flor, z-index 58) y se encimaban. */
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  background: rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 11px/1 var(--fuente-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease;
}
.intro-video-saltar:hover { background: rgba(0, 0, 0, .4); }
.intro-video-saltar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .intro-video { display: none !important; }
}