/* =====================================================================
   PREMIUM MOTION LAYER
   Adds polish on top of the existing styles. GPU-accelerated only:
   transform + opacity. Mobile-safe. Respects prefers-reduced-motion.
   ===================================================================== */

/* ─── Easing & timing tokens ─────────────────────────────────────────── */
:root {
    --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:   180ms;
    --t-base:   320ms;
    --t-slow:   600ms;
    --t-xslow:  900ms;
}

/* ─── Smooth scroll (CSS-native, no library) ─────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Image fade-in on load (skips hero — has its own animation) ─────── */
img.fx-fade {
    opacity: 0;
    transform: scale(1.018);
    transition:
        opacity   var(--t-xslow) var(--ease-out-soft),
        transform 1.2s          var(--ease-out-soft);
    will-change: opacity, transform;
}
img.fx-fade.fx-loaded {
    opacity: 1;
    transform: scale(1);
}

/* ─── Hero poster: gentle scale-in on first paint ────────────────────── */
.hero-poster img {
    animation: heroPosterEnter 1.1s var(--ease-out-soft) both;
}
@keyframes heroPosterEnter {
    0%   { opacity: 0; transform: scale(1.035); }
    100% { opacity: 1; transform: scale(1); }
}

/* Soft breathing on the scroll arrow */
.scroll-indicator { animation: scrollBreath 4.5s var(--ease-in-out-soft) infinite; }
@keyframes scrollBreath {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* ─── Stagger system (pure CSS, no JS needed) ────────────────────────── */
/* Add data-stagger on a parent to delay each child's reveal by 80ms.    */
[data-stagger] > *:nth-child(1) { --stagger-i: 0; }
[data-stagger] > *:nth-child(2) { --stagger-i: 1; }
[data-stagger] > *:nth-child(3) { --stagger-i: 2; }
[data-stagger] > *:nth-child(4) { --stagger-i: 3; }
[data-stagger] > *:nth-child(5) { --stagger-i: 4; }
[data-stagger] > *:nth-child(6) { --stagger-i: 5; }
[data-stagger] > *:nth-child(7) { --stagger-i: 6; }
[data-stagger] > *:nth-child(8) { --stagger-i: 7; }
[data-stagger] > .reveal {
    transition-delay: calc(var(--stagger-i, 0) * 80ms);
}

/* Smooth out the existing reveal */
.reveal {
    transition-timing-function: var(--ease-out-soft) !important;
}

/* ─── Buttons: shimmer sweep + press feedback ────────────────────────── */
.btn,
.cta-button,
.specialty-cta,
.hero-cta-primary,
.hero-cta-secondary,
.delivery-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform   var(--t-base) var(--ease-out-soft),
        box-shadow  var(--t-base) var(--ease-out-soft),
        background  var(--t-base) var(--ease-out-soft),
        color       var(--t-base) var(--ease-out-soft);
}
.btn::before,
.cta-button::before,
.specialty-cta::before,
.hero-cta-primary::before,
.hero-cta-secondary::before,
.delivery-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.75s var(--ease-out-soft);
    pointer-events: none;
    z-index: 0;
}
.btn:hover::before,
.cta-button:hover::before,
.specialty-cta:hover::before,
.hero-cta-primary:hover::before,
.hero-cta-secondary:hover::before,
.delivery-cta:hover::before { transform: translateX(120%); }

.btn > *,
.cta-button > *,
.specialty-cta > *,
.hero-cta-primary > *,
.hero-cta-secondary > *,
.delivery-cta > * { position: relative; z-index: 1; }

.btn:active,
.cta-button:active,
.specialty-cta:active,
.hero-cta-primary:active,
.hero-cta-secondary:active,
.delivery-cta:active {
    transform: scale(0.97);
    transition-duration: 80ms;
}

/* ─── Link underline animation (apply via .fx-link) ──────────────────── */
a.fx-link {
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-size: 0 1.5px;
    background-repeat: no-repeat;
    transition: background-size var(--t-base) var(--ease-out-soft), color var(--t-base) ease;
    text-decoration: none;
    padding-bottom: 1px;
}
a.fx-link:hover { background-size: 100% 1.5px; }

/* ─── Nav links: smooth color + underline tick ───────────────────────── */
.nav-link {
    transition: color var(--t-base) var(--ease-out-soft);
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: var(--sunset, #FF6A00);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--t-base) var(--ease-out-soft);
}
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { width: 22px; }

/* ─── Generic lift (apply via data-lift) ─────────────────────────────── */
[data-lift] {
    transition:
        transform  var(--t-base) var(--ease-out-soft),
        box-shadow var(--t-base) var(--ease-out-soft);
    will-change: transform;
}
[data-lift]:hover { transform: translateY(-4px); }

/* ─── Press card image zoom on hover ─────────────────────────────────── */
.press-card-image { overflow: hidden; }
.press-card-image img {
    transition: transform 0.8s var(--ease-out-soft);
    will-change: transform;
}
.press-card:hover .press-card-image img { transform: scale(1.05); }

/* ─── Specialty / menu cards: image zoom + lift refinement ───────────── */
.specialty-card,
.menu-card,
.dish-card {
    transition:
        transform  var(--t-base) var(--ease-out-soft),
        box-shadow var(--t-base) var(--ease-out-soft);
    will-change: transform;
}
.specialty-card:hover,
.menu-card:hover,
.dish-card:hover {
    transform: translateY(-6px);
}
.specialty-image,
.menu-card-image,
.dish-image { overflow: hidden; }
.specialty-image img,
.menu-card-image img,
.dish-image img {
    transition: transform 0.9s var(--ease-out-soft);
    will-change: transform;
}
.specialty-card:hover .specialty-image img,
.menu-card:hover .menu-card-image img,
.dish-card:hover .dish-image img { transform: scale(1.06); }

/* ─── Subtle grain overlay (premium texture) ────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* ─── Cursor soft glow (desktop pointer only) ────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .fx-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9997;
        background: radial-gradient(closest-side,
                    rgba(255, 169, 77, 0.16) 0%,
                    rgba(255, 169, 77, 0) 70%);
        transform: translate3d(-1000px, -1000px, 0);
        opacity: 0;
        transition: opacity 0.45s ease;
        will-change: transform, opacity;
        mix-blend-mode: multiply;
    }
    body.fx-cursor-on .fx-cursor { opacity: 1; }
}

/* ─── Reduced motion: disable non-essential extras ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-poster img,
    .scroll-indicator,
    .specialty-card,
    .menu-card,
    .dish-card,
    .press-card-image img,
    .specialty-image img,
    .menu-card-image img,
    .dish-image img,
    img.fx-fade { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
    body::after { display: none; }
    .fx-cursor   { display: none; }
}

/* ─── Mobile: lighter cursor + grain disabled ────────────────────────── */
@media (max-width: 768px) {
    body::after { display: none; }
    .fx-cursor   { display: none; }
}