@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

/* ==============================
   1. VARIABLES Y BASE
   ============================== */
:root {
  --color-primary: #1c3d8c;
  --color-secondary: #a6d1e5;
  --color-accent: #6faac0;
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --shadow-soft: rgba(0, 0, 0, 0.2);
  --font-title: 'Meddon', cursive;
  --font-hand: 'Caveat', cursive;
}

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

body {
  min-height: 100vh;
  background: linear-gradient(#acd1e4, #d3ecf9);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-title);
  overflow-x: hidden;
}


/* ==============================
   5. ANIMACIONES
   ============================== */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes diagonal1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0.3vw, -0.4vh) rotate(1deg); }
  50% { transform: translate(0.6vw, -0.7vh) rotate(2deg); }
  75% { transform: translate(0.3vw, -0.4vh) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes diagonal2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-0.2vw, -0.3vh) rotate(-1deg); }
  50% { transform: translate(-0.5vw, -0.6vh) rotate(-2deg); }
  75% { transform: translate(-0.2vw, -0.3vh) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes slideUp {
  from { transform: translateY(5vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes entradaReboteIzq {
  0% { transform: translate(-3vw, 20vh); opacity: 0; }
  70% { transform: translateY(-2vh); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes entradaReboteDer {
  0% { transform: translate(3vw, 20vh); opacity: 0; }
  70% { transform: translateY(-2vh); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes signDrop {
    0% { transform: translateY(-100%); opacity: 0%; }
    16% { animation-timing-function: ease-in; transform: translateY(32.27%); }
    28% { transform: translateY(-13.12%) rotate(0.5deg); }
    44% { transform: translateY(4.63%) rotate(-1deg); }
    59% { transform: translateY(-1.64%); }
    73% { transform: translateY(0.58%); }
    88% { transform: translateY(-0.2%)rotate(0deg); }
    100% { transform: translateY(0%); opacity: 100%; }
}

@keyframes showUp {
    0% { transform: translateY(100%); opacity: 0; }
    16% { animation-timing-function: ease-in; transform: translateY(32.135%);opacity: 1;}
    28% { transform: translateY(-6.56%) rotate(0.5deg); }
    44% { transform: translateY(2.315%) rotate(-1deg);}
    59% { transform: translateY(-0.82%);}
    73% { transform: translateY(0.29%);}
    88% { transform: translateY(-0.1%) rotate(0deg); }
    100% { transform: translateY(0);opacity: 1;}
}

/* ==============================
   2. LAYOUT GENERAL
   ============================== */
header {
  text-align: center;
  margin-top: 5vh;  
  animation: signDrop 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s,
             diagonal1 10s ease-in-out infinite 2s;
}

h1 {
  color: var(--color-primary);
  font-size: 4rem;
}

footer {
  margin: 4vh 0;
  color: #abc0c5;
  font-family: var(--font-hand);
  font-size: 1.5rem;
}

.back {
  position: relative;
  color: var(--color-primary);
  font-size: 2rem;
  border-top: 1vh;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration-line: none;
  font-family: var(--font-hand);
}

/* ==============================
   3. TIMELINE (LA LISTA DE CARTAS)
   ============================== */
.timeline {
  position: relative;
  margin: 5vh auto;
  display: flex;
  flex-direction: column;
  gap: 4vh;
  padding-left: 2rem;
  border-left: 3px dashed var(--color-accent);
}

.card-trigger {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card-trigger:hover {
  transform: translateX(10px) scale(1.02);
}

.card-icon img {
  width: 80px;
  filter: drop-shadow(0 4px 4px var(--shadow-soft));
  transition: transform 0.3s;
  user-select: none;
}

.card-trigger:hover .card-icon img {
  transform: rotate(-5deg) scale(1.1);
}

.card-info h3 {
  font-family: var(--font-hand);
  color: var(--color-primary);
  font-size: 2rem;
  margin: 0;
}

.card-info time {
  font-family: var(--font-hand);
  color: var(--color-primary);
  opacity: 0.7;
  font-size: 1.2rem;
}

/* ==============================
   4. MODAL (EL VISOR)
   ============================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s;
}

/* Estado oculto (Utility Class) */
.modal.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.modal-content {
  position: relative;
  z-index: 1001;
  width: 90vw;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Contenedor de Medios (Sobre vs Carta) --- */
.media-container {
  position: relative;
  width: 100%;
  height: 95vh; /* Ocupa todo el espacio disponible del modal */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Deja pasar clicks hacia el wrapper */
}

/* Ambas capas se posicionan igual para superponerse */
/* --- CSS ACTUALIZADO PARA ANIMATION-LAYER --- */
.animation-layer {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  /* Importante: para que el zoom empiece desde el centro */
  transform-origin: center center; 
  /* Aseguramos que la imagen no se deforme */
  object-fit: contain;
  /* Quitamos transición por defecto aquí, la controlará JS */
  will-change: transform; 
}
/* La capa de animación (Sobre) también debe centrarse */
.animation-layer {
  position: absolute; /* Esta sí se queda absolute para superponerse */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrado perfecto */
  
  /* Tamaño fijo o adaptable para el sobre */
  max-width: 80vw;
  max-height: 60vh; 
  
  object-fit: contain;
  will-change: transform;
  z-index: 10;
}

.animation-layer[style*="translate"] {
  /* Esto permite que JS controle la posición durante el vuelo */
  top: 0;
  left: 0;
  transform-origin: top left; 
}

/* El Wrapper ahora se adapta al tamaño de la imagen */
.zoom-wrapper {
  position: relative; /* Ya no es absolute */
  display: inline-flex; /* Se encoge para abrazar la imagen exacta */
  align-items: center;
  justify-content: center;
  
  /* LÍMITES: Nunca más grande que la pantalla */
  max-width: 95vw;
  max-height: 85vh;
  
  pointer-events: auto; /* Reactivamos clicks */
  transition: opacity 1s ease;
  border-radius: 8px;
}

.letter-layer {
  display: block;
  width: auto;
  height: auto;
  
  /* IMPORTANTE: Aquí definimos el tamaño máximo real */
  max-width: 100%;
  max-height: 85vh; /* Coincide con el wrapper */
  
  object-fit: contain;
  box-shadow: 0 10px 25px var(--shadow-strong);
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Utilidad para ocultar capas internas */
.layer-hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Zoom Logic --- */
.zoom-wrapper {
  cursor: zoom-in;
  overflow: hidden; /* Importante para el efecto lupa */
  border-radius: 8px;
}

.zoom-wrapper.is-zoomed {
  cursor: move; /* Mano para mover */
}

/* --- Controles --- */
.btn-close {
  /* Lo fijamos a la ventana para que nunca se pierda */
  position: fixed; 
  top: 20px;
  right: 20px;
  /* Centrado del ícono */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Quitamos todo el "recuadro" */
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2000; /* Un z-index altísimo para que nada lo tape */
  transition: all 0.3s ease;
  user-select: none;
}

.btn-close:hover {
  transform: rotate(90deg); /* Pequeña animación chula */
}

.controls-nav {
  position: relative;
  bottom: 3vh;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  color: var(--color-secondary);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  user-select: none;
}

.nav-btn {
  border: none;
  color: var(--color-secondary);
  font-size: 2rem;
  padding: 0 0.9rem;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 1s ease-in-out;
  animation: showUp 0.6s ease-in-out 2.2s forwards;
  background-color: rgba(99, 99, 99, 0);
}

.zoom-hint {
  margin-top: -5rem;
  font-family: sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}