/* ============================================================
   Warm Appetite motion layer. motion.js adds `html.motion` only when JS runs
   and reduced-motion is off; every hidden start state is scoped under `.motion`,
   so without JS (or with prefers-reduced-motion) all content is visible.
   GPU-friendly (transform/opacity/clip-path only).
   ============================================================ */

/* ---- Scroll reveal ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.21,.9,.31,1), transform .9s cubic-bezier(.21,.9,.31,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-40px); }
.motion .reveal-right { transform: translateX(40px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.21,.9,.31,1), transform .8s cubic-bezier(.21,.9,.31,1);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .48s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .56s; }

/* ---- Image clip-wipe reveal (like plating) ---- */
.motion .reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Draw-in rule / divider ---- */
.motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .9s cubic-bezier(.76,0,.24,1) .12s;
}
.motion .draw-rule.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom (cinematic, applies regardless of JS) ---- */
.dish-card, .menu-card, .category-card, .chef-card, .offer-card, .event-card, .blog-card { transition: transform .5s cubic-bezier(.21,.9,.31,1), box-shadow .5s ease; }
.dish-card:hover, .menu-card:hover, .category-card:hover, .chef-card:hover, .offer-card:hover, .event-card:hover, .blog-card:hover { transform: translateY(-6px); }
.zoom-figure img, .dish-card img, .gallery-item img, .category-card img { transition: transform 1.1s cubic-bezier(.21,.9,.31,1); }
.dish-card:hover img, .gallery-item:hover img, .category-card:hover img, .zoom-figure:hover > img { transform: scale(1.06); }

/* ---- Hero Ken-Burns on active slide ---- */
.hero-slide.active { animation: rp-kenburns 16s ease-out forwards; }
@keyframes rp-kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .dish-card, .menu-card, .category-card, .chef-card, .zoom-figure img { transition: none; }
}