/* FYA Ebook Flipbook — self-contained. No dependencies, no framework.
   Sizing: the component fills its parent up to --fya-book-max (default 420px).
   Override --fya-book-max on .fya-flipbook to make it larger or smaller. */
.fya-flipbook{ --fya-book-max:420px; --fya-ratio:1.4; /* page aspect = 900/1260 */
  --fya-paper:#F6ECE6; --fya-paper-2:#FBF5F1; --fya-ink-rgb:58,8,18; --fya-berry:#B64057;
  position:relative; width:min(100%,var(--fya-book-max)); margin:0 auto; }
.fya-flipbook *{ box-sizing:border-box; }

/* The book box — flat, face-on. This whole box is what bounces. */
.fya-book{ position:relative; width:100%; aspect-ratio:1/var(--fya-ratio); will-change:transform; }
.fya-book.is-bounce{ animation:fyaBoxBounce .72s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fyaBoxBounce{
  0%   { transform:translateY(0)     scale(1); }
  32%  { transform:translateY(-3.2%) scale(1.012); }
  58%  { transform:translateY(1.4%)  scale(.997); }
  78%  { transform:translateY(-.6%)  scale(1.003); }
  100% { transform:translateY(0)     scale(1); }
}

/* Stacked sheets behind the box — offset only, no rotation. */
.fya-book::before, .fya-book::after{ content:''; position:absolute; inset:0; background:var(--fya-paper-2);
  border:1px solid rgba(var(--fya-ink-rgb),.12); border-radius:3px; z-index:0; }
.fya-book::before{ transform:translate(8px,7px); opacity:.7; }
.fya-book::after{ transform:translate(4px,3.5px); opacity:.9; }

/* Pages — crossfade, never move independently of the box. */
.fya-pages{ position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--fya-paper); border-radius:3px;
  box-shadow:0 0 0 1px rgba(var(--fya-ink-rgb),.12), 0 34px 70px rgba(var(--fya-ink-rgb),.28), 0 12px 26px rgba(var(--fya-ink-rgb),.14); }
.fya-pages img{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; pointer-events:none; }
.fya-pages img.is-in{ opacity:1; transition:opacity .38s ease; }
.fya-pages img.is-out{ opacity:0; transition:opacity .38s ease; }

/* Light sweep that sells the page turn. */
.fya-sheen{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 48%, rgba(136,8,32,.05) 60%, transparent 72%); }
.fya-sheen.is-on{ animation:fyaSheen .7s ease-out both; }
@keyframes fyaSheen{ 0%{ opacity:0; transform:translateX(-26%);} 30%{ opacity:1;} 100%{ opacity:0; transform:translateX(24%);} }

/* Progress dots — sit 30px below the box, so reserve that space in the parent. */
.fya-dots{ position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); display:flex; gap:9px; }
.fya-dots span{ width:7px; height:7px; border-radius:50%; background:transparent;
  border:1px solid var(--fya-berry); opacity:.55; transition:all .3s ease; }
.fya-dots span.is-on{ background:var(--fya-berry); opacity:1; transform:scale(1.25); }

@media (max-width:760px){
  .fya-flipbook{ --fya-book-max:280px; }
  .fya-pages{ box-shadow:0 0 0 1px rgba(var(--fya-ink-rgb),.12), 0 20px 44px rgba(var(--fya-ink-rgb),.24); }
  .fya-dots{ bottom:-24px; }
}

@media (prefers-reduced-motion: reduce){
  .fya-book.is-bounce, .fya-sheen.is-on{ animation:none; }
}