/* Page-flip reader (.db-reader): ported from the app's reader (pipeline-lab/books/compose_pages.py).
   Full-bleed painted page, ONE caption band at the bottom (cream Baloo 2 over a gradient scrim),
   round home button, page counter pill, round arrows, page dots. The page turn is the app's
   14-strip bending sheet (js/components/reader.js). Sizes scale with the reader's own width
   (container units) so it reads the same full width or inside a device frame. */
.db-reader{--db-reader-btn:clamp(34px,5.4cqw,54px);--db-reader-pad:clamp(8px,1.7cqw,16px);
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size;
  border-radius:var(--db-r-lg);background:var(--db-stage-deep);color:var(--db-caption);outline:none;
  box-shadow:var(--db-shadow-2);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.db-reader:focus-visible{outline:3px solid var(--db-focus);outline-offset:4px}
.db-reader--fill{aspect-ratio:auto;height:100%;border-radius:0;box-shadow:none}

.db-reader__stage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:pointer}
.db-reader__art,.db-reader__fade{position:absolute;inset:0;background:var(--db-stage-deep) center/cover no-repeat}
.db-reader__fade{z-index:7;opacity:0;pointer-events:none;will-change:opacity}

/* the turning sheet: FLIP_N strips, each hinged on its own left edge, chained end to end */
.db-reader__leaf{position:absolute;inset:0;z-index:5;display:none;pointer-events:none;overflow:hidden;perspective:2400px;perspective-origin:50% 50%}
.db-reader__leaf.is-on{display:block}
.db-reader__s{position:absolute;top:0;bottom:0;overflow:hidden;will-change:transform;backface-visibility:visible;transform-origin:0 50%}
.db-reader__pg{position:absolute;top:0;bottom:0;left:0}
.db-reader__lf,.db-reader__lb{position:absolute;inset:0}
.db-reader__lf{background:var(--db-stage-deep) center/cover no-repeat}
/* the paper's back: cream, revealed strip by strip along the curl */
.db-reader__lb{z-index:5;opacity:0;background:radial-gradient(120% 100% at 50% 50%,rgba(255,255,255,.35),rgba(120,90,40,.16)),var(--db-page);
  box-shadow:inset 0 0 60px rgba(90,60,20,.2)}
.db-reader__sh{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,1);opacity:0}
/* the lifted sheet's shadow on the page beneath */
.db-reader__shade{position:absolute;inset:0;z-index:4;display:none;pointer-events:none;opacity:0;transform-origin:left center;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.28) 70%,rgba(0,0,0,.45));box-shadow:14px 0 36px rgba(0,0,0,.42)}
.db-reader__shade.is-on{display:block}

/* the caption band: bottom-up scrim, centred cream words with a soft per-glyph shadow */
.db-reader__txt{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
  padding:clamp(22px,8cqw,72px) clamp(20px,7cqw,86px) clamp(22px,4.4cqw,50px);
  background:linear-gradient(to top,rgba(6,9,16,.84) 0%,rgba(6,9,16,.52) 40%,rgba(6,9,16,.18) 70%,rgba(6,9,16,0) 100%);
  font-family:var(--db-font);font-size:clamp(12px,2.05cqw,24px);font-weight:600;line-height:1.34;letter-spacing:.004em;
  text-align:center;color:var(--db-caption);text-wrap:pretty;text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55)}
.db-reader__cap{display:block;margin:0;opacity:0;transform:translateY(8px);
  transition:opacity var(--m-dur-fast) var(--m-ease),transform var(--m-dur-fast) var(--m-ease)}
.db-reader__cap.is-show{opacity:1;transform:none}
.db-reader__leaf .db-reader__txt{z-index:3}
.db-reader__under{z-index:3}
.db-reader.is-flipping .db-reader__stage > .db-reader__txt{z-index:3}
.db-reader.is-flipback .db-reader__stage > .db-reader__txt:not(.db-reader__under){visibility:hidden}

/* chrome: friendly white circles with warm ink, exactly the app's reader controls */
.db-reader__btn,.db-reader__arrow{position:absolute;z-index:9;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  width:var(--db-reader-btn);height:var(--db-reader-btn);background:rgba(255,255,255,.95);color:var(--db-gold-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.18);transition:transform var(--m-dur-fast) var(--m-ease),opacity var(--m-dur) linear}
/* the hit area never drops under 44px, even when the circle is drawn smaller in a device frame */
.db-reader__btn::before,.db-reader__arrow::before{content:"";position:absolute;left:50%;top:50%;width:max(44px,100%);height:max(44px,100%);transform:translate(-50%,-50%)}
.db-reader__btn svg,.db-reader__arrow svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.db-reader__btn:active{transform:scale(.9)}
.db-reader__home{top:var(--db-reader-pad);left:var(--db-reader-pad)}
.db-reader__count{position:absolute;z-index:9;left:var(--db-reader-pad);top:calc(var(--db-reader-pad) + var(--db-reader-btn) + var(--db-reader-pad) * .6);
  padding:.1em .75em;border-radius:var(--db-r-pill);background:rgba(255,255,255,.95);color:var(--db-gold-ink);
  font-family:var(--db-font);font-weight:800;font-size:clamp(11px,1.5cqw,15px);line-height:1.6;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 10px rgba(0,0,0,.22)}
.db-reader__arrow{top:50%;transform:translateY(-50%);width:calc(var(--db-reader-btn) * 1.15);height:calc(var(--db-reader-btn) * 1.15);background:rgba(255,255,255,.86)}
.db-reader__arrow svg{stroke-width:2.6}
.db-reader__arrow:active{transform:translateY(-50%) scale(.88)}
.db-reader__arrow--prev{left:calc(var(--db-reader-pad) * .8)}
.db-reader__arrow--next{right:calc(var(--db-reader-pad) * .8)}
.db-reader__arrow.is-hidden{opacity:0;pointer-events:none}
.db-reader__btn:focus-visible,.db-reader__arrow:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px}
.db-reader__dots{position:absolute;z-index:7;left:0;right:0;bottom:clamp(6px,1.1cqw,10px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,.7cqw,6px);padding:0 12%;pointer-events:none}
.db-reader__dot{width:clamp(5px,.8cqw,7px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.32);transition:transform var(--m-dur-fast) var(--m-ease),background-color var(--m-dur-fast) linear}
.db-reader__dot.is-on{background:rgba(255,255,255,1);transform:scale(1.35)}
/* before the first page has loaded */
.db-reader__stage::after{content:"";position:absolute;inset:0;z-index:8;background:radial-gradient(80% 70% at 50% 45%,var(--db-card-2),var(--db-stage-deep));opacity:1;transition:opacity var(--m-dur) linear;pointer-events:none}
.db-reader.is-ready .db-reader__stage::after{opacity:0}
.db-reader__art{z-index:1}

@media (prefers-reduced-motion:reduce){
  .db-reader__cap,.db-reader__dot,.db-reader__btn,.db-reader__arrow,.db-reader__stage::after{transition:none}
  .db-reader__cap{transform:none}
  /* the reduced-motion page change is a short cross-fade (no sheet, no slide), run by reader.js */
}