/* =========================================================================
   LOADER — a small book being riffled through.

   Deliberately small and deliberately late. It is never a full-screen panel,
   because the pages behind it are already painted and covering them makes the
   site feel slower, not faster. It appears only when a wait is real.

   Two variants, so the same markup can read two ways:

     .gload              a continuous riffle — pages turn without stopping
     .gload.cycle        opens, riffles, closes, opens again

   Size is one custom property. --u is the height of a board; everything else
   is derived, so the whole thing scales from a 20px status dot to a demo.

   Nothing here is scoped to a page, but every selector starts at .gload, so
   it is safe to load anywhere.
   ========================================================================= */

.gload{
  --u:48px;                      /* board height — medium */
  --w:calc(var(--u) * .62);      /* board width — half the open book */
  --paper:#F4EDE0;
  --paper2:#E4D9C2;
  --board:#123C46;
  --board2:#0B2029;
  --edge:#C9A227;
  display:inline-block;
  width:calc(var(--w) * 2);
  height:var(--u);
  perspective:calc(var(--u) * 7);
  perspective-origin:50% 50%;
}

.gload .bk{
  display:block;                 /* it is a <span>; inline would ignore the size */
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
}

/* the two boards */
.gload .cv{
  position:absolute; top:0; height:100%; width:var(--w);
  background:linear-gradient(160deg,var(--board),var(--board2));
  box-shadow:0 2px 6px -2px rgba(0,0,0,.7);
}
.gload .cv.l{left:0;  border-radius:2px 0 0 2px;
  border-right:1px solid rgba(201,162,39,.45)}
.gload .cv.r{right:0; border-radius:0 2px 2px 0}

/* the block of paper sitting on each side, so the book never looks hollow */
.gload .st{
  position:absolute; top:6%; height:88%; width:calc(var(--w) - 2px);
  background:linear-gradient(180deg,var(--paper) 0 1px,var(--paper2) 1px 2px);
  background-size:100% 2px;
}
.gload .st.l{left:1px}
.gload .st.r{right:1px}

/* the leaves that turn */
.gload .pg{
  position:absolute; top:6%; height:88%; width:calc(var(--w) - 2px);
  left:var(--w);
  transform-origin:left center;
  transform-style:preserve-3d;
  background:linear-gradient(90deg,var(--paper),#FBF6EA);
  border-left:1px solid rgba(18,60,70,.25);
  box-shadow:1px 0 3px -1px rgba(0,0,0,.35);
  animation:gload-pg var(--dur,1.5s) linear infinite;
  /* --spread squeezes the stagger. At 1 the leaves queue up and you see one
     turn at a time; below that they overlap and it reads as a riffle. */
  animation-delay:calc(var(--i) * var(--dur,1.5s) * var(--spread,1) / var(--n,6));
  backface-visibility:hidden;
}

/* A leaf sweeps from the right board to the left, then fades so it can return
   to the start without the eye seeing it flick backwards. */
@keyframes gload-pg{
  0%      {transform:rotateY(0deg);      opacity:1}
  46%     {transform:rotateY(-176deg);   opacity:1}
  56%     {transform:rotateY(-176deg);   opacity:0}
  57%,
  100%    {transform:rotateY(0deg);      opacity:0}
}

/* the gilt edge, so it reads as a book and not a folder */
.gload .bk::after{
  content:''; position:absolute; left:calc(var(--w) - .5px); top:4%;
  width:1px; height:92%;
  background:linear-gradient(180deg,transparent,var(--edge),transparent);
  opacity:.75;
}

/* ---------- variant: open, riffle, close, repeat ----------
   The book is only open for about half the cycle, so the leaves have to turn
   faster and overlap more or you would see a single page creep across. */
.gload.cycle{--dur:.85s;--spread:.34}
.gload.cycle .bk{
  animation:gload-open var(--cyc,2.8s) ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes gload-open{
  0%,8%    {transform:rotateX(52deg) scaleX(.18)}
  22%,72%  {transform:rotateX(0deg)  scaleX(1)}
  90%,100% {transform:rotateX(52deg) scaleX(.18)}
}
/* while shut, the leaves should not be seen turning in mid-air */
.gload.cycle .pg{
  animation:gload-pg var(--dur,.85s) linear infinite,
            gload-hide var(--cyc,2.8s) step-end infinite;
}
@keyframes gload-hide{
  0%,18%   {visibility:hidden}
  19%,74%  {visibility:visible}
  75%,100% {visibility:hidden}
}

/* ---------- where it sits while a page loads ----------
   Centred, over a scrim that is faint but visible. It does hold the page
   while it is up, and a barrier you cannot see is a trap: the reader taps,
   nothing happens, and there is nothing to explain why. A light dim says
   "busy" honestly. The words behind stay legible. */
.gload-fix{
  position:fixed; inset:0; z-index:210;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem;
  background:rgba(8,18,24,.44);
  opacity:0; transition:opacity .22s ease;
}
.gload-fix.on{opacity:1}
.gload-fix .say{
  font-family:'Syne',system-ui,-apple-system,sans-serif;
  font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,237,224,.8); text-align:center; max-width:18rem; line-height:1.5;
}
/* only after a wait long enough to be worth explaining */
.gload-fix .slow{display:none}
.gload-fix.late .slow{display:block;margin-top:.5rem;text-transform:none;
  letter-spacing:0;font-size:.8rem;color:rgba(244,237,224,.6)}

@media (prefers-reduced-motion:reduce){
  .gload .pg,.gload.cycle .bk{animation:none}
  .gload .pg{opacity:0}
  .gload-fix{transition:none}
}