/* ═══════════════════════════════════════════════════════════════════
   LOADER.CSS — Studio Lanorma

   Estilos del loader de la página de inicio (home).
   El loader solo aparece en la primera visita del usuario en cada
   sesión. El JavaScript en loader.js lo gestiona y lo elimina
   del DOM cuando termina la animación.

   SOLO SE USA EN: index.html (home)
   ═══════════════════════════════════════════════════════════════════ */


/* ── CONTENEDOR DEL LOADER ──────────────────────────────────────────
   Cubre toda la pantalla mientras carga.
   z-index: 9999 → por encima de todo el contenido.
   ─────────────────────────────────────────────────────────────────── */

#loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  overflow: hidden;
}


/* ── IMAGEN CON EFECTO CORTINA ──────────────────────────────────────
   El wrapper de la imagen usa clip-path para hacer el efecto cortina:
   la imagen aparece desde abajo hacia arriba.
   clip-path: inset(100% 0 0 0) → imagen completamente oculta
   clip-path: inset(0 0 0 0)   → imagen completamente visible
   El JavaScript anima este valor con tween().
   ─────────────────────────────────────────────────────────────────── */

#loader-img-wrap {
  position: absolute;
  width: clamp(200px, 22vw, 340px);
  height: clamp(140px, 15vw, 240px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
}

#loader-img-box {
  position: absolute;
  inset: 0;
}

#loader-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── CONTADOR DE PORCENTAJE ─────────────────────────────────────────
   Texto "0%" → "100%" que aparece en la parte inferior del loader.
   También usa clip-path para aparecer con efecto cortina.
   ─────────────────────────────────────────────────────────────────── */

#loader-percent {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Suisse Intl', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #606060;
  line-height: 1;
  letter-spacing: 0.06em;
  clip-path: inset(100% 0 0 0);
  white-space: nowrap;
}


/* ── CONTENIDO DE LA PÁGINA DURANTE EL LOADER ───────────────────────
   Por defecto el contenido es visible.
   Cuando el JS añade .loader-running al body (primera visita),
   el contenido se oculta y se coloca en posición fija para que
   no haya salto de scroll al eliminar el loader.
   ─────────────────────────────────────────────────────────────────── */

#contenido {
  opacity: 1;
  visibility: visible;
}

body.loader-running #contenido {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}