/* ZOYO FRESH — performance-optimised animation layer
   All animations use transform/opacity only (GPU compositable). */

@keyframes zf-fade-up {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zf-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); }
}
@keyframes zf-bump {
  0% { transform: scale(1); } 30% { transform: scale(1.55) rotate(-6deg); }
  60% { transform: scale(.88); } 100% { transform: scale(1); }
}
@keyframes zf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14,143,90,.45); }
  70% { box-shadow: 0 0 0 10px rgba(14,143,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,143,90,0); }
}
@keyframes zf-drive {
  0% { transform: translate3d(-14px,0,0); } 50% { transform: translate3d(14px,0,0); } 100% { transform: translate3d(-14px,0,0); }
}
@keyframes zf-spin { to { transform: rotate(360deg); } }
@keyframes zf-shimmer { to { background-position: 200% 0; } }
@keyframes zf-fly {
  0% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate3d(var(--fx), var(--fy), 0) scale(.2); opacity: 0; }
}

/* Scroll reveal */
.reveal { opacity: 0; will-change: transform, opacity; }
.reveal.in { animation: zf-fade-up .62s cubic-bezier(.22,.75,.3,1) forwards; }
.reveal-stagger > * { opacity: 0; }
.reveal-stagger.in > * { animation: zf-fade-up .55s cubic-bezier(.22,.75,.3,1) forwards; }
.reveal-stagger.in > *:nth-child(1) { animation-delay: .02s; }
.reveal-stagger.in > *:nth-child(2) { animation-delay: .06s; }
.reveal-stagger.in > *:nth-child(3) { animation-delay: .1s; }
.reveal-stagger.in > *:nth-child(4) { animation-delay: .14s; }
.reveal-stagger.in > *:nth-child(5) { animation-delay: .18s; }
.reveal-stagger.in > *:nth-child(6) { animation-delay: .22s; }
.reveal-stagger.in > *:nth-child(7) { animation-delay: .26s; }
.reveal-stagger.in > *:nth-child(8) { animation-delay: .3s; }
.reveal-stagger.in > *:nth-child(9) { animation-delay: .34s; }
.reveal-stagger.in > *:nth-child(10) { animation-delay: .38s; }
.reveal-stagger.in > *:nth-child(n+11) { animation-delay: .42s; }

/* Page load curtain */
#zf-loader {
  position: fixed; inset: 0; z-index: 3000; background: #fff; display: grid; place-items: center;
  transition: opacity .45s ease, visibility .45s ease;
}
#zf-loader.hide { opacity: 0; visibility: hidden; }
#zf-loader .ring {
  width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--zf-green-soft);
  border-top-color: var(--zf-green); animation: zf-spin .8s linear infinite;
}
#zf-loader .brand { font-weight: 900; letter-spacing: -.03em; margin-top: 14px; }

/* Cart bump + flying dot */
.zf-cart-count.bump { animation: zf-bump .55s cubic-bezier(.2,.8,.3,1); }
.zf-fly-dot {
  position: fixed; z-index: 2500; width: 16px; height: 16px; border-radius: 50%;
  background: var(--zf-green); pointer-events: none; animation: zf-fly .75s cubic-bezier(.4,.1,.6,1) forwards;
}

/* Toast */
.zf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--zf-ink); color: #fff; padding: .7rem 1.15rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; z-index: 2600; animation: zf-fade-up .3s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.zf-toast.out { animation: zf-fade-in .3s ease reverse forwards; }

/* Hero van drift */
.zf-van { animation: zf-drive 5.5s ease-in-out infinite; }

/* Skeleton shimmer */
.zf-skeleton {
  background: linear-gradient(90deg, #eef3f0 25%, #f8fbf9 37%, #eef3f0 63%);
  background-size: 200% 100%; animation: zf-shimmer 1.3s linear infinite; border-radius: 10px;
}

/* Nav / offcanvas transition polish */
.offcanvas { transition: transform .38s cubic-bezier(.22,.75,.3,1) !important; }
.zf-nav-link { transition: background .2s ease, color .2s ease, transform .2s ease; }
.zf-nav-link:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; }
}