/* ==========================================================================
   PRELOADER — intro cinematográfica (primera visita ≈ 5,5 s; visitas siguientes ≈ 1,2 s).
   Secuencia (.is-intro): 0–1,2 s cuatro luces (los cuatro sistemas) convergen → 1,0–2,2 s el isotipo
   emerge con un destello y se dibujan los anillos → 2,0–3,0 s el nombre entra letra a letra →
   2,6–5,2 s mensajes de la marca y barra de carga → cortina de salida. Todo en CSS; JS solo fija
   la clase, el progreso real y el momento de salida. Sin reduced-motion: sin animación.
   ========================================================================== */
.preloader {
  --t0: 0ms;                                    /* origen de la secuencia */
  position: fixed; inset: 0; z-index: var(--z-preloader);
  background: radial-gradient(60% 50% at 50% 55%, var(--ink-900), var(--ink-950) 75%);
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-cine) var(--ease-in-out), visibility 0s linear var(--dur-cine);
}
.preloader[data-done] { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
.preloader__inner { transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out); }
.preloader[data-done] .preloader__inner { transform: translateY(-6vh) scale(0.9); opacity: 0; }
.preloader__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-3); text-align: center; }

/* Cuatro luces: una por sistema, llegan desde las esquinas y se funden en el centro */
.preloader__orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.preloader__orb { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 62%, transparent), transparent 68%);
  --ox: calc((var(--i) - 1.5) * 26vw); --oy: 0px;
  transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(0.6); }
.preloader__orb:nth-child(1) { --oy: -22vh; } .preloader__orb:nth-child(2) { --oy: 22vh; } .preloader__orb:nth-child(3) { --oy: -22vh; } .preloader__orb:nth-child(4) { --oy: 22vh; }
.preloader.is-intro .preloader__orb { animation: pl-orb 2.6s var(--ease-in-out) both; animation-delay: calc(var(--t0) + var(--i) * 120ms); }
@keyframes pl-orb {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(0.6); }
  25%  { opacity: 0.9; }
  70%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0.22; transform: translate(-50%, -50%) scale(1.6); }
}
.preloader.is-short .preloader__orb { animation: pl-orb-short 1.2s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pl-orb-short { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 0.22; transform: translate(-50%, -50%) scale(1.6); } }

/* Emblema: isotipo + destello + anillos */
.preloader__emblem { position: relative; width: 9.5rem; height: 9.5rem; display: grid; place-items: center; }
.preloader__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.preloader__ring circle { stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 50% 50%; }
.preloader__ring-b { stroke: var(--brand-lime); stroke-width: 0.8; opacity: 0.6; }
.preloader.is-intro .preloader__ring circle { animation: pl-draw 1.6s var(--ease-out) both; animation-delay: calc(var(--t0) + 1100ms); }
.preloader.is-intro .preloader__ring-b { animation-delay: calc(var(--t0) + 1400ms); animation-duration: 1.4s; }
.preloader.is-short .preloader__ring circle { stroke-dashoffset: 0; }
@keyframes pl-draw { from { stroke-dashoffset: 1; transform: rotate(-90deg); } to { stroke-dashoffset: 0; transform: rotate(0deg); } }
.preloader__flash { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 245, 250, 0.9), transparent 70%); opacity: 0; transform: scale(0.4); }
.preloader.is-intro .preloader__flash { animation: pl-flash 1.1s var(--ease-out) both; animation-delay: calc(var(--t0) + 1000ms); }
@keyframes pl-flash { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 0.85; } 100% { opacity: 0; transform: scale(2.4); } }
.preloader__mark { width: 5.5rem; height: auto; position: relative; z-index: 1; }
.preloader.is-intro .preloader__mark { opacity: 0; animation: pl-mark 1.2s var(--ease-out) both, pl-breathe 3.2s var(--ease-in-out) 2.4s infinite; animation-delay: calc(var(--t0) + 1050ms), calc(var(--t0) + 2400ms); }
.preloader.is-short .preloader__mark { animation: pl-mark 0.8s var(--ease-out) both, pl-breathe 3.2s var(--ease-in-out) 1s infinite; }
@keyframes pl-mark { from { opacity: 0; transform: scale(0.55) rotate(-16deg); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes pl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Nombre letra a letra */
.preloader__word { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: flex; }
.preloader__l { display: inline-block; }
.preloader__l--light { font-weight: 300; }
.preloader.is-intro .preloader__l { opacity: 0; animation: pl-letter 700ms var(--ease-out) both; animation-delay: calc(var(--t0) + 2000ms + var(--l) * 70ms); }
.preloader.is-short .preloader__l { animation: pl-letter 500ms var(--ease-out) both; animation-delay: calc(150ms + var(--l) * 30ms); }
@keyframes pl-letter { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.preloader__by { font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); margin-top: -0.25rem; }
.preloader.is-intro .preloader__by { opacity: 0; animation: pl-fade 800ms var(--ease-out) both; animation-delay: calc(var(--t0) + 2700ms); }
.preloader.is-short .preloader__by { animation: pl-fade 500ms var(--ease-out) 350ms both; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }

/* Barra y mensajes */
.preloader__bar { width: 9rem; height: 1px; background: var(--line); margin-top: var(--s-5); overflow: hidden; }
.preloader.is-intro .preloader__bar, .preloader.is-intro .preloader__status { opacity: 0; animation: pl-fade 600ms var(--ease-out) both; animation-delay: calc(var(--t0) + 2600ms); }
.preloader__fill { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: left; transform: scaleX(var(--progress, 0)); transition: transform 600ms var(--ease-out); }
/* En la intro la barra acompaña la secuencia (2,6 s → 5,2 s); el progreso real suele completarse antes */
.preloader.is-intro .preloader__fill { animation: pl-fill 3s var(--ease-in-out) both; animation-delay: calc(var(--t0) + 2600ms); }
@keyframes pl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.preloader__status { position: relative; height: 1.2em; width: 22rem; max-width: 90vw; font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-subtle); }
.preloader__msg { position: absolute; left: 0; right: 0; top: 0; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preloader.is-short .preloader__msg[style="--m: 0"] { opacity: 1; }
.preloader.is-intro .preloader__msg { animation: pl-msg 1.5s var(--ease-in-out) both; animation-delay: calc(var(--t0) + 2600ms + var(--m) * 1250ms); }
@keyframes pl-msg { 0% { opacity: 0; transform: translateY(0.4em); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-0.4em); } }
.preloader.is-intro .preloader__msg:last-child { animation-name: pl-msg-last; }
@keyframes pl-msg-last { 0% { opacity: 0; transform: translateY(0.4em); } 18%, 100% { opacity: 1; transform: none; } }

/* Saltar (aparece a los 2 s en la intro larga) */
.preloader__skip { position: absolute; bottom: var(--s-6); left: 50%; transform: translateX(-50%); z-index: 3; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-subtle); padding: 0.6rem 1rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; animation: pl-fade 600ms var(--ease-out) 2000ms both; transition: color var(--dur-fast); }
.preloader__skip:hover { color: var(--fg); }
.preloader__skip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 200ms, visibility 0s linear 200ms; clip-path: none; }
  .preloader[data-done] { clip-path: none; opacity: 0; }
  .preloader__inner { transition: none; }
  .preloader__orb, .preloader__mark, .preloader__l, .preloader__by, .preloader__bar, .preloader__status, .preloader__msg, .preloader__flash, .preloader__ring circle, .preloader__skip { animation: none !important; opacity: 1; }
  .preloader__ring circle { stroke-dashoffset: 0; }
  .preloader__msg:not(:first-child) { display: none; }
  .preloader__orb { opacity: 0.2; transform: translate(-50%, -50%) scale(1.6); }
}