.hero {
  background-image: url("./images/ai/restaurant-hero.jpg");
  background-position: center;
  background-size: cover;
}

.hero > video.hero-video {
  display: none !important;
}

.showcase-video-wrap {
  background-position: center;
  background-size: cover;
}

.showcase-video-wrap > video {
  display: none !important;
}

body:has([data-category="starters"].active) .showcase-video-wrap { background-image: url("./images/ai/burrata.jpg"); }
body:has([data-category="pizza"].active) .showcase-video-wrap { background-image: url("./images/ai/pizza-burrata.jpg"); }
body:has([data-category="burgers"].active) .showcase-video-wrap { background-image: url("./images/ai/category-burgers.jpg"); }
body:has([data-category="pasta"].active) .showcase-video-wrap { background-image: url("./images/ai/tagliatelle.jpg"); }
body:has([data-category="mains"].active) .showcase-video-wrap { background-image: url("./images/ai/category-mains.jpg"); }
body:has([data-category="desserts"].active) .showcase-video-wrap { background-image: url("./images/ai/fondant.jpg"); }
body:has([data-category="drinks"].active) .showcase-video-wrap { background-image: url("./images/ai/category-drinks.jpg"); }

.dish-media {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 104%;
  transition: background-size 5.5s ease, background-position 5.5s ease;
}

.dish-media > video {
  display: none !important;
}

.dish-media.is-autoplay img {
  opacity: 1 !important;
}

.preview-hint,
.video-loading {
  display: none !important;
}

.dish-media:hover,
.dish-media.motion-active,
.dish-media.is-autoplay {
  background-position: 48% 48%;
  background-size: 113%;
}

.dish-card[data-id="burrata"] .dish-media { background-image: url("./images/ai/burrata.jpg"); }
.dish-card[data-id="arancini"] .dish-media { background-image: url("./images/ai/arancini.jpg"); }
.dish-card[data-id="bruschetta"] .dish-media { background-image: url("./images/ai/bruschetta.jpg"); }
.dish-card[data-id="caesar"] .dish-media { background-image: url("./images/ai/caesar.jpg"); }
.dish-card[data-id="pizza-burrata"] .dish-media { background-image: url("./images/ai/pizza-burrata.jpg"); }
.dish-card[data-id="pizza-diavola"] .dish-media { background-image: url("./images/ai/pizza-diavola.jpg"); }
.dish-card[data-id="pizza-tartufo"] .dish-media { background-image: url("./images/ai/pizza-tartufo.jpg"); }
.dish-card[data-id="pizza-crudo"] .dish-media { background-image: url("./images/ai/pizza-crudo.jpg"); }
.dish-card[data-id="burger-classico"] .dish-media { background-image: url("./images/ai/burger-classico.jpg"); }
.dish-card[data-id="burger-tartufo"] .dish-media { background-image: url("./images/ai/burger-tartufo.jpg"); }
.dish-card[data-id="burger-smash"] .dish-media { background-image: url("./images/ai/burger-smash.jpg"); }
.dish-card[data-id="tagliatelle"] .dish-media { background-image: url("./images/ai/tagliatelle.jpg"); }
.dish-card[data-id="carbonara"] .dish-media { background-image: url("./images/ai/carbonara.jpg"); }
.dish-card[data-id="pomodoro"] .dish-media { background-image: url("./images/ai/pomodoro.jpg"); }
.dish-card[data-id="gnocchi"] .dish-media { background-image: url("./images/ai/gnocchi.jpg"); }
.dish-card[data-id="tagliata"] .dish-media { background-image: url("./images/ai/tagliata.jpg"); }
.dish-card[data-id="pollo"] .dish-media { background-image: url("./images/ai/pollo.jpg"); }
.dish-card[data-id="salmone"] .dish-media { background-image: url("./images/ai/salmone.jpg"); }
.dish-card[data-id="fondant"] .dish-media { background-image: url("./images/ai/fondant.jpg"); }
.dish-card[data-id="tiramisu"] .dish-media { background-image: url("./images/ai/tiramisu.jpg"); }
.dish-card[data-id="panna-cotta"] .dish-media { background-image: url("./images/ai/panna-cotta.jpg"); }
.dish-card[data-id="affogato"] .dish-media { background-image: url("./images/ai/affogato.jpg"); }
.dish-card[data-id="spritz"] .dish-media { background-image: url("./images/ai/spritz.jpg"); }
.dish-card[data-id="limonata"] .dish-media { background-image: url("./images/ai/limonata.jpg"); }
.dish-card[data-id="espresso-tonic"] .dish-media { background-image: url("./images/ai/espresso-tonic.jpg"); }

.hero-still {
  transform: scale(1.025);
  animation: hero-drift 18s ease-in-out infinite alternate;
}

.showcase-still {
  display: block;
  transform: scale(1.015);
  animation: showcase-drift 8s ease-in-out infinite alternate;
}

.dish-media.ai-motion img,
.dish-media.ai-motion.is-autoplay img {
  opacity: 1 !important;
  transform: scale(1.015);
  will-change: transform, filter;
}

.dish-media.ai-motion.is-autoplay img,
.dish-media.ai-motion.motion-active img,
.dish-media.ai-motion:hover img {
  animation: dish-drift 5.5s ease-in-out infinite alternate;
}

.dish-media.ai-motion .preview-hint {
  transition: opacity .25s ease, transform .25s ease;
}

.dish-media.ai-motion.motion-active .preview-hint,
.dish-media.ai-motion:hover .preview-hint {
  opacity: 0;
  transform: translateY(5px);
}

.dish-media.ai-motion .motion-glow {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-24%, 14%, 0) rotate(12deg);
  background: linear-gradient(100deg, transparent 38%, rgba(255, 227, 184, .16) 50%, transparent 62%);
}

.dish-media.ai-motion.is-autoplay .motion-glow,
.dish-media.ai-motion.motion-active .motion-glow,
.dish-media.ai-motion:hover .motion-glow {
  opacity: 1;
  animation: warm-glint 4.8s ease-in-out infinite;
}

@keyframes hero-drift {
  from { transform: scale(1.025) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.2%, -.7%, 0); }
}

@keyframes showcase-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(1%, -.8%, 0); }
}

@keyframes dish-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); filter: saturate(1); }
  to { transform: scale(1.095) translate3d(-1.2%, -.8%, 0); filter: saturate(1.07); }
}

@keyframes warm-glint {
  0%, 18% { transform: translate3d(-24%, 14%, 0) rotate(12deg); opacity: 0; }
  45% { opacity: .8; }
  72%, 100% { transform: translate3d(24%, -10%, 0) rotate(12deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-still,
  .showcase-still,
  .dish-media.ai-motion img,
  .dish-media.ai-motion .motion-glow {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 540px) {
  .section-header > div {
    min-width: 0;
  }

  .section-header h2 {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.02;
  }
}