/* Animations: loader, scroll reveal, cover tilt, fly-to-cart, counters, floating shapes */

/* 1. Page-turn loader */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .5s,visibility .5s}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:150px;animation:ldPulse 1.2s ease-in-out infinite}
.ld-book{position:relative;width:120px;height:80px;perspective:500px}
.ld-book::before,.ld-book::after{content:"";position:absolute;top:0;width:60px;height:80px;background:var(--navy);border-radius:4px}
.ld-book::before{left:0;border-radius:6px 0 0 6px}
.ld-book::after{right:0;border-radius:0 6px 6px 0}
.ld-book span{position:absolute;left:60px;top:4px;width:56px;height:72px;background:#fff;border-left:2px solid var(--gold);transform-origin:left center;animation:ldFlip 1.6s cubic-bezier(.6,0,.4,1) infinite;z-index:2}
.ld-book span:nth-child(2){animation-delay:.2s}.ld-book span:nth-child(3){animation-delay:.4s}.ld-book span:nth-child(4){animation-delay:.6s}
@keyframes ldFlip{0%,10%{transform:rotateY(0)}60%,100%{transform:rotateY(-180deg)}}
@keyframes ldPulse{50%{opacity:.6}}

/* 2. Scroll reveal (classes added by JS) */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.rv-left{transform:translateX(-40px)}
.rv.rv-zoom{transform:scale(.92)}
.rv.in{opacity:1;transform:none}

/* 3. 3D cover tilt + shine */
.tilt{perspective:900px}
.tilt .cover{transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;z-index:2}
.tilt:hover::after{opacity:1}
.card-img.tilt::after{border-radius:6px 6px 0 0}

/* 4. Fly to cart */
.fly{position:fixed;z-index:9000;pointer-events:none;border-radius:4px;box-shadow:0 20px 40px rgba(0,0,0,.35);transition:transform .75s cubic-bezier(.5,-.3,.6,1),opacity .75s,width .75s,height .75s;object-fit:cover}
.cart-bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.18)}60%{transform:scale(.94)}}

/* 5. Counters */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:60px;background:var(--navy);border-radius:22px;padding:34px 20px;color:#fff;text-align:center}
.counters div{border-right:1px solid rgba(255,255,255,.1)}
.counters div:last-child{border:0}
.counters b,.counters span{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--gold);line-height:1}
.counters small{display:block;color:#c9d2e0;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:700;margin-top:8px}

/* 6. Floating shapes in hero */
.floaters{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.floaters i{position:absolute;color:rgba(255,255,255,.12);font-size:2rem;animation:floatY 9s ease-in-out infinite}
.floaters i:nth-child(1){left:6%;top:18%;font-size:2.6rem}
.floaters i:nth-child(2){left:44%;top:12%;animation-duration:11s;animation-delay:-3s}
.floaters i:nth-child(3){left:52%;top:78%;font-size:1.2rem;color:rgba(240,164,58,.35);animation-duration:7s}
.floaters i:nth-child(4){right:4%;top:14%;font-size:2.4rem;animation-delay:-5s}
.floaters i:nth-child(5){left:30%;bottom:10%;animation-duration:12s;animation-delay:-2s}
.floaters i:nth-child(6){right:12%;bottom:22%;font-size:1rem;color:rgba(240,164,58,.45);animation-duration:6s;animation-delay:-1s}
.floaters i:nth-child(7){left:18%;top:62%;font-size:1.6rem;animation-duration:10s;animation-delay:-6s}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(14deg)}}
.slide{z-index:auto}.slide .wrap{z-index:2}

@media (max-width:760px){
  .counters{grid-template-columns:1fr 1fr;row-gap:26px}
  .counters div:nth-child(2){border-right:0}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .floaters i,.ld-book span,.strip-track{animation:none}
}