/* Preloader y estados iniciales de los efectos. Todo lo oculto depende de .motion (JS + sin reduced-motion):
   sin JS o con reduced-motion la página se ve completa y estática. */

.preloader { display: none; }
.preload .preloader {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--paper);
  color: var(--ink-2);
}
.preloader__logo { width: min(64vw, 560px); }
.preloader__svg { width: 100%; height: auto; overflow: visible; fill: currentColor; }
.preloader__svg .logo__letters { opacity: 0; }
.preloader__accent { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.preloader__count {
  position: absolute; left: var(--gutter); bottom: 1.6rem; display: flex; gap: 0.6rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3);
}
.preloader__num { font-size: 2.6rem; color: var(--ink); letter-spacing: -0.04em; min-width: 2ch; }
.preloader__wipe {
  position: absolute; inset: 0; background: var(--accent); pointer-events: none;
  clip-path: polygon(0 100%, 100% calc(100% + 25.38vw), 100% 300%, 0 300%);
}
.preload body { overflow: hidden; }

/* Elementos que entran con el scroll */
.motion [data-lines] .line__in { transform: translateY(105%); }
.motion [data-fade] { opacity: 0; transform: translateY(24px); }
.motion [data-slat] { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.motion [data-words] .w { opacity: 0.14; }
.motion [data-draw] { transform: scaleX(0); transform-origin: left center; }
.w { display: inline; }