/* PAC.CO site loader — opening splash.
 * Visuals are 1:1 with the "Animated Logo Loader" sample (logo springs, ground
 * shadow, progress bar, Loading... label). Only the SELECTORS are scoped:
 *  - theme vars live on #loader (the sample used :root, whose --muted/--shadow
 *    names collide with css/base.css globals and would repaint the whole site)
 *  - child classes/keyframes are prefixed (#loader .logo, pacco-loader-slide,
 *    pacco-loader-dot) so generic names can't style, or be styled by, page CSS.
 * Background is pure white (merchant choice 2026-10-07 — the sample's cream
 * #fffcf2 is NOT used), always, even in dark mode: no dark overrides.
 * Version: 1.0.13
 */
#loader{
  --bg:#ffffff;--fg:#231f20;--muted:#7a7468;--track:rgba(35,31,32,.1);--tm:#111;--shadow:rgba(35,31,32,.15);
  box-sizing:border-box;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Repeat visits skip the splash: index.html flags <html> with this class in
 * <head>, before first paint, so there is no flash of the loader. */
.pacco-loader-seen #loader{display:none !important}

/* ===== LOADER START (mirrors the sample's LOADER block 1:1) ===== */
#loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:var(--bg);color:var(--fg);padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px);
  transition:opacity .7s ease,visibility .7s}
#loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
#loader.is-done .logo{transform:scale(.9) translateY(-8px)}
#loader .logo{width:min(46vw,210px)}
#loader .logo svg{display:block;width:100%;height:auto;overflow:visible}
#loader .ground{width:min(26vw,110px);height:10px;border-radius:50%;background:var(--shadow);filter:blur(5px);margin-top:-14px;will-change:transform}
#loader .bar{width:140px;height:4px;border-radius:4px;background:var(--track);overflow:hidden}
#loader .bar i{display:block;height:100%;width:42%;border-radius:4px;background:#ffc801;animation:pacco-loader-slide 1.3s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pacco-loader-slide{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
#loader .label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:-8px}
#loader .label b{display:inline-block;font-weight:400;animation:pacco-loader-dot 1.2s infinite both}
#loader .label b:nth-child(2){animation-delay:.2s}#loader .label b:nth-child(3){animation-delay:.4s}
@keyframes pacco-loader-dot{0%,80%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){#loader .bar i,#loader .label b{animation:none}#loader .bar i{width:100%}}
/* ===== LOADER END ===== */

/* Phones: whole splash slightly smaller (merchant 2026-10-07). Desktop unchanged. */
@media (max-width:480px){
  #loader{gap:22px}
  #loader .logo{width:min(38vw,160px)}
  #loader .ground{width:min(22vw,90px)}
  #loader .bar{width:120px}
}

/* Click bounce on the loading character: squash rhythm on the svg so it
 * composes with the attribute-driven face. (The fly-to-brand handoff was
 * tried and reverted — this file is back to the one-snap hide.) */
#loader .logo svg{transform-box:fill-box;transform-origin:50% 85%}
#loader .logo svg.is-bounce{animation:pacco-loader-bounce .45s ease}
@keyframes pacco-loader-bounce{0%{transform:scale(1,1)}35%{transform:scale(1.14,.84)}60%{transform:scale(.94,1.06)}100%{transform:scale(1,1)}}
/* Exit choreography styling (ported from the suck-in reference): the trail
 * canvas sits behind everything, the flight clone is fixed-positioned, and
 * the chrome fades as the exit begins. The veil turns transparent at impact
 * so the page is already there when the splash is removed. */
#loader #fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#loader .logo{position:relative;z-index:1;will-change:transform,opacity}
#loader .logo.hidden{opacity:0 !important;visibility:hidden}
/* Above the splash veil (#loader is z 999): the clone lives on <body>, so at
 * z 2 it flew BEHIND the white veil and only the gold trail showed. */
#flightLogo{position:fixed;z-index:1001;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
#flightLogo svg{display:block;width:100%;height:auto;overflow:visible}
#loader{transition:opacity .7s ease,visibility .7s,background-color .45s ease}
#loader.reveal{background-color:transparent}
#loader .ground,#loader .bar,#loader .label{transition:opacity .25s}
#loader.leaving .ground,#loader.leaving .bar,#loader.leaving .label{opacity:0}