/* screens/loading.css: WP5, SPEC 3.1 (loading) and the loading placement of 3.13 (fatal error).
   The background is exactly the #curtain recipe of fx.css (red + red seigaiha at 2rem from the viewport origin, the
   night valance with scalloped lobes, 1.2rem ivory hems with an ink inner edge, the faint seam at 49.5vw), so the
   hand-off to the splitting curtain is seamless: on loading -> title #loading hides at once and the curtain, drawn
   identically, opens. The card is an ivory panel with a cobalt plate; the swirl medallion turns behind its top-right
   corner; the bichito walks on the rope bar. Loops: swirl, embers (ambient), walker, flame dot = 4 of 4. */

@keyframes wp5-hop-done { 0% { transform: translateY(0); } 40% { transform: translateY(-1.1rem) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1.1, .88); } 100% { transform: none; } }
@keyframes wp5-squish   { from { transform: scale(1.25, .6); } }

/* ---------------------------------------------------------------- curtain backdrop */
#loading {
  overflow: hidden;
  background: var(--red) url(../../img/svg/pat-seigaiha-red.svg) 0 0 / 2rem 1rem repeat;
}
#loading::before {                                 /* night valance with scalloped lobes (same mask as the curtain) */
  content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3rem; background: var(--night); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 2rem no-repeat, url(../../img/svg/edge-scallop.svg) 0 2rem / 2rem 1rem repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 2rem no-repeat, url(../../img/svg/edge-scallop.svg) 0 2rem / 2rem 1rem repeat-x;
}
#loading::after {                                  /* ivory hems with their ink inner edge, and the seam of the halves */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ivory) 0 calc(1.2rem - var(--ow-s)), var(--ink) 0 1.2rem, transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(270deg, var(--ivory) 0 calc(1.2rem - var(--ow-s)), var(--ink) 0 1.2rem, transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, rgb(13 11 22 / .16) 0 .5rem, transparent 0) 49.5vw 0 / .5rem 100% no-repeat;
}
#loading .loading__embers { z-index: 0; }

/* ---------------------------------------------------------------- the card */
#loading .loading-card {
  z-index: 2; isolation: isolate; width: min(34rem, 90vw); padding: 2rem 2rem 1.6rem; gap: 1.15rem;
  background: none; border: 0; box-shadow: none; color: var(--ink);
  --anim: ff-pop 380ms var(--spring-pop) 0ms backwards; animation: var(--anim);
}
#loading .loading-card::before {                   /* the paper: a layer, so the swirl can sit behind it */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../../img/svg/paper-grain.webp) 0 0 / 16rem, var(--grad-ivory);
  border: var(--ow-l) solid var(--ink); border-radius: var(--r-l);
  box-shadow: var(--plate-cobalt), var(--float);
}
#loading .loading-card::after {                    /* inner rule, like a printed notice */
  content: ''; position: absolute; inset: calc(var(--ow-l) + .45rem); z-index: -1; pointer-events: none;
  border: .13rem dashed rgb(44 15 21 / .22); border-radius: calc(var(--r-l) - .55rem);
}

/* swirl medallion behind the card's top-right corner: ink rim, slow spin (ambient loop 1) */
#loading .loading__swirl {
  z-index: -2; width: 9rem; height: 9rem; right: -3.4rem; top: -3.4rem; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 var(--ow-l) var(--ink), .35rem .45rem 0 var(--ow-l) var(--ink);
  --loop: ff-spin 24s linear infinite; animation: var(--loop);
}

/* the lockup at 55%: centred in the card */
#loading .lockup--lg { justify-self: center; margin: .3rem 0 -.3rem; }
#loading .lockup--lg .lockup__img { --anim: ff-stamp 600ms var(--spring-stamp) 80ms backwards; }
#loading .lockup--lg::after {                       /* little ink twinkles on the paper */
  content: ''; position: absolute; z-index: 3; pointer-events: none; inset: -.4rem -2.2rem -.4rem -2rem; opacity: .55;
  background:
    url(../../img/svg/twinkle-ink.svg) 100% 20% / 1.1rem no-repeat,
    url(../../img/svg/twinkle-ink.svg) 0 34% / .8rem no-repeat,
    url(../../img/svg/twinkle-ink.svg) 93% 95% / .65rem no-repeat;
}

/* ---------------------------------------------------------------- the rope bar and the walking bichito */
#loading .loadbar {
  width: min(24rem, 100%); height: 1.1rem; margin-top: 3.4rem; container-type: inline-size;
  counter-reset: pct var(--pct, 0);
  --anim: ff-bar 420ms var(--ease-out) 120ms backwards; animation: var(--anim); transform-origin: 0 50%;
}
#loading .loadbar::before, #loading .loadbar::after {     /* rope ends: two knots */
  content: ''; position: absolute; top: 50%; z-index: 2; width: .8rem; height: .8rem; translate: 0 -50%; border-radius: 50%;
  background: var(--ivory-3); box-shadow: 0 0 0 max(1.5px, .1rem) var(--ink); pointer-events: none;
}
#loading .loadbar::before { left: -.45rem; }
#loading .loadbar::after { right: -.45rem; }
#load-bar { transition: transform 220ms linear; }

/* the walker: 3.5rem tall, walk-strip@256 (4 frames 192x256, faces right), one stride per beat. It stands on the rope
   at the fill's end, clamped inside the rope at both ends (--p from loading-view, 100cqw = the rope). */
#load-bar .walker {
  --ww: 2.625rem; --wh: 3.5rem;
  right: 0; bottom: calc(100% - .2rem); width: var(--ww); height: var(--wh); overflow: hidden;
  translate: clamp(calc(var(--ww) - var(--p, 0) * 100cqw), calc(var(--ww) * .44), calc((1 - var(--p, 0)) * 100cqw)) 0;
  transition: translate 220ms linear;
}
#load-bar .walker > i {
  position: absolute; left: 0; top: 0; display: block; width: 400%; height: 100%;
  background: url(../../img/mascot/walk-strip@256.webp) 0 0 / 100% 100% no-repeat;
  --loop: ff-walk var(--beat, .397s) steps(4) infinite; animation: var(--loop);
}
#loading .loadbar.is-done .walker { --anim: wp5-hop-done 360ms var(--ease-out) backwards; animation: var(--anim); }
#loading .loadbar.is-done .walker > i { animation: none; transform: translateX(-25%); }

/* ---------------------------------------------------------------- status, percent, tip */
#loading #load-status {
  display: flex; align-items: center; gap: .55rem; margin-top: .1rem;
  font: 900 var(--fs-body)/1.3 var(--font-body); color: var(--ink); letter-spacing: .02em;
}
#loading #load-status::after {
  content: counter(pct) "%"; display: inline-block; min-width: 3.3rem; padding: .12rem .5rem; border-radius: var(--r-pill);
  background: var(--night); color: var(--gold); text-align: center;
  font: 700 var(--fs-small)/1.15 var(--font-num); letter-spacing: .02em; box-shadow: 0 .14rem 0 var(--ink);
}
#loading .tip {
  width: 100%; padding-top: .95rem; border-top: .13rem dashed rgb(44 15 21 / .2);
  font: 800 var(--fs-small)/1.45 var(--font-body); color: var(--ink-2); text-wrap: balance;
}
/* Taiko notice touch: festival bunting across the card's top-left corner (the swirl owns the other one) */
#loading .tip::before {
  content: ''; position: absolute; z-index: 1; left: -.3rem; top: -.25rem; width: 10.2rem; height: 8.25rem; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 170'><g stroke='%232C0F15' stroke-width='3' stroke-linejoin='round'><path d='M174.3 19.4 L198.3 19.4 L187.3 50.4 Z' fill='%23E8202F'/><path d='M140.1 47.5 L164.1 47.5 L153.1 78.5 Z' fill='%232340FF'/><path d='M106.8 71.9 L130.8 71.9 L119.8 102.9 Z' fill='%23F6F0E4'/><path d='M74.4 92.6 L98.4 92.6 L87.4 123.6 Z' fill='%23F5C542'/><path d='M43.0 109.6 L67.0 109.6 L56.0 140.6 Z' fill='%23E8202F'/><path d='M12.5 123.0 L36.5 123.0 L25.5 154.0 Z' fill='%23FF8A1C'/></g><path d='M206 4 Q96 104 4 132' fill='none' stroke='%232C0F15' stroke-width='3.6' stroke-linecap='round'/></svg>") 0 0 / 100% 100% no-repeat;
}
#loading .tip__star { color: var(--gold); -webkit-text-stroke: max(1.5px, .1em) var(--ink); paint-order: stroke fill; font-size: 1.05rem; }

/* ---------------------------------------------------------------- fatal error (3.13): squished bichito, swirl stops */
body:has(#error.on) #loading .loading-card { --anim: ff-shake 260ms linear 0ms both; animation: var(--anim); }
body:has(#error.on) #load-bar .walker {
  --ww: 4.1rem; width: var(--ww); overflow: visible; bottom: calc(100% - .15rem);
  background: url(../../img/mascot/pose-squish@256.webp) 50% 100% / contain no-repeat;
  --anim: wp5-squish 300ms var(--spring-pop) backwards; animation: var(--anim); transform-origin: 50% 100%;
}
body:has(#error.on) #load-bar .walker > i { display: none; }
body:has(#error.on) #loading .loading__swirl { animation-play-state: paused; }
body:has(#error.on) #loading #load-status { color: var(--red-deep); }
body:has(#error.on) #loading #load-status::after { content: none; }

/* narrow windows: the card keeps 34rem down to 90vw; the swirl tucks in */
@media (max-width: 700px) { #loading .loading__swirl { right: -1.5rem; top: -2.5rem; width: 6.5rem; height: 6.5rem; } }