/* ============================================================
   loader.css — the entry curtain.

   A barbell that loads plates as the page loads, then lifts.
   The curtain splits and the page is revealed behind it.

   IMPORTANT: the failsafe animation at the bottom of this file
   clears the loader on its own after 6s. That is deliberate —
   if the JS never runs (blocked, error, old browser) the page
   must still be usable. Never remove it.
   ============================================================ */
:root{
  --ldr-blue:#3E7BFA;
  --ldr-pink:#FF3F91;
}

.loader{
  position:fixed; inset:0; z-index:5000;
  display:grid; place-items:center;
  pointer-events:none;
}

/* the two halves of the curtain */
.ldr-half{
  position:absolute; left:0; right:0; height:50.5%;
  background:#07080c;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.ldr-half.top{top:0;}
.ldr-half.bottom{bottom:0;}
/* a hairline where the two halves meet, so the split reads as a seam */
.ldr-half.top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--ldr-blue) 38%, var(--ldr-pink) 62%, transparent);
  opacity:0.5;
}

.loader.paper .ldr-half{background:#f4efe4;}
.loader.paper .ldr-half.top::after{opacity:0.35;}

/* ---- the core: barbell + readout ---- */
.ldr-core{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  width:min(340px, 76vw);
  transition:opacity .45s ease, transform .7s cubic-bezier(.76,0,.24,1);
}

.ldr-bar{width:100%; height:auto; overflow:visible;}

.ldr-rig{
  transition:transform .75s cubic-bezier(.34,1.3,.5,1);
  transform:translateY(0);
}
.loader.lift .ldr-rig{transform:translateY(-16px);}

.ldr-plate{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  transform:scaleY(0.15);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.2,.4,1);
}
.ldr-plate.on{opacity:1; transform:scaleY(1);}

/* ---- readout ---- */
.ldr-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  width:100%; font-family:var(--f-mono);
  font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase;
}
.ldr-label{color:var(--ldr-blue);}
.loader.paper .ldr-label{color:var(--ldr-pink);}
.ldr-pct{color:#f2efe9; font-variant-numeric:tabular-nums;}
.loader.paper .ldr-pct{color:#211d16;}

.ldr-track{
  width:100%; height:2px; border-radius:2px;
  background:rgba(242,239,233,0.12); overflow:hidden;
}
.loader.paper .ldr-track{background:rgba(33,29,22,0.14);}
.ldr-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--ldr-blue), var(--ldr-pink));
  transition:width .3s ease;
}

/* ---- exit ---- */
.loader.done .ldr-core{opacity:0; transform:translateY(-10px); transition-delay:0s;}
.loader.done .ldr-half.top{transform:translateY(-100%); transition-delay:.18s;}
.loader.done .ldr-half.bottom{transform:translateY(100%); transition-delay:.18s;}
.loader.gone{display:none;}

/* ---- reduced motion: no lift, no plate pop, just a quick clean fade ---- */
@media(prefers-reduced-motion:reduce){
  .ldr-rig,.ldr-plate,.ldr-core{transition:opacity .2s ease;}
  .loader.lift .ldr-rig{transform:none;}
  .ldr-plate{transform:none;}
  .ldr-half{transition:opacity .25s ease;}
  .loader.done .ldr-half{transform:none; opacity:0;}
  .loader.done .ldr-core{transform:none;}
}

/* ---- FAILSAFE — see the note at the top of this file ---- */
@keyframes ldrFailsafe{to{opacity:0; visibility:hidden;}}
.loader{animation:ldrFailsafe .4s linear 5s forwards;}