/* =====================================================
   CONFIGURACIÓN GENERAL
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;

  background: #050505;
  color: white;

  overflow: hidden;
}


/* =====================================================
   CONTENEDOR DE TODA LA ESCENA
===================================================== */

.escena-final {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #050505;
}


/* =====================================================
   ESCENAS
===================================================== */

.escena {
  position: absolute;

  width: 100%;
  height: 100%;

  top: 0;
  left: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  overflow: hidden;
}


/* =====================================================
   ESCENA 1 - INTRODUCCIÓN
===================================================== */

.introduccion {
  z-index: 1;

  background:
    radial-gradient(
      circle at center,
      #160805 0%,
      #080202 45%,
      #050505 100%
    );

  opacity: 1;

  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}


/* Contenedor del texto */

.texto-intro {
  width: min(900px, 88%);

  text-align: center;
}


/* Título */

.texto-intro h1 {
  font-size: clamp(45px, 7vw, 85px);

  color: #ff3b00;

  margin-bottom: 40px;

  text-shadow:
    0 0 10px rgba(255, 59, 0, 0.8),
    0 0 30px rgba(255, 59, 0, 0.4);

  animation: aparecerTitulo 2s ease forwards;
}


/* Texto */

.texto-intro p {
  max-width: 850px;

  margin: 0 auto 40px;

  font-size: clamp(17px, 2vw, 24px);

  line-height: 1.8;

  color: #eeeeee;

  text-align: justify;

  animation: aparecerTexto 2.5s ease forwards;
}


/* Frase final de introducción */

.texto-intro h2 {
  max-width: 800px;

  margin: auto;

  color: #ff4b00;

  font-size: clamp(22px, 3vw, 34px);

  font-style: italic;

  text-shadow:
    0 0 10px rgba(255, 59, 0, 0.7);

  animation: aparecerTexto 3s ease forwards;
}


/* =====================================================
   ESCENA 2 - FOTOS
===================================================== */

.escena-fotos {
  z-index: 5;

  background: #050505;

  opacity: 0;

  transform: scale(1.05);

  pointer-events: none;

  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}


/* =====================================================
   MOSAICO
===================================================== */

.mosaico {
  width: min(1050px, 90vw);

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 7px;

  transition:
    transform 2s ease,
    opacity 2s ease;
}


/* Fotos */

.foto-mosaico {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 7px;

  border: 2px solid #ff2600;

  box-shadow:
    0 0 8px rgba(255, 38, 0, 0.45);

  transition:
    transform 1.5s ease,
    opacity 1.5s ease;
}


/* =====================================================
   FOTO GRANDE
===================================================== */

.foto-grande {
  position: absolute;

  width: min(720px, 78vw);

  height: min(520px, 70vh);

  z-index: 10;

  opacity: 0;

  transform: scale(0.4);

  pointer-events: none;

  transition:
    opacity 2s ease,
    transform 2s ease;
}


.foto-grande img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 25px;

  border: 4px solid #ff3b00;

  box-shadow:
    0 0 25px rgba(255, 59, 0, 0.8),
    0 0 70px rgba(255, 59, 0, 0.35);
}


/* =====================================================
   AUTO HOT WHEELS
===================================================== */

.auto-final {
  position: absolute;

  left: -300px;

  top: 50%;

  z-index: 30;

  opacity: 0;

  transform: translateY(-50%);

  pointer-events: none;
}


.auto-final img {
  width: 260px;

  max-width: none;

  display: block;
}


/* =====================================================
   ESCENA 3 - FINAL
===================================================== */

.mensaje-final {
  z-index: 50;

  background:
    radial-gradient(
      circle at center,
      #150503 0%,
      #050505 60%
    );

  opacity: 0;

  transform: scale(1.05);

  pointer-events: none;

  transition:
    opacity 2s ease,
    transform 2s ease;
}


/* Contenido */

.final-contenido {
  text-align: center;
}


/* FIN */

.mensaje-final h1 {
  font-size: clamp(80px, 13vw, 160px);

  color: #ff3b00;

  margin-bottom: 20px;

  text-shadow:
    0 0 10px rgba(255, 59, 0, 0.9),
    0 0 35px rgba(255, 59, 0, 0.6),
    0 0 70px rgba(255, 59, 0, 0.3);

  animation: brilloFinal 2s ease-in-out infinite alternate;
}


/* Te amo */

.mensaje-final p {
  font-size: clamp(30px, 5vw, 55px);

  color: white;

  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.3);
}


/* =====================================================
   CLASES QUE ACTIVARÁ JAVASCRIPT
===================================================== */


/* -----------------------------------------
   APARECE ESCENA DE FOTOS
----------------------------------------- */

.escena-fotos.mostrar {
  opacity: 1;

  transform: scale(1);

  pointer-events: auto;
}


/* -----------------------------------------
   INTRO DESAPARECE
----------------------------------------- */

.introduccion.ocultar {
  opacity: 0;

  transform: scale(1.08);

  pointer-events: none;
}


/* -----------------------------------------
   MOSAICO SE ALEJA
----------------------------------------- */

.escena-fotos.mosaico-final .mosaico {
  transform: scale(0.55);

  opacity: 0.08;
}


/* -----------------------------------------
   APARECE FOTO GRANDE
----------------------------------------- */

.escena-fotos.mosaico-final .foto-grande {
  opacity: 1;

  transform: scale(1);
}


/* -----------------------------------------
   AUTO APARECE
----------------------------------------- */

.escena-fotos.auto-listo .auto-final {
  opacity: 1;
}


/* -----------------------------------------
   AUTO CRUZA
----------------------------------------- */

.escena-fotos.auto-pasando .auto-final {
  animation: autoCorre 1.8s linear forwards;
}


/* -----------------------------------------
   FOTO GRANDE DESAPARECE
----------------------------------------- */

.escena-fotos.auto-pasando .foto-grande {
  animation: desaparecerFoto 1.3s ease forwards;
}


/* -----------------------------------------
   MOSAICO DESAPARECE
----------------------------------------- */

.escena-fotos.auto-pasando .mosaico {
  opacity: 0;
}


/* -----------------------------------------
   MOSTRAR FINAL
----------------------------------------- */

.mensaje-final.mostrar-final {
  opacity: 1;

  transform: scale(1);

  pointer-events: auto;
}


/* =====================================================
   ANIMACIÓN DEL AUTO
===================================================== */

@keyframes autoCorre {

  0% {
    left: -300px;
  }

  100% {
    left: 110vw;
  }

}


/* =====================================================
   DESAPARECER FOTO
===================================================== */

@keyframes desaparecerFoto {

  0% {
    opacity: 1;

    transform: scale(1);
  }

  100% {
    opacity: 0;

    transform: scale(1.12);
  }

}


/* =====================================================
   ANIMACIÓN DEL TÍTULO
===================================================== */

@keyframes aparecerTitulo {

  0% {
    opacity: 0;

    transform: translateY(30px);
  }

  100% {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =====================================================
   ANIMACIÓN DEL TEXTO
===================================================== */

@keyframes aparecerTexto {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}


/* =====================================================
   BRILLO DEL FIN
===================================================== */

@keyframes brilloFinal {

  from {
    text-shadow:
      0 0 10px rgba(255, 59, 0, 0.8),
      0 0 30px rgba(255, 59, 0, 0.5);
  }

  to {
    text-shadow:
      0 0 20px rgba(255, 59, 0, 1),
      0 0 50px rgba(255, 59, 0, 0.8),
      0 0 90px rgba(255, 59, 0, 0.4);
  }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 700px) {

  .texto-intro {
    width: 88%;
  }


  .texto-intro h1 {
    font-size: 42px;

    margin-bottom: 30px;
  }


  .texto-intro p {
    font-size: 16px;

    line-height: 1.6;

    text-align: center;

    max-height: 55vh;

    overflow-y: auto;
  }


  .texto-intro h2 {
    font-size: 21px;
  }


  /* Mosaico */

  .mosaico {
    width: 92vw;

    grid-template-columns: repeat(4, 1fr);

    gap: 4px;
  }


  .foto-mosaico {
    border-width: 1px;

    border-radius: 4px;
  }


  /* Foto grande */

  .foto-grande {
    width: 86vw;

    height: 55vh;
  }


  /* Auto */

  .auto-final img {
    width: 190px;
  }


  /* Final */

  .mensaje-final h1 {
    font-size: 80px;
  }


  .mensaje-final p {
    font-size: 30px;
  }

}