/* ═══════════════════════════════════════════════════════════
   El Couzina — Transitions & Wow Effects
   Glass, shimmer, skeletons, kinetic text, marquee, confetti
   ═══════════════════════════════════════════════════════════ */

/* ─── View Transitions API (shared element morph) ────── */
@supports (view-transition-name: auto) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.4s;
        animation-timing-function: var(--ease-out-expo);
    }

    @view-transition {
        navigation: auto;
    }
}

/* ─── Glass utility ──────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border);
}

/* ─── Kinetic Typography ─────────────────────────────── */
.kin-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) rotate(4deg);
    animation: kinCharIn 0.7s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--i, 0) * 35ms + 200ms);
    will-change: transform, opacity;
}

.kin-char-space {
    display: inline-block;
    width: 0.3em;
}

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

@media (prefers-reduced-motion: reduce) {
    .kin-char { opacity: 1; transform: none; animation: none; }
}

/* ─── Shimmer effect (badges, CTAs) ──────────────────── */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: shimmerSweep 3s linear infinite;
    pointer-events: none;
}

@keyframes shimmerSweep {
    from { background-position: -50% 0; }
    to { background-position: 150% 0; }
}

/* ─── Skeleton loader ────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-alt) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        var(--bg-alt) 100%);
    background-size: 200% 100%;
    animation: skeletonSweep 1.4s linear infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeletonSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Menu item image has skeleton background until img loads */
.menu-item-image img {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
}

.menu-item-image img.is-loaded {
    opacity: 1;
}

/* ─── Marquee ────────────────────────────────────────── */
.marquee {
    overflow: hidden;
    padding: var(--space-6) 0;
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: var(--space-12);
    white-space: nowrap;
    animation: marqueeScroll 40s linear infinite;
    width: max-content;
    will-change: transform;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--text);
    font-style: italic;
}

.marquee-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
    display: inline-block;
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ─── Scroll-driven reveal (progressive enhancement) ── */
@supports (animation-timeline: view()) {
    .reveal-scroll {
        animation: revealSlide linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
    }

    @keyframes revealSlide {
        from { opacity: 0; transform: translateY(32px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .zoom-on-scroll {
        animation: zoomScroll linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }

    @keyframes zoomScroll {
        from { transform: scale(1.08); }
        to { transform: scale(1); }
    }
}

/* ─── Confetti canvas ────────────────────────────────── */
.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-toast);
}

/* ─── 3D tilt (hover/touch) ──────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(0) rotateY(0);
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .tilt-card { transform: none !important; }
}

/* ─── Magnetic button ────────────────────────────────── */
.btn-magnetic {
    transition: transform 0.25s var(--ease-out);
    will-change: transform;
}

/* ─── Toast enhancements ─────────────────────────────── */
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

@media (max-width: 1023px) {
    .toast {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-4));
        left: var(--mobile-gutter);
        right: var(--mobile-gutter);
        max-width: none;
    }
}

/* ─── Hero noise overlay ─────────────────────────────── */
.hero-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

/* ─── Page fade-in on load ───────────────────────────── */
body {
    animation: pageFade 0.5s var(--ease-out) both;
}

@keyframes pageFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}