/* The swipe version: the same invitation as a pile of letters. Each section is one sheet; a swipe (or an arrow key,
   or the mouse wheel) slides the top sheet away to read the one beneath, or brings the last one back.
   Every sheet is its own ready-drawn layer and the table under the pile never changes, so turning a page only moves
   pixels that are already drawn; repainting during a swipe is what makes phones lag. */
html.deck, html.deck body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.deck main {
  position: fixed; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(120% 85% at 50% 42%, #2a1f17, #140e0a);
}
.deck main::after { display: none; }

.deck .sec {
  position: absolute; z-index: 1; top: 6px; bottom: 14px; left: max(6px, calc(50% - 222px)); right: max(6px, calc(50% - 222px));
  height: auto; min-height: 0; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(232, 200, 140, .2), 0 8px 18px rgba(0, 0, 0, .34);
  transform-origin: 50% 100%; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .44s cubic-bezier(.22, .8, .3, 1);
}
@supports (top: env(safe-area-inset-top)) {
  .deck .sec { top: calc(6px + env(safe-area-inset-top)); bottom: calc(14px + env(safe-area-inset-bottom)); }
}
.deck .sec.dragging { transition: none; }
/* each sheet has its own grain; nothing melts across sheets */
.deck .sec::after { content: ''; position: absolute; inset: 0; top: 0; height: auto; z-index: 1; pointer-events: none; background: var(--grain); }
.deck .scene, .deck .opening { height: auto; min-height: 0; }
.deck .mark, .deck .cue { display: none; }
.deck .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* sheets that stood on a melt get their own ends */
.deck .qawwali {
  background: linear-gradient(180deg, #e7a86d 0, #dd926c calc(var(--band) * .2), #b56766 calc(var(--band) * .42), #79435e calc(var(--band) * .64),
    #45315c calc(var(--band) * .84), #2a2961 var(--band), #26265c 30%, #222257 42%, #1e1e50 54%, #1b1c4a 64%, #191a46 72%, #1b1945 86%, #2b1a43 100%);
}
.deck .details {
  padding-top: 56px; padding-bottom: 22px; background: linear-gradient(180deg, #ecd5c8 0, #f6eadd 46px, #f9f1e6 96px, #faf4ea 100%);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
@media (max-height: 720px) {
  .deck .details { padding-top: 22px; padding-bottom: 14px; }
  .deck .d-title { font-size: clamp(32px, 9vw, 38px); }
  .deck .list { margin-top: 8px; }
  .deck .list li { padding-top: 4px; padding-bottom: 4px; }
  .deck .list .a { line-height: 1.28; }
  .deck .close { margin-top: 6px; }
  .deck .close .ur { line-height: 1.6; }
  .deck .close .divider { display: none; }
  .deck .crest { display: none; }
}
.deck .details::before { -webkit-mask-image: linear-gradient(transparent 0, #000 220px); mask-image: linear-gradient(transparent 0, #000 220px); }
.deck .opening::before { -webkit-mask-image: none; mask-image: none; }

/* the first sheet says how to turn it, until the first turn */
.swipe-hint { display: none; }
.deck .swipe-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(12px, 2.4vh, 20px); padding: 3px 1px 4px;
  border-bottom: 1px solid var(--line); color: var(--head); font: italic 500 18px/1.2 var(--serif); transition: opacity .5s ease;
}
.deck .swipe-hint svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.deck.turned .swipe-hint { opacity: 0; }
.deck .sec.nudge { animation: nudge 1.1s cubic-bezier(.45, 0, .3, 1); }
@keyframes nudge { 0%, 100% { transform: none; } 40% { transform: translate3d(-24px, 0, 0); } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .deck .sec { transition: none; }
  .deck .sec.nudge { animation: none; }
}