/*
 * tingo · animación de entrada de la portada (la mueve intro.js).
 * El logo sobre el fondo claro; al cargar el 3D, en un solo movimiento: el fondo pasa a cristal borroso y se recoge
 * en una etiqueta con el logo, sube y se estira hasta ser la cabecera; al estirarse entran el
 * menú, los textos de la portada y las etiquetas del 3D.
 */

/* Mientras dura: sin scroll, y lo que aún no debe verse, oculto (la cabecera la sustituye la etiqueta) */
html.intro-activa, html.intro-activa body { overflow: hidden; }
html.intro-activa .cabecera { opacity: 0; }
html.intro-activa #inicio .texto > *,
html.intro-activa #inicio .desliza { opacity: 0; }
html.intro-activa .et-wrap,
html.intro-activa .persona-wrap,
html.intro-activa .suceso,
html.intro-activa .pin { opacity: 0 !important; }

/* Al estirarse la cabecera, las etiquetas del 3D aparecen poco a poco (el resto lo anima intro.js) */
html.intro-revela .et-wrap,
html.intro-revela .persona-wrap { transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .35s; }

/* La capa: empieza cubriendo toda la pantalla, del mismo color que el fondo de la escena. Se coloca por su centro
   (left/top son el centro y translate -50%), así intro.js anima el tamaño y la posición por separado */
.intro-fondo {
  position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh; z-index: 100;
  translate: -50% -50%;
  box-sizing: border-box;
  background: var(--fondo-escena, #f6f7f7);
  border: 1px solid transparent;
  pointer-events: none;
  will-change: left, top, width, height;
}
.intro-logo {
  position: fixed; left: 50%; top: 50%; z-index: 101;
  height: 1.7rem; width: auto;
  translate: -50% -50%;
  pointer-events: none;
  animation: intro-logo-entra .7s cubic-bezier(.22, 1, .36, 1) both;
}
@media (max-width: 760px) { .intro-logo { height: 1.35rem; } }
@keyframes intro-logo-entra { from { opacity: 0; scale: .96; } }

/* En el último paso la cabecera de verdad ya está, ENCIMA de la capa (si no, el menú se vería borroso debajo del
   cristal), sin su fondo (lo pone la capa) y sin su logo (va el de la capa) */
.cabecera.intro-cabecera {
  opacity: 1;
  z-index: 102;
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.cabecera.intro-cabecera .marca img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro-logo { animation: none; }
  html.intro-revela .et-wrap, html.intro-revela .persona-wrap { transition: opacity .3s; }
}