/* ============================================================
   YAHWEH TECAN — ANIMATIONS & CINEMATIC EFFECTS
   ============================================================ */

/* ---- Ember / Spark Particles ---- */
@keyframes emberFloat {
  0%   { transform: translateY(0) translateX(0) scale(1);    opacity: 0; }
  8%   { opacity: 0.9; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-380px) translateX(var(--ember-drift, 20px)) scale(0.2); opacity: 0; }
}

@keyframes emberGlow {
  0%, 100% { box-shadow: 0 0 4px 1px var(--orange); }
  50%       { box-shadow: 0 0 10px 3px var(--orange); }
}

.ember-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.ember {
  position: absolute;
  border-radius: 50%;
  background: var(--orange, #ff6b1a);
  animation:
    emberFloat var(--ember-dur, 4s) var(--ember-delay, 0s) infinite ease-out,
    emberGlow 1.5s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ---- Smoke / Haze Overlay ---- */
@keyframes smokeShift {
  0%   { transform: translateX(0) translateY(0); opacity: 0.06; }
  33%  { transform: translateX(12px) translateY(-8px); opacity: 0.09; }
  66%  { transform: translateX(-8px) translateY(-15px); opacity: 0.05; }
  100% { transform: translateX(0) translateY(0); opacity: 0.06; }
}

.smoke-overlay {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(200,200,200,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 20%, rgba(200,200,200,0.05) 0%, transparent 70%);
  pointer-events: none;
  animation: smokeShift 8s ease-in-out infinite;
  z-index: 1;
}

/* ---- Scroll Reveal Animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.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; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ---- Marquee / Ticker ---- */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 22s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ---- Glow Pulse (on CTA buttons, review cards, etc.) ---- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(196, 30, 32, 0.4); }
  50%       { box-shadow: 0 0 28px 6px rgba(196, 30, 32, 0.7); }
}

.glow-pulse {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* ---- Counter Number Count-Up ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-number.counting {
  animation: countUp 0.5s ease forwards;
}

/* ---- Shimmer on image placeholders ---- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  background-size: 400px 100%;
  animation: shimmer 2.5s infinite linear;
}

/* ---- Fire / Grill Glow border ---- */
@keyframes fireBorder {
  0%   { border-color: rgba(196, 30, 32, 0.3); }
  33%  { border-color: rgba(255, 107, 26, 0.6); }
  66%  { border-color: rgba(196, 30, 32, 0.5); }
  100% { border-color: rgba(196, 30, 32, 0.3); }
}

.fire-border {
  animation: fireBorder 3s ease-in-out infinite;
}

/* ---- Mobile sticky bar slide in ---- */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.mobile-sticky-bar {
  animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Nav link underline slide ---- */
.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--red, #c41e20);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* ---- Hero food photo zoom on load ---- */
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero-img-wrap {
  animation: heroZoom 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Section divider flame line ---- */
.flame-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 30, 32, 0.3) 20%,
    #c41e20 50%,
    rgba(255, 107, 26, 0.8) 60%,
    rgba(196, 30, 32, 0.3) 80%,
    transparent 100%
  );
  margin: 0;
  position: relative;
}

/* ---- Carousel slide transitions ---- */
.carousel-slide {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.carousel-slide.entering {
  opacity: 0;
  transform: translateX(30px);
}

.carousel-slide.leaving {
  opacity: 0;
  transform: translateX(-30px);
}

/* ---- Badge bounce ---- */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%       { transform: scale(1.06) rotate(-2deg); }
}

.menu-badge {
  animation: badgeBounce 2s ease-in-out infinite;
}

/* ---- Star twinkle ---- */
@keyframes starTwinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

.star-icon {
  display: inline-block;
  animation: starTwinkle 1.8s ease-in-out infinite;
}

.star-icon:nth-child(2) { animation-delay: 0.2s; }
.star-icon:nth-child(3) { animation-delay: 0.4s; }
.star-icon:nth-child(4) { animation-delay: 0.6s; }
.star-icon:nth-child(5) { animation-delay: 0.8s; }

/* ---- Reduce motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}