/* ═══════════════════════════════════════════════════════════════
   CHEFZ DOGZ — HERO ANIMATIONS
   Modern animated backgrounds for every page hero section
═══════════════════════════════════════════════════════════════ */

/* ─── SHARED HERO BASE ───────────────────────────────────────── */
.cd-page-hero { position: relative; overflow: hidden; }

/* ─── ANIMATED ORBS (reusable) ──────────────────────────────── */
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.1)} 66%{transform:translate(-20px,20px) scale(0.95)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-50px,30px) scale(0.9)} 66%{transform:translate(30px,-40px) scale(1.15)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,40px) scale(1.08)} }
@keyframes gridShift { 0%{background-position:0 0} 100%{background-position:40px 40px} }
@keyframes scanLine  { 0%{top:-10%} 100%{top:110%} }
@keyframes ringPulse { 0%{transform:translate(-50%,-50%) scale(0.6);opacity:0.8} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }
@keyframes sparkle   { 0%,100%{opacity:0;transform:scale(0) rotate(0deg)} 50%{opacity:1;transform:scale(1) rotate(180deg)} }
@keyframes floatShape{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(10deg)} }
@keyframes waveFlow  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes glowMove  { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes dotGrid   { 0%{background-position:0 0} 100%{background-position:30px 30px} }
@keyframes beamSweep { 0%{transform:translateX(-100%) skewX(-20deg);opacity:0} 40%{opacity:0.6} 100%{transform:translateX(400%) skewX(-20deg);opacity:0} }
@keyframes noiseDrift{ 0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(1px,-2px)} 75%{transform:translate(2px,1px)} 100%{transform:translate(0,0)} }
@keyframes gradientBG{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes lineGrowH { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes countPin  { 0%{transform:translateY(0) scale(1)} 40%{transform:translateY(-12px) scale(1.15)} 60%{transform:translateY(-10px) scale(1.1)} 80%{transform:translateY(-2px) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
@keyframes confettiFall{ 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(120px) rotate(360deg);opacity:0} }
@keyframes starTwinkle{ 0%,100%{opacity:0.2;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes priceTag  { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-8px)} }
@keyframes envelopeOpen{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }
@keyframes clockTick { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes pinBounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 50%{transform:translateY(-8px)} 70%{transform:translateY(-12px)} }

/* ─── MESH GRADIENT ANIMATION (all heroes) ───────────────────── */
.cd-hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.cd-hero-mesh__orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  pointer-events: none;
}

/* ─── ANIMATED DOT GRID ──────────────────────────────────────── */
.cd-hero-dotgrid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(245,200,0,0.18) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: dotGrid 6s linear infinite;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* ─── SCAN LINE ──────────────────────────────────────────────── */
.cd-hero-scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,200,0,0.4), transparent);
  z-index: 1; pointer-events: none;
  animation: scanLine 4s ease-in-out infinite;
}

/* ─── LIGHT BEAM ─────────────────────────────────────────────── */
.cd-hero-beam {
  position: absolute; top: 0; left: 0; width: 120px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245,200,0,0.07), transparent);
  z-index: 1; pointer-events: none;
  animation: beamSweep 5s ease-in-out 1s infinite;
}
.cd-hero-beam:nth-child(2) { animation-delay: 3.5s; opacity: 0.6; }

/* ─── PULSING RINGS ──────────────────────────────────────────── */
.cd-hero-rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cd-hero-ring-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgba(245,200,0,0.25);
  animation: ringPulse 3s ease-out infinite;
}
.cd-hero-ring-pulse:nth-child(2) { animation-delay: 1s; border-color: rgba(200,32,10,0.15); }
.cd-hero-ring-pulse:nth-child(3) { animation-delay: 2s; border-color: rgba(245,200,0,0.1); }

/* ─── FLOATING SHAPES (generic) ──────────────────────────────── */
.cd-hero-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cd-hero-shape {
  position: absolute; font-size: 2rem; opacity: 0.06;
  animation: floatShape 4s ease-in-out infinite;
  filter: blur(1px);
  user-select: none;
}

/* ─── GRID LINES ─────────────────────────────────────────────── */
.cd-hero-gridlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(245,200,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,200,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridShift 8s linear infinite;
}

/* ─── NOISE OVERLAY ──────────────────────────────────────────── */
.cd-hero-noise {
  position: absolute; inset: -10px; pointer-events: none; z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseDrift 3s steps(1) infinite;
}

/* ─── SPARKLE STARS ──────────────────────────────────────────── */
.cd-hero-star {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%;
  animation: starTwinkle var(--dur,2s) ease-in-out var(--del,0s) infinite;
}

/* ─────────────────────────────────────────────────────────────
   PER-PAGE HERO THEMES
─────────────────────────────────────────────────────────────── */

/* ── HOME HERO ───────────────────────────────────────────────── */
.cd-hero .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(26,92,37,0.45);top:-100px;left:-100px;animation:orbFloat1 8s ease-in-out infinite; }
.cd-hero .cd-hero-mesh__orb:nth-child(2) { width:400px;height:400px;background:rgba(200,32,10,0.2);bottom:-80px;right:20%;animation:orbFloat2 10s ease-in-out infinite; }
.cd-hero .cd-hero-mesh__orb:nth-child(3) { width:300px;height:300px;background:rgba(245,200,0,0.12);top:30%;right:-80px;animation:orbFloat3 7s ease-in-out infinite; }

/* ── MENU HERO ───────────────────────────────────────────────── */
.cd-page-hero--menu .cd-hero-mesh__orb:nth-child(1) { width:600px;height:600px;background:rgba(26,92,37,0.5);top:-150px;left:50%;transform:translateX(-50%);animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero--menu .cd-hero-mesh__orb:nth-child(2) { width:300px;height:300px;background:rgba(245,200,0,0.18);bottom:-50px;left:10%;animation:orbFloat3 6s ease-in-out infinite; }
.cd-page-hero--menu .cd-hero-mesh__orb:nth-child(3) { width:250px;height:250px;background:rgba(200,32,10,0.2);top:20%;right:5%;animation:orbFloat2 11s ease-in-out infinite; }
/* Floating hot dogs */
.cd-page-hero--menu .cd-hero-float-icon {
  position:absolute; font-size:3rem; opacity:0.05; pointer-events:none; user-select:none;
  animation:floatShape 5s ease-in-out infinite;
}

/* ── ABOUT HERO ──────────────────────────────────────────────── */
.cd-page-hero--about .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(200,32,10,0.2);top:-100px;left:-80px;animation:orbFloat2 10s ease-in-out infinite; }
.cd-page-hero--about .cd-hero-mesh__orb:nth-child(2) { width:450px;height:450px;background:rgba(26,92,37,0.45);bottom:-80px;right:-60px;animation:orbFloat1 8s ease-in-out infinite; }
.cd-page-hero--about .cd-hero-mesh__orb:nth-child(3) { width:200px;height:200px;background:rgba(245,200,0,0.15);top:50%;left:50%;transform:translate(-50%,-50%);animation:glowMove 4s ease-in-out infinite; }

/* ── CATERING HERO ───────────────────────────────────────────── */
.cd-page-hero--catering .cd-hero-mesh__orb:nth-child(1) { width:600px;height:600px;background:rgba(200,32,10,0.35);top:-200px;right:-100px;animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero--catering .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(26,92,37,0.3);bottom:-50px;left:-50px;animation:orbFloat3 7s ease-in-out infinite; }
.cd-page-hero--catering .cd-hero-mesh__orb:nth-child(3) { width:200px;height:200px;background:rgba(245,200,0,0.1);top:30%;left:20%;animation:orbFloat2 11s ease-in-out infinite; }

/* ── LOYALTY HERO ────────────────────────────────────────────── */
.cd-page-hero--loyalty .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(245,200,0,0.2);top:-100px;right:-80px;animation:orbFloat1 8s ease-in-out infinite; }
.cd-page-hero--loyalty .cd-hero-mesh__orb:nth-child(2) { width:400px;height:400px;background:rgba(26,92,37,0.4);bottom:-60px;left:-60px;animation:orbFloat2 10s ease-in-out infinite; }
.cd-page-hero--loyalty .cd-hero-mesh__orb:nth-child(3) { width:200px;height:200px;background:rgba(200,32,10,0.15);top:40%;left:40%;animation:glowMove 5s ease-in-out infinite; }
/* Confetti pieces */
.cd-confetti-piece {
  position:absolute; width:8px; height:8px; pointer-events:none;
  animation:confettiFall var(--dur,4s) ease-in var(--del,0s) infinite;
  border-radius:var(--r,2px);
}

/* ── PRESS HERO ──────────────────────────────────────────────── */
.cd-page-hero--press .cd-hero-mesh__orb:nth-child(1) { width:400px;height:400px;background:rgba(200,32,10,0.25);top:-80px;right:10%;animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero--press .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(26,92,37,0.35);bottom:-50px;left:-40px;animation:orbFloat3 7s ease-in-out infinite; }
/* Press lines animation */
.cd-hero-presslines {
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.cd-hero-pressline {
  position:absolute; left:5%; height:1px; background:rgba(245,200,0,0.07);
  transform-origin:left; animation:lineGrowH 2s ease-out var(--del,0s) both;
}

/* ── MERCH HERO ──────────────────────────────────────────────── */
.cd-page-hero--merch .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(245,200,0,0.18);top:-100px;left:50%;transform:translateX(-50%);animation:orbFloat3 8s ease-in-out infinite; }
.cd-page-hero--merch .cd-hero-mesh__orb:nth-child(2) { width:300px;height:300px;background:rgba(200,32,10,0.2);bottom:-60px;right:-40px;animation:orbFloat2 10s ease-in-out infinite; }
.cd-page-hero--merch .cd-hero-mesh__orb:nth-child(3) { width:250px;height:250px;background:rgba(26,92,37,0.3);top:20%;left:-40px;animation:orbFloat1 7s ease-in-out infinite; }
/* Price tags floating */
.cd-hero-pricetag {
  position:absolute; pointer-events:none; opacity:0.07;
  font-size:1.8rem; user-select:none;
  animation:priceTag var(--dur,4s) ease-in-out var(--del,0s) infinite;
}

/* ── LOCATIONS HERO ──────────────────────────────────────────── */
.cd-page-hero--locations .cd-hero-mesh__orb:nth-child(1) { width:600px;height:600px;background:rgba(26,92,37,0.5);top:-150px;left:-100px;animation:orbFloat2 11s ease-in-out infinite; }
.cd-page-hero--locations .cd-hero-mesh__orb:nth-child(2) { width:300px;height:300px;background:rgba(245,200,0,0.15);bottom:-40px;right:-30px;animation:orbFloat1 8s ease-in-out infinite; }
/* Animated map pins */
.cd-hero-pin {
  position:absolute; pointer-events:none; opacity:0.1;
  font-size:2rem; user-select:none;
  animation:pinBounce var(--dur,2.5s) ease-in-out var(--del,0s) infinite;
}

/* ── BLOG HERO ───────────────────────────────────────────────── */
.cd-page-hero--blog .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(245,200,0,0.15);top:-100px;right:-80px;animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero--blog .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(26,92,37,0.35);bottom:-50px;left:-40px;animation:orbFloat2 8s ease-in-out infinite; }

/* ── CONTACT HERO (generic) ──────────────────────────────────── */
.cd-page-hero .cd-hero-mesh__orb:nth-child(1) { width:450px;height:450px;background:rgba(26,92,37,0.4);top:-100px;left:-80px;animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(200,32,10,0.18);bottom:-60px;right:-50px;animation:orbFloat3 7s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   ENSURE ALL HERO CONTENT IS ABOVE ANIMATIONS
─────────────────────────────────────────────────────────────── */
.cd-page-hero > .container,
.cd-page-hero > [style*="z-index"] { position: relative; z-index: 2; }

/* ── GALLERY HERO ──────────────────────────────────────────── */
.cd-page-hero--gallery .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(26,92,37,0.4);top:-100px;left:-80px;animation:orbFloat2 9s ease-in-out infinite; }
.cd-page-hero--gallery .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(245,200,0,0.15);bottom:-60px;right:-40px;animation:orbFloat1 8s ease-in-out infinite; }

/* ── CONTACT HERO ──────────────────────────────────────────── */
.cd-page-hero--contact .cd-hero-mesh__orb:nth-child(1) { width:450px;height:450px;background:rgba(26,92,37,0.4);top:-100px;left:-80px;animation:orbFloat1 9s ease-in-out infinite; }
.cd-page-hero--contact .cd-hero-mesh__orb:nth-child(2) { width:350px;height:350px;background:rgba(200,32,10,0.18);bottom:-60px;right:-50px;animation:orbFloat3 7s ease-in-out infinite; }

/* ── SCHEDULE HERO ─────────────────────────────────────────── */
.cd-page-hero--schedule { background:radial-gradient(ellipse at 50% 40%,rgba(26,92,37,0.55) 0%,transparent 70%),linear-gradient(180deg,#0a2a10,#0d0d0d); }
.cd-page-hero--schedule .cd-hero-mesh__orb:nth-child(1) { width:500px;height:500px;background:rgba(26,92,37,0.5);top:-120px;left:-80px;animation:orbFloat1 10s ease-in-out infinite; }
.cd-page-hero--schedule .cd-hero-mesh__orb:nth-child(2) { width:300px;height:300px;background:rgba(245,200,0,0.15);bottom:-40px;right:-30px;animation:orbFloat3 7s ease-in-out infinite; }