/* =========================================================
   BONIX CHOPS — ANIMATIONS
   Keyframes + scroll-reveal utility system
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

@keyframes ripple{
  to{ transform: scale(2.6); opacity:0; }
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform:none; }
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes slideInLeft{
  from{ opacity:0; transform: translateX(-40px); }
  to{ opacity:1; transform:none; }
}

@keyframes slideInRight{
  from{ opacity:0; transform: translateX(40px); }
  to{ opacity:1; transform:none; }
}

@keyframes scaleIn{
  from{ opacity:0; transform: scale(.9); }
  to{ opacity:1; transform:none; }
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@keyframes shimmer{
  0%{ background-position: -400px 0; }
  100%{ background-position: 400px 0; }
}

@keyframes pulseGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(244,180,0,.5); }
  50%{ box-shadow: 0 0 0 14px rgba(244,180,0,0); }
}

/* ---------- Page loader ---------- */
.page-loader{
  position:fixed; inset:0; z-index:3000; background: var(--c-bg);
  display:flex; align-items:center; justify-content:center; transition: opacity 420ms ease, visibility 420ms ease;
}
.page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  width:56px; height:56px; border-radius:16px; background: var(--c-primary); position:relative; overflow:hidden;
}
.loader-mark::after{
  content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(244,180,0,.55), transparent);
  animation: shimmer 1.1s infinite linear; background-size: 200% 100%;
}

/* ---------- Scroll reveal system (driven by IntersectionObserver in app.js) ---------- */
.reveal{ opacity:0; }
.reveal.in-view{ animation: fadeUp 700ms cubic-bezier(.2,.75,.25,1) forwards; }
.reveal-left{ opacity:0; }
.reveal-left.in-view{ animation: slideInLeft 700ms cubic-bezier(.2,.75,.25,1) forwards; }
.reveal-right{ opacity:0; }
.reveal-right.in-view{ animation: slideInRight 700ms cubic-bezier(.2,.75,.25,1) forwards; }
.reveal-scale{ opacity:0; }
.reveal-scale.in-view{ animation: scaleIn 600ms cubic-bezier(.2,.75,.25,1) forwards; }

/* staggering helper — apply alongside .reveal on repeated items */
.reveal[data-delay="1"].in-view{ animation-delay: 90ms; }
.reveal[data-delay="2"].in-view{ animation-delay: 180ms; }
.reveal[data-delay="3"].in-view{ animation-delay: 270ms; }
.reveal[data-delay="4"].in-view{ animation-delay: 360ms; }
.reveal[data-delay="5"].in-view{ animation-delay: 450ms; }
.reveal[data-delay="6"].in-view{ animation-delay: 540ms; }

/* ---------- Misc micro-interactions ---------- */
.pulse-cta{ animation: pulseGlow 2.4s infinite; }
.spin{ animation: spin 900ms linear infinite; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-scale{ opacity:1 !important; animation:none !important; }
  .floating-whatsapp, .loader-mark::after, .pulse-cta{ animation:none !important; }
}