:root {
    --ink: #17120f;
    --truffle: #2a1a13;
    --ember: #f05a28;
    --cheddar: #ffb13b;
    --cream: #fff3db;
    --champagne: #f8df9f;
    --basil: #2f7a4f;
}

* {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

.burger-gradient {
    background:
        radial-gradient(circle at 80% 10%, rgba(240, 90, 40, 0.28), transparent 32rem),
        radial-gradient(circle at 15% 80%, rgba(255, 177, 59, 0.2), transparent 30rem),
        linear-gradient(135deg, #17120f 0%, #24150f 48%, #0f0b09 100%);
}

.sesame-pattern {
    background-image:
        radial-gradient(circle, rgba(248, 223, 159, .24) 1.2px, transparent 1.4px),
        linear-gradient(120deg, rgba(248, 223, 159, .04) 1px, transparent 1px);
    background-size: 34px 34px, 110px 110px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.nav-link {
    border: 1px solid rgba(248, 223, 159, .14);
    border-radius: 999px;
    color: rgba(255, 243, 219, .7);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 800;
    padding: .7rem 1rem;
    transition: all .28s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    background: rgba(255, 177, 59, .12);
    border-color: rgba(255, 177, 59, .65);
    color: var(--champagne);
    outline: none;
    transform: translateY(-2px);
}

.footer-link {
    transition: all .25s ease;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--cheddar);
    transform: translateX(-4px);
    outline: none;
}

.lap-hot-logo {
    align-items: center;
    background:
        radial-gradient(circle at 32% 20%, rgba(255, 243, 219, .62), transparent 18%),
        linear-gradient(145deg, #3a180f 0%, var(--ember) 45%, var(--cheddar) 100%);
    border: 1px solid rgba(248, 223, 159, .45);
    border-radius: 1.15rem;
    box-shadow: 0 18px 46px rgba(240, 90, 40, .24), inset 0 1px 0 rgba(255, 255, 255, .25);
    display: inline-flex;
    flex: 0 0 auto;
    height: 3rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    width: 3rem;
}

.lap-hot-logo::before {
    background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 38%);
    content: '';
    inset: 0;
    position: absolute;
}

.lap-hot-logo::after {
    border: 1px solid rgba(23, 18, 15, .28);
    border-radius: inherit;
    content: '';
    inset: .22rem;
    position: absolute;
}

.group:hover .lap-hot-logo,
.group:focus .lap-hot-logo {
    box-shadow: 0 24px 58px rgba(255, 177, 59, .28), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: rotate(6deg) scale(1.05);
}

.lap-hot-logo--footer {
    height: 3.25rem;
    width: 3.25rem;
}

.lap-hot-logo__flame {
    background: linear-gradient(180deg, #fff3db 0%, var(--cheddar) 42%, var(--ember) 100%);
    border-radius: 55% 55% 55% 8%;
    box-shadow: 0 0 18px rgba(255, 177, 59, .45);
    height: 1.05rem;
    position: absolute;
    top: .32rem;
    transform: rotate(-22deg);
    width: .82rem;
    z-index: 2;
}

.lap-hot-logo__burger {
    background: linear-gradient(180deg, #ffd071 0%, #c76824 100%);
    border-radius: 999px 999px 42% 42%;
    box-shadow: inset 0 .22rem .28rem rgba(255, 255, 255, .22), 0 .32rem 0 #3b1a11;
    height: 1.15rem;
    position: absolute;
    top: 1.05rem;
    width: 2.1rem;
    z-index: 2;
}

.lap-hot-logo__burger::before,
.lap-hot-logo__burger::after,
.lap-hot-logo__burger span {
    background: rgba(255, 243, 219, .86);
    border-radius: 999px;
    content: '';
    height: .12rem;
    position: absolute;
    top: .3rem;
    width: .3rem;
}

.lap-hot-logo__burger::before { right: .42rem; }
.lap-hot-logo__burger::after { left: .42rem; }
.lap-hot-logo__burger span { left: 50%; transform: translateX(-50%); }

.lap-hot-logo__initials {
    bottom: .25rem;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1;
    position: absolute;
    text-shadow: 0 1px 0 rgba(255, 243, 219, .34);
    z-index: 3;
}

.text-gradient {
    background: linear-gradient(90deg, var(--champagne), var(--cheddar), var(--ember));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.primary-btn,
.secondary-btn {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    padding: .9rem 1.35rem;
    transition: all .28s ease;
}

.primary-btn {
    background: linear-gradient(135deg, var(--cheddar), var(--ember));
    box-shadow: 0 18px 50px rgba(240, 90, 40, .25);
    color: var(--ink);
}

.primary-btn:hover,
.primary-btn:focus {
    box-shadow: 0 22px 70px rgba(255, 177, 59, .28);
    filter: saturate(1.1);
    outline: none;
    transform: translateY(-3px) scale(1.02);
}

.primary-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(.8);
    opacity: .45;
}

.secondary-btn {
    border: 1px solid rgba(248, 223, 159, .28);
    color: var(--champagne);
}

.secondary-btn:hover,
.secondary-btn:focus {
    background: rgba(248, 223, 159, .1);
    border-color: rgba(255, 177, 59, .7);
    outline: none;
    transform: translateY(-3px);
}

.control-bar {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .control-bar {
        grid-template-columns: 1fr 1fr 220px;
    }
}

.lux-input {
    background: rgba(255, 243, 219, .07);
    border: 1px solid rgba(248, 223, 159, .18);
    border-radius: 1.25rem;
    color: var(--cream);
    font-weight: 700;
    padding: 1rem 1.1rem;
    transition: all .25s ease;
    width: 100%;
}

.lux-input::placeholder {
    color: rgba(255, 243, 219, .42);
}

.lux-input:focus {
    background: rgba(255, 243, 219, .1);
    border-color: var(--cheddar);
    box-shadow: 0 0 0 4px rgba(255, 177, 59, .12);
    outline: none;
}

.lux-input option {
    background: var(--truffle);
    color: var(--cream);
}

.item-options-grid {
    display: grid;
    gap: .75rem;
}

.option-field {
    display: grid;
    gap: .4rem;
}

.option-field span {
    color: rgba(255, 243, 219, .56);
    font-size: .78rem;
    font-weight: 900;
}

.option-field .lux-input {
    border-radius: 1rem;
    font-size: .85rem;
    padding: .72rem .85rem;
}

.filter-chip,
.page-btn,
.tiny-btn,
.qty-btn {
    border: 1px solid rgba(248, 223, 159, .2);
    border-radius: 999px;
    color: rgba(255, 243, 219, .74);
    font-size: .85rem;
    font-weight: 900;
    padding: .65rem .95rem;
    transition: all .22s ease;
}

.filter-chip:hover,
.filter-chip:focus,
.filter-chip.selected,
.page-btn:hover,
.page-btn:focus,
.page-btn.active,
.tiny-btn:hover,
.tiny-btn:focus,
.qty-btn:hover,
.qty-btn:focus {
    background: var(--cheddar);
    border-color: var(--cheddar);
    color: var(--ink);
    outline: none;
    transform: translateY(-2px);
}

.tiny-btn.danger:hover,
.qty-btn.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.status-pill {
    background: rgba(47, 122, 79, .18);
    border: 1px solid rgba(47, 122, 79, .45);
    border-radius: 999px;
    color: #9df2bd;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 900;
    padding: .45rem .75rem;
}

.notification-panel {
    overflow: hidden;
    position: relative;
}

.notification-panel::before {
    background: radial-gradient(circle, rgba(255, 177, 59, .24), transparent 62%);
    content: '';
    height: 9rem;
    left: -3rem;
    position: absolute;
    top: -3rem;
    width: 9rem;
}

.notification-bell {
    align-items: center;
    background: rgba(23, 18, 15, .45);
    border: 1px solid rgba(248, 223, 159, .25);
    border-radius: 999px;
    display: inline-flex;
    font-size: 1.45rem;
    height: 3.2rem;
    justify-content: center;
    position: relative;
    width: 3.2rem;
    z-index: 1;
}

.notification-bell.is-on {
    animation: bellRing 1.4s ease-in-out infinite;
    background: linear-gradient(135deg, var(--cheddar), var(--ember));
    box-shadow: 0 14px 42px rgba(240, 90, 40, .34);
}

.mini-panel,
.info-box {
    background: rgba(23, 18, 15, .38);
    border: 1px solid rgba(248, 223, 159, .14);
    border-radius: 1.15rem;
    padding: .9rem;
}

.mini-panel span,
.info-box span {
    color: rgba(255, 243, 219, .5);
    display: block;
    font-size: .75rem;
    font-weight: 700;
}

.mini-panel strong,
.info-box strong {
    color: var(--champagne);
    display: block;
    font-size: 1rem;
    margin-top: .3rem;
}

.mini-panel small,
.info-box small {
    color: rgba(255, 243, 219, .46);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    margin-top: .25rem;
}

.ticket-card {
    animation: ticketEntrance .8s cubic-bezier(.2, .9, .2, 1) both;
}

.grill-lines {
    background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(248, 223, 159, .25) 23px 24px);
}

.burger-stack {
    height: 210px;
    position: relative;
    width: 260px;
    animation: burgerFloat 4.5s ease-in-out infinite;
}

.burger-stack span {
    display: block;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.burger-stack .bun {
    background: linear-gradient(180deg, #f4b354, #b65a22);
    border: 2px solid rgba(255, 243, 219, .2);
    box-shadow: inset 0 15px 18px rgba(255,255,255,.18), 0 25px 50px rgba(0,0,0,.28);
    width: 235px;
}

.burger-stack .top {
    border-radius: 120px 120px 34px 34px;
    color: rgba(255,255,255,.7);
    font-size: 2rem;
    height: 72px;
    line-height: 58px;
    text-align: center;
    top: 15px;
}

.burger-stack .lettuce {
    background: linear-gradient(90deg, #58a55c, #9bd36c, #3c7e44);
    border-radius: 60% 45% 55% 45%;
    height: 26px;
    top: 86px;
    width: 245px;
}

.burger-stack .cheese {
    background: linear-gradient(120deg, #ffd15c, #ff9f1f);
    clip-path: polygon(0 0, 100% 0, 82% 70%, 70% 35%, 52% 95%, 35% 35%, 18% 70%);
    height: 38px;
    top: 104px;
    width: 230px;
}

.burger-stack .patty {
    background: linear-gradient(180deg, #3a1a12, #15100d);
    border-radius: 999px;
    height: 48px;
    top: 126px;
    width: 238px;
}

.burger-stack .bottom {
    border-radius: 35px 35px 110px 110px;
    height: 50px;
    top: 164px;
}

.route-dot {
    background: linear-gradient(90deg, var(--cheddar), var(--ember));
    border-radius: 999px;
    display: inline-flex;
    height: 4px;
    position: relative;
    width: 72px;
}

.route-dot::after {
    animation: routeMove 1.5s ease-in-out infinite;
    background: white;
    border-radius: 50%;
    content: '';
    height: 10px;
    left: 0;
    position: absolute;
    top: -3px;
    width: 10px;
}

.timeline-step {
    align-items: center;
    border: 1px solid rgba(248, 223, 159, .12);
    border-radius: 1.25rem;
    display: flex;
    gap: .9rem;
    padding: 1rem;
}

.timeline-step span {
    background: rgba(248, 223, 159, .25);
    border-radius: 50%;
    height: 14px;
    width: 14px;
}

.timeline-step.current {
    background: rgba(255, 177, 59, .12);
    border-color: rgba(255, 177, 59, .55);
    color: var(--champagne);
}

.timeline-step.current span {
    animation: pulseDot 1.2s infinite;
    background: var(--cheddar);
}

.delivery-map {
    background: radial-gradient(circle at 18% 28%, rgba(47,122,79,.3), transparent 8rem), radial-gradient(circle at 78% 72%, rgba(240,90,40,.18), transparent 10rem), linear-gradient(135deg, rgba(255,243,219,.12), rgba(255,177,59,.08));
    border: 1px solid rgba(248, 223, 159, .22);
    border-radius: 1.6rem;
    cursor: crosshair;
    min-height: 320px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,243,219,.05), 0 24px 80px rgba(0,0,0,.24);
}

.delivery-map.compact {
    cursor: default;
    min-height: 250px;
}

.delivery-map::before {
    background-image: linear-gradient(rgba(248,223,159,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(248,223,159,.08) 1px, transparent 1px);
    background-size: 42px 42px;
    content: '';
    inset: 0;
    position: absolute;
}

.map-road {
    background: rgba(255, 243, 219, .16);
    border: 1px solid rgba(255, 177, 59, .14);
    border-radius: 999px;
    position: absolute;
    transform-origin: center;
}

.road-a { height: 18px; left: -8%; top: 42%; transform: rotate(-14deg); width: 118%; }
.road-b { height: 16px; left: 40%; top: -10%; transform: rotate(72deg); width: 92%; }
.road-c { height: 14px; left: 4%; top: 68%; transform: rotate(22deg); width: 76%; }

.restaurant-pin,
.delivery-pin,
.driver-pin {
    align-items: center;
    border-radius: 999px;
    display: flex;
    height: 46px;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 46px;
    z-index: 5;
}

.restaurant-pin {
    background: linear-gradient(135deg, var(--cheddar), var(--ember));
    box-shadow: 0 14px 35px rgba(240, 90, 40, .35);
}

.delivery-pin {
    animation: pulseDot 1.6s infinite;
    background: rgba(23, 18, 15, .82);
    border: 2px solid var(--cheddar);
    box-shadow: 0 14px 38px rgba(255, 177, 59, .26);
    font-size: 1.35rem;
}

.driver-pin {
    animation: driverMoveGlow 1.05s ease-in-out infinite;
    background: linear-gradient(135deg, #9df2bd, var(--basil));
    border: 2px solid rgba(255, 243, 219, .9);
    box-shadow: 0 18px 44px rgba(47, 122, 79, .42);
    font-size: 1.35rem;
    transition: left .8s linear, top .8s linear;
    z-index: 7;
}

.driver-trail {
    background: linear-gradient(90deg, rgba(157,242,189,.95), rgba(255,177,59,.88));
    border-radius: 999px;
    height: 5px;
    left: 12%;
    opacity: .92;
    position: absolute;
    top: 57%;
    transform: rotate(-18deg);
    transform-origin: right center;
    width: var(--progress, 25%);
    z-index: 4;
}

.driver-progress {
    background: rgba(23, 18, 15, .5);
    border: 1px solid rgba(248, 223, 159, .14);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.driver-progress span {
    background: linear-gradient(90deg, var(--basil), #9df2bd, var(--cheddar));
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .8s linear;
}

.route-line {
    background: linear-gradient(90deg, var(--cheddar), var(--ember));
    height: 4px;
    left: var(--from-x);
    opacity: .9;
    position: absolute;
    top: var(--from-y);
    transform: translateY(-50%) rotate(-18deg);
    transform-origin: right center;
    width: 42%;
    z-index: 3;
}

.zone-dot {
    background: rgba(255, 243, 219, .78);
    border: 3px solid rgba(47, 122, 79, .85);
    border-radius: 999px;
    height: 18px;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all .22s ease;
    width: 18px;
    z-index: 4;
}

.zone-dot:hover,
.zone-dot:focus {
    background: var(--cheddar);
    border-color: var(--ember);
    box-shadow: 0 0 0 10px rgba(255, 177, 59, .18);
    outline: none;
    transform: translate(-50%, -50%) scale(1.25);
}

.location-summary,
.order-map-card {
    background: rgba(23, 18, 15, .36);
    border: 1px solid rgba(248, 223, 159, .16);
    border-radius: 1.35rem;
    padding: 1rem;
}

.location-summary span,
.location-summary small {
    color: rgba(255, 243, 219, .5);
    display: block;
    font-size: .78rem;
    font-weight: 700;
}

.location-summary strong {
    color: var(--champagne);
    display: block;
    font-weight: 900;
    margin: .35rem 0;
}

.chat-thread {
    background: linear-gradient(180deg, rgba(23, 18, 15, .45), rgba(42, 26, 19, .32));
    border: 1px solid rgba(248, 223, 159, .14);
    border-radius: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-height: 520px;
    min-height: 380px;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
}

.chat-bubble {
    border: 1px solid rgba(248, 223, 159, .14);
    border-radius: 1.35rem;
    max-width: min(78%, 520px);
    padding: .9rem 1rem;
    position: relative;
}

.chat-bubble.mine {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(255, 177, 59, .22), rgba(240, 90, 40, .14));
    border-color: rgba(255, 177, 59, .35);
}

.chat-bubble.theirs {
    align-self: flex-end;
    background: rgba(255, 243, 219, .08);
}

.chat-bubble small,
.chat-bubble span {
    color: rgba(255, 243, 219, .48);
    display: block;
    font-size: .72rem;
    font-weight: 800;
}

.chat-bubble p {
    color: var(--cream);
    font-weight: 700;
    line-height: 1.8;
    margin: .35rem 0;
}

.chat-composer-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: 1fr;
}

.chat-composer-actions {
    display: grid;
    gap: .75rem;
}

.chat-file-label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 3.2rem;
    text-align: center;
}

.chat-attachment-preview {
    align-items: center;
    background: rgba(23, 18, 15, .28);
    border: 1px dashed rgba(248, 223, 159, .22);
    border-radius: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    min-height: 3.2rem;
    padding: .75rem;
}

.chat-attachment-preview.is-empty {
    justify-content: center;
}

.chat-attachment-pill {
    align-items: center;
    background: rgba(255, 177, 59, .1);
    border: 1px solid rgba(255, 177, 59, .28);
    border-radius: 999px;
    color: var(--champagne);
    display: inline-flex;
    gap: .35rem;
    max-width: 100%;
    padding: .45rem .7rem;
}

.chat-attachment-pill strong {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attachment-pill small {
    color: rgba(255, 243, 219, .48);
    font-size: .7rem;
}

.chat-attachments {
    display: grid;
    gap: .65rem;
    margin: .6rem 0;
}

.chat-attachment {
    background: rgba(23, 18, 15, .36);
    border: 1px solid rgba(248, 223, 159, .16);
    border-radius: 1rem;
    color: var(--cream);
    display: flex;
    gap: .75rem;
    overflow: hidden;
    padding: .65rem;
    transition: all .22s ease;
}

.chat-attachment:hover,
.chat-attachment:focus {
    border-color: rgba(255, 177, 59, .58);
    outline: none;
    transform: translateY(-2px);
}

.chat-attachment.image {
    align-items: flex-start;
    flex-direction: column;
}

.chat-attachment.image img {
    aspect-ratio: 16 / 10;
    border-radius: .8rem;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.chat-attachment.file {
    align-items: center;
}

.chat-attachment-icon {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 177, 59, .26), rgba(240, 90, 40, .18));
    border-radius: .85rem;
    display: inline-flex;
    flex: 0 0 3rem;
    font-size: 1.35rem;
    height: 3rem;
    justify-content: center;
}

.chat-attachment span {
    color: var(--champagne);
    font-weight: 900;
    line-height: 1.5;
}

.chat-attachment small {
    color: rgba(255, 243, 219, .48);
    display: block;
    font-size: .72rem;
    font-weight: 800;
    margin-top: .15rem;
}

@media (min-width: 768px) {
    .chat-composer-grid {
        grid-template-columns: 1fr 210px;
    }
}

.chat-system {
    align-self: center;
    background: rgba(47, 122, 79, .14);
    border: 1px solid rgba(47, 122, 79, .38);
    border-radius: 999px;
    color: #9df2bd;
    font-size: .78rem;
    font-weight: 900;
    padding: .55rem .95rem;
    text-align: center;
}

.chat-card {
    position: relative;
}

.chat-card::before {
    background: linear-gradient(180deg, var(--cheddar), var(--ember));
    border-radius: 999px;
    content: '';
    height: calc(100% - 2.5rem);
    opacity: .65;
    position: absolute;
    right: .7rem;
    top: 1.25rem;
    width: 4px;
}

.reveal {
    animation: revealUp .7s cubic-bezier(.2, .9, .2, 1) both;
}

.delay-1 {
    animation-delay: .15s;
}

.float-slow {
    animation: floatSlow 9s ease-in-out infinite;
}

.float-slower {
    animation: floatSlow 12s ease-in-out infinite reverse;
}

.floating-card {
    animation: burgerFloat 4.5s ease-in-out infinite;
}

.toast-in {
    animation: toastIn .28s ease both;
}

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

@keyframes ticketEntrance {
    from { opacity: 0; transform: perspective(900px) rotateY(-12deg) translateY(28px); }
    to { opacity: 1; transform: perspective(900px) rotateY(0) translateY(0); }
}

@keyframes burgerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(24px, 18px, 0) scale(1.07); }
}

@keyframes routeMove {
    0% { left: 0; opacity: .4; }
    50% { opacity: 1; }
    100% { left: calc(100% - 10px); opacity: .4; }
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,177,59,.45); }
    50% { box-shadow: 0 0 0 9px rgba(255,177,59,0); }
}

@keyframes driverMoveGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(157,242,189,.4), 0 18px 44px rgba(47,122,79,.38); transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 0 11px rgba(157,242,189,0), 0 22px 54px rgba(47,122,79,.5); transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0) scale(1); }
    12% { transform: rotate(10deg) scale(1.04); }
    24% { transform: rotate(-9deg) scale(1.04); }
    36% { transform: rotate(7deg) scale(1.03); }
    48% { transform: rotate(-5deg) scale(1.02); }
    60% { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}