/* ════════════════════════════════════════════════════════════════
   MITSUKO — flipbook (the recovered grimoire on archive.html)
   Fixed-aspect stage so every page shows at the same size — pages that
   are taller/wider than the stage are letterboxed on the black book.
   Sized to sit comfortably alongside the rest of the site.
   ════════════════════════════════════════════════════════════════ */
.flipbook-section{width:100%;padding:8px 10px 0;position:relative;}
.flipbook-wrapper{position:relative;max-width:760px;margin:0 auto;}
.flipbook-wrapper::before{content:'';position:absolute;top:-32px;left:-32px;right:-32px;bottom:-32px;
  background:radial-gradient(ellipse at center,rgba(160,115,200,.22) 0%,rgba(124,58,237,.09) 42%,transparent 72%);
  pointer-events:none;z-index:0;animation:purpleBreath 4s ease-in-out infinite;transition:filter .4s ease;filter:brightness(1);}
.flipbook-wrapper.glow-pulse::before{filter:brightness(5.5) saturate(1.5);}
@keyframes purpleBreath{0%,100%{opacity:.6;}50%{opacity:1;}}

/* fixed-aspect stage — does NOT resize with the page */
.flipbook-display{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:4px;
  box-shadow:0 0 40px rgba(154,111,194,.16),0 8px 32px rgba(0,0,0,.6);z-index:1;background:#000;
  cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow .35s ease;}
.flipbook-display:hover{box-shadow:0 0 56px rgba(154,111,194,.32),0 8px 32px rgba(0,0,0,.6);}
.flipbook-display.dragging{cursor:grabbing;}
.flipbook-display img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;}
.flipbook-display img.active{opacity:1;z-index:1;pointer-events:auto;}
.flipbook-display img.under{opacity:1;z-index:0;}
.flipbook-display img.turning-page{opacity:1;z-index:2;}
.fold-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;}
/* a quick magic flash across the stage when a page turns */
.flip-flash{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(236,226,255,.7),rgba(231,202,140,.3) 30%,transparent 62%);}
.flip-flash.go{animation:flipFlash .78s ease;}
@keyframes flipFlash{0%{opacity:0;transform:scale(.92);}26%{opacity:1;transform:scale(1.02);}100%{opacity:0;transform:scale(1.06);}}

.flip-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(7,3,16,.5);border:1px solid rgba(154,111,194,.22);
  color:var(--text);font-size:2.4rem;width:46px;height:60px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;font-family:'Cormorant Garamond',serif;border-radius:4px;z-index:12;line-height:1;padding:0;}
.flip-nav:hover{background:rgba(154,111,194,.18);border-color:rgba(154,111,194,.45);color:var(--gold-bright);box-shadow:0 0 16px rgba(154,111,194,.28);}
.flip-nav:disabled{opacity:.18;cursor:default;pointer-events:none;}
/* nav arrows live INSIDE the stage so they work in fullscreen too */
.flip-nav-prev{left:10px;}
.flip-nav-next{right:10px;}

.flip-fullscreen{position:absolute;top:10px;right:10px;width:34px;height:34px;background:rgba(7,3,16,.55);border:1px solid rgba(154,111,194,.25);
  color:var(--text);cursor:pointer;border-radius:4px;z-index:13;display:flex;align-items:center;justify-content:center;transition:all .3s ease;padding:0;}
.flip-fullscreen:hover{background:rgba(154,111,194,.2);border-color:rgba(154,111,194,.5);color:var(--gold-bright);box-shadow:0 0 14px rgba(154,111,194,.28);}
.flip-fullscreen svg{width:17px;height:17px;}
.flipbook-display:fullscreen,.flipbook-display:-webkit-full-screen{background:#070310;border-radius:0;box-shadow:none;aspect-ratio:auto;}
.flipbook-display.is-fullscreen .flip-fullscreen{top:18px;right:18px;width:46px;height:46px;background:rgba(7,3,16,.72);}
.flipbook-display.is-fullscreen .flip-fullscreen svg{width:24px;height:24px;}
.flipbook-display:fullscreen::backdrop{background:#070310;}

.page-indicator{text-align:center;padding:16px 0 0;z-index:1;position:relative;}
.page-dots{display:flex;justify-content:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.page-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);transition:all .3s ease;cursor:pointer;border:none;padding:0;}
.page-dot:hover{background:var(--text-dim);}
.page-dot.active{background:var(--violet);box-shadow:0 0 8px rgba(154,111,194,.6);}
.page-counter{font-size:.9rem;color:var(--text-faint);letter-spacing:.15em;}

.sparkle-container{position:absolute;top:-26px;left:-26px;right:-26px;bottom:-26px;pointer-events:none;z-index:2;}
.sparkle{position:absolute;border-radius:50%;pointer-events:none;opacity:0;animation:sparkleGlow ease-in-out forwards;}
@keyframes sparkleGlow{0%{opacity:0;transform:scale(.2);}25%{opacity:1;transform:scale(1);}70%{opacity:.35;transform:scale(.6);}100%{opacity:0;transform:scale(.1);}}

.art-note{text-align:center;padding:18px 20px 0;}
.art-note p{font-size:.82rem;font-style:italic;color:var(--text-faint);letter-spacing:.05em;}

@media(max-width:880px){.flip-nav-prev{left:6px;}.flip-nav-next{right:6px;}.flip-nav{background:rgba(7,3,16,.72);}}
@media(max-width:640px){.flip-nav{width:38px;height:50px;font-size:2rem;}}
@media(prefers-reduced-motion:reduce){.flipbook-wrapper::before{animation:none;}.flip-flash.go{animation:none;}}