/* ═══════════════════════════════════════════════════════
   SANY'S KITCHEN FOODS — Animations
   ═══════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────── */
@keyframes loaderText {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loaderBar {
  to { width: 100%; }
}
@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 0.3; transform: scaleY(0.4); transform-origin: top; }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeRtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  50%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes fireGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(224,92,40,0.3), 0 0 60px rgba(224,92,40,0.1); }
  50%       { box-shadow: 0 0 40px rgba(224,92,40,0.5), 0 0 80px rgba(224,92,40,0.2); }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,164,82,0.2); }
  50%       { box-shadow: 0 0 50px rgba(200,164,82,0.4); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Scroll-triggered reveals ────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--left {
  transform: translateX(-40px) translateY(0);
}
.reveal--left.visible {
  transform: translateX(0);
}
.reveal--right {
  transform: translateX(40px) translateY(0);
}
.reveal--right.visible {
  transform: translateX(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ── Fire glow on CTA ────────────────────────────────── */
.btn--fire {
  animation: fireGlow 3s ease-in-out infinite;
}
.btn--fire:hover {
  animation-play-state: paused;
}

/* ── Floating spice particles (canvas is primary,      ─ */
/*    these are CSS fallback dots)                      ─ */
.spice-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float 4s ease-in-out infinite;
}

/* ── Nav active link ─────────────────────────────────── */
.nav__link.active {
  color: var(--c-gold);
}
.nav__link.active::after {
  transform: scaleX(1);
}

/* ── Pickle scroll drag ──────────────────────────────── */
.pickles-scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* ── Signature card hover ────────────────────────────── */
.sig-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom left, rgba(200,164,82,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.sig-card:hover .sig-card__glow { opacity: 1; }

/* ── Stats count-up ──────────────────────────────────── */
.about__stat.counting .about__stat-number {
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light), var(--c-gold));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 1.5s linear infinite;
}

/* ── Page transition ─────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--c-black);
  z-index: 9995;
  transform: translateY(100%);
  transition: transform 0.6s var(--ease-in-out);
  pointer-events: none;
}
.page-transition.entering  { transform: translateY(0); }
.page-transition.exiting   { transform: translateY(-100%); }

/* ── Feature card staggered reveal ──────────────────── */
.feature-card.reveal { transition-delay: calc(var(--i, 0) * 0.08s); }

/* ── Gold line divider ───────────────────────────────── */
.gold-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin: 1.5rem auto;
}

/* ── Grain overlay texture ───────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px;
  mix-blend-mode: overlay;
  opacity: 1;
}