/* The loading lock belongs only to this document. Never fix the body or intercept wheel events. */
html.gallery-loading, html.gallery-loading body { overflow: hidden; overscroll-behavior: none; }
.gallery-loader[hidden] { display: none !important; }
html:not(.gallery-loading) .gallery-loader { display: none; }
.gallery-loader {
  position: fixed; inset: 0; z-index: 200; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) clamp(24px, 5vw, 76px) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  color: #f8f5f0; background: radial-gradient(ellipse at 50% 44%, #201a15 0, #0e0b09 48%, #090706 80%);
  opacity: 1; transition: opacity .36s ease; text-align: center;
}
.gallery-loader:focus { outline: none; }
.loader-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px; }
.loader-nav a, .loader-skip { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: #e4d9cc; text-decoration: none; font: 400 12px/1.5 system-ui, sans-serif; }
.loader-nav a:hover, .loader-skip:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.loader-content { margin: auto; padding: 32px 0; max-width: 700px; }
.loader-mark { display: block; height: clamp(100px, 17svh, 166px); width: auto; margin: 0 auto 22px; object-fit: contain; mix-blend-mode: screen; }
.loader-wordmark { display: block; font: 400 clamp(25px, 3vw, 34px)/1 Georgia, serif; letter-spacing: -.04em; }
.loader-rule { width: 48px; height: 1px; margin: clamp(26px, 5svh, 48px) auto 25px; background: #a4886b; }
.loader-phrase { margin: 0; font: 400 clamp(27px, 3.4vw, 46px)/1.18 Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.loader-translation { margin: 13px 0 0; color: #baa99a; font: italic 400 clamp(16px, 1.6vw, 20px)/1.5 Georgia, serif; }
.loader-status { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 0; color: #cbbcac; font: 400 10px/1.6 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.loader-status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #e2c6a5; animation: pegoli-loading-breathe 2s ease-in-out infinite; }
.loader-skip { padding: 6px 14px; border-bottom: 1px solid #a4886b55; }
.gallery-revealing .gallery-loader { opacity: 0; }
.gallery-paused .loader-status::before { animation-play-state: paused; }
.journey-scroll-hint { display: block; margin-top: 16px; color: #c8c5c3; font: 400 11px/1.6 system-ui, sans-serif; letter-spacing: .08em; }
@keyframes pegoli-loading-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-height: 570px) {
  .gallery-loader { padding-top: 10px; padding-bottom: 12px; }
  .loader-content { padding: 12px 0; }
  .loader-mark { height: 66px; margin-bottom: 12px; }
  .loader-rule { margin: 18px auto; }
  .loader-status { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-loader { transition: none; }
  .loader-status::before { animation: none; }
}
@media (max-height: 570px) and (orientation: landscape) {
  .loader-content { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 28px; align-items: center; text-align: left; width: 100%; }
  .loader-mark { grid-column: 1; grid-row: 1 / 3; height: 85px; margin: 0 auto; }
  .loader-wordmark { grid-column: 1; grid-row: 3; font-size: 23px; text-align: center; }
  .loader-rule { display: none; }
  .loader-phrase { grid-column: 2; grid-row: 1; font-size: 28px; }
  .loader-translation { grid-column: 2; grid-row: 2; margin: 0; }
  .loader-status { grid-column: 2; grid-row: 3; margin: 0; justify-content: flex-start; }
}