/* =========================================================================
   Animación de entrada — el disparo de una cámara
   -------------------------------------------------------------------------
   Todo son vectores y CSS: unos pocos KB, nítido en cualquier pantalla y
   sin descargar vídeo. Dura 3 s, se salta al tocar o pulsar una tecla,
   se muestra una vez por sesión y no llega a aparecer si el visitante
   pide menos animación.
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #0C100D;
  /* La portada ya está montada debajo: si el JS falla, esto no llega
     a pintarse porque solo se activa con la clase .js del body. */
}

.intro[data-fin="true"] {
  animation: intro-salir .55s var(--curva, ease) forwards;
  pointer-events: none;
}

@keyframes intro-salir {
  to { opacity: 0; visibility: hidden; }
}

.intro__camara {
  width: min(260px, 60vw);
  height: auto;
  overflow: visible;
}

/* El cuerpo de la cámara entra */
.intro__cuerpo {
  animation: camara-entra .5s var(--curva, ease) both;
}
@keyframes camara-entra {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Las seis palas del obturador se abren desde el centro */
.intro__pala {
  transform-origin: 100px 100px;
  animation: pala-abre .45s var(--curva, ease) .45s both;
}
@keyframes pala-abre {
  from { transform: rotate(0deg) scale(1); opacity: 1; }
  to   { transform: rotate(38deg) scale(.15); opacity: .85; }
}

/* El destello */
.intro__flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: flash .28s ease-out .82s both;
}
@keyframes flash {
  0%   { opacity: 0; }
  22%  { opacity: .92; }
  100% { opacity: 0; }
}

/* La fotografía que sale, como una copia revelándose */
.intro__copia {
  position: absolute;
  width: min(300px, 64vw);
  aspect-ratio: 3 / 4;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  padding: 9px 9px 34px;
  box-sizing: border-box;
  /* Las medidas de dentro (cqw) se toman del ancho de esta copia. */
  container-type: inline-size;
  opacity: 0;
  animation: copia-sale .75s var(--curva, ease) .95s both;
}

/* Lo que se ve en la foto: sello, nombre y lema sobre carretes en verde.
   Las medidas van en `cqw` (ancho de la copia) para que todo guarde la
   proporción a cualquier tamaño de pantalla. */
.intro__foto {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4cqw;
  width: 100%;
  height: 100%;
  padding: 0 9cqw;
  border-radius: 2px;
  background-color: #0E2419;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  filter: saturate(0) contrast(.55) brightness(1.5);
  animation: copia-revela .9s ease-out 1.15s both;
}
.intro__sello {
  width: 34cqw;
  height: auto;
  margin-bottom: 4cqw;
}
.intro__marca {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 13.5cqw;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.intro__lema {
  margin: 0;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: 7cqw;
  line-height: 1.2;
  color: rgba(255, 255, 255, .72);
}
@keyframes copia-sale {
  from { opacity: 0; transform: translateY(-26px) scale(.92); }
  to   { opacity: 1; transform: translateY(18px) rotate(-3deg); }
}
@keyframes copia-revela {
  from { filter: saturate(0) contrast(.55) brightness(1.5); }
  to   { filter: saturate(1) contrast(1) brightness(1); }
}

/* Fuera en cuanto el visitante pide menos movimiento o el equipo va justo */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}