/* =========================================================
   animations.css — lapisan gerak & polish visual GM Perpustakaan
   Aditif: tidak mengubah style.css, hanya menambah motion,
   depth, dan micro-interactions di atas komponen yang sudah ada.
   ========================================================= */

@media (prefers-reduced-motion: no-preference){

/* ---------- Keyframes ---------- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.92);}
  to{opacity:1;transform:scale(1);}
}
@keyframes floatSlow{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(14px,-16px) rotate(6deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes underlineGrow{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
@keyframes ripple{
  from{transform:scale(0);opacity:.45;}
  to{transform:scale(2.6);opacity:0;}
}
@keyframes popToast{
  0%{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96);}
  60%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.01);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
@keyframes spinSoft{
  to{transform:rotate(360deg);}
}
@keyframes glowPulse{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

/* ---------- Page load ---------- */
body{animation:fadeIn .5s ease both;}

.hero .container > div:first-child > *{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}
.hero .eyebrow{animation-delay:.05s;}
.hero h1{animation-delay:.13s;}
.hero p.lead{animation-delay:.21s;}
.hero #hero-search-form{animation-delay:.29s;}
.hero .chip-row{animation-delay:.37s;}

.hero-art{
  opacity:0;
  animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both, floatSlow 6s ease-in-out .8s infinite;
  animation-delay:.2s,.8s;
}
.hero-art .badge-float{
  animation:scaleIn .5s cubic-bezier(.22,1,.36,1) .75s both, floatSlow 5s ease-in-out 1.4s infinite;
}

/* soft drifting glow behind the hero for a little atmosphere */
.hero{position:relative;isolation:isolate;}
.hero::before{
  content:"";position:absolute;inset:auto -10% -40% auto;top:-10%;width:46%;aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(193,96,62,.16),transparent 70%);
  z-index:-1;pointer-events:none;animation:drift 14s ease-in-out infinite;
}
.catalog-hero,.ebook-hero{position:relative;overflow:hidden;}

/* ---------- Header ---------- */
.site-header{transition:box-shadow .3s ease, background .3s ease;}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);}

.brand img{transition:transform .35s cubic-bezier(.22,1,.36,1);}
.brand:hover img{transform:rotate(-6deg) scale(1.06);}

.main-nav a{position:relative;overflow:hidden;}
.main-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1);}

.icon-btn svg{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.icon-btn:hover svg{transform:rotate(18deg);}
[data-theme] .icon-btn .icon-sun,[data-theme] .icon-btn .icon-moon{transition:opacity .25s ease, transform .35s ease;}

/* ---------- Buttons: shine sweep + press + ripple host ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn:hover::before{transform:translateX(120%);}
.btn:active{transform:scale(.97);}
.btn-outline::before,.btn-ghost::before{background:linear-gradient(120deg,transparent 30%,rgba(42,46,31,.06) 50%,transparent 70%);}

.ripple-dot{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  pointer-events:none;animation:ripple .55s ease-out forwards;
}

/* ---------- Cards: entrance + hover polish ---------- */
.book-card,.category-card,.ebook-card{
  opacity:0;transform:translateY(18px);
  animation:fadeUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
.book-card{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;}
.book-card:hover{transform:translateY(-7px);border-color:transparent;}
.book-card .book-cover{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.book-card .book-cover,.book-cover-photo{overflow:hidden;}
.book-card:hover .book-cover-photo{transform:scale(1.08);}
.book-cover-photo{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.book-fav svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1), color .2s ease;}
.book-fav:active svg{transform:scale(1.3);}
.book-fav.active svg{animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1);}

.category-card{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;}
.category-card .icon{transition:transform .35s cubic-bezier(.22,1,.36,1);}
.category-card:hover .icon{transform:scale(1.1) rotate(-4deg);}

.ebook-card{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;}
.ebook-card .ebook-cover-photo{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.ebook-card:hover .ebook-cover-photo{transform:scale(1.08);}

/* stagger up to 16 siblings inside common grids */
.book-grid > *:nth-child(1),.category-grid > *:nth-child(1),.ebook-grid > *:nth-child(1){animation-delay:.02s;}
.book-grid > *:nth-child(2),.category-grid > *:nth-child(2),.ebook-grid > *:nth-child(2){animation-delay:.07s;}
.book-grid > *:nth-child(3),.category-grid > *:nth-child(3),.ebook-grid > *:nth-child(3){animation-delay:.12s;}
.book-grid > *:nth-child(4),.category-grid > *:nth-child(4),.ebook-grid > *:nth-child(4){animation-delay:.17s;}
.book-grid > *:nth-child(5),.ebook-grid > *:nth-child(5){animation-delay:.22s;}
.book-grid > *:nth-child(6),.ebook-grid > *:nth-child(6){animation-delay:.27s;}
.book-grid > *:nth-child(7),.ebook-grid > *:nth-child(7){animation-delay:.32s;}
.book-grid > *:nth-child(8),.ebook-grid > *:nth-child(8){animation-delay:.37s;}
.book-grid > *:nth-child(n+9),.ebook-grid > *:nth-child(n+9){animation-delay:.4s;}

/* ---------- Scroll reveal for sections ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}

/* ---------- Chips / filters ---------- */
.chip,.filter-check,.page-btn{transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;}
.chip:hover{transform:translateY(-2px);}
.page-btn:hover:not(:disabled){transform:translateY(-2px);}
.filter-check:hover span{color:var(--navy-800);}
[data-theme="dark"] .filter-check:hover span{color:var(--gold);}

/* ---------- Stat counters ---------- */
.stat-item strong,.detail-stats strong,.badge-float span#stat-books{position:relative;}

/* ---------- CTA band ambient shimmer ---------- */
.cta-band{position:relative;overflow:hidden;}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 120%,rgba(193,96,62,.25),transparent 55%);
  animation:glowPulse 5s ease-in-out infinite;
}
.cta-band > *{position:relative;z-index:1;}
.cta-band .btn-gold{transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .18s ease;}
.cta-band .btn-gold:hover{transform:translateY(-3px) scale(1.03);}

/* ---------- Toast ---------- */
.toast.show{animation:popToast .4s cubic-bezier(.22,1,.36,1) both;}

/* ---------- Auth art panel ---------- */
.auth-art{position:relative;overflow:hidden;}
.auth-art::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);
  top:-60px;right:-60px;animation:floatSlow 7s ease-in-out infinite;
}
.auth-art .quote{animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .1s both;}
.auth-art .stat-row{animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .25s both;}
.auth-card{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}

.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--navy-800) 14%, transparent);}
.password-strength i{transition:background .3s ease;}
.field-error{transition:opacity .2s ease;}

/* ---------- Ebook modal ---------- */
.ebook-modal:not([hidden]) .ebook-modal-backdrop{animation:fadeIn .25s ease both;}
.ebook-modal:not([hidden]) .ebook-modal-card{animation:scaleIn .3s cubic-bezier(.22,1,.36,1) both;}
.ebook-modal-close{transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;}
.ebook-modal-close:hover{transform:rotate(90deg);background:rgba(0,0,0,.5);}

/* ---------- Detail page ---------- */
.detail-cover{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}
.detail-info{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) .1s both;}
.detail-actions .btn{transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;}
.detail-facts li{transition:background .2s ease;}
.detail-facts li:hover{background:var(--surface-alt);}

/* ---------- Profile tabs ---------- */
.profile-panel.active{animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both;}
.profile-tab-btn{transition:color .2s ease;}
.profile-tab-btn::after{content:"";}
.profile-avatar-lg{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.profile-avatar-lg:hover{transform:scale(1.06) rotate(-3deg);}
.history-item{transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;}
.history-item:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);}

/* ---------- Skeleton loader refinement ---------- */
.skeleton{border-radius:var(--radius-sm);}

/* ---------- Nav toggle (mobile) ---------- */
.main-nav{transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;}
.nav-toggle svg{transition:transform .3s ease;}
.nav-toggle.is-open svg{transform:rotate(90deg);}

/* ---------- Scroll-to-top ---------- */
.scroll-top-btn{
  position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;
  background:var(--navy-800);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1), background .2s ease;
}
.scroll-top-btn.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.scroll-top-btn:hover{background:var(--navy-700);transform:translateY(-3px) scale(1.05);}
.scroll-top-btn svg{width:18px;height:18px;}

} /* end prefers-reduced-motion guard */

/* Always-safe, non-motion visual polish (kept outside the guard) */
.book-card,.category-card,.ebook-card,.chip,.page-btn{will-change:transform;}