/* =========================================================
   SB CROUSTY — ANIMATIONS.CSS PREMIUM COMPLET
   Animations fluides, légères, élégantes et responsive
========================================================= */


/* =========================================================
   01. KEYFRAMES PRINCIPALES
========================================================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes softZoom {
  from {
    opacity: 0;
    transform: scale(0.965);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes imageReveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(1.035);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes foodFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(0.8deg);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(229, 9, 20, 0);
  }

  50% {
    box-shadow: 0 0 34px rgba(229, 9, 20, 0.24);
  }
}

@keyframes borderGlow {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.14);
  }

  50% {
    border-color: rgba(229, 9, 20, 0.65);
  }
}

@keyframes menuDrop {
  from {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes backgroundMove {
  0%,
  100% {
    transform: scale(1.03) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.06) translate3d(-8px, -6px, 0);
  }
}


/* =========================================================
   02. HEADER
========================================================= */

.site-header {
  animation: fadeDown 0.55s ease both;
}


/* =========================================================
   03. HERO TEXTES
========================================================= */

.hero-content,
.menu-hero-text,
.order-hero-text,
.gallery-hero-text,
.contact-hero-text {
  animation: fadeUp 0.75s ease both;
}


/* =========================================================
   04. HERO IMAGES
========================================================= */

.hero-visual,
.menu-hero-image,
.order-hero-image,
.gallery-hero-image,
.contact-map {
  animation: softZoom 0.85s ease both;
}

.hero-visual img {
  animation: foodFloat 5.5s ease-in-out infinite;
}


/* =========================================================
   05. BACKGROUNDS HERO
========================================================= */

.menu-hero::before,
.order-hero::before,
.gallery-hero::before,
.contact-hero::before {
  animation: backgroundMove 16s ease-in-out infinite;
}


/* =========================================================
   06. CARTES / BLOCS
========================================================= */

.special-card,
.riz-card,
.menu-card,
.order-card,
.gallery-item,
.signature-card,
.quick-card,
.detail-card,
.info-item,
.order-info-item {
  animation: fadeUp 0.68s ease both;
}


/* =========================================================
   07. IMAGES DANS LES CARTES
========================================================= */

.special-card img,
.riz-card img,
.menu-card img,
.gallery-item img,
.signature-card img,
.delivery-box img {
  animation: imageReveal 0.8s ease both;
  will-change: transform;
}


/* =========================================================
   08. CTA / BLOCS IMPORTANTS
========================================================= */

.final-box,
.order-final-box,
.social-box {
  animation: fadeUp 0.75s ease both;
}

.btn-red,
.call-btn,
.order-card.featured,
.quick-card.active {
  animation: glowPulse 3s ease-in-out infinite;
}


/* =========================================================
   09. DÉLAIS ÉLÉGANTS
========================================================= */

.special-card:nth-child(2),
.riz-card:nth-child(2),
.menu-card:nth-child(2),
.order-card:nth-child(2),
.gallery-item:nth-child(2),
.signature-card:nth-child(2),
.quick-card:nth-child(2),
.detail-card:nth-child(2),
.info-item:nth-child(2),
.order-info-item:nth-child(2) {
  animation-delay: 0.06s;
}

.special-card:nth-child(3),
.riz-card:nth-child(3),
.menu-card:nth-child(3),
.order-card:nth-child(3),
.gallery-item:nth-child(3),
.signature-card:nth-child(3),
.quick-card:nth-child(3),
.detail-card:nth-child(3),
.info-item:nth-child(3),
.order-info-item:nth-child(3) {
  animation-delay: 0.12s;
}

.special-card:nth-child(4),
.riz-card:nth-child(4),
.menu-card:nth-child(4),
.order-card:nth-child(4),
.gallery-item:nth-child(4),
.signature-card:nth-child(4),
.quick-card:nth-child(4),
.detail-card:nth-child(4),
.info-item:nth-child(4),
.order-info-item:nth-child(4) {
  animation-delay: 0.18s;
}

.special-card:nth-child(5),
.riz-card:nth-child(5),
.menu-card:nth-child(5),
.gallery-item:nth-child(5) {
  animation-delay: 0.24s;
}

.special-card:nth-child(6),
.riz-card:nth-child(6),
.menu-card:nth-child(6),
.gallery-item:nth-child(6) {
  animation-delay: 0.3s;
}


/* =========================================================
   10. SURVOL PREMIUM
========================================================= */

.menu-card:hover,
.special-card:hover,
.riz-card:hover,
.gallery-item:hover,
.order-card:hover,
.quick-card:hover,
.detail-card:hover,
.signature-card:hover {
  animation-name: borderGlow;
  animation-duration: 1.6s;
  animation-timing-function: ease;
}


/* =========================================================
   11. MENU MOBILE
========================================================= */

.nav.open {
  animation: menuDrop 0.28s ease both;
}


/* =========================================================
   12. PERFORMANCE
========================================================= */

.hero-content,
.menu-hero-text,
.order-hero-text,
.gallery-hero-text,
.contact-hero-text,
.hero-visual,
.menu-hero-image,
.order-hero-image,
.gallery-hero-image,
.contact-map,
.special-card,
.riz-card,
.menu-card,
.order-card,
.gallery-item,
.signature-card,
.quick-card,
.detail-card,
.info-item,
.order-info-item,
.final-box,
.order-final-box,
.social-box {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}


/* =========================================================
   13. MOBILE — ANIMATIONS PLUS LÉGÈRES
========================================================= */

@media (max-width: 760px) {
  .site-header {
    animation-duration: 0.38s;
  }

  .hero-content,
  .menu-hero-text,
  .order-hero-text,
  .gallery-hero-text,
  .contact-hero-text,
  .final-box,
  .order-final-box,
  .social-box {
    animation-duration: 0.55s;
  }

  .hero-visual,
  .menu-hero-image,
  .order-hero-image,
  .gallery-hero-image,
  .contact-map {
    animation-duration: 0.6s;
  }

  .special-card,
  .riz-card,
  .menu-card,
  .order-card,
  .gallery-item,
  .signature-card,
  .quick-card,
  .detail-card,
  .info-item,
  .order-info-item {
    animation-duration: 0.5s;
    animation-delay: 0s !important;
  }

  .special-card img,
  .riz-card img,
  .menu-card img,
  .gallery-item img,
  .signature-card img,
  .delivery-box img {
    animation-duration: 0.55s;
  }

  .btn-red,
  .call-btn,
  .order-card.featured,
  .quick-card.active {
    animation: none;
  }

  .hero-visual img {
    animation: none;
  }

  .menu-hero::before,
  .order-hero::before,
  .gallery-hero::before,
  .contact-hero::before {
    animation: none;
  }
}


/* =========================================================
   14. ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}