/* ═══════════════════════════════════════════════════════════════
   CHEFZ DOGZ — ANIMATIONS.CSS
   Keyframes · Scroll triggers · Particles · Creative effects
═══════════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp       { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown     { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft     { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight    { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes zoomIn       { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
@keyframes floatLogo    { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-18px) rotate(2deg)} }
@keyframes ticker       { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
@keyframes pulse        { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes pulseGlow    { 0%,100%{box-shadow:0 0 20px rgba(245,200,0,0.3)} 50%{box-shadow:0 0 50px rgba(245,200,0,0.7),0 0 80px rgba(245,200,0,0.3)} }
@keyframes spin         { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spinSlow     { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes counterSpin  { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes shimmer      { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes borderRun    { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes typewriter   { from{width:0} to{width:100%} }
@keyframes blink        { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes drip         { 0%{height:0;opacity:0} 60%{opacity:1} 100%{height:60px;opacity:0} }
@keyframes flame        { 0%,100%{transform:scaleY(1) scaleX(1) rotate(-2deg)} 33%{transform:scaleY(1.15) scaleX(0.9) rotate(2deg)} 66%{transform:scaleY(0.9) scaleX(1.1) rotate(-1deg)} }
@keyframes particleRise { 0%{transform:translateY(0) translateX(0) scale(1);opacity:1} 100%{transform:translateY(-120px) translateX(var(--rx,20px)) scale(0);opacity:0} }
@keyframes slideInUp    { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes staggerIn    { from{opacity:0;transform:translateY(30px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes rotateBadge  { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes scaleIn      { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes waveText     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glowPulse    { 0%,100%{text-shadow:0 0 20px rgba(245,200,0,0.5)} 50%{text-shadow:0 0 40px rgba(245,200,0,1),0 0 80px rgba(245,200,0,0.5)} }
@keyframes drawLine     { from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }
@keyframes countUp      { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradShift    { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes cardFlip     { 0%{transform:rotateY(0)} 100%{transform:rotateY(180deg)} }
@keyframes ripple       { 0%{transform:scale(0);opacity:0.6} 100%{transform:scale(4);opacity:0} }
@keyframes bounceIn     { 0%{transform:scale(0.3);opacity:0} 50%{transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1);opacity:1} }
@keyframes mustardDrip  { 0%{clip-path:inset(0 0 100% 0)} 100%{clip-path:inset(0 0 0% 0)} }
@keyframes neonFlicker  { 0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:0 0 10px #f5c800,0 0 20px #f5c800,0 0 40px #f5c800} 20%,24%,55%{text-shadow:none} }
@keyframes lineGrow     { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes imagePan     { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

/* ─── SCROLL REVEAL CLASSES ─────────────────────────────── */
.anim-fade-up   { opacity:0; transform:translateY(50px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.anim-fade-left { opacity:0; transform:translateX(60px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.anim-fade-right{ opacity:0; transform:translateX(-60px);transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.anim-zoom-in   { opacity:0; transform:scale(0.85);      transition:opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
.anim-flip-up   { opacity:0; transform:perspective(600px) rotateX(30deg); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }

.anim-fade-up.in-view,
.anim-fade-left.in-view,
.anim-fade-right.in-view,
.anim-zoom-in.in-view,
.anim-flip-up.in-view { opacity:1; transform:none; }

/* Stagger delays */
.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }
.delay-6 { transition-delay:0.6s !important; }

/* ─── SHIMMER EFFECT ─────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg, #f5c800 0%, #fff 40%, #f5c800 60%, #d4a900 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ─── ANIMATED BORDER ─────────────────────────────────────── */
.animated-border {
  position: relative;
}
.animated-border::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--cd-yellow),var(--cd-red-bright),var(--cd-yellow));
  background-size:200% 200%;
  animation:borderRun 3s linear infinite;
  z-index:-1;
  border-radius:inherit;
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* ─── FLOATING PARTICLES ─────────────────────────────────── */
.cd-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cd-particle {
  position:absolute;
  border-radius:50%;
  animation:particleRise var(--dur,3s) ease-out var(--delay,0s) infinite;
}

/* ─── NEON GLOW ──────────────────────────────────────────── */
.neon-yellow { animation: glowPulse 2.5s ease-in-out infinite; }
.neon-flicker { animation: neonFlicker 3s infinite; }

/* ─── COUNTER ─────────────────────────────────────────────── */
.cd-counter { display:inline-block; }

/* ─── SPIN BADGE ──────────────────────────────────────────── */
.spin-badge-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.spin-badge-ring {
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px dashed rgba(245,200,0,0.4);
  animation:spinSlow 12s linear infinite;
}
.spin-badge-ring-2 {
  position:absolute;
  inset:-16px;
  border-radius:50%;
  border:1px dashed rgba(245,200,0,0.2);
  animation:counterSpin 18s linear infinite;
}

/* ─── MUSTARD DIVIDER ─────────────────────────────────────── */
.cd-mustard-divider {
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 5%;
  margin:-2px 0;
  overflow:hidden;
  position:relative;
  z-index:10;
}
.cd-mustard-divider svg { flex:1; height:24px; }

/* ─── MAGNETIC BTN ────────────────────────────────────────── */
.btn-magnetic {
  display:inline-block;
  position:relative;
  overflow:hidden;
  transition:transform 0.2s cubic-bezier(.16,1,.3,1);
}
.btn-magnetic::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.15);
  transform:translateX(-100%) skewX(-15deg);
  transition:transform 0.4s ease;
}
.btn-magnetic:hover::after { transform:translateX(100%) skewX(-15deg); }

/* ─── RIPPLE ──────────────────────────────────────────────── */
.ripple-container { position:relative; overflow:hidden; }
.ripple-dot {
  position:absolute;
  border-radius:50%;
  background:rgba(245,200,0,0.35);
  pointer-events:none;
  animation:ripple 0.7s linear forwards;
}

/* ─── TIMELINE ────────────────────────────────────────────── */
.cd-timeline { position:relative; padding:0 0 0 40px; }
.cd-timeline::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(to bottom, var(--cd-yellow), rgba(245,200,0,0.1));
  transform-origin:top;
  transform:scaleY(0);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1);
}
.cd-timeline.in-view::before { transform:scaleY(1); }
.cd-timeline-item {
  position:relative;
  padding:0 0 40px 30px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.cd-timeline-item.in-view { opacity:1; transform:translateX(0); }
.cd-timeline-item::before {
  content:'';
  position:absolute;
  left:-5px; top:6px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--cd-yellow);
  box-shadow:0 0 0 4px rgba(245,200,0,0.2);
}

/* ─── FLIP CARD ───────────────────────────────────────────── */
.cd-flip-card { perspective:1000px; cursor:pointer; }
.cd-flip-card__inner {
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(.16,1,.3,1);
}
.cd-flip-card:hover .cd-flip-card__inner { transform:rotateY(180deg); }
.cd-flip-card__front,
.cd-flip-card__back {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.cd-flip-card__back {
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
}

/* ─── GLASS CARD ──────────────────────────────────────────── */
.glass-card {
  background:rgba(15,61,26,0.6);
  backdrop-filter:blur(16px);
  border:1px solid rgba(245,200,0,0.2);
}

/* ─── SCROLL PROGRESS BAR ─────────────────────────────────── */
#cd-scroll-progress {
  position:fixed;
  top:0; left:0;
  height:3px;
  background:linear-gradient(90deg, var(--cd-yellow), var(--cd-red-bright));
  z-index:9999;
  width:0%;
  transition:width 0.1s linear;
}

/* ─── PAGE TRANSITION ─────────────────────────────────────── */
.cd-page-enter { animation:fadeUp 0.6s cubic-bezier(.16,1,.3,1) both; }

/* ─── HOVER LIFT ──────────────────────────────────────────── */
.hover-lift { transition:transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease; }
.hover-lift:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,0.5); }

/* ─── GRADIENT TEXT ───────────────────────────────────────── */
.grad-text {
  background:linear-gradient(135deg, var(--cd-yellow) 0%, #ffeb80 40%, var(--cd-yellow-deep) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}