/* rule: first paint and React fallback share this sheet so loading has one identity. */
.koria-loading, .loading-card { box-sizing: border-box; }
.koria-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center;
  padding: clamp(24px, 6vw, 100px);
  background: #16283a;
  color: #2a2118;
  transition: opacity 520ms ease, visibility 520ms linear;
}
.loading-scene { position: absolute; inset: 0; overflow: hidden; background: #16283a url('/ui/loading/four-peoples-crossing-blur.webp') center / cover no-repeat; }
.loading-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 650ms ease; }
.loading-scene > img.is-ready { opacity: 1; }
.koria-loading::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #173e5038, transparent 65%);
}
.koria-loading::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #fff2b8 0 2px, #e6af5888 3px, transparent 8px), radial-gradient(circle, #ffe49a 0 1px, #d9a04488 2px, transparent 7px), radial-gradient(circle, #fff2b8 0 2px, #e6af5888 3px, transparent 8px), radial-gradient(circle, #ffe49a 0 1px, #d9a04488 2px, transparent 7px), radial-gradient(circle, #fff2b8 0 1px, #e6af5888 2px, transparent 7px);
  background-repeat: no-repeat; background-size: 16px 16px, 14px 14px, 16px 16px, 14px 14px, 14px 14px;
  background-position: 52% 25%, 73% 61%, 89% 38%, 62% 78%, 81% 19%;
  filter: drop-shadow(0 0 8px #ffd270); opacity: .8;
}
.koria-loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-card {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px;
  width: min(440px, 100%); padding: 32px 28px; text-align: center;
  border: 20px solid transparent;
  border-image: url('/ui/meadow/sheet.webp') 50 fill / 20px;
  filter: drop-shadow(0 8px 18px #193a4438);
}
.loading-card::before {
  content: ''; position: absolute; top: -30px; left: -28px;
  width: 160px; height: 107px; pointer-events: none;
  background: url('/ui/motion/vine-tl.webp') 0 0 / 600% 600% no-repeat;
}
.loading-card > img { width: min(320px, 100%); height: auto; }
.loading-card > p { margin: 0; max-width: 30ch; font: 500 1.2rem/1.5 'Alegreya', Georgia, serif; color: #6b5638; }
.loading-card > .loading-eyebrow { font: 600 .68rem/1.5 'Cinzel', Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: #174b78; }
.loading-progress { width: 100%; height: 13px; padding: 2px; border: 1px solid #b8904a; border-radius: 20px; background: #d7c4a2; overflow: hidden; box-shadow: inset 0 1px 3px #6b563830; }
.loading-progress > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#79a2c2, #174b78); transform: scaleX(var(--p, .04)); transform-origin: left; transition: transform 420ms ease; }
.loading-percent { color: #174b78; font: 600 .85rem/1 'Alegreya', Georgia, serif; font-variant-numeric: tabular-nums; }
.koria-loading[data-failed] .loading-progress > i { background: #b3321f; }
@keyframes loading-vine-x { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes loading-vine-y { from { background-position-y: 0%; } to { background-position-y: 100%; } }
@keyframes loading-wait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes loading-fireflies { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .4; } 50% { transform: translate3d(8px, -18px, 0); opacity: .9; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-still]) .koria-loading::after { animation: loading-fireflies 6s ease-in-out infinite; }
  html:not([data-still]) .loading-card::before { animation: loading-vine-x .5s steps(6, jump-none) infinite, loading-vine-y 3s steps(6, jump-none) infinite; }
  .loading-progress--waiting > i { animation: loading-wait 2s ease-in-out infinite; transform: scaleX(1); }
}
@media (max-width: 650px) {
  .koria-loading { align-items: end; justify-content: center; padding: 24px 18px max(24px, env(safe-area-inset-bottom)); }
  .loading-scene { background-position: 90% center; }
  .loading-scene > img { object-position: 90% center; }
  .loading-card { padding: 22px 18px; gap: 13px; }
  .loading-card > img { max-width: 260px; }
}
@media (max-height: 500px) and (min-width: 651px) {
  .koria-loading { padding: 18px 30px; }
  .loading-card { max-width: 330px; padding: 16px; gap: 10px; }
  .loading-card > img { max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .koria-loading, .loading-scene > img, .loading-progress > i { transition: none; }
}