/* Loading screen, and the lighter rendering used on phones, tablets and
   small-memory machines (body.lite, decided by the inline script in index.html).
   The book, its text, photos, videos and scenes are the same; only their cost differs. */

/* ---- 正在載入回憶 ------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 42%, #6d4b2d 0%, #43301c 52%, #24170d 100%);
  color: #f3e4c6; font-family: var(--font-zh);
  transition: opacity .8s ease, visibility 0s .8s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 60vmin; height: 60vmin;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #f0c98a2e, #f0c98a00 70%);
  animation: loader-glow 3s ease-in-out infinite alternate;
}
@keyframes loader-glow { from { opacity: .5; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.loader-book { position: relative; width: 92px; height: 64px; margin-bottom: 10px; perspective: 420px; }
.loader-board {
  position: absolute; left: 50%; top: 2px; width: 41px; height: 58px;
  background: linear-gradient(115deg, #6c7c57, #3f4d36 70%); border-radius: 2px 5px 5px 2px;
  box-shadow: 0 8px 18px #00000066, inset 0 0 0 1px #d8c98d33;
}
.loader-board::before {
  content: ''; position: absolute; right: 100%; top: 0; width: 41px; height: 58px;
  background: linear-gradient(245deg, #6c7c57, #3f4d36 70%); border-radius: 5px 2px 2px 5px;
  box-shadow: 0 8px 18px #00000066, inset 0 0 0 1px #d8c98d33;
}
.loader-board::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 36px; height: 52px;
  background: linear-gradient(90deg, #ece2c8, #f8f2e2 40%, #efe6d0); border-radius: 1px 3px 3px 1px;
}
.loader-page {
  position: absolute; left: 50%; top: 5px; width: 36px; height: 52px;
  background: linear-gradient(90deg, #f1e8d3, #fbf6ea 45%, #eee5cf); border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 2px #00000033; transform-origin: 0 50%;
  animation: loader-flip 2s cubic-bezier(.5, .05, .35, 1) infinite;
}
.loader-page.second { animation-delay: 1s; }
@keyframes loader-flip {
  0% { transform: rotateY(0); opacity: 1; }
  48% { transform: rotateY(-180deg); opacity: 1; }
  52%, 100% { transform: rotateY(-180deg); opacity: 0; }
}
.loader-text { margin: 0; font-size: 18px; letter-spacing: .3em; text-indent: .3em; color: #f7ead0; text-shadow: 0 1px 8px #00000055; }
.loader-dots { letter-spacing: .05em; text-indent: 0; margin-left: .15em; }
.loader-dots i { font-style: normal; animation: loader-dot 1.5s ease-in-out infinite; }
.loader-dots i:nth-child(2) { animation-delay: .25s; }
.loader-dots i:nth-child(3) { animation-delay: .5s; }
@keyframes loader-dot { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.loader-sub { margin: 0; font: italic 13px var(--font-latin); letter-spacing: .06em; color: #cdb996; }
.loader-bar { width: 168px; height: 2px; margin-top: 6px; border-radius: 2px; background: #ffffff22; overflow: hidden; }
.loader-bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #c8ab6c, #f0dba6); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .loader::before, .loader-page, .loader-dots i { animation: none; }
  .loader-page { opacity: 0; }
}

/* ---- Lite rendering ------------------------------------------------ */
/* Scene pieces become paper cut-outs: one composited surface each, no rear copy, wall or tab. */
.lite .pop-back, .lite .pop-wall, .lite .pop-tab { display: none; }
.lite .pop-front { transform: none; }
.lite .pop-volume, .lite .tower-panel { transform-style: flat; }
.lite .sun-piece .pop-volume { transform: none; }
.lite .pop-front svg, .lite .mountain-art, .lite .arch-spire-face { filter: none; }
.lite .tower-band { transform: none; }
/* Shading that would otherwise force the browser to blur or filter every frame. */
.lite .grain, .lite .page-sheen, .lite #dust { display: none; }
.lite .paper.t-page.light .wash { filter: none; }
.lite .pager button, .lite .music, .lite .lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; }
.lite .lightbox { background: #23291df2; }
.lite .print, .lite .room-photograph { transition: none; }
.lite .print:hover { transform: none; }
.lite .print.r:hover { transform: rotate(1.4deg); }
.lite .print:not(.r):hover { transform: rotate(-1.6deg); }
/* Flat buildings stand as a single card; the wall texture lines up without depth. */
.lite .arch-flat .arch-plane { backface-visibility: visible; }
/* Buildings and the Candle House tower are single pictures rendered from the solid models
   (tools/render-scenes.py → js/scene-images.js), placed inside the piece box the model used. */
.arch-image img { position: absolute; display: block; max-width: none; pointer-events: none; }
.lite .pop-front { backface-visibility: visible; }

/* ---- Fewer surfaces on phones and tablets --------------------------- */
/* iOS gives every 3D-transformed element its own full-resolution surface. The tilt and the
   book are flat here, so the shadow, page stacks, binding and ribbon paint into one surface
   instead of six full-page layers; the sheets keep their own 3D space with the perspective on
   .sheets. The lay-flat view keeps the whole 3D chain, since its scenes stand at right angles. */
body.lite:not(.tabletop) .tilt, body.lite:not(.tabletop) .book { transform-style: flat; }
body.lite:not(.tabletop) .sheets { perspective: 1700px; perspective-origin: 50% 40%; }
body.lite:not(.tabletop) .stack, body.lite:not(.tabletop) .binding { transform: none; }
body.lite:not(.tabletop) .ribbon { transform: rotate(-4deg); }
body.lite:not(.tabletop) .book.open .ribbon { transform: rotate(7deg); }
body.lite:not(.tabletop) .book-shadow { transform: translate(15px, 27px); }
/* Their changes would now repaint the whole book surface every frame: they jump instead. */
.lite .book-shadow { transition: opacity 1.6s; }
.lite .binding { transition: none; }
/* The shadow a turning page throws on the page beneath is another full-page layer per turn. */
.lite .cast { display: none; }
.lite .room-photograph { transform: none; }
/* Filters cost an extra rendering pass per layer per frame on iOS. */
.lite .cover-emblem svg, .lite .finale-figure img, .lite .flashback .fb-frame img, .lite .tower-panel { filter: none; }
.lite .fb-leak { display: none; }
/* Nothing animates for ever while the reader is still: the equaliser holds a pose instead. */
.lite .music[aria-pressed="true"] .bars i { animation: none; transform: scaleY(.5); }
.lite .music[aria-pressed="true"] .bars i:nth-child(2) { transform: scaleY(.95); }
.lite .music[aria-pressed="true"] .bars i:nth-child(3) { transform: scaleY(.7); }

/* ---- Turning pages on Safari ------------------------------------ */
/* The shade and sheen get their own layer only while their sheet turns, so their
   per-frame opacity never repaints the page beneath them. */
.sheet.turning .shade, .sheet.turning .page-sheen { will-change: opacity; }
/* Uniform corners let the compositor clip a page directly; mixed radii need a mask layer. */
.lite .face, .lite .face.back,
.lite .sheet.is-cover .face, .lite .sheet.is-back .face,
.lite .sheet.is-cover .face.back, .lite .sheet.is-back .face.back { border-radius: 3px; }
/* The stage owns every touch on it: no double-tap zoom, and no chance of the browser
   turning a slow or slightly diagonal swipe into a pan and cancelling it. */
.stage { touch-action: none; }

/* Candle House on phones: each tower panel paints its window column and stone bands as one
   background pattern, so the tower is 24 elements instead of several hundred. */
.lite .tower-panel.lite-windows {
  background-image:
    repeating-linear-gradient(180deg, #e0cfaa 0 3px, transparent 3px 37px),
    repeating-linear-gradient(180deg, #3f5a58 0 6.6px, transparent 6.6px 16.4px),
    repeating-linear-gradient(0deg, transparent 0 2px, #5e3d273b 2px 2.6px),
    repeating-linear-gradient(90deg, #b9794e 0 4px, #966442 4px 4.6px, #be8051 4.6px 9px);
  background-size: 100% 100%, 5.2px calc(100% - 20px), auto, auto;
  background-position: 0 0, 3px 9px, 0 0, 0 0;
  background-repeat: repeat, no-repeat, repeat, repeat;
}
.lite .tower-panel.lite-plain {
  background-image:
    repeating-linear-gradient(180deg, #e0cfaa 0 3px, transparent 3px 37px),
    repeating-linear-gradient(0deg, transparent 0 2px, #5e3d273b 2px 2.6px),
    repeating-linear-gradient(90deg, #b9794e 0 4px, #966442 4px 4.6px, #be8051 4.6px 9px);
}