/* ==========================================================================
   animations.css — every keyframe and reusable motion utility lives here.
   Nothing else in the app defines a @keyframes block, so all motion can
   be reasoned about / tuned from a single place.
   ========================================================================== */

/* ---- generic fades / scales ---- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
@keyframes scaleFadeIn{ from{opacity:0; transform:scale(.97)} to{opacity:1; transform:scale(1)} }
@keyframes scaleFadeOut{ from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.97)} }

/* ---- library entrance ---- */
@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cardOut{
  from{ opacity:1; transform:scale(1); max-height:400px; }
  to{ opacity:0; transform:scale(.85); }
}
@keyframes rowIn{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes railIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ---- sheet (bottom action sheet) ---- */
@keyframes backdropIn{ from{opacity:0} to{opacity:1} }
@keyframes backdropOut{ from{opacity:1} to{opacity:0} }
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes sheetDown{ from{transform:translateY(0)} to{transform:translateY(100%)} }

/* ---- toast ---- */
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%,14px) scale(.96); }
  to{ opacity:1; transform:translate(-50%,0) scale(1); }
}
@keyframes toastOut{
  from{ opacity:1; transform:translate(-50%,0) scale(1); }
  to{ opacity:0; transform:translate(-50%,8px) scale(.96); }
}

/* ---- reader shell open / close ---- */
@keyframes readerIn{ from{opacity:0; transform:scale(1.03);} to{opacity:1; transform:scale(1);} }
@keyframes readerOut{ from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.97);} }

/* ---- reader loading ---- */
@keyframes spin{ to{transform:rotate(360deg)} }
@keyframes glyphBreathe{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* ---- page turn (slide + fade), direction-aware via modifier classes ---- */
@keyframes pageEnterFromRight{ from{opacity:0; transform:translate3d(3%,0,0) scale(.985);} to{opacity:1; transform:translate3d(0,0,0) scale(1);} }
@keyframes pageEnterFromLeft{ from{opacity:0; transform:translate3d(-3%,0,0) scale(.985);} to{opacity:1; transform:translate3d(0,0,0) scale(1);} }
@keyframes pageExitToLeft{ from{opacity:1; transform:translate3d(0,0,0) scale(1);} to{opacity:0; transform:translate3d(-3%,0,0) scale(.985);} }
@keyframes pageExitToRight{ from{opacity:1; transform:translate3d(0,0,0) scale(1);} to{opacity:0; transform:translate3d(3%,0,0) scale(.985);} }

/* ---- settings drawer ---- */
@keyframes drawerIn{ from{transform:translateX(100%);} to{transform:translateX(0);} }
@keyframes drawerOut{ from{transform:translateX(0);} to{transform:translateX(100%);} }

/* ---- small UI feedback ---- */
@keyframes heartPop{ 0%{transform:scale(1);} 35%{transform:scale(1.35);} 60%{transform:scale(.92);} 100%{transform:scale(1);} }
@keyframes bookmarkDrop{ 0%{transform:translateY(-14px); opacity:0;} 60%{transform:translateY(2px); opacity:1;} 100%{transform:translateY(0); opacity:1;} }
@keyframes hintPop{
  0%{opacity:0; transform:translateY(4px) scale(.94);}
  15%{opacity:1; transform:translateY(0) scale(1);}
  80%{opacity:1;}
  100%{opacity:0; transform:translateY(-2px) scale(.98);}
}
@keyframes ping{ 0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.9); opacity:0;} }
@keyframes barSlideOutTop{ from{transform:translateY(0); opacity:1;} to{transform:translateY(-100%); opacity:0;} }
@keyframes barSlideOutBottom{ from{transform:translateY(0); opacity:1;} to{transform:translateY(100%); opacity:0;} }

/* ---- utility classes ---- */
.anim-fade-in{ animation:fadeIn var(--dur-base) var(--ease-out) both; }
.anim-fade-out{ animation:fadeOut var(--dur-base) var(--ease-out) both; }
.anim-scale-in{ animation:scaleFadeIn var(--dur-base) var(--ease-out) both; }
.anim-scale-out{ animation:scaleFadeOut var(--dur-fast) var(--ease-in-out) both; }