/* ---- Read-a-Sample flipbook ---- */
.flip-overlay{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(14,10,6,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.flip-overlay.open{ opacity:1; pointer-events:auto; }
.flip-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff; font-size:20px; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center; transition:background-color .15s ease, transform .15s ease;
}
.flip-close:hover{ background:rgba(255,255,255,.28); transform:scale(1.06); }
.flip-topbar{
  position:absolute; top:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px;
  color:#fdf6e6; font-family:'Karla',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.flip-sound{
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fdf6e6; border-radius:999px; padding:5px 12px;
  font:inherit; font-size:11px; letter-spacing:.1em; cursor:pointer; text-transform:uppercase;
}
.flip-sound.off{ opacity:.5; text-decoration:line-through; }

.flip-stage{
  position:relative; display:flex; align-items:center; justify-content:center; gap:18px;
  width:min(96vw, 1180px); height:min(84vh, 820px);
  transform:scale(.94) translateY(12px); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.flip-overlay.open .flip-stage{ transform:none; }
.flip-arrow{
  flex-shrink:0; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, transform .15s ease, opacity .2s ease;
}
.flip-arrow:hover{ background:var(--gold, #c99a2e); color:#2c2015; transform:scale(1.08); }
.flip-arrow[disabled]{ opacity:.25; pointer-events:none; }

/* the book: two pages of 3:4, laid side by side */
.flipbook{
  position:relative; perspective:2600px;
  width:min(calc(100% - 160px), calc(min(84vh, 820px) * 2)); aspect-ratio:2 / 1;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.flipbook.closed{ transform:translateX(-25%); }
.flipbook.ended{ transform:translateX(25%); }
.flip-sheet{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.5,.05,.25,1);
}
.flip-sheet.flipped{ transform:rotateY(-180deg); }
/* while turning forward, the page underneath stays blank until the leaf passes the spine */
.flip-veil{ position:absolute; inset:0; background:#fbf7ee; pointer-events:none; z-index:2; opacity:1; transition:opacity .25s ease; }
.flip-veil.lift{ opacity:0; }
.flip-veil::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:#fbf7ee; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.flip-face img{ width:100%; height:100%; object-fit:contain; display:block; }
.flip-face.front{ border-radius:0 8px 8px 0; }
.flip-face.back{ transform:rotateY(180deg); border-radius:8px 0 0 8px; }
/* page shading: gutter shadow + moving highlight while turning */
.flip-face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 12%);
}
.flip-face.back::after{ background:linear-gradient(-90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 12%); }
.flip-sheet.turning .flip-face::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.08) 50%, rgba(0,0,0,.22));
  animation:flip-sheen 1.15s ease both;
}
@keyframes flip-sheen{ 0%{ opacity:0 } 40%{ opacity:1 } 100%{ opacity:0 } }
/* cover face */
.flip-face.cover{ background:#0e1a3a; }
.flip-face.cover img{ object-fit:cover; }
/* end page */
.flip-face.end{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8%;
  background:radial-gradient(ellipse at 50% 30%, #fffdf7, #f1e7d2);
}
.flip-face.end h3{ font-family:'Fraunces',serif; font-size:clamp(22px, 2.6vw, 34px); color:#2c2015; margin:0 0 10px; line-height:1.15; }
.flip-face.end p{ font-family:'Karla',sans-serif; font-size:15px; color:#6b5744; margin:0 0 22px; line-height:1.5; }
.flip-face.end .cta{ margin:0; }
.flip-face.end .cta + .cta{ margin-top:10px; }
.flip-face.end .end-ornament{ font-family:'Fraunces',serif; font-size:28px; color:var(--gold,#c99a2e); margin-bottom:10px; }

.flip-counter{
  position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
  color:#fdf6e6; font-family:'Karla',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; white-space:nowrap;
}
.flip-hint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(253,246,230,.6); font-family:'Karla',sans-serif; font-size:12px; letter-spacing:.06em; }

/* narrow screens: single page, tap sides to turn */
@media (max-width:760px), (max-aspect-ratio: 1/1){
  .flip-stage{ gap:0; height:min(76vh, 720px); }
  .flip-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; font-size:22px; background:rgba(20,12,6,.55); z-index:3; }
  .flip-arrow.prev{ left:6px; } .flip-arrow.next{ right:6px; }
  .flip-arrow:hover{ transform:translateY(-50%) scale(1.06); }
  .flipbook{ aspect-ratio:1 / 1; width:min(calc(100% - 12px), calc(min(76vh, 720px) * 1)); perspective:1600px; }
  .flip-topbar{ white-space:nowrap; gap:10px; }
  .flip-topbar .flip-sound{ padding:4px 10px; }
  .flip-hint{ width:90%; text-align:center; }
  .flipbook.closed, .flipbook.ended{ transform:none; }
  .flip-sheet{ left:0; width:100%; }
  /* single mode: each leaf flips like a card and fades once it has turned */
  .flipbook.single .flip-sheet{ transform-origin:center; transition: transform .7s cubic-bezier(.45,.05,.3,1), opacity .2s ease; }
  .flipbook.single .flip-sheet.flipped{ transform:rotateY(-180deg); opacity:0; pointer-events:none; transition: transform .7s cubic-bezier(.45,.05,.3,1), opacity .25s ease .4s; }
  .flip-face.front, .flip-face.back{ border-radius:8px; }
  .flip-face::after, .flip-face.back::after{ background:none; }
  .flip-topbar{ top:14px; font-size:10px; }
  .flip-close{ top:10px; right:10px; width:38px; height:38px; }
}