/* ==========================================================================
   Mr A Pizzeria - Styles & Micro-Animations Sobres et Fluides
   Boulogne-sur-Gesse (31350)
   ========================================================================== */

/* Barre de défilement personnalisée */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #111111;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F2A900;
}

/* Masquer la scrollbar pour les défilements tactiles horizontaux */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Motif de points (Hero section) */
.bg-dots {
    background-size: 20px 20px;
}

/* ==========================================================================
   Micro-Animations & Transitions Fluides (60 FPS)
   ========================================================================== */

/* 1. Animation en cascade pour les cartes de plats */
.stagger-item {
    opacity: 0;
    transform: translateY(14px);
    animation: dishFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dishFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Élévation sobre au survol/toucher de la carte */
.dish-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                box-shadow 0.25s ease, 
                background-color 0.25s ease;
}

@media (hover: hover) {
    .dish-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(242, 169, 0, 0.12);
        border-color: rgba(242, 169, 0, 0.45);
    }
    .dish-card:hover .price-tag {
        transform: scale(1.03);
    }
}

.dish-card:active {
    transform: scale(0.99);
}

.price-tag {
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* 3. Flottement 3D doux de la pizza (Hero) */
.floating-pizza {
    animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-12px) rotate(1.5deg);
    }
}

/* 4. Micro-sonnerie discrète de l'icône téléphone (Barre mobile) */
.phone-ring-icon {
    display: inline-block;
    animation: phoneRing 5s ease-in-out infinite;
}

@keyframes phoneRing {
    0%, 80%, 100% {
        transform: rotate(0deg);
    }
    82% {
        transform: rotate(12deg);
    }
    86% {
        transform: rotate(-12deg);
    }
    90% {
        transform: rotate(10deg);
    }
    94% {
        transform: rotate(-6deg);
    }
    98% {
        transform: rotate(0deg);
    }
}

/* 5. Apparition progressive au défilement (Scroll Reveal) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}