/* Preloader — home page only. Revert by deleting this file + preloader.js,
   removing the #preloader markup from index.html, and the import in main.js. */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--color-accent);
  clip-path: inset(0 0 0 0);
  /* Hardcoded 1s — the mobile token override (600ms) targets expensive
     view-transition compositing; the preloader exit is a simple inset clip. */
  transition: clip-path 1s var(--ease-sweep);
}

#preloader-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 40vw, 440px);
}

/* Clip wrapper: initial hidden state. The S-curve reveal is driven by JS
   (requestAnimationFrame) rather than CSS animation — Chrome/Blink's
   clip-path: path() interpolation is broken for both transition and
   @keyframes, producing incorrect intermediate frames on desktop.
   Setting clip-path via inline style each frame bypasses the bug entirely.
   150px amplitude; start CP2 at -50 (≤ 0) ensures nothing is visible
   before the sweep. */
#preloader-logo-clip {
  display: block;
  width: 100%;
  aspect-ratio: 1651.25 / 597.98;
  clip-path: path("M -200 -10 C -350 40 -50 130 -200 170 L -5000 170 L -5000 -10 Z");
}

@media (max-width: 768px) {
  #preloader-logo-clip {
    clip-path: path("M -120 -10 C -220 35 -20 80 -120 125 L -5000 125 L -5000 -10 Z");
  }
}

/* Mask layer: white div masked to the MORRO logo shape. Static — no animation.
   will-change: transform promotes it to a GPU compositing layer so it is
   rasterized once; only the parent clip-path changes per frame. */
#preloader-logo-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask-image: url('/assets/morro-logo.svg');
  mask-image: url('/assets/morro-logo.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: transform;
}

#preloader.is-exiting {
  clip-path: inset(0 100% 0 0);
}