/* =========================================================================
   loader.css — full-screen branded loader
   Loaded BEFORE other stylesheets in head.php so it paints on first frame.
   Also self-registers Hatton @font-face so the wordmark renders correctly
   even before global.css has arrived.
   ========================================================================= */

/* @font-face must be inside loader.css too, because global.css hasn't loaded
   yet when the loader paints. font-display:swap means a Georgia fallback
   appears instantly while Hatton is being downloaded. */
@font-face{
  font-family:'Hatton';
  src:url('../fonts/PPHatton-Ultralight.otf') format('opentype');
  font-weight:200;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Hatton';
  src:url('../fonts/PPHatton-Medium.otf') format('opentype');
  font-weight:500;font-style:normal;font-display:swap;
}

/* Lock body scroll while the loader is up */
html.is-loading,html.is-loading body{overflow:hidden;height:100%;}

.loader{
  position:fixed;inset:0;z-index:9999;pointer-events:auto;
  background:#F7F4EE;display:flex;align-items:center;justify-content:center;
}

/* Two curtains that part on exit — top half lifts, bottom drops */
.loader-curtain{
  position:absolute;left:0;right:0;background:#F7F4EE;z-index:1;
  transition:transform 750ms cubic-bezier(.83,0,.17,1);
}
.loader-curtain--top{top:0;height:50%;transform:translateY(0);}
.loader-curtain--bot{bottom:0;height:50%;transform:translateY(0);}
.loader.is-done .loader-curtain--top{transform:translateY(-100%);}
.loader.is-done .loader-curtain--bot{transform:translateY(100%);}
.loader.is-done .loader-inner{
  opacity:0;transform:translateY(-12px);
  transition:opacity 380ms ease,transform 380ms ease;
}

.loader-inner{
  position:relative;z-index:2;text-align:center;
  padding:2rem 1.5rem;max-width:420px;width:100%;
}

/* Four service-pillar dots — stagger in on mount */
.loader-pillars{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin-bottom:2.2rem;
}
.loader-pillar{
  display:block;width:7px;height:7px;border-radius:50%;
  opacity:0;transform:translateY(-6px) scale(.6);
  animation:loaderPillarIn 600ms cubic-bezier(.4,0,.2,1) forwards;
}
.loader-pillar--indigo{background:#393182;animation-delay:120ms;}
.loader-pillar--red   {background:#E2231A;animation-delay:220ms;}
.loader-pillar--gold  {background:#C29B63;animation-delay:320ms;}
.loader-pillar--ink   {background:#1A1726;animation-delay:420ms;}

@keyframes loaderPillarIn{
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Vertical pendulum rule — gold fill grows downward as load progresses */
.loader-rule{
  position:relative;width:1px;height:140px;margin:0 auto 2.4rem;
  background:rgba(58,49,130,.14);overflow:visible;
  opacity:0;animation:loaderFadeIn 600ms ease 400ms forwards;
}
.loader-rule-fill{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:0%;background:#C29B63;
  transition:height 220ms cubic-bezier(.4,0,.2,1);
}
.loader-rule-tip{
  position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#C29B63;
  box-shadow:0 0 0 4px rgba(194,155,99,.18);
  animation:loaderTipPulse 2400ms ease-in-out infinite;
}

@keyframes loaderTipPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(194,155,99,.18);}
  50%    {box-shadow:0 0 0 7px rgba(194,155,99,.08);}
}
@keyframes loaderFadeIn{
  to{opacity:1;}
}

/* DIVINE wordmark — fades up after the dots */
.loader-mark{
  font-family:'Hatton',Georgia,serif;font-weight:200;
  font-size:clamp(2.6rem,7vw,4rem);line-height:1;letter-spacing:.05em;
  color:#1A1726;margin:0 0 1.1rem;
  opacity:0;transform:translateY(10px);
  animation:loaderTextIn 700ms cubic-bezier(.4,0,.2,1) 600ms forwards;
}

/* Italic tagline */
.loader-tag{
  font-family:'Hatton',Georgia,serif;font-weight:300;
  font-size:clamp(.92rem,1.8vw,1.05rem);line-height:1.5;color:#393182;
  margin:0 0 2.4rem;
  opacity:0;transform:translateY(8px);
  animation:loaderTextIn 700ms cubic-bezier(.4,0,.2,1) 780ms forwards;
}
.loader-tag em{font-style:italic;color:#C29B63;}

/* Mono caps percentage counter */
.loader-pct{
  font-family:'JetBrains Mono','Public Sans',monospace;font-weight:500;
  font-size:.7rem;letter-spacing:.18em;color:#7A7693;text-transform:uppercase;
  margin:0;
  opacity:0;
  animation:loaderFadeIn 700ms ease 920ms forwards;
}

@keyframes loaderTextIn{
  to{opacity:1;transform:translateY(0);}
}

/* Small phones — tighten everything a touch */
@media (max-width:576px){
  .loader-rule{height:110px;margin-bottom:2rem;}
  .loader-pillars{gap:12px;margin-bottom:1.8rem;}
  .loader-tag{margin-bottom:2rem;}
}
@media (max-width:400px){
  .loader-rule{height:90px;}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  .loader-pillar,.loader-rule,.loader-mark,.loader-tag,.loader-pct{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .loader-rule-tip{animation:none !important;}
  .loader-curtain{transition:opacity 300ms ease !important;}
  .loader.is-done{opacity:0;}
}