/*
    estilos.css

    Versión........: 05.5 (Corrección de Variables y Capas)
    Fecha..........: 2026-01-15
    Descripción....: Hoja de estilos con variables de capas normalizadas y diseño base.
*/

:root {
  /* Variables de Capas (Nombres alineados / Salto de 1000) */
  --z-idx-fondo: 500;   /* Capa base del escenario */
  --z-idx-person: 1000;  /* Capa del personaje Alicexora */
  --z-idx-atmosf: 2000;  /* Capa de niebla y efectos */
  --z-idx-header: 3000;  /* Capa de la interfaz superior */
  --z-idx-footer: 4000;  /* Capa de la interfaz inferior */

  /* Variables de Diseño (Nombres originales restaurados) */
  --imagen-central-ancho: 55vh;
  --niebla-altura: 25vh;
  --niebla-opacidad: 0.5;
  --evaporar-duration: 3s;
}

/* 1. RESET Y BASE - Control de scroll y suavizado de fuentes */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background: black;
  -webkit-font-smoothing: antialiased;
}

/* 2. CABECERA - Título centrado con espaciado expandido */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-idx-header);
  pointer-events: none;
}

.header-fixed h1 {
  margin: 0;
  padding: 10px 0;
  font-family: Arial, sans-serif;
  font-size: 30px;
  color: white;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* 3. ESCENARIO (FONDO) - Imagen principal preparada para parallax */
#fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  z-index: var(--z-idx-fondo);
  will-change: transform;
}

/* 4. CONTENEDOR PRINCIPAL - Área de visualización del personaje */
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-end; /* Anclaje al borde inferior */
  justify-content: flex-start;
  pointer-events: none;
  z-index: var(--z-idx-person);
}

/* 5. ENVOLTORIO IMAGEN - Contenedor relativo para el transform de JS */
.imgWrapper {
  position: relative;
  display: inline-block;
  will-change: transform;
}

/* 6. PERSONAJE - Definición visual y estado inicial invisible */
.miImagen {
  position: absolute;
  bottom: 0;
  left: 0%;
  transform: translateX(-50%);
  width: var(--imagen-central-ancho);
  display: block;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity, filter;
  opacity: 0;
  filter: blur(20px);
}

/* 7. ANIMACIONES SIMÉTRICAS - Control de visibilidad progresiva */
.aparecer {
  animation: materializar 3s forwards ease-out;
}

@keyframes materializar {
  0% { opacity: 0; filter: blur(20px); }
  100% { opacity: 1; filter: blur(0px); }
}

.evaporar {
  animation: desmaterializar var(--evaporar-duration) forwards ease-in;
}

@keyframes desmaterializar {
  0% { opacity: 1; filter: blur(0px); }
  100% { opacity: 0; filter: blur(20px); }
}

/* 8. ATMÓSFERA - Graduación de niebla inferior */
.niebla-basica {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--niebla-altura);
  background: linear-gradient(
    0deg,
    rgba(255,255,255,var(--niebla-opacidad)) 0%,
    rgba(255,255,255,calc(var(--niebla-opacidad) * 0.3)) 60%,
    transparent 100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: var(--z-idx-atmosf);
  will-change: opacity;
}

/* 9. FOOTER - Barra de créditos y enlaces legales */
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #ccc;
  font-size: 11px;
  text-align: center;
  padding: 10px 0;
  z-index: var(--z-idx-footer);
  font-family: Arial, sans-serif;
  backdrop-filter: blur(5px);
}

.footer-fixed a {
  color: #aaa;
  text-decoration: none;
  margin: 0 10px;
}