/* =====================================================================
 * Miamy — Pack d'animations fun (toutes pages)
 * ---------------------------------------------------------------------
 * Activation : ajouter data-anim="..." sur un élément, ou la classe
 *              .miamy-card / .miamy-cta sur les éléments interactifs.
 *
 * Liste des reveals (data-anim="...") :
 *   fade-up      : remonte de 30px + fade (par défaut)
 *   fade-down    : descend de 30px + fade
 *   fade-left    : entre par la droite
 *   fade-right   : entre par la gauche
 *   zoom-in      : scale .8 -> 1 avec bounce
 *   pop          : pop élastique
 *   tilt         : entre avec une petite rotation
 *   flip         : flip 3D depuis le haut
 *
 * Modifieurs (data-anim-delay="0|100|200|300|400|500") en ms.
 * Stagger automatique : data-anim-stagger="100" sur un parent applique
 * un délai croissant à chaque enfant direct.
 *
 * Respect prefers-reduced-motion = pas d'animation.
 * ===================================================================== */

/* ====== Reveals au scroll ====== */
[data-anim] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
                transform .9s cubic-bezier(.34, 1.56, .64, 1);
    will-change: opacity, transform;
}
[data-anim="fade-up"]    { transform: translateY(36px); }
[data-anim="fade-down"]  { transform: translateY(-36px); }
[data-anim="fade-left"]  { transform: translateX(48px); }
[data-anim="fade-right"] { transform: translateX(-48px); }
[data-anim="zoom-in"]    { transform: scale(.82); }
[data-anim="pop"]        { transform: scale(.6) rotate(-6deg); }
[data-anim="tilt"]       { transform: rotate(-4deg) translateY(20px); }
[data-anim="flip"]       { transform: perspective(800px) rotateX(-30deg); transform-origin: top center; }

[data-anim].is-revealed {
    opacity: 1;
    transform: none;
}

/* ====== Hover lift fun pour les cards ====== */
.miamy-card,
.cat-card,            /* page d'accueil — catégories */
.dish-card,           /* page restaurant — plats */
.resto-card,          /* liste restos */
.miamy-restaurant-card,
.featured-card {
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .35s ease;
    will-change: transform;
}
.miamy-card:hover,
.cat-card:hover,
.dish-card:hover,
.resto-card:hover,
.miamy-restaurant-card:hover,
.featured-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 22px 45px rgba(229, 87, 31, .18),
                0 8px 16px rgba(0, 0, 0, .06);
}

/* ====== CTA shine — effet de reflet brillant qui traverse le bouton ====== */
.miamy-cta,
.btn-miamy,
.btn-primary,
.miamy-btn,
button.btn[type="submit"]:not(.btn-link) {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.miamy-cta::before,
.btn-miamy::before,
.miamy-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, .35) 50%,
        transparent 100%
    );
    transform: skewX(-22deg);
    transition: left .6s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.miamy-cta:hover::before,
.btn-miamy:hover::before,
.miamy-btn:hover::before {
    left: 130%;
}
.miamy-cta:hover,
.btn-miamy:hover,
.btn-primary:hover,
.miamy-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 24px rgba(229, 87, 31, .35);
}

/* ====== Bounce sur clic pour boutons et liens nav ====== */
.miamy-cta:active,
.btn-miamy:active,
.miamy-btn:active {
    transform: translateY(0) scale(.97);
    transition-duration: .08s;
}

/* ====== Wobble fun sur icônes au hover (header nav, footer social) ====== */
.miamy-icon-wobble:hover,
.nav-link:hover i,
.footer-social a:hover i {
    animation: miamy-wobble .55s ease-in-out;
}
@keyframes miamy-wobble {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-14deg) scale(1.1); }
    40%      { transform: rotate(10deg)  scale(1.15); }
    60%      { transform: rotate(-6deg)  scale(1.1); }
    80%      { transform: rotate(3deg)   scale(1.05); }
}

/* ====== Pulse subtile sur badges promo / nouveau ====== */
.miamy-badge-pulse,
.badge-new,
.badge-promo {
    animation: miamy-pulse 2.4s ease-in-out infinite;
}
@keyframes miamy-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(229,87,31,.45); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(229,87,31,0); }
}

/* ====== Float gentle sur images / illustrations marquées ====== */
.miamy-float {
    animation: miamy-float-gentle 5s ease-in-out infinite;
}
@keyframes miamy-float-gentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ====== Page-load fade-in global (corps de la page) ====== */
body.miamy-anim-ready {
    animation: miamy-body-in .5s ease-out;
}
@keyframes miamy-body-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ====== Underline animé sur les liens nav ====== */
.nav-link-anim {
    position: relative;
}
.nav-link-anim::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF8A3D, #E5571F);
    border-radius: 2px;
    transition: width .35s ease, left .35s ease;
}
.nav-link-anim:hover::after,
.nav-link-anim.active::after {
    width: 80%;
    left: 10%;
}

/* ====== Shake gentle sur erreurs de formulaire ====== */
.miamy-shake {
    animation: miamy-shake-anim .5s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes miamy-shake-anim {
    10%, 90%  { transform: translateX(-2px); }
    20%, 80%  { transform: translateX(4px);  }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60%  { transform: translateX(8px);  }
}

/* ====== Spinner mignon (chargement) ====== */
.miamy-spin {
    display: inline-block;
    width: 18px; height: 18px;
    border: 3px solid rgba(229,87,31,.25);
    border-top-color: #E5571F;
    border-radius: 50%;
    animation: miamy-spin 0.85s linear infinite;
}
@keyframes miamy-spin {
    to { transform: rotate(360deg); }
}

/* ====== Smooth scroll global ====== */
html {
    scroll-behavior: smooth;
}

/* ====== Respect prefers-reduced-motion ====== */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    .miamy-card, .cat-card, .dish-card, .resto-card,
    .miamy-cta, .btn-miamy, .miamy-btn, .btn-primary,
    .miamy-icon-wobble, .nav-link i,
    .miamy-badge-pulse, .badge-new, .badge-promo,
    .miamy-float, body.miamy-anim-ready,
    .nav-link-anim::after {
        animation: none !important;
        transition: opacity .2s ease !important;
        transform: none !important;
    }
    [data-anim] {
        opacity: 1 !important;
    }
    html {
        scroll-behavior: auto;
    }
}