@charset "utf-8";
/* CSS Document */

.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* siempre mantendrá proporción widescreen */
  overflow: hidden;
}

/* Para móviles en vertical: formato más cuadrado */
@media (max-width: 768px) {
  .slider {
	height: 75vh;
	aspect-ratio: 4 / 3;
  }
}

.story {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 10s ease;
}

.story.active {
  opacity: 1;
  transform: scale(1.1); /* efecto zoom in lento */
}

.year {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12vw;
  font-weight: bold;
  color: #fff;
  text-shadow: 4px 4px 40px rgba(0,0,0,0.9);
  opacity: 0;
  white-space: nowrap;
  text-align: center;
}

/* Aumentar texto en móviles */
@media (max-width: 768px) {
  .year {
	font-size: 18vw;
  }
}

/* Animaciones de entrada */
@keyframes slideInLeft {
  0% { transform: translateX(-120%) scale(1); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes slideInRight {
  0% { transform: translateX(120%) scale(1); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes fadeInFinal {
  0% { opacity: 0; transform: translateX(-50%) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.year.active.left {
  animation: slideInLeft 2s ease forwards;
}

.year.active.right {
  animation: slideInRight 2s ease forwards;
}

/* Bloque final especial */
.final-block {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 3px 3px 25px rgba(0,0,0,0.9);
  opacity: 0;
}

.final-block.active {
  animation: fadeInFinal 2.5s ease forwards;
}

.final-block .h1 {
  font-size: 4vw;
  margin: 0;
  font-weight: bold;
}

.final-block .h2 {
  font-size: 2vw;
  margin: 10px 0 0 0;
  font-weight: normal;
}

.final-block .h3 {
  font-size: 1.5vw;
  margin: 5px 0 0 0;
  font-weight: lighter;
}

@media (max-width: 768px) {
  .final-block .h1 { font-size: 10vw; }
  .final-block .h2 { font-size: 6vw; }
  .final-block .h3 { font-size: 4vw; }
}