/* An illustrated leaf from Hodam's celestial manuscript. */
.reading-loading-open { overflow: hidden; }
.reading-loading {
  position: fixed; inset: 0; width: min(100%, 480px); max-width: none;
  height: 100dvh; max-height: none; margin: auto; padding: 0; border: 0;
  color: #f1e1bc; background: #19332c; overflow: auto; overscroll-behavior: contain;
  scrollbar-width: none; font-family: 'Ridi', serif;
}
.reading-loading::backdrop { background: #10231ce8; }
.reading-loading[open] { animation: reading-loading-in 220ms ease-out both; }
.reading-loading.is-leaving { opacity: 0; transition: opacity 160ms ease-in; }
.reading-loading-page {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100%; overflow: hidden;
  padding: max(30px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom));
  background: #19332c url(/images/hodam/loading/backdrop.webp) center / cover no-repeat;
}
.reading-loading-page::before, .reading-loading-page::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 12px; border: 1px solid #bda16a59;
}
.reading-loading-page::after { inset: 17px; border-color: #bda16a24; }
.reading-loading-brand { margin-bottom: clamp(15px, 4svh, 40px); text-align: center; color: #dcc494; }
.reading-loading-brand > span { display: block; font-size: 20px; letter-spacing: .15em; }
.reading-loading-brand > small { display: block; margin-top: 9px; font-size: 9px; letter-spacing: .5em; padding-left: .5em; }
.reading-loading-art { position: relative; flex: 0 0 auto; width: min(100%, 360px); aspect-ratio: 1; margin-bottom: 8px; }
.reading-loading-dial { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: contain; opacity: .87; animation: reading-dial-turn 65s linear infinite; }
.reading-loading-elements { position: absolute; inset: 0; color: #e8cb8d; font-size: 21px; }
.reading-loading-elements span { position: absolute; transform: translate(-50%, -50%); text-shadow: 0 2px 8px #122b24; }
.reading-loading-elements span:nth-child(1) { left: 22%; top: 39%; }
.reading-loading-elements span:nth-child(2) { left: 34%; top: 17%; }
.reading-loading-elements span:nth-child(3) { left: 66%; top: 17%; }
.reading-loading-elements span:nth-child(4) { left: 78%; top: 39%; }
.reading-loading-elements span:nth-child(5) { left: 50%; top: 63%; }
.reading-loading-seal {
  position: absolute; left: 50%; top: 27%; transform: translateX(-50%) rotate(-3deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 49px; height: 85px; border: 3px double #d3a26e; color: #f2d0a3;
  background: #83452e; font-size: 29px; line-height: 1.15; box-shadow: 0 0 0 3px #83452e;
}
.reading-loading-book { position: absolute; z-index: 2; width: 96%; height: 64%; object-fit: contain; left: 2%; top: 49%; animation: reading-book-open 1.2s cubic-bezier(.2,.7,.2,1) both; }
.reading-loading-cloud { position: absolute; width: 68%; height: auto; opacity: .7; animation: reading-cloud-drift 9s ease-in-out infinite alternate; }
.reading-loading-cloud.cloud-left { left: -32%; top: 45%; --cloud-offset: 12px; }
.reading-loading-cloud.cloud-right { right: -29%; top: 17%; --cloud-offset: -12px; animation-delay: -4s; transform: scaleX(-1); }
.reading-loading-stars { position: absolute; inset: 0; }
.reading-loading-stars i { position: absolute; width: 3px; height: 3px; background: #e2c27b; transform: rotate(45deg); animation: reading-star-drift 2.8s ease-in-out infinite alternate; }
.reading-loading-stars i:nth-child(1) { left: 16%; top: 12%; }
.reading-loading-stars i:nth-child(2) { left: 87%; top: 41%; animation-delay: -.8s; }
.reading-loading-stars i:nth-child(3) { left: 11%; top: 67%; animation-delay: -.4s; }
.reading-loading-stars i:nth-child(4) { left: 71%; top: 7%; animation-delay: -1.6s; }
.reading-loading-stars i:nth-child(5) { left: 91%; top: 73%; animation-delay: -1.2s; }
.reading-loading-stars i:nth-child(6) { left: 45%; top: 5%; animation-delay: -2s; }
.reading-loading-stars i:nth-child(7) { left: 8%; top: 30%; animation-delay: -1.8s; }
.reading-loading-stars i:nth-child(8) { left: 80%; top: 87%; animation-delay: -.2s; }
.reading-loading-copy { position: relative; z-index: 3; margin-top: 20px; width: 100%; text-align: center; }
.reading-loading-copy h1 { margin: 0 0 15px; font-size: clamp(25px, 6.7vw, 30px); line-height: 1.6; font-weight: 400; letter-spacing: -.035em; color: #f5e7ca; }
.reading-loading-copy > p:not([class]) { margin-bottom: 20px; color: #d7c7a7; font-size: 13px; line-height: 1.9; }
.reading-loading-progress { width: 100px; height: 1px; background: #ccb17240; margin: 22px auto 12px; overflow: hidden; }
.reading-loading-progress > span { display: block; width: 100%; height: 100%; background: #d6b978; transform-origin: left; animation: reading-progress 2s cubic-bezier(.2,.55,.35,1) both; }
.reading-loading-status { color: #d0bd97; min-height: 20px; font-size: 11px; line-height: 1.8; margin-bottom: 0; }
.reading-loading-footer { display: flex; justify-content: center; margin-top: 24px; }
.reading-loading-footer:has(button[hidden]) { display: none; }
.reading-loading-footer button { background: #19332c; color: #f1e1bc; border: 1px solid #bda16a80; min-height: 44px; padding: 8px 16px; font-size: 12px; }
.reading-loading-footer button:focus-visible { outline: 2px solid #e8cb8d !important; outline-offset: 4px; }
@keyframes reading-loading-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reading-dial-turn { from { transform: rotate(-12deg); } to { transform: rotate(348deg); } }
@keyframes reading-book-open { from { opacity: 0; transform: translateY(16px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reading-cloud-drift { from { translate: 0 0; } to { translate: var(--cloud-offset) -7px; } }
@keyframes reading-star-drift { from { opacity: .25; translate: 0 4px; } to { opacity: .9; translate: 0 -4px; } }
@keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-height: 740px) { .reading-loading-art { width: min(74%, 280px); } .reading-loading-brand { margin-bottom: 12px; } .reading-loading-copy { margin-top: 12px; } .reading-loading-footer { margin-top: 20px; } }
@media (max-height: 600px) { .reading-loading-art { width: min(72%, 215px); } .reading-loading-seal { width: 30px; height: 54px; font-size: 20px; border-width: 2px; } .reading-loading-elements { font-size: 14px; } .reading-loading-brand > small { display: none; } .reading-loading-copy h1 { font-size: 24px; margin-bottom: 8px; } .reading-loading-copy > p:not([class]) { font-size: 12px; margin-bottom: 12px; } .reading-loading-progress { margin-top: 14px; } .reading-loading-footer { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .reading-loading[open], .reading-loading * { animation: none !important; transition: none !important; } .reading-loading-progress > span { transform: scaleX(1); } }