/* =========================================================================
   Novalux Home Services — Preloader "SYSTEM BOOT / STRUCTURE ACTIVATION"
   -------------------------------------------------------------------------
   Intro de marca cinemático y premium. Todo vive bajo el prefijo aislado
   .novalux-preloader__* para no colisionar con la plantilla ni con Webflow.

   Se muestra SOLO cuando <html> lleva la clase .is-preloading, que añade el
   script en línea de <head> antes de pintar el <body> (así no hay flash del
   hero). Si el JavaScript está desactivado, la clase nunca se añade y el
   preloader queda en display:none: el sitio se ve directamente.

   Paleta de marca:
     --npx-navy      #0C172B   fondo base
     --npx-navy-deep #031D4C   navy corporativo
     --npx-blue      #0874F9   azul brillante (scan, líneas, paneles)
     --npx-blue-deep #0757D8
     --npx-white     #FFFFFF
   ========================================================================= */

.novalux-preloader {
  --npx-navy: #0C172B;
  --npx-navy-deep: #031D4C;
  --npx-blue: #0874F9;
  --npx-blue-deep: #0757D8;
  --npx-white: #ffffff;
  --npx-mist: rgba(245, 248, 253, 0.72);

  /* Oculto por defecto: si no hay JS (no se añade .is-preloading) el sitio se
     ve sin obstáculos. */
  display: none;
}

/* El preloader solo existe visualmente mientras dura la carga controlada. */
html.is-preloading {
  overflow: hidden;
}

html.is-preloading body {
  overflow: hidden;
}

html.is-preloading .novalux-preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* por encima de todo, incluido el modal (1000) */
  background-color: var(--npx-navy);
  overflow: hidden;
  contain: strict;
  color: var(--npx-white);
  font-family: var(--_typography---font-styles--button-label, "Switzer", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Grain / textura fina ---------------------------------------- */
.novalux-preloader__grain {
  position: absolute;
  inset: -10%;
  z-index: 6;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---------- Escenario base ---------------------------------------------- */
.novalux-preloader__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

/* Sutil vignette navy para dar profundidad y centrar la mirada. */
.novalux-preloader__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 46%, transparent 42%, rgba(3, 29, 76, 0.55) 100%);
}

/* ---------- Rejilla arquitectónica (plano / fachada) -------------------- */
.novalux-preloader__grid {
  position: absolute;
  inset: -1px;
  z-index: 1;
  opacity: 0;
  transform-origin: 50% 46%;
  background-image:
    repeating-linear-gradient(to right, rgba(8, 116, 249, 0.11) 0 1px, transparent 1px 118px),
    repeating-linear-gradient(to bottom, rgba(8, 116, 249, 0.11) 0 1px, transparent 1px 118px);
  -webkit-mask-image: radial-gradient(115% 105% at 50% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(115% 105% at 50% 46%, #000 55%, transparent 100%);
}

/* Guías SVG (cruceta central + marco del logo) que se "dibujan". */
.novalux-preloader__guides {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.novalux-preloader__guides line,
.novalux-preloader__guides rect {
  stroke: var(--npx-blue);
  opacity: 0.34;
  vector-effect: non-scaling-stroke;
}

/* ---------- Scan-line (medidor láser / escáner técnico) ----------------- */
.novalux-preloader__scan {
  position: absolute;
  top: 46%;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(8, 116, 249, 0.15) 12%,
    var(--npx-blue) 50%,
    rgba(8, 116, 249, 0.15) 88%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(8, 116, 249, 0.55);
}

.novalux-preloader__scan-v {
  position: absolute;
  top: 26%;
  left: 50%;
  z-index: 3;
  width: 1px;
  height: 48%;
  transform-origin: top center;
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
  background: linear-gradient(180deg, transparent, var(--npx-blue) 50%, transparent);
}

/* ---------- Marco técnico alrededor del logo --------------------------- */
.novalux-preloader__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(560px, 66vw);
  height: min(560px, 66vw);
  max-height: 62vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.novalux-preloader__marker {
  position: absolute;
  width: 26px;
  height: 26px;
  opacity: 0;
  border: 1.5px solid var(--npx-blue);
}

.novalux-preloader__marker--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.novalux-preloader__marker--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.novalux-preloader__marker--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.novalux-preloader__marker--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.novalux-preloader__coord {
  position: absolute;
  z-index: 4;
  font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--npx-mist);
  opacity: 0;
}

.novalux-preloader__coord--tl { top: -18px; left: 0; }
.novalux-preloader__coord--br { bottom: -18px; right: 0; text-align: right; }

.novalux-preloader__tag {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--npx-blue);
  opacity: 0;
}

/* Wireframe blueprint (fachada / edificio residencial), muy tenue. */
.novalux-preloader__wireframe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(340px, 46vw);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  overflow: visible;
}

.novalux-preloader__wireframe [class*="npx-draw"] {
  stroke: var(--npx-blue);
  vector-effect: non-scaling-stroke;
}

/* ---------- Logo (montaje por fragmentos, sobre PNG) ------------------- */
.novalux-preloader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50; /* por encima de los paneles durante la apertura */
  width: clamp(15rem, 33vw, 30rem);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.novalux-preloader__logo-fragment {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* frag-1 define la caja (en flujo); frag-2/3 se superponen. Cada uno recorta
   una banda del logo con solape para que no queden costuras. */
.novalux-preloader__logo-fragment--1 {
  position: relative;
  z-index: 1;
  -webkit-clip-path: inset(0 0 54% 0);
  clip-path: inset(0 0 54% 0);
}

.novalux-preloader__logo-fragment--2 {
  position: absolute;
  inset: 0;
  -webkit-clip-path: inset(40% 0 24% 0);
  clip-path: inset(40% 0 24% 0);
}

.novalux-preloader__logo-fragment--3 {
  position: absolute;
  inset: 0;
  -webkit-clip-path: inset(72% 0 0 0);
  clip-path: inset(72% 0 0 0);
}

/* Fallback tipográfico si el PNG no carga. */
.novalux-preloader__logo-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--_typography---font-styles--heading, "Switzer", system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.14em;
  color: var(--npx-white);
}

.novalux-preloader.is-logo-fallback .novalux-preloader__logo-fragment { display: none; }
.novalux-preloader.is-logo-fallback .novalux-preloader__logo-fallback { display: flex; }

/* Barrido de luz (reflejo brushed-metal) recortado a la silueta del logo. */
.novalux-preloader__sweep {
  position: absolute;
  inset: -6% -20%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-140%);
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 58%
  );
  -webkit-mask-image: url("../images/novalux-logo-light.png");
  mask-image: url("../images/novalux-logo-light.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 80% auto;
  mask-size: 80% auto;
}

/* ---------- UI técnica (labels, estado, contador) --------------------- */
.novalux-preloader__ui {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.novalux-preloader__label {
  position: absolute;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--npx-mist);
  opacity: 0;
}

.novalux-preloader__label--brand { top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); }
.novalux-preloader__label--city  { bottom: max(24px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); color: rgba(8, 116, 249, 0.85); }

.novalux-preloader__readout {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  align-items: baseline;
  gap: 14px;
  opacity: 0;
}

.novalux-preloader__status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--npx-mist);
}

.novalux-preloader__counter {
  font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--npx-white);
  min-width: 3ch;
  text-align: right;
}

/* ---------- Paneles de apertura (cortina con línea de tejado) ---------- */
.novalux-preloader__panels {
  position: absolute;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
}

.novalux-preloader__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 56%;
  background-color: var(--npx-blue);
  will-change: transform;
}

/* La costura entre paneles forma un chevron (∧) que evoca el tejado del
   símbolo Novalux. */
.novalux-preloader__panel--top {
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.novalux-preloader__panel--bottom {
  bottom: 0;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 22%, 0 0);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 22%, 0 0);
}

/* ---------- Reveal rápido sin GSAP / fallback -------------------------- */
.novalux-preloader.is-instant .novalux-preloader__logo-fragment,
.novalux-preloader.is-instant .novalux-preloader__logo-fallback { opacity: 1; }

.novalux-preloader.is-fading {
  transition: opacity 380ms ease;
  opacity: 0;
}

/* ---------- Móvil ------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .novalux-preloader__logo { width: min(80vw, 20rem); }

  .novalux-preloader__frame {
    width: min(420px, 84vw);
    height: min(420px, 84vw);
  }

  /* Rejilla más espaciada y menos elementos técnicos en pantallas pequeñas. */
  .novalux-preloader__grid {
    background-image:
      repeating-linear-gradient(to right, rgba(8, 116, 249, 0.11) 0 1px, transparent 1px 92px),
      repeating-linear-gradient(to bottom, rgba(8, 116, 249, 0.11) 0 1px, transparent 1px 92px);
  }

  .novalux-preloader__coord,
  .novalux-preloader__scan-v { display: none; }

  .novalux-preloader__readout { gap: 10px; }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.is-preloading .novalux-preloader,
  .novalux-preloader * {
    animation: none !important;
    transition: none !important;
  }

  /* En este modo el JS hace un crossfade simple; se dejan visibles el logo y
     el fondo, sin escáner, glitch ni paneles. */
  .novalux-preloader__grid,
  .novalux-preloader__guides,
  .novalux-preloader__scan,
  .novalux-preloader__scan-v,
  .novalux-preloader__wireframe,
  .novalux-preloader__panels,
  .novalux-preloader__ui { display: none !important; }

  .novalux-preloader__logo-fragment { opacity: 1 !important; filter: none !important; transform: none !important; }
}