/*
 * Корзина и знакомство за столом.
 *
 * Отдельный файл, а не хвост app.css: корзину можно выключить из настроек,
 * и тогда ни стилей, ни скрипта на странице нет вовсе. Палитра и шрифты
 * берутся из app.css - здесь только то, чего там нет.
 */

/* ------------------------------------------------------ кнопка у блюда */
/*
 * Кнопка сидит в строке цены и подхватывает её выравнивание. Отдельной
 * строкой под карточкой она бы растянула все карточки в сетке на высоту
 * самой длинной.
 */
.addbtn {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-left: auto;
    padding: 0;
    color: var(--ground);
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .15s var(--ease), background .15s var(--ease);
}
.addbtn svg { width: 15px; height: 15px; }
.addbtn:hover { background: var(--ink); }
.addbtn:active { transform: scale(.9); }

.addbtn--row {
    align-self: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: .55rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.addbtn--row:hover { background: var(--accent); color: var(--ground); }

/* Отклик на нажатие: на телефоне без него непонятно, засчиталось ли. */
.addbtn.is-hit { animation: hit .32s var(--ease); }
@keyframes hit {
    0% { transform: scale(1); }
    45% { transform: scale(.82); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------- плавающая кнопка */
/*
 * Кнопка зелёная, силуэт кремовый - пара Grey Olive и Light Ivory из
 * брендбука (стр. 9, тёмная плашка знака). Раньше силуэт был цвета фона
 * страницы: на глаз почти то же самое, но это бумага, а не фирменный
 * кремовый, и рядом с оранжевой кнопкой «наверх» разница была видна.
 */
.cartbtn {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1rem, 3vw, 2rem) + 3.6rem);
    z-index: 36;
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 2.9rem;
    padding: 0 .95rem 0 .8rem;
    color: var(--cream);
    background: var(--ink);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 45%, transparent);
    transition: background .18s var(--ease);
}
.cartbtn:hover { background: color-mix(in srgb, var(--ink) 82%, var(--gold)); }
.cartbtn svg { width: 19px; height: 19px; }
.cartbtn__n {
    min-width: 1.15rem;
    font-family: var(--display);
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Пустую корзину прячем не совсем: гость должен знать, что она есть. */
.cartbtn.is-empty { opacity: .45; }
.cartbtn.is-empty:hover { opacity: 1; }

.is-bumped { animation: bump .3s var(--ease); }
@keyframes bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.32); }
    100% { transform: scale(1); }
}

/* ------------------------------------------------------------- панель */
.cart {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
}
.cart__veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: fadein .2s var(--ease);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.cart__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    max-height: 100%;
    background: var(--ground);
    border-left: 1px solid var(--hair);
    box-shadow: -12px 0 40px color-mix(in srgb, var(--ink) 25%, transparent);
    animation: slidein .24s var(--ease);
}
@keyframes slidein {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.cart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem var(--edge) .9rem;
    border-bottom: 1px solid var(--hair);
}
.cart__title {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
}
.cart__where {
    margin-top: .15rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.cart__x {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: var(--ink-dim);
    background: none;
    border: 1px solid var(--hair);
    border-radius: 50%;
    cursor: pointer;
}
.cart__x svg { width: 15px; height: 15px; }
.cart__x:hover { color: var(--ink); border-color: var(--ink-faint); }

/* Кто за столом. Показываем только когда соседей действительно больше
   одного - строка «вы» в одиночку ничего не сообщает. */
.cart__people {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .8rem var(--edge) 0;
}
.who {
    padding: .2rem .55rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--gold-ink);
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    border-radius: 999px;
}
.who--me { color: var(--ground); background: var(--accent); }

.cart__list {
    flex: 1;
    overflow-y: auto;
    padding: .4rem var(--edge) 1rem;
}

.crow {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.crow.is-going {
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.crow__main { flex: 1; min-width: 0; }
.crow__name {
    display: block;
    font-family: var(--display);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.25;
}
.crow__who {
    display: block;
    margin-top: .1rem;
    font-size: .7rem;
    color: var(--ink-faint);
}
.crow--mine .crow__who { color: var(--accent); }

.crow__right {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}
.crow__sum {
    font-family: var(--display);
    font-size: .92rem;
    font-weight: 600;
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qty {
    display: flex;
    align-items: center;
    gap: .1rem;
    border: 1px solid var(--hair);
    border-radius: 999px;
}
.qty__b {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink-dim);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.qty__b:hover { color: var(--ground); background: var(--accent); }
.qty__n {
    min-width: 1.35rem;
    font-size: .88rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Чужую строку не редактируют - показываем это, а не прячем кнопки:
   исчезнувший элемент управления читается как поломка. */
.qty--locked { opacity: .4; }
.qty--locked .qty__b { cursor: default; }
.qty--locked .qty__b:hover { color: var(--ink-dim); background: none; }

.cart__empty {
    padding: 2.5rem var(--edge);
    text-align: center;
    font-size: .9rem;
    color: var(--ink-dim);
}

.cart__foot {
    padding: 1rem var(--edge) 1.3rem;
    border-top: 2px solid var(--ink);
    background: var(--paper);
}
.cart__sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.cart__sum strong {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.cart__note {
    margin-top: .5rem;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--ink-faint);
}

body.cart-open { overflow: hidden; }

/* -------------------------------------------------------- знакомство */
.hello {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: var(--edge);
}
.hello__card {
    position: relative;
    width: min(23rem, 100%);
    padding: 1.6rem;
    background: var(--ground);
    border: 1px solid var(--hair);
    border-radius: 4px;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 35%, transparent);
    animation: rise .3s var(--ease) both;
}
.hello__title {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}
.hello__note {
    margin-top: .5rem;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--ink-dim);
}
.hello__input {
    width: 100%;
    margin-top: 1rem;
    padding: .7rem .9rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hair);
    border-radius: 3px;
    outline: none;
}
.hello__input:focus { border-color: var(--accent); }
.hello__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}
.hello__skip {
    padding: .5rem 0;
    font: inherit;
    font-size: .84rem;
    color: var(--ink-faint);
    background: none;
    border: 0;
    cursor: pointer;
}
.hello__skip:hover { color: var(--ink); }
.hello__go {
    padding: .6rem 1.3rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ground);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.hello__go:hover { background: var(--ink); }

@media (max-width: 40rem) {
    .cart__sheet { width: 100%; }
    .cartbtn { bottom: calc(clamp(1rem, 3vw, 2rem) + 3.6rem); }
}

@media print {
    .addbtn, .cartbtn, .cart, .hello { display: none; }
}

/* ------------------------------------------------- миниатюра в корзине */
/*
 * Снимок появляется только у позиций, где он есть. В баре и вине фото нет
 * вовсе - это две трети меню, и пустые рамки выстроили бы колонку серых
 * квадратов. Строка без миниатюры просто начинается с названия.
 */
.crow__pic {
    flex: none;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 3px;
    background: var(--paper);
}

/* ------------------------------------------------- полёт в корзину */
/*
 * Дугу рисуют две наложенные дорожки: внешний слой едет по горизонтали
 * ровно, внутренний по вертикали - сначала вверх, потом вниз. Сумма даёт
 * бросок. Ведёт это композитор, поэтому анимация доигрывает и тогда,
 * когда основному потоку не до неё.
 *
 * Скриптом по кадрам не считаем сознательно: requestAnimationFrame не
 * вызывается, пока страница не отрисовывается, и первая версия просто
 * висела неподвижной точкой. В этом проекте на том же уже обжигались с
 * подсветкой навигации.
 */
.flyer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    pointer-events: none;
    will-change: transform;
    animation: fly-x .8s cubic-bezier(.45, 0, .55, 1) forwards;
}

.flyer__i {
    will-change: transform, opacity;
    /* Сдвиг на половину себя: координаты считаются по центру предмета,
       иначе слово уезжает вправо тем сильнее, чем оно длиннее. */
    margin-left: -50%;
    animation: fly-y .8s cubic-bezier(.35, .1, .5, 1) forwards;
}

@keyframes fly-x {
    to { transform: translateX(var(--dx)); }
}

@keyframes fly-y {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    38% {
        transform: translateY(calc(var(--dy) * .2 - var(--lift))) scale(1.45) rotate(calc(var(--spin) * .4));
        opacity: 1;
    }
    74% { opacity: 1; }
    100% {
        transform: translateY(var(--dy)) scale(.38) rotate(var(--spin));
        opacity: 0;
    }
}

/*
 * Шариков в наборе нет: летят только знаки и слова. Безымянный кружок
 * ничего не сообщал, а у ресторана есть что показать.
 */

/* Слово набрано дисплейным шрифтом - тем же, что заголовки. */
.flyer--word {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--ground) 85%, transparent);
}

/* Подпись знака - разрядкой и золотом, как на самом знаке. */
.flyer--tag {
    font-family: var(--display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    white-space: nowrap;
    color: var(--gold);
    text-shadow: 0 2px 12px color-mix(in srgb, var(--ground) 85%, transparent);
}

/* Знаки берутся в том же размере, в каком стоят в шапке. */
.flyer--mark img { display: block; width: 96px; height: auto; }
.flyer--mono img { display: block; width: 20px; height: auto; }
.flyer--badge img { display: block; width: 42px; height: auto; }

/* Кнопка ловит предмет - короткое сжатие, а не подпрыгивание: корзина
   стоит на месте, дёргаться ей незачем. */
.cartbtn.is-caught { animation: caught .28s var(--ease); }
@keyframes caught {
    0% { transform: scale(1); }
    40% { transform: scale(.88); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .flyer { display: none; }
}