/* =============================================================================
   assets/css/animations.css — кейфреймы и динамические анимации
   ripple, fade-up карточек, float, splash, toast, пар, конфетти-частицы
   ========================================================================== */

/* --- Базовые появления --------------------------------------------------- */
@keyframes splash-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 28px rgba(176,123,79,0.30); }
    50%      { transform: scale(1.06); box-shadow: 0 18px 40px rgba(176,123,79,0.40); }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-10px) rotate(2deg); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Постепенное появление карточек меню — задаётся через --i (индекс) */
.stagger > * {
    opacity: 0;
    animation: fade-up var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* --- Тосты --------------------------------------------------------------- */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-16px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-16px) scale(0.9); }
}

/* --- Ripple-эффект кнопок ------------------------------------------------ */
.ripple {
    position: absolute; border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0); pointer-events: none;
    animation: ripple-grow var(--dur-slow) var(--ease-out) forwards;
}
@keyframes ripple-grow {
    to { transform: scale(2.4); opacity: 0; }
}

/* --- Skeleton-загрузка --------------------------------------------------- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, rgba(255,255,255,0.6) 37%, var(--bg-subtle) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: var(--radius-md);
}

/* --- Анимация перелёта товара в корзину --------------------------------- */
@keyframes fly-to-cart {
    0%   { opacity: 1; }
    100% { opacity: 0; transform: var(--fly-transform); }
}

/* --- Пар над чашкой (готовка заказа) ------------------------------------ */
@keyframes steam-rise {
    0%   { opacity: 0; transform: translateY(0) scaleX(1); }
    20%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-40px) scaleX(1.6); }
}

/* --- Снижение анимаций по системной настройке ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}