/* Loading screen — mirrors the first page: violet, three-line type, rail of circles */
html.is-loading, html.is-loading body{ overflow:hidden; }

.loader{
  --l-violet:#241640; --l-paper:#FFF4E1; --l-accent:#FFC93C;
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(.5rem,2vh,1.6rem);
  padding:clamp(1rem,4vh,3rem) clamp(1.2rem,6vw,5rem);
  padding-top:calc(clamp(1rem,4vh,3rem) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(1rem,4vh,3rem) + env(safe-area-inset-bottom));
  background:var(--l-violet); color:var(--l-paper);
  font-family:'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  transform-origin:bottom left;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  user-select:none; -webkit-user-select:none;
  overflow:hidden;
}
.loader.is-leaving{ transform:translateY(-108%) rotate(-5deg); pointer-events:none; }
.loader.is-gone{ display:none; }

.l-rule{ height:1px; background:currentColor; opacity:.3; transform-origin:left; animation:lRule 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes lRule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.l-title{
  margin:0; font-weight:900; line-height:.92; letter-spacing:-0.015em;
  font-size:clamp(2rem,min(8.6vw,12.5vh),7.6rem);
}
.l-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.l-line > span{
  display:block; transform:translateY(112%);
  animation:lRise 1.1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(.15s + var(--i) * .13s);
}
.l-line.accent{ color:var(--l-accent); }
@keyframes lRise{ to{ transform:none; } }

.l-foot{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:clamp(.72rem,1.9vh,.85rem); }
.l-bar{ position:relative; flex:1; height:2px; background:color-mix(in srgb, var(--l-paper) 18%, transparent); border-radius:2px; overflow:hidden; }
.l-bar i{ position:absolute; inset:0; background:var(--l-accent); transform-origin:left; transform:scaleX(var(--p,0)); transition:transform .35s ease-out; border-radius:inherit; }
.l-pct{ min-width:3.2ch; text-align:right; opacity:.75; font-variant-numeric:tabular-nums; }

/* rail of circles, same place and size as the page dock; a soft wave runs through it */
.l-rail{
  position:absolute; top:50%; right:clamp(.55rem,1.5vw,1.6rem); transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(.6rem,2.4vh,1.2rem);
}
.l-rail b{
  width:clamp(1.25rem,min(3.6vh,6vw),2.1rem); aspect-ratio:1; border-radius:50%;
  background:linear-gradient(145deg, color-mix(in srgb, var(--l-paper) 24%, transparent), color-mix(in srgb, var(--l-paper) 7%, transparent));
  border:1px solid color-mix(in srgb, var(--l-paper) 30%, transparent);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55), inset 0 1.5px 0 color-mix(in srgb, var(--l-paper) 45%, transparent);
  opacity:0; animation:lDot 1.9s cubic-bezier(.45,0,.25,1) infinite, lDotIn .8s ease forwards;
  animation-delay:calc(var(--i) * .16s), calc(.3s + var(--i) * .08s);
}
@keyframes lDot{
  0%,100%{ transform:scale(1); background:linear-gradient(145deg, color-mix(in srgb, var(--l-paper) 24%, transparent), color-mix(in srgb, var(--l-paper) 7%, transparent)); }
  35%{ transform:scale(1.45); background:linear-gradient(145deg, var(--l-accent), color-mix(in srgb, var(--l-accent) 70%, #FF5A36)); }
  70%{ transform:scale(1); }
}
@keyframes lDotIn{ to{ opacity:1; } }

/* content leaves just before the curtain does */
.loader.is-leaving .l-title, .loader.is-leaving .l-foot, .loader.is-leaving .l-rail{ opacity:0; transition:opacity .45s ease; }

@media (max-width:520px){ .l-title{ font-size:clamp(2rem,min(10.5vw,11.5vh),3.2rem); } }
@media (min-width:1800px){ .l-title{ font-size:clamp(2rem,min(8.6vw,12.5vh),9rem); } }
@media (prefers-reduced-motion:reduce){
  .loader{ transition:opacity .4s ease; }
  .loader.is-leaving{ transform:none; opacity:0; }
  .l-line > span{ animation-duration:.01s; animation-delay:0s; }
  .l-rail b{ animation:lDotIn .01s forwards; opacity:1; }
}

@media (max-height:380px){
  .loader{ padding-top:.6rem; padding-bottom:.6rem; }
  .l-title{ font-size:clamp(1.6rem,min(9vw,17vh),3rem); line-height:1; }
}