:root {
  --coal: #14100d;
  --char: #211b17;
  --ember: #e23d22;
  --fire: #ffb238;
  --mint: #37c7a3;
  --cream: #fff4df;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--coal);
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.display {
  font-family: Anton, Impact, sans-serif;
  letter-spacing: 0;
}

.hero {
  min-height: 88svh;
  background:
    linear-gradient(90deg, rgba(20, 16, 13, 0.94) 0%, rgba(20, 16, 13, 0.66) 42%, rgba(20, 16, 13, 0.26) 100%),
    linear-gradient(180deg, rgba(20, 16, 13, 0.08) 0%, rgba(20, 16, 13, 0.9) 100%),
    url("https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=2200&q=85");
  background-position: center;
  background-size: cover;
}

.texture {
  background-image:
    radial-gradient(circle at 25% 20%, rgba(226, 61, 34, 0.16), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(55, 199, 163, 0.13), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%);
  background-size: auto, auto, 26px 26px, 26px 26px;
}

.nav-glass {
  background: rgba(20, 16, 13, 0.76);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 244, 223, 0.12);
}

.smoke {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 64%);
  filter: blur(8px);
  opacity: 0.56;
  pointer-events: none;
  animation: drift 12s ease-in-out infinite;
}

.smoke.two {
  animation-delay: -4s;
  animation-duration: 15s;
}

.smoke.three {
  animation-delay: -8s;
  animation-duration: 18s;
}

@keyframes drift {
  0% {
    transform: translate3d(-8%, 8%, 0) scale(0.78);
    opacity: 0.25;
  }

  45% {
    opacity: 0.55;
  }

  100% {
    transform: translate3d(24%, -38%, 0) scale(1.24);
    opacity: 0;
  }
}

.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fire);
  box-shadow: 0 0 20px rgba(255, 178, 56, 0.9);
  animation: spark-rise 2.8s linear infinite;
}

.spark-delay-1 {
  animation-delay: 0.7s;
}

.spark-delay-2 {
  animation-delay: 1.4s;
}

@keyframes spark-rise {
  from {
    transform: translateY(0) scale(0.55);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  to {
    transform: translateY(-170px) translateX(34px) scale(0.05);
    opacity: 0;
  }
}

.rolling-trailer {
  animation: roll 8s ease-in-out infinite;
}

@keyframes roll {
  0%,
  100% {
    transform: translateX(-8px) rotate(-0.5deg);
  }

  50% {
    transform: translateX(10px) rotate(0.5deg);
  }
}

.flame {
  transform-origin: bottom center;
  animation: flicker 1s ease-in-out infinite alternate;
}

.flame:nth-child(2) {
  animation-delay: 0.18s;
}

.flame:nth-child(3) {
  animation-delay: 0.34s;
}

@keyframes flicker {
  from {
    transform: scaleY(0.82) skewX(-4deg);
    opacity: 0.75;
  }

  to {
    transform: scaleY(1.08) skewX(5deg);
    opacity: 1;
  }
}

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

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.image-tile {
  min-height: 22rem;
  background-position: center;
  background-size: cover;
}

.gallery-ribs {
  background-image:
    linear-gradient(rgba(20, 16, 13, 0.12), rgba(20, 16, 13, 0.34)),
    url("https://images.unsplash.com/photo-1529193591184-b1d58069ecdd?auto=format&fit=crop&w=1000&q=82");
}

.gallery-grill {
  background-image:
    linear-gradient(rgba(20, 16, 13, 0.12), rgba(20, 16, 13, 0.34)),
    url("https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=1000&q=82");
}

.gallery-brisket {
  background-image:
    linear-gradient(rgba(20, 16, 13, 0.12), rgba(20, 16, 13, 0.34)),
    url("https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?auto=format&fit=crop&w=1000&q=82");
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.tilt-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(255, 178, 56, 0.52);
  background: rgba(255, 255, 255, 0.085);
}

.button-pop {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.button-pop:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(226, 61, 34, 0.3);
}

.route-line {
  stroke-dasharray: 14 12;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -26;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 90svh;
    background-position: 58% center;
  }

  .image-tile {
    min-height: 16rem;
  }
}