:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --paper: rgba(255, 255, 255, 0.76);
  --paper-solid: #fffdf8;
  --ink: #191b17;
  --muted: #777a70;
  --soft: #ebe6db;
  --line: rgba(32, 35, 31, 0.1);
  --green: #126b44;
  --lime: #d7ff55;
  --red: #d64535;
  --gold: #c9942e;
  --shadow: 0 24px 70px rgba(36, 38, 33, 0.16);
  --spring: cubic-bezier(0.2, 0.9, 0.2, 1);
  --silk: cubic-bezier(0.16, 1, 0.3, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: #efeae0;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 16% 12%, rgba(215, 255, 85, 0.28), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(18, 107, 68, 0.16), transparent 28%),
    radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(135deg, #f7f1e6 0%, #eef1e9 52%, #f9f6ef 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-bg span {
  position: absolute;
  width: 44vmax;
  height: 44vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.18;
  animation: drift 16s var(--spring) infinite alternate;
}

.ambient-bg span:nth-child(1) {
  left: -20vmax;
  top: -16vmax;
  background: #d7ff55;
}

.ambient-bg span:nth-child(2) {
  right: -20vmax;
  top: 8vmax;
  background: #126b44;
  animation-delay: -4s;
}

.ambient-bg span:nth-child(3) {
  left: 28vmax;
  bottom: -28vmax;
  background: #f4c46a;
  animation-delay: -8s;
}

@keyframes drift {
  to {
    transform: translate3d(4vw, -3vh, 0) scale(1.08);
  }
}

#app {
  position: relative;
  min-height: 100vh;
}

.app-shell {
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

main {
  padding-bottom: 110px;
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(240px, 420px) minmax(160px, auto);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: 0 18px 50px rgba(36, 38, 33, 0.1);
  backdrop-filter: blur(22px) saturate(1.1);
}

.brand-mark {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.brand-mark > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #171916;
  color: var(--lime);
  font-weight: 900;
  letter-spacing: 0;
}

.brand-mark strong,
.brand-mark small {
  display: block;
}

.brand-mark strong {
  white-space: nowrap;
  font-size: 15px;
}

.brand-mark small,
.address-pill small,
.panel-head small,
.hero-ad small {
  color: var(--muted);
  font-size: 12px;
}

.address-pill,
.ghost-button,
.icon-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(25, 27, 23, 0.06);
}

.address-pill {
  min-width: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  text-align: left;
  transition: transform 220ms var(--spring), border-color 220ms;
}

.address-pill:hover,
.ghost-button:hover,
.icon-button:hover,
.drink-card:hover {
  transform: translateY(-2px);
}

.address-pill strong,
.address-pill small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pin {
  flex: 0 0 auto;
  color: var(--green);
  font-weight: 900;
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ghost-button,
.icon-button {
  border-radius: 999px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
}

.icon-button {
  width: 44px;
  padding: 0;
}

.desktop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  margin-top: 20px;
}

.content-column {
  min-width: 0;
}

.hero-ad {
  min-height: 330px;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 24%, rgba(215, 255, 85, 0.38), transparent 25%),
    radial-gradient(circle at 63% 78%, rgba(18, 107, 68, 0.12), transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.94) 0 45%, rgba(255, 255, 255, 0.58) 46%),
    var(--hero-image, url("../assets/drinks/heytea-official/heytea-cheese-grape-boom.jpg")) right 12% center / min(52%, 520px) no-repeat,
    rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow);
  animation: riseIn 620ms var(--spring) both;
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(24px) saturate(1.08);
  cursor: pointer;
  transition: transform 520ms var(--silk), background-position 760ms var(--silk), box-shadow 520ms var(--silk);
}

.hero-ad:hover {
  transform: translateY(-3px);
  background-position:
    center,
    center,
    center,
    right 9% center,
    center;
  box-shadow: 0 34px 90px rgba(36, 38, 33, 0.18);
}

.hero-dots {
  position: absolute;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 7px;
}

.hero-dots button {
  width: 8px;
  height: 8px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.26);
  box-shadow: none;
  transition: width 420ms var(--silk), background 420ms var(--silk);
}

.hero-dots button.active {
  width: 28px;
  background: #171916;
}

.hero-ad h1 {
  max-width: 11em;
  margin: 10px 0 12px;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero-ad p {
  max-width: 42em;
  margin: 0;
  color: rgba(25, 27, 23, 0.64);
  line-height: 1.8;
}

.hero-ad small {
  color: rgba(25, 27, 23, 0.54);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-ad button,
.primary-wide {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: var(--lime);
  color: #141612;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(215, 255, 85, 0.22);
  transition: transform 220ms var(--spring), box-shadow 220ms;
}

.hero-ad button {
  align-self: flex-start;
}

.hero-ad button:hover,
.primary-wide:hover,
.checkout-button:hover {
  transform: translateY(-2px) scale(1.01);
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.status-strip div,
.status-card,
.coupon-card,
.rail-card,
.drink-card,
.sheet {
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: var(--paper);
  backdrop-filter: blur(20px) saturate(1.08);
}

.status-strip div,
.status-card {
  border-radius: 18px;
  padding: 16px;
  text-align: left;
  color: var(--ink);
  transition: transform 240ms var(--spring), box-shadow 240ms var(--spring);
}

.status-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 55px rgba(36, 38, 33, 0.12);
}

.status-strip span,
.status-strip strong {
  display: block;
}

.status-strip span,
.status-card span {
  color: var(--muted);
  font-size: 12px;
}

.status-strip strong,
.status-card strong {
  margin-top: 6px;
  font-size: 19px;
}

.coupon-lane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.coupon-card {
  border-radius: 18px;
  padding: 16px;
  color: var(--ink);
  text-align: left;
  transition: transform 220ms var(--spring), border-color 220ms;
}

.coupon-card:hover {
  transform: translateY(-2px);
  border-color: rgba(18, 107, 68, 0.22);
}

.coupon-card strong,
.coupon-card span {
  display: block;
}

.coupon-card span {
  margin-top: 5px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.brand-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 16px;
  scrollbar-width: none;
}

.brand-tabs::-webkit-scrollbar,
.category-list::-webkit-scrollbar,
.quick-notes::-webkit-scrollbar {
  display: none;
}

.brand-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 7px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  font-weight: 800;
  transition: transform 220ms var(--spring), background 220ms, color 220ms;
}

.brand-tabs button.active {
  background: #171916;
  color: #fff;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--brand-tone);
  color: var(--brand-accent);
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.brand-logo.small {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.layout {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.category-list {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.category-list button {
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 12px 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.category-list button.active {
  border-color: rgba(18, 107, 68, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--green);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.panel-head h2 {
  margin: 2px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0;
}

.panel-head select,
.search-row input,
.note-input,
.form-grid input {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  outline: none;
}

.panel-head select {
  min-width: 132px;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.search-row {
  margin-bottom: 14px;
}

.search-row input {
  width: 100%;
  padding: 14px 16px;
}

.drink-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.drink-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 388px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 48px rgba(36, 38, 33, 0.08);
  transform-style: preserve-3d;
  transition: transform 520ms var(--silk), box-shadow 520ms var(--silk), border-color 520ms var(--silk);
  animation: riseIn 520ms var(--spring) both;
}

.drink-card:hover {
  transform: translateY(-6px) rotateX(1.2deg);
  box-shadow: 0 30px 70px rgba(36, 38, 33, 0.14);
  border-color: rgba(255, 255, 255, 0.92);
}

.drink-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 82%, rgba(20, 22, 18, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 248, 244, 0.94));
}

.drink-art::before {
  content: "";
  position: absolute;
  inset: 12px 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(23, 25, 22, 0.1), transparent 62%);
  transform: translateY(36%);
  filter: blur(5px);
}

.drink-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
  transform: translateY(4px) scale(0.98);
  transition: transform 760ms var(--silk), filter 760ms var(--silk);
}

.drink-card:hover .drink-art img {
  transform: translateY(-7px) scale(1.02);
  filter: drop-shadow(0 18px 20px rgba(20, 22, 18, 0.09));
}

.drink-art::after {
  content: none;
}

.drink-art.is-cake img,
.drink-art.is-gelato img {
  padding: 34px 28px 18px;
  transform: translateY(24px) scale(0.82);
}

.drink-art.is-cake::before,
.drink-art.is-gelato::before {
  inset: auto 28px 22px;
  height: 58px;
  transform: none;
  opacity: 0.72;
}

.drink-card:hover .drink-art.is-cake img,
.drink-card:hover .drink-art.is-gelato img {
  transform: translateY(15px) scale(0.86);
}

.detail-hero .drink-art.is-cake img,
.detail-hero .drink-art.is-gelato img {
  padding: 24px 18px 8px;
  transform: translateY(18px) scale(0.8);
}

.drink-art.is-bottle img {
  transform: translateY(8px) scale(0.94);
}

.drink-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.drink-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.drink-info h3 {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}

.drink-info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 42px;
  margin: 9px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag-row span {
  border-radius: 999px;
  background: rgba(18, 107, 68, 0.08);
  color: var(--green);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
}

.drink-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price {
  color: var(--red);
  font-weight: 950;
}

.add-button {
  border: 0;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  background: #171916;
  color: var(--lime);
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(23, 25, 22, 0.2);
  transition: transform 360ms var(--snap), box-shadow 360ms var(--silk), background 360ms var(--silk);
}

.add-button:hover {
  transform: rotate(90deg) scale(1.06);
}

.order-rail {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 16px;
}

.rail-card {
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(36, 38, 33, 0.08);
}

.feature-card {
  min-height: 190px;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 20%, rgba(215, 255, 85, 0.35), transparent 24%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(239, 247, 238, 0.8)),
    url("../assets/drinks/heytea-official/heytea-mango-pomelo-sago.jpg") right bottom / 58% no-repeat;
}

.feature-card small,
.feature-card p {
  color: var(--muted);
}

.feature-card strong {
  display: block;
  margin-top: 46px;
  font-size: 28px;
  line-height: 1.04;
}

.feature-card p {
  line-height: 1.6;
}

.rail-cart-items {
  display: grid;
  gap: 10px;
}

.rail-cart-items p {
  color: var(--muted);
  line-height: 1.6;
}

.rail-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.rail-line strong {
  color: var(--ink);
}

.cart-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  width: min(100% - 28px, 520px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.92);
  color: #fff;
  box-shadow: 0 24px 60px rgba(23, 25, 22, 0.22);
  backdrop-filter: blur(22px);
  transition: transform 420ms var(--snap), box-shadow 420ms var(--silk);
}

.cart-bar.cart-pulse {
  animation: cartPulse 560ms var(--snap);
}

.cart-summary {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.cart-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--ink);
  font-weight: 950;
}

.cart-summary strong,
.cart-summary small {
  display: block;
}

.cart-summary small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.checkout-button {
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 950;
}

.checkout-button:disabled {
  background: #51564b;
  color: #aeb3aa;
  cursor: not-allowed;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(215, 255, 85, 0.16), transparent 36%), #10130f;
  color: #fff;
}

.splash.hidden,
.hidden {
  display: none !important;
}

.splash-card {
  position: relative;
  width: min(100%, 460px);
  min-height: 600px;
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 70% 20%, rgba(215, 255, 85, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(14, 16, 12, 0.62)),
    var(--splash-image, url("../assets/drinks/heytea-official/heytea-grape-boom.jpg")) center / cover;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: adFloat 560ms var(--silk) both;
}

.splash-skip {
  position: fixed;
  right: max(18px, calc((100vw - 460px) / 2 - 8px));
  top: max(18px, calc((100vh - 600px) / 2 - 54px));
  z-index: 2;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #171916;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 12px;
  backdrop-filter: blur(16px);
}

.splash-card h2 {
  margin: 8px 0;
  font-size: 54px;
  line-height: 0.96;
  letter-spacing: 0;
}

.splash-card p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.splash-cups {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 24, 20, 0.48);
  backdrop-filter: blur(10px);
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 80;
  width: min(100%, 560px);
  max-height: 88vh;
  overflow-y: auto;
  transform: translateX(-50%);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow);
  padding: 22px;
  animation: sheetIn 420ms var(--silk) both;
}

.cart-sheet {
  width: min(100%, 620px);
}

.sheet-close {
  position: absolute;
  right: 14px;
  top: 14px;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(25, 27, 23, 0.06);
  color: var(--muted);
  font-size: 24px;
}

.sheet-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 36px;
  margin-right: 40px;
}

.sheet-title h2 {
  margin: 0 0 14px;
  font-size: 25px;
  letter-spacing: 0;
}

.sheet-title small {
  color: var(--muted);
}

.detail-hero {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
}

.detail-hero .drink-art {
  border-radius: 22px;
}

.detail-hero h2 {
  margin: 6px 0 10px;
  font-size: 32px;
  line-height: 1;
}

.detail-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.option-block {
  margin-top: 18px;
}

.option-block h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.option-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.option-row button,
.login-options button,
.focus-actions button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 800;
}

.option-row button.active {
  border-color: rgba(18, 107, 68, 0.24);
  background: rgba(18, 107, 68, 0.1);
  color: var(--green);
}

.primary-wide {
  width: 100%;
}

.cart-items {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.cart-item h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.cart-item small {
  color: var(--muted);
}

.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.fee-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  color: var(--muted);
}

.fee-row.total {
  color: var(--ink);
  font-weight: 950;
  font-size: 19px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.form-grid input {
  padding: 13px;
}

.login-options {
  display: grid;
  gap: 10px;
}

.qr-box {
  text-align: center;
}

.fake-qr {
  width: 156px;
  height: 156px;
  margin: 10px auto 14px;
  border: 12px solid #fff;
  background:
    linear-gradient(90deg, #111 10px, transparent 10px 20px) 0 0 / 20px 20px,
    linear-gradient(#111 10px, transparent 10px 20px) 0 0 / 20px 20px,
    #f6f6f2;
  box-shadow: 0 0 0 1px var(--line);
}

.real-qr {
  width: min(74vw, 260px);
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  margin: 8px auto 16px;
  border-radius: 18px;
  border: 10px solid #fff;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
}

.info-hero {
  min-height: 168px;
  border-radius: 24px;
  padding: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 16%, rgba(215, 255, 85, 0.45), transparent 24%),
    linear-gradient(145deg, rgba(23, 25, 22, 0.92), rgba(18, 107, 68, 0.82));
}

.info-hero small {
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.info-hero h2 {
  margin: 32px 0 8px;
  font-size: 34px;
  line-height: 1;
}

.info-hero p {
  margin: 0;
  max-width: 28em;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}

.pay-list,
.time-options,
.achievement-list {
  display: grid;
  gap: 8px;
}

.pay-list button,
.time-options button,
.achievement-list div {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  padding: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.stamp-book {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.stamp-book span {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(18, 107, 68, 0.24);
  background: rgba(255, 255, 255, 0.54);
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.stamp-book span.filled {
  border-style: solid;
  background: radial-gradient(circle at 30% 25%, #fff, var(--lime) 58%, #b8dd36);
  box-shadow: 0 12px 24px rgba(18, 107, 68, 0.12);
  animation: stampPop 520ms var(--snap) both;
}

.achievement-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.achievement-deck div {
  min-height: 86px;
  border-radius: 18px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid var(--line);
  filter: saturate(0.55);
  opacity: 0.68;
}

.achievement-deck div.unlocked {
  opacity: 1;
  filter: none;
  background: linear-gradient(145deg, rgba(215, 255, 85, 0.3), rgba(255, 255, 255, 0.8));
  border-color: rgba(18, 107, 68, 0.18);
}

.achievement-deck strong,
.achievement-deck span {
  display: block;
}

.achievement-deck span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.pay-list button.active,
.time-options button.active {
  border-color: rgba(18, 107, 68, 0.24);
  background: rgba(18, 107, 68, 0.1);
}

.tip-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.tip-row button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 4px;
  font-weight: 800;
}

.tip-row button.active {
  border-color: rgba(201, 148, 46, 0.36);
  background: rgba(201, 148, 46, 0.12);
  color: #8a5d10;
}

.note-input {
  width: 100%;
  padding: 12px 13px;
  resize: vertical;
}

.quick-notes {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 8px;
}

.quick-notes button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
}

.invoice-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.invoice-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.promo-box {
  border-radius: 22px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(215, 255, 85, 0.28), rgba(255, 255, 255, 0.72)),
    url("../assets/drinks/heytea-official/heytea-mango-coconut-sticky-rice-gelato.jpg") right center / contain no-repeat;
  border: 1px solid rgba(18, 107, 68, 0.1);
}

.promo-box strong {
  display: block;
  max-width: 13em;
  font-size: 28px;
  line-height: 1.1;
}

.promo-box p {
  max-width: 26em;
  color: var(--muted);
  line-height: 1.65;
}

.order-status {
  border-radius: 20px;
  padding: 18px;
  background: rgba(18, 107, 68, 0.1);
  border: 1px solid rgba(18, 107, 68, 0.14);
}

.order-status strong,
.order-status span {
  display: block;
}

.order-status strong {
  font-size: 30px;
  color: var(--green);
}

.order-status span {
  margin-top: 4px;
  color: var(--muted);
}

.focus-view {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 15%, rgba(215, 255, 85, 0.26), transparent 34%),
    linear-gradient(180deg, #fbfff4, #edf4ef);
  text-align: center;
}

.focus-close {
  position: absolute;
  right: 18px;
  top: 18px;
}

.delivery-cinema {
  width: min(100%, 520px);
  height: 300px;
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 24%, rgba(215, 255, 85, 0.38), transparent 26%),
    radial-gradient(circle at 82% 74%, rgba(18, 107, 68, 0.18), transparent 28%),
    rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.64);
  box-shadow: 0 34px 90px rgba(36, 38, 33, 0.12);
  backdrop-filter: blur(24px);
}

.delivery-cinema::before,
.delivery-cinema::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.delivery-cinema::before {
  width: 180px;
  height: 180px;
  left: 44px;
  top: 34px;
  background: rgba(255, 255, 255, 0.38);
  filter: blur(8px);
  animation: softBreath 7s var(--silk) infinite;
}

.delivery-cinema::after {
  width: 260px;
  height: 2px;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(18, 107, 68, 0.22), transparent);
  animation: shimmer 3.8s linear infinite;
}

.cinema-orbit {
  position: absolute;
  inset: 22px;
  border-radius: 32px;
  border: 1px solid rgba(18, 107, 68, 0.12);
}

.orbit-cup {
  position: absolute;
  width: 62px;
  height: 86px;
  border-radius: 12px 12px 24px 24px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 -34px 0 rgba(215, 255, 85, 0.18), 0 16px 40px rgba(36, 38, 33, 0.12);
  animation: floatCup 6s ease-in-out infinite;
}

.cup-a {
  left: 34px;
  top: 38px;
}

.cup-b {
  right: 52px;
  top: 58px;
  animation-delay: -2s;
}

.cup-c {
  left: 50%;
  bottom: 42px;
  animation-delay: -4s;
}

.delivery-route {
  position: absolute;
  inset: 68px 42px;
}

.delivery-route span {
  position: absolute;
  height: 2px;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(18, 107, 68, 0.28), transparent);
  animation: routeFlow 3.2s linear infinite;
}

.delivery-route span:nth-child(1) {
  left: 0;
  top: 18%;
}

.delivery-route span:nth-child(2) {
  right: 0;
  top: 48%;
  animation-delay: -1s;
}

.delivery-route span:nth-child(3) {
  left: 18%;
  bottom: 16%;
  animation-delay: -2s;
}

.courier-bike {
  position: absolute;
  inset: 0;
  animation: oneShotLoop 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bike-box {
  position: absolute;
  left: 34px;
  bottom: 46px;
  width: 70px;
  height: 70px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(23, 25, 22, 0.92);
  color: var(--lime);
  font-weight: 950;
  box-shadow: 0 22px 48px rgba(23, 25, 22, 0.24);
}

@keyframes floatCup {
  50% {
    transform: translateY(-14px) rotate(2deg);
  }
}

@keyframes routeFlow {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
  to {
    transform: translateX(30%);
    opacity: 1;
  }
}

@keyframes oneShotLoop {
  0% {
    transform: translate3d(-12%, 6%, 0) rotate(-2deg);
  }
  28% {
    transform: translate3d(48%, -12%, 0) rotate(5deg);
  }
  54% {
    transform: translate3d(68%, 18%, 0) rotate(-4deg);
  }
  78% {
    transform: translate3d(28%, 28%, 0) rotate(3deg);
  }
  100% {
    transform: translate3d(-12%, 6%, 0) rotate(-2deg);
  }
}

.focus-view h2 {
  margin: 0;
  font-size: clamp(62px, 12vw, 118px);
  line-height: 0.9;
  letter-spacing: 0;
}

.focus-view p {
  margin: 0;
  color: var(--muted);
}

.progress-track {
  width: min(100%, 420px);
  height: 10px;
  border-radius: 999px;
  background: #dfe6da;
  overflow: hidden;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.focus-actions {
  display: flex;
  gap: 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 150;
  transform: translateX(-50%);
  max-width: min(88vw, 380px);
  border-radius: 999px;
  padding: 11px 17px;
  background: rgba(24, 28, 22, 0.92);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.fly-ghost {
  position: fixed;
  z-index: 180;
  object-fit: contain;
  pointer-events: none;
  border-radius: 24px;
  filter: drop-shadow(0 18px 22px rgba(23, 25, 22, 0.18));
  animation: flyToCart 760ms cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
}

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

@keyframes flyToCart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
  48% {
    transform: translate3d(calc(var(--fly-x) * 0.46), calc(var(--fly-y) * 0.18 - 84px), 0) scale(0.82) rotate(-6deg);
  }
  100% {
    opacity: 0.12;
    transform: translate3d(var(--fly-x), var(--fly-y), 0) scale(0.18) rotate(12deg);
  }
}

@keyframes cartPulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  42% {
    transform: translateX(-50%) scale(1.035);
  }
}

@keyframes stampPop {
  from {
    transform: scale(0.78) rotate(-10deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}

@keyframes adFloat {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softBreath {
  50% {
    transform: translate3d(40px, 18px, 0) scale(1.18);
  }
}

@keyframes shimmer {
  from {
    opacity: 0.2;
    transform: translateX(-58%) scaleX(0.82);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
    transform: translateX(-42%) scaleX(1.08);
  }
}

@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1180px) {
  .desktop-grid {
    grid-template-columns: 1fr;
  }

  .order-rail {
    display: none;
  }

  .drink-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
  }

  .topbar {
    top: 8px;
    grid-template-columns: 1fr auto;
    border-radius: 20px;
  }

  .brand-mark {
    grid-column: 1 / -1;
  }

  .address-pill {
    min-width: 0;
  }

  .top-actions {
    justify-content: flex-end;
  }

  .ghost-button {
    display: none;
  }

  .hero-ad {
    min-height: 430px;
    border-radius: 24px;
    padding: 24px;
  }

  .hero-ad h1 {
    font-size: 44px;
  }

  .status-strip,
  .coupon-lane {
    grid-template-columns: 1fr;
  }

  .layout {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .category-list {
    top: 136px;
  }

  .drink-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .drink-card {
    min-height: auto;
    border-radius: 22px;
  }

  .drink-info h3 {
    font-size: 20px;
  }

  .cart-bar {
    grid-template-columns: 1fr 112px;
    width: calc(100% - 20px);
    bottom: 10px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }

  .sheet {
    width: 100%;
    border-radius: 24px 24px 0 0;
  }
}

@media (max-width: 430px) {
  .layout {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .hero-ad h1 {
    font-size: 38px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-head select {
    width: 100%;
  }

  .tip-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Refined ordering pass */
.address-pill,
.avatar-button {
  cursor: pointer;
}

.avatar-button {
  border: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}

.avatar-chip {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #171916;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52), 0 14px 34px rgba(23, 25, 22, 0.1);
}

.avatar-chip.big {
  width: 86px;
  height: 86px;
  font-size: 24px;
}

.avatar-a { background: linear-gradient(145deg, #d7ff55, #fff7be); }
.avatar-b { background: linear-gradient(145deg, #b84cff, #f2d8ff); }
.avatar-c { background: linear-gradient(145deg, #dff7eb, #ffffff); }
.avatar-d { background: linear-gradient(145deg, #bdefff, #f7ffff); }
.avatar-e { background: linear-gradient(145deg, #ffd5df, #fff2c9); }

.drink-art {
  background: #fff;
}

.drink-art::before {
  inset: auto 18% 13%;
  height: 42px;
  background: linear-gradient(90deg, transparent, rgba(20, 22, 18, 0.11), transparent);
  border-radius: 50%;
  filter: blur(7px);
  transform: none;
}

.drink-art img {
  padding: 0;
  transform: translateY(4px) scale(0.98);
}

.drink-art.is-cake img,
.drink-art.is-gelato img {
  padding: 0;
  transform: translateY(30px) scale(0.66);
}

.drink-card:hover .drink-art.is-cake img,
.drink-card:hover .drink-art.is-gelato img {
  transform: translateY(20px) scale(0.7);
}

.detail-hero .drink-art.is-cake img,
.detail-hero .drink-art.is-gelato img {
  padding: 0;
  transform: translateY(20px) scale(0.68);
}

.drink-art.is-bottle img {
  transform: translateY(10px) scale(0.88);
}

.detail-hero .drink-art {
  background: #fff;
  box-shadow: none;
}

.option-note {
  margin-top: 18px;
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(18, 107, 68, 0.08);
  color: var(--green);
  font-weight: 800;
  line-height: 1.7;
}

.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}

.detail-total span {
  color: var(--muted);
  font-size: 13px;
}

.detail-total strong {
  color: var(--red);
  font-size: 22px;
}

.cart-item {
  grid-template-columns: 72px 1fr auto;
}

.cart-item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
}

.login-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  min-height: 170px;
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(circle at 85% 18%, rgba(215, 255, 85, 0.38), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 248, 239, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.login-hero small,
.login-hero p {
  color: var(--muted);
}

.login-hero h2 {
  margin: 6px 0 8px;
  font-size: 28px;
  line-height: 1.05;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.avatar-grid button {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 6px;
  display: grid;
  justify-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  transition: transform 360ms var(--snap), background 260ms var(--silk), border-color 260ms var(--silk);
}

.avatar-grid button.active {
  border-color: rgba(18, 107, 68, 0.24);
  background: rgba(215, 255, 85, 0.18);
  color: var(--ink);
}

.avatar-grid button:hover {
  transform: translateY(-3px);
}

.shuffle-name {
  margin-top: 8px;
  padding-left: 0;
}

.login-pop {
  animation: loginContentPop 420ms var(--silk) both !important;
}

@keyframes loginContentPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.recharge-box {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
}

.recharge-box label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.recharge-box input {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.coin-stack {
  position: relative;
  height: 88px;
}

.coin-stack span {
  position: absolute;
  left: 15px;
  width: 78px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff6ad, #d6b23a);
  box-shadow: 0 12px 28px rgba(201, 148, 46, 0.24);
  animation: coinFloat 2.8s var(--silk) infinite;
}

.coin-stack span:nth-child(1) { bottom: 0; }
.coin-stack span:nth-child(2) { bottom: 22px; animation-delay: -0.7s; }
.coin-stack span:nth-child(3) { bottom: 44px; animation-delay: -1.4s; }

.recharge-success {
  position: fixed;
  left: 50%;
  top: 28%;
  z-index: 220;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: radial-gradient(circle at 35% 28%, #fff, #d7ff55 56%, #126b44);
  color: #171916;
  box-shadow: 0 34px 90px rgba(18, 107, 68, 0.26);
  animation: rechargePop 1100ms var(--snap) forwards;
}

.recharge-success span {
  font-size: 26px;
  font-weight: 950;
}

.recharge-success small {
  font-weight: 900;
}

.splash {
  background:
    radial-gradient(circle at 18% 20%, rgba(215, 255, 85, 0.24), transparent 28%),
    linear-gradient(135deg, #f8f6ef, #edf3ec);
}

.splash-card {
  width: min(100%, 500px);
  min-height: 610px;
  padding: 28px;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 40px 120px rgba(36, 38, 33, 0.16);
}

.splash-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 24px;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(215, 255, 85, 0.36), transparent 24%),
    linear-gradient(135deg, rgba(18, 107, 68, 0.08), transparent 42%);
}

.splash-copy,
.splash-card img {
  position: relative;
  z-index: 1;
}

.splash-card img {
  align-self: end;
  justify-self: center;
  width: 96%;
  height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(20, 22, 18, 0.13));
  animation: splashProduct 3.1s var(--silk) infinite alternate;
}

.splash-card h2 {
  max-width: 5em;
  color: var(--ink);
}

.splash-card p {
  max-width: 23em;
  color: rgba(25, 27, 23, 0.66);
}

.splash-card small {
  color: var(--green);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.splash-skip {
  top: max(18px, calc((100vh - 610px) / 2 - 56px));
  color: var(--ink);
}

.pay-action {
  position: relative;
  overflow: hidden;
}

.pay-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: paySweep 2.4s linear infinite;
}

.wait-tabs {
  display: flex;
  gap: 8px;
}

.wait-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-weight: 900;
}

.wait-tabs button.active {
  background: #171916;
  color: var(--lime);
}

.delivery-cinema[data-mode="kitchen"] .orbit-cup {
  animation-name: brewBubble;
}

.delivery-cinema[data-mode="rain"] {
  background:
    repeating-linear-gradient(115deg, rgba(18, 107, 68, 0.08) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 30% 24%, rgba(215, 255, 85, 0.24), transparent 26%),
    rgba(255, 255, 255, 0.54);
}

.delivery-cinema[data-mode="rain"] .delivery-route span {
  height: 46px;
  width: 2px;
  animation-name: rainFall;
}

@keyframes coinFloat {
  50% { transform: translateY(-5px) scale(1.03); }
}

@keyframes rechargePop {
  0% { opacity: 0; transform: translateY(18px) scale(0.72) rotate(-10deg); }
  28% { opacity: 1; transform: translateY(0) scale(1.04) rotate(3deg); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.9) rotate(0); }
}

@keyframes splashProduct {
  to { transform: translateY(-12px) scale(1.018); }
}

@keyframes paySweep {
  to { transform: translateX(100%); }
}

@keyframes brewBubble {
  50% { transform: translateY(-22px) scale(1.04) rotate(-2deg); }
}

@keyframes rainFall {
  from { transform: translateY(-40px); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translateY(90px); opacity: 0; }
}

@media (max-width: 760px) {
  .avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recharge-box {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 58px 1fr auto;
  }

  .cart-item img {
    width: 58px;
    height: 58px;
  }

  .splash-card {
    min-height: min(620px, 78vh);
  }

  .splash-card img {
    height: min(380px, 48vh);
  }
}

/* Hard reset for product photo cutouts and motion redesign */
.drink-card {
  overflow: hidden;
}

.drink-art,
.detail-hero .drink-art {
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.drink-art::before,
.drink-art::after,
.detail-hero .drink-art::before,
.detail-hero .drink-art::after {
  content: none !important;
  display: none !important;
}

.drink-art img {
  object-fit: cover !important;
  transform: none !important;
  filter: none !important;
}

.drink-art.is-cake img,
.drink-art.is-gelato img {
  transform: none !important;
  filter: none !important;
}

.drink-card:hover .drink-art.is-cake img,
.drink-card:hover .drink-art.is-gelato img {
  transform: scale(1.018) !important;
}

.detail-hero .drink-art.is-cake img,
.detail-hero .drink-art.is-gelato img {
  transform: none !important;
}

.drink-art.is-drink img,
.drink-art.is-coffee img {
  transform: none !important;
}

.loginSheet,
#loginSheet {
  width: min(100% - 24px, 520px);
  overflow-x: hidden;
}

#loginContent {
  min-width: 0;
}

.login-hero {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
}

.login-hero h2,
.login-hero p {
  overflow-wrap: anywhere;
}

.login-hero h2 {
  font-size: clamp(24px, 5vw, 32px);
}

.avatar-grid {
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.delivery-cinema {
  width: min(100%, 560px);
  height: 330px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 28% 18%, rgba(215, 255, 85, 0.28), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(18, 107, 68, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(244, 249, 241, 0.62));
}

.delivery-cinema::before,
.delivery-cinema::after {
  content: none !important;
}

.motion-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.motion-dot,
.motion-card,
.motion-cup,
.motion-rider {
  position: absolute;
  display: block;
  will-change: transform, opacity, border-radius;
}

.motion-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  top: 58px;
  left: calc(50% - 21px);
  opacity: 0;
  filter: drop-shadow(0 12px 20px rgba(18, 107, 68, 0.12));
  animation: dotLogoCycle 7.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.dot-a { background: #d7ff55; --x: -72px; --y: 0px; animation-delay: 0s; }
.dot-b { background: #111; --x: -24px; --y: 0px; animation-delay: 0.08s; }
.dot-c { background: #f4c46a; --x: 24px; --y: 0px; animation-delay: 0.16s; }
.dot-d { background: #126b44; --x: 72px; --y: 0px; animation-delay: 0.24s; }

.motion-card {
  width: 112px;
  height: 74px;
  left: calc(50% - 56px);
  top: 126px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 50px rgba(24, 26, 22, 0.12);
  transform-origin: center;
  opacity: 0;
  animation: cardMorphCycle 7.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.card-b {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: rgba(215, 255, 85, 0.72);
  animation-delay: 0.16s;
}

.motion-cup {
  width: 66px;
  height: 102px;
  left: calc(50% - 33px);
  top: 126px;
  border-radius: 15px 15px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0 34%, rgba(215,255,85,0.52) 34% 100%);
  box-shadow: inset 0 0 0 2px rgba(23, 25, 22, 0.06), 0 24px 48px rgba(24, 26, 22, 0.12);
  opacity: 0;
  animation: cupHeroCycle 7.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.motion-cup::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 14px;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.12);
}

.motion-rider {
  width: 82px;
  height: 48px;
  left: -96px;
  bottom: 54px;
  border-radius: 22px;
  background: #171916;
  box-shadow: 0 22px 46px rgba(23, 25, 22, 0.22);
  animation: riderLoop 7.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.motion-rider::before,
.motion-rider::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 5px solid #171916;
  background: var(--lime);
}

.motion-rider::before { left: 8px; }
.motion-rider::after { right: 8px; }

@keyframes dotLogoCycle {
  0% { opacity: 0; transform: translate3d(0, -42px, 0) scale(0.32); border-radius: 50%; }
  12% { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); border-radius: 50%; }
  28% { opacity: 1; transform: translate3d(calc(var(--x) * 0.35), 64px, 0) scale(0.76); border-radius: 14px; }
  42% { opacity: 0; transform: translate3d(0, 88px, 0) scale(0.2); border-radius: 18px; }
  100% { opacity: 0; transform: translate3d(0, 88px, 0) scale(0.2); }
}

@keyframes cardMorphCycle {
  0%, 26% { opacity: 0; transform: translateY(38px) scale(0.72) rotate(-8deg); }
  38% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  52% { opacity: 1; transform: translateY(-8px) scale(0.92) rotate(4deg); border-radius: 999px; }
  64% { opacity: 0; transform: translateY(-28px) scale(0.42) rotate(16deg); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.42); }
}

@keyframes cupHeroCycle {
  0%, 42% { opacity: 0; transform: translateY(22px) scale(0.7); }
  54% { opacity: 1; transform: translateY(0) scale(1); }
  68% { opacity: 1; transform: translateY(-8px) scale(1.04); }
  78% { opacity: 0; transform: translateY(32px) scale(0.78); }
  100% { opacity: 0; transform: translateY(32px) scale(0.78); }
}

@keyframes riderLoop {
  0%, 58% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  64% { opacity: 1; transform: translate3d(120px, -4px, 0) rotate(-2deg); }
  78% { opacity: 1; transform: translate3d(360px, 4px, 0) rotate(2deg); }
  92%, 100% { opacity: 0; transform: translate3d(680px, -2px, 0) rotate(-1deg); }
}

/* Final unified product stage: one white rounded rectangle, no nested frames */
.drink-card {
  background: rgba(255, 255, 255, 0.64);
}

.drink-art,
.detail-hero .drink-art {
  aspect-ratio: 1 / 1.02;
  margin: 0;
  overflow: hidden !important;
  background: #fff !important;
  border-radius: inherit;
  box-shadow: none !important;
}

.drink-art img,
.drink-art.is-cake img,
.drink-art.is-gelato img,
.drink-art.is-bottle img,
.drink-art.is-drink img,
.drink-art.is-coffee img,
.detail-hero .drink-art img,
.detail-hero .drink-art.is-cake img,
.detail-hero .drink-art.is-gelato img {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover;
  transform: none !important;
  filter: none !important;
  display: block;
}

.drink-card:hover .drink-art img,
.drink-card:hover .drink-art.is-cake img,
.drink-card:hover .drink-art.is-gelato img {
  transform: scale(1.025) !important;
}

.detail-hero .drink-art {
  border-radius: 24px;
}

/* Login sheet responsive fix */
#loginSheet {
  left: 50% !important;
  right: auto !important;
  width: min(92vw, 520px) !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
  padding: clamp(16px, 4vw, 22px) !important;
  overflow-x: hidden !important;
}

#loginContent {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transform-origin: center top;
}

#loginContent .option-block {
  width: 100%;
  max-width: 100%;
}

#loginContent .note-input {
  width: 100%;
  max-width: 100%;
}

#loginContent .primary-wide {
  max-width: 100%;
}

#loginContent * {
  min-width: 0;
}

#loginSheet .sheet-close {
  z-index: 3;
}

.login-hero {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: clamp(10px, 3vw, 18px);
  padding: clamp(14px, 4vw, 22px);
  border-radius: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.login-hero .avatar-chip.big {
  width: clamp(58px, 15vw, 86px);
  height: clamp(58px, 15vw, 86px);
}

.login-hero h2 {
  max-width: 100%;
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.08;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.login-hero p {
  max-width: 100%;
  display: block;
  line-height: 1.6;
}

.avatar-grid {
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
}

.avatar-grid button {
  min-width: 0;
}

@media (max-width: 430px) {
  #loginSheet {
    width: calc(100vw - 16px) !important;
    max-height: 90vh;
    top: auto !important;
    bottom: 8px !important;
  }

  .login-hero {
    grid-template-columns: 1fr !important;
    justify-items: start;
  }
}

/* Elastic interactions and delivery micro-cinema */
.splash-controls {
  position: absolute;
  right: clamp(14px, 4vw, 28px);
  top: clamp(14px, 4vw, 28px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.splash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(18px);
}

.splash-toggle input {
  accent-color: var(--lime);
}

.splash-controls .splash-skip {
  position: static !important;
  right: auto !important;
  top: auto !important;
  z-index: auto;
  box-shadow: none;
  padding: 10px 13px;
}

.sheet-opening {
  animation: jellySheetIn 520ms var(--spring) both !important;
}

.sheet-closing {
  animation: jellySheetOut 280ms cubic-bezier(0.4, 0, 0.7, 1) both !important;
}

.backdrop-closing {
  animation: backdropFade 260ms ease both reverse;
}

.drink-card,
.coupon-card,
.status-card,
.option-row button,
.time-options button,
.pay-card,
.primary-wide,
.checkout-button,
.ghost-button,
.text-button,
.icon-button {
  transition:
    transform 420ms var(--spring),
    box-shadow 420ms var(--silk),
    border-color 320ms var(--silk),
    background 320ms var(--silk),
    filter 420ms var(--silk);
}

.drink-card:active,
.coupon-card:active,
.status-card:active,
.option-row button:active,
.time-options button:active,
.pay-card:active,
.primary-wide:active,
.checkout-button:active,
.ghost-button:active,
.text-button:active,
.icon-button:active {
  transform: scale(0.965) !important;
  filter: saturate(1.08);
}

.drink-card:hover {
  animation: cardGel 760ms var(--spring) both;
}

.delivery-cinema {
  background:
    radial-gradient(circle at 32% 18%, rgba(215, 255, 85, 0.34), transparent 30%),
    radial-gradient(circle at 76% 72%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(238, 247, 239, 0.72)) !important;
}

.delivery-cinema::before,
.delivery-cinema::after {
  display: none !important;
}

.delivery-ae {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.delivery-ae > span {
  position: absolute;
  display: block;
}

.ae-ticket {
  left: 54px;
  top: 56px;
  width: 112px;
  height: 136px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 56px rgba(24, 26, 22, 0.1);
  transform-origin: 50% 95%;
  animation: ticketPop 6.8s var(--spring) infinite;
}

.ae-ticket::before,
.ae-ticket i,
.ae-ticket b {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.16);
}

.ae-ticket::before { top: 32px; }
.ae-ticket i { top: 56px; right: 38px; }
.ae-ticket b { top: 82px; right: 28px; background: var(--lime); }

.ae-cup {
  left: 50%;
  top: 46px;
  width: 104px;
  height: 148px;
  margin-left: -52px;
  border-radius: 26px 26px 38px 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0 28%, rgba(215, 255, 85, 0.42) 28% 100%);
  box-shadow: inset 0 -30px 0 rgba(18, 107, 68, 0.08), 0 28px 54px rgba(24, 26, 22, 0.14);
  animation: cupShake 5.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.ae-cup::before {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  top: -8px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(23, 25, 22, 0.08);
}

.ae-cup i,
.ae-cup b {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}

.ae-cup i { top: 66px; animation: teaWave 2.8s ease-in-out infinite; }
.ae-cup b { top: 92px; animation: teaWave 2.8s ease-in-out -1.1s infinite; }

.ae-seal {
  left: 50%;
  top: 28px;
  width: 132px;
  height: 20px;
  margin-left: -66px;
  border-radius: 999px;
  background: #151711;
  transform-origin: 50% 120%;
  animation: sealPress 7.2s var(--spring) infinite;
}

.ae-route {
  left: 60px;
  right: 60px;
  bottom: 68px;
  height: 88px;
}

.ae-route::before {
  content: "";
  position: absolute;
  inset: 24px 0 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(18, 107, 68, 0.24), rgba(18, 107, 68, 0.08), transparent);
}

.ae-route i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(18, 107, 68, 0.08);
  animation: routePing 4.8s ease-in-out infinite;
}

.ae-route i:nth-child(1) { left: 3%; top: 18px; }
.ae-route i:nth-child(2) { left: 46%; top: 18px; animation-delay: -1.2s; }
.ae-route i:nth-child(3) { right: 4%; top: 18px; animation-delay: -2.4s; }

.ae-rider {
  left: -90px;
  bottom: 72px;
  width: 82px;
  height: 52px;
  border-radius: 24px 24px 18px 18px;
  background: #171916;
  box-shadow: 0 22px 44px rgba(23, 25, 22, 0.2);
  animation: riderDeliver 8.8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.ae-rider::before,
.ae-rider::after {
  content: "";
  position: absolute;
  bottom: -15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 5px solid #171916;
  background: var(--lime);
}

.ae-rider::before { left: 8px; }
.ae-rider::after { right: 8px; }

.ae-rider i {
  position: absolute;
  left: 28px;
  top: -28px;
  width: 40px;
  height: 36px;
  border-radius: 15px 15px 10px 10px;
  background: var(--lime);
}

.ae-rider b {
  position: absolute;
  right: -18px;
  top: 5px;
  width: 28px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
}

.ae-door {
  right: 54px;
  bottom: 64px;
  width: 72px;
  height: 112px;
  border-radius: 24px 24px 12px 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 2px rgba(23, 25, 22, 0.06), 0 18px 42px rgba(24, 26, 22, 0.1);
  animation: doorGlow 7.4s ease-in-out infinite;
}

.ae-door::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 52px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.ae-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(215, 255, 85, 0.6);
  animation: bubbleFloat 5.4s ease-in-out infinite;
}

.bubble-a { left: 34%; top: 38px; }
.bubble-b { right: 28%; top: 78px; animation-delay: -1.7s; }
.bubble-c { left: 22%; bottom: 88px; animation-delay: -3s; }

.delivery-cinema[data-mode="order"] .ae-ticket { animation-duration: 4.8s; }
.delivery-cinema[data-mode="order"] .ae-cup { animation-name: cupIdle; }
.delivery-cinema[data-mode="shake"] .ae-cup { animation-name: cupShakeFast; animation-duration: 2.6s; }
.delivery-cinema[data-mode="shake"] .ae-bubble { animation-duration: 3.2s; }
.delivery-cinema[data-mode="seal"] .ae-seal { animation-duration: 2.8s; }
.delivery-cinema[data-mode="seal"] .ae-ticket { transform: rotate(-3deg) scale(0.94); }
.delivery-cinema[data-mode="route"] .ae-rider { animation-duration: 5.4s; }
.delivery-cinema[data-mode="route"] .ae-route i { animation-duration: 2.8s; }
.delivery-cinema[data-mode="arrive"] .ae-door { animation-duration: 2.4s; }
.delivery-cinema[data-mode="arrive"] .ae-rider { animation-duration: 4.2s; }

@keyframes jellySheetIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(42px) scale(0.92); filter: blur(10px); }
  58% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.025); filter: blur(0); }
  78% { transform: translateX(-50%) translateY(4px) scale(0.992); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes jellySheetOut {
  to { opacity: 0; transform: translateX(-50%) translateY(28px) scale(0.94); filter: blur(8px); }
}

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

@keyframes cardGel {
  0%, 100% { transform: translateY(-6px) rotateX(1.2deg) scale(1); }
  42% { transform: translateY(-8px) rotateX(1.2deg) scale(1.012, 0.992); }
  68% { transform: translateY(-5px) rotateX(1.2deg) scale(0.996, 1.006); }
}

@keyframes ticketPop {
  0%, 100% { transform: rotate(-5deg) translateY(0) scale(1); }
  18% { transform: rotate(3deg) translateY(-12px) scale(1.06, 0.98); }
  32% { transform: rotate(-2deg) translateY(4px) scale(0.98, 1.04); }
}

@keyframes cupIdle {
  50% { transform: translateY(-10px) rotate(1.5deg); }
}

@keyframes cupShake {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-10px) rotate(-6deg); }
  44% { transform: translateY(4px) rotate(5deg); }
  68% { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes cupShakeFast {
  0%, 100% { transform: rotate(0) translateY(0); }
  20% { transform: rotate(-10deg) translateY(-8px); }
  40% { transform: rotate(8deg) translateY(2px); }
  60% { transform: rotate(-5deg) translateY(-5px); }
}

@keyframes teaWave {
  50% { transform: translateX(12px) scaleX(0.82); opacity: 0.42; }
}

@keyframes sealPress {
  0%, 62%, 100% { transform: translateY(-36px) scaleX(0.72); opacity: 0; }
  72% { opacity: 1; transform: translateY(18px) scaleX(1.08); }
  82% { opacity: 1; transform: translateY(4px) scaleX(0.96); }
}

@keyframes routePing {
  0%, 100% { transform: scale(0.72); opacity: 0.38; }
  48% { transform: scale(1.28); opacity: 1; }
}

@keyframes riderDeliver {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) rotate(-3deg); }
  12% { opacity: 1; }
  42% { transform: translate3d(270px, -38px, 0) rotate(4deg); }
  72% { opacity: 1; transform: translate3d(520px, 2px, 0) rotate(-2deg); }
  100% { opacity: 0; transform: translate3d(680px, 4px, 0) rotate(0deg); }
}

@keyframes doorGlow {
  50% { box-shadow: inset 0 0 0 2px rgba(23, 25, 22, 0.06), 0 0 0 12px rgba(215, 255, 85, 0.14), 0 18px 42px rgba(24, 26, 22, 0.1); }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.36; }
  50% { transform: translateY(-22px) scale(1.2); opacity: 0.86; }
}

/* Stable product hover: keep photos on one compositor layer to avoid blinking */
.drink-card {
  transform: translate3d(0, 0, 0);
  transform-style: flat !important;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: transform, box-shadow;
  transition:
    transform 760ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 820ms var(--silk),
    border-color 720ms var(--silk),
    background 720ms var(--silk) !important;
}

.drink-card:hover {
  animation: none !important;
  transform: translate3d(0, -5px, 0) !important;
}

.drink-art {
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: auto;
}

.drink-art img,
.drink-art.is-cake img,
.drink-art.is-gelato img,
.drink-art.is-bottle img,
.drink-art.is-drink img,
.drink-art.is-coffee img {
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) !important;
  will-change: auto;
  transition:
    opacity 900ms var(--silk),
    transform 900ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 900ms var(--silk) !important;
}

.drink-card:hover .drink-art img,
.drink-card:hover .drink-art.is-cake img,
.drink-card:hover .drink-art.is-gelato img,
.drink-card:hover .drink-art.is-bottle img,
.drink-card:hover .drink-art.is-drink img,
.drink-card:hover .drink-art.is-coffee img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Stabilized hover: no image transform, no repaint-heavy card bounce */
.drink-card {
  transition: border-color 520ms var(--silk), background-color 520ms var(--silk) !important;
}

.drink-card:hover {
  animation: none !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.96) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.drink-art img,
.drink-card:hover .drink-art img,
.drink-art.is-cake img,
.drink-art.is-gelato img,
.drink-art.is-bottle img,
.drink-art.is-drink img,
.drink-art.is-coffee img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.sheet-opening {
  animation: sheetIn 420ms var(--silk) both !important;
}

/* Rich delivery cinema: staged AE-style loops with gentle randomized swaps */
.delivery-cinema {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 18%, rgba(215, 255, 85, 0.34), transparent 26%),
    radial-gradient(circle at 80% 76%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(239, 247, 237, 0.72)) !important;
}

.delivery-cinema.motion-swap .delivery-ae {
  animation: cinemaSwap 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.delivery-ae::before,
.delivery-ae::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.delivery-ae::before {
  left: 9%;
  right: 9%;
  bottom: 52px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(18, 107, 68, 0.18), rgba(215, 255, 85, 0.62), rgba(18, 107, 68, 0.12), transparent);
  transform-origin: 50% 50%;
  animation: horizonBreath 8s ease-in-out infinite;
}

.delivery-ae::after {
  width: 230px;
  height: 230px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(18, 107, 68, 0.08);
  transform: translate(-50%, -50%);
  animation: orbitHalo 11s linear infinite;
}

.delivery-ae > span {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.ae-ticket,
.ae-cup,
.ae-seal,
.ae-bag,
.ae-route,
.ae-rider,
.ae-door,
.ae-stamp,
.ae-coupon,
.ae-ice,
.ae-straw,
.ae-pin,
.ae-confetti {
  transition:
    opacity 860ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 860ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ae-ice {
  width: 20px;
  height: 20px;
  left: 50%;
  top: 54px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(18, 107, 68, 0.1), 0 12px 22px rgba(24, 26, 22, 0.08);
  opacity: 0;
  animation: iceDrop 5.6s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.ice-a {
  margin-left: -62px;
  animation-delay: -0.7s;
}

.ice-b {
  margin-left: 42px;
  width: 17px;
  height: 17px;
  animation-delay: -2s;
}

.ae-straw {
  left: calc(50% + 50px);
  top: 42px;
  width: 10px;
  height: 124px;
  border-radius: 999px;
  background: linear-gradient(180deg, #171916, #126b44);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: strawSlide 6.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ae-bag {
  left: calc(50% - 76px);
  bottom: 58px;
  width: 152px;
  height: 128px;
  border-radius: 18px 18px 30px 30px;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.82));
  box-shadow: 0 30px 70px rgba(24, 26, 22, 0.12);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: bagBloom 7.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ae-bag::before {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  top: -20px;
  height: 42px;
  border: 8px solid #171916;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.ae-bag i,
.ae-bag b {
  position: absolute;
  left: 30px;
  right: 30px;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.12);
}

.ae-bag i { top: 48px; }
.ae-bag b { top: 72px; right: 50px; background: var(--lime); }

.ae-pin {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 3px;
  background: var(--green);
  box-shadow: 0 0 0 10px rgba(18, 107, 68, 0.08);
  opacity: 0;
  transform: rotate(-45deg);
  animation: pinPulse 5.8s ease-in-out infinite;
}

.pin-a { left: 22%; bottom: 92px; }
.pin-b { left: 50%; bottom: 128px; animation-delay: -1.5s; }
.pin-c { right: 22%; bottom: 92px; animation-delay: -3s; }

.ae-stamp {
  left: 84px;
  top: 70px;
  padding: 10px 15px;
  border: 2px solid #171916;
  border-radius: 14px;
  color: #171916;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 34px rgba(24, 26, 22, 0.1);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: stampDrop 5.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ae-coupon {
  right: 94px;
  top: 62px;
  width: 64px;
  height: 42px;
  border-radius: 14px;
  display: grid !important;
  place-items: center;
  color: #171916;
  font-size: 22px;
  font-weight: 900;
  background: var(--lime);
  box-shadow: 0 18px 34px rgba(24, 26, 22, 0.12);
  opacity: 0;
  animation: couponFlip 6.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ae-coupon::before,
.ae-coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(248, 252, 244, 0.9);
  transform: translateY(-50%);
}

.ae-coupon::before { left: -5px; }
.ae-coupon::after { right: -5px; }

.ae-confetti {
  width: 12px;
  height: 18px;
  border-radius: 4px;
  opacity: 0;
  animation: confettiDrift 5.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.confetti-a { left: 30%; top: 42px; background: var(--lime); }
.confetti-b { left: 54%; top: 34px; background: #171916; animation-delay: -1.4s; }
.confetti-c { right: 28%; top: 54px; background: #126b44; animation-delay: -2.8s; }

.delivery-cinema[data-mode="ticket"] .ae-ticket,
.delivery-cinema[data-mode="order"] .ae-ticket {
  animation-name: ticketReceipt;
}

.delivery-cinema[data-mode="ticket"] .ae-stamp,
.delivery-cinema[data-mode="order"] .ae-stamp {
  opacity: 1;
  animation-name: stampDrop;
}

.delivery-cinema[data-mode="brew"] .ae-cup {
  animation: cupBrew 5.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.delivery-cinema[data-mode="brew"] .ae-bubble,
.delivery-cinema[data-mode="ice"] .ae-bubble {
  animation-duration: 3.8s;
}

.delivery-cinema[data-mode="ice"] .ae-ice,
.delivery-cinema[data-mode="ice"] .ae-straw {
  opacity: 1;
}

.delivery-cinema[data-mode="ice"] .ae-cup {
  animation: cupCatch 5.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.delivery-cinema[data-mode="bag"] .ae-bag,
.delivery-cinema[data-mode="seal"] .ae-bag {
  opacity: 1;
}

.delivery-cinema[data-mode="bag"] .ae-cup {
  animation: cupIntoBag 7.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.delivery-cinema[data-mode="route"] .ae-pin,
.delivery-cinema[data-mode="rider"] .ae-pin,
.delivery-cinema[data-mode="route"] .ae-route,
.delivery-cinema[data-mode="rider"] .ae-route {
  opacity: 1;
}

.delivery-cinema[data-mode="rider"] .ae-rider {
  animation: riderDeliver 4.9s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.delivery-cinema[data-mode="coupon"] .ae-coupon,
.delivery-cinema[data-mode="coupon"] .ae-confetti {
  opacity: 1;
}

.delivery-cinema[data-mode="coupon"] .ae-ticket {
  animation-name: ticketWiggle;
}

.delivery-cinema[data-mode="stamp"] .ae-stamp,
.delivery-cinema[data-mode="stamp"] .ae-confetti {
  opacity: 1;
}

.delivery-cinema[data-mode="arrive"] .ae-door {
  animation: doorOpen 5.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.delivery-cinema[data-mode="arrive"] .ae-rider {
  animation: riderArrive 5.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.delivery-cinema[data-mode="arrive"] .ae-confetti,
.delivery-cinema[data-mode="arrive"] .ae-stamp {
  opacity: 1;
}

@keyframes cinemaSwap {
  0% { transform: translateY(8px) scale(0.992); filter: blur(3px); }
  62% { transform: translateY(-3px) scale(1.006); filter: blur(0); }
  100% { transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes horizonBreath {
  50% { transform: scaleX(0.72); opacity: 0.55; }
}

@keyframes orbitHalo {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ticketReceipt {
  0%, 100% { transform: translateY(2px) rotate(-5deg) scale(0.98); }
  18% { transform: translateY(-16px) rotate(4deg) scale(1.06, 0.98); }
  34% { transform: translateY(5px) rotate(-2deg) scale(0.985, 1.035); }
  58% { transform: translateY(-4px) rotate(1deg) scale(1); }
}

@keyframes ticketWiggle {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  35% { transform: translateY(-10px) rotate(6deg); }
  64% { transform: translateY(2px) rotate(-2deg); }
}

@keyframes cupBrew {
  0%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-12px) rotate(-3deg) scale(1.02, 0.99); }
  38% { transform: translateY(4px) rotate(2deg) scale(0.99, 1.025); }
  66% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes cupCatch {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(6px) scale(1.03, 0.98); }
  44% { transform: translateY(-8px) scale(0.98, 1.03); }
  70% { transform: translateY(0) scale(1); }
}

@keyframes iceDrop {
  0%, 100% { opacity: 0; transform: translateY(-80px) rotate(-24deg) scale(0.72); }
  16% { opacity: 1; }
  42% { opacity: 1; transform: translateY(80px) rotate(16deg) scale(1); }
  54% { opacity: 0; transform: translateY(70px) rotate(16deg) scale(0.5); }
}

@keyframes strawSlide {
  0%, 100% { opacity: 0; transform: translateY(-84px) rotate(-22deg); }
  24% { opacity: 1; transform: translateY(4px) rotate(11deg); }
  42% { transform: translateY(-8px) rotate(8deg); }
  62% { opacity: 1; transform: translateY(0) rotate(10deg); }
}

@keyframes bagBloom {
  0%, 100% { opacity: 0; transform: translateY(28px) scale(0.74, 0.9); }
  24% { opacity: 1; transform: translateY(-6px) scale(1.04, 0.98); }
  38% { transform: translateY(4px) scale(0.98, 1.03); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cupIntoBag {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  42% { transform: translateY(76px) scale(0.72); opacity: 0.9; }
  58% { transform: translateY(84px) scale(0.56); opacity: 0; }
  78% { opacity: 0; transform: translateY(0) scale(0.7); }
}

@keyframes pinPulse {
  0%, 100% { opacity: 0; transform: rotate(-45deg) scale(0.58); }
  22% { opacity: 1; transform: rotate(-45deg) scale(1.12); }
  44% { transform: rotate(-45deg) scale(0.94); }
  68% { opacity: 0.8; transform: rotate(-45deg) scale(1); }
}

@keyframes stampDrop {
  0%, 100% { opacity: 0; transform: translateY(-28px) rotate(-14deg) scale(1.3); }
  26% { opacity: 1; transform: translateY(4px) rotate(4deg) scale(0.94); }
  42% { transform: translateY(-2px) rotate(-2deg) scale(1.02); }
  72% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes couponFlip {
  0%, 100% { opacity: 0; transform: translateY(24px) rotateY(80deg) scale(0.78); }
  24% { opacity: 1; transform: translateY(-8px) rotateY(-8deg) scale(1.04); }
  44% { transform: translateY(2px) rotateY(5deg) scale(0.98); }
  72% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}

@keyframes confettiDrift {
  0%, 100% { opacity: 0; transform: translateY(-24px) rotate(0deg) scale(0.72); }
  24% { opacity: 1; }
  68% { opacity: 0.92; transform: translateY(94px) rotate(250deg) scale(1); }
  86% { opacity: 0; transform: translateY(120px) rotate(330deg) scale(0.7); }
}

@keyframes doorOpen {
  0%, 100% { transform: perspective(300px) rotateY(0deg); }
  34% { transform: perspective(300px) rotateY(-16deg); box-shadow: inset 0 0 0 2px rgba(23, 25, 22, 0.06), 0 0 0 16px rgba(215, 255, 85, 0.16), 0 18px 42px rgba(24, 26, 22, 0.1); }
  62% { transform: perspective(300px) rotateY(0deg); }
}

@keyframes riderArrive {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) rotate(-3deg); }
  28% { opacity: 1; transform: translate3d(330px, -24px, 0) rotate(3deg); }
  52%, 76% { opacity: 1; transform: translate3d(430px, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(470px, 0, 0) scale(0.96); }
}

/* Delivery scene director: keep only the current vignette visible */
.delivery-cinema .ae-ticket,
.delivery-cinema .ae-seal,
.delivery-cinema .ae-bag,
.delivery-cinema .ae-route,
.delivery-cinema .ae-rider,
.delivery-cinema .ae-door,
.delivery-cinema .ae-stamp,
.delivery-cinema .ae-coupon,
.delivery-cinema .ae-ice,
.delivery-cinema .ae-straw,
.delivery-cinema .ae-pin,
.delivery-cinema .ae-confetti {
  opacity: 0 !important;
  visibility: hidden;
}

.delivery-cinema .ae-cup {
  opacity: 1 !important;
  visibility: visible;
}

.delivery-cinema[data-mode="order"] .ae-ticket,
.delivery-cinema[data-mode="order"] .ae-stamp,
.delivery-cinema[data-mode="ticket"] .ae-ticket,
.delivery-cinema[data-mode="ticket"] .ae-stamp,
.delivery-cinema[data-mode="brew"] .ae-bubble,
.delivery-cinema[data-mode="ice"] .ae-ice,
.delivery-cinema[data-mode="ice"] .ae-straw,
.delivery-cinema[data-mode="shake"] .ae-bubble,
.delivery-cinema[data-mode="seal"] .ae-seal,
.delivery-cinema[data-mode="bag"] .ae-bag,
.delivery-cinema[data-mode="route"] .ae-route,
.delivery-cinema[data-mode="route"] .ae-pin,
.delivery-cinema[data-mode="rider"] .ae-route,
.delivery-cinema[data-mode="rider"] .ae-pin,
.delivery-cinema[data-mode="rider"] .ae-rider,
.delivery-cinema[data-mode="arrive"] .ae-rider,
.delivery-cinema[data-mode="arrive"] .ae-door,
.delivery-cinema[data-mode="arrive"] .ae-stamp,
.delivery-cinema[data-mode="arrive"] .ae-confetti,
.delivery-cinema[data-mode="coupon"] .ae-coupon,
.delivery-cinema[data-mode="coupon"] .ae-confetti,
.delivery-cinema[data-mode="stamp"] .ae-stamp,
.delivery-cinema[data-mode="stamp"] .ae-confetti {
  opacity: 1 !important;
  visibility: visible;
}

.delivery-cinema[data-mode="route"] .ae-cup,
.delivery-cinema[data-mode="rider"] .ae-cup,
.delivery-cinema[data-mode="arrive"] .ae-cup,
.delivery-cinema[data-mode="coupon"] .ae-cup,
.delivery-cinema[data-mode="stamp"] .ae-cup {
  opacity: 0 !important;
  visibility: hidden;
}

/* Performance guard: keep the polish, but stop invisible work on slower GPUs. */
.drink-card {
  will-change: auto !important;
}

.drink-card:hover {
  will-change: transform;
}

@supports (content-visibility: auto) {
  .drink-card {
    content-visibility: auto;
    contain-intrinsic-size: 430px 520px;
  }
}

.delivery-cinema .ae-bubble,
.delivery-cinema .ae-ticket,
.delivery-cinema .ae-seal,
.delivery-cinema .ae-bag,
.delivery-cinema .ae-route,
.delivery-cinema .ae-rider,
.delivery-cinema .ae-door,
.delivery-cinema .ae-stamp,
.delivery-cinema .ae-coupon,
.delivery-cinema .ae-ice,
.delivery-cinema .ae-straw,
.delivery-cinema .ae-pin,
.delivery-cinema .ae-confetti {
  animation-play-state: paused !important;
}

.delivery-cinema .ae-bubble {
  opacity: 0 !important;
  visibility: hidden;
}

.delivery-cinema .ae-cup,
.delivery-cinema[data-mode="order"] .ae-ticket,
.delivery-cinema[data-mode="order"] .ae-stamp,
.delivery-cinema[data-mode="ticket"] .ae-ticket,
.delivery-cinema[data-mode="ticket"] .ae-stamp,
.delivery-cinema[data-mode="brew"] .ae-bubble,
.delivery-cinema[data-mode="ice"] .ae-bubble,
.delivery-cinema[data-mode="shake"] .ae-bubble,
.delivery-cinema[data-mode="ice"] .ae-ice,
.delivery-cinema[data-mode="ice"] .ae-straw,
.delivery-cinema[data-mode="seal"] .ae-seal,
.delivery-cinema[data-mode="bag"] .ae-bag,
.delivery-cinema[data-mode="route"] .ae-route,
.delivery-cinema[data-mode="route"] .ae-pin,
.delivery-cinema[data-mode="rider"] .ae-route,
.delivery-cinema[data-mode="rider"] .ae-pin,
.delivery-cinema[data-mode="rider"] .ae-rider,
.delivery-cinema[data-mode="arrive"] .ae-rider,
.delivery-cinema[data-mode="arrive"] .ae-door,
.delivery-cinema[data-mode="arrive"] .ae-stamp,
.delivery-cinema[data-mode="arrive"] .ae-confetti,
.delivery-cinema[data-mode="coupon"] .ae-coupon,
.delivery-cinema[data-mode="coupon"] .ae-confetti,
.delivery-cinema[data-mode="stamp"] .ae-stamp,
.delivery-cinema[data-mode="stamp"] .ae-confetti {
  animation-play-state: running !important;
}

.delivery-cinema[data-mode="brew"] .ae-bubble,
.delivery-cinema[data-mode="ice"] .ae-bubble,
.delivery-cinema[data-mode="shake"] .ae-bubble {
  opacity: 1 !important;
  visibility: visible;
}

.lite-motion .ambient-bg span {
  animation: none !important;
  filter: blur(28px) !important;
  opacity: 0.1 !important;
}

.lite-motion .topbar,
.lite-motion .hero-ad,
.lite-motion .status-card,
.lite-motion .coupon-card,
.lite-motion .rail-card,
.lite-motion .drink-card,
.lite-motion .sheet,
.lite-motion .cart-badge,
.lite-motion .delivery-cinema,
.lite-motion .login-shell,
.lite-motion .splash-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.lite-motion .drink-card,
.lite-motion .hero-ad,
.lite-motion .sheet,
.lite-motion .delivery-cinema,
.lite-motion .status-card,
.lite-motion .coupon-card {
  box-shadow: 0 16px 38px rgba(31, 34, 28, 0.08) !important;
}

.lite-motion .splash-card img,
.lite-motion .hero-drink img {
  filter: none !important;
}

.lite-motion .delivery-ae::after,
.lite-motion .ae-confetti {
  display: none !important;
}

.lite-motion .delivery-cinema.motion-swap .delivery-ae,
.lite-motion .hero-drink img {
  animation-duration: 1.1s !important;
}

/* Kitchen story mode: receipt, making, packing and delivery vignettes. */
.kitchen-scene,
.kitchen-scene * {
  box-sizing: border-box;
}

.kitchen-scene {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: #171916;
}

.kitchen-scene > div,
.kitchen-scene > div > * {
  position: absolute;
}

.delivery-cinema .kitchen-scene > div {
  opacity: 0;
  visibility: hidden;
  animation-play-state: paused !important;
}

.ks-wall {
  inset: 22px;
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(23, 25, 22, 0.04) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(180deg, rgba(23, 25, 22, 0.035) 1px, transparent 1px) 0 0 / 54px 54px;
  opacity: 0.45 !important;
  visibility: visible !important;
}

.ks-wall span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(23, 25, 22, 0.16);
}

.ks-wall span:nth-child(1) { left: 18%; top: 18%; }
.ks-wall span:nth-child(2) { right: 18%; top: 20%; }
.ks-wall span:nth-child(3) { left: 50%; bottom: 17%; }

.ks-printer {
  left: calc(50% - 82px);
  top: 36px;
  width: 164px;
  height: 72px;
  border-radius: 24px;
  background: #171916;
  box-shadow: 0 24px 46px rgba(23, 25, 22, 0.18);
}

.ks-printer i {
  left: 24px;
  right: 24px;
  top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.ks-printer b {
  left: 28px;
  right: 28px;
  bottom: 14px;
  height: 12px;
  border-radius: 999px;
  background: var(--lime);
}

.ks-printer em {
  left: 50%;
  bottom: -8px;
  width: 90px;
  height: 14px;
  border-radius: 0 0 10px 10px;
  background: #fff;
  transform: translateX(-50%);
}

.ks-receipt {
  left: calc(50% - 56px);
  top: 92px;
  width: 112px;
  height: 150px;
  border-radius: 10px 10px 20px 20px;
  background:
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(23, 25, 22, 0.07) 21px 24px),
    #fff;
  box-shadow: 0 28px 58px rgba(23, 25, 22, 0.14);
}

.ks-receipt i {
  left: 18px;
  right: 18px;
  height: 6px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.12);
}

.ks-receipt i:nth-child(1) { top: 30px; }
.ks-receipt i:nth-child(2) { top: 54px; right: 34px; }
.ks-receipt i:nth-child(3) { top: 78px; right: 24px; }
.ks-receipt b {
  left: 50%;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border: 3px solid #171916;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-10deg);
}

.ks-board {
  left: calc(50% - 116px);
  bottom: 38px;
  width: 232px;
  height: 112px;
  border-radius: 40px;
  background: linear-gradient(135deg, #fff, #f5f8ef);
  box-shadow: 0 28px 56px rgba(23, 25, 22, 0.09);
}

.ks-board span {
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.09);
}

.ks-board span:nth-child(1) { left: 40px; top: 36px; }
.ks-board span:nth-child(2) { right: 38px; top: 55px; }
.ks-board span:nth-child(3) { left: 76px; bottom: 28px; }

.ks-knife {
  left: 58%;
  top: 74px;
  width: 118px;
  height: 14px;
  border-radius: 999px 12px 12px 999px;
  background: linear-gradient(90deg, #171916 0 22%, #f8faf5 22%);
  box-shadow: 0 16px 32px rgba(23, 25, 22, 0.12);
  transform-origin: 16px 50%;
}

.ks-fruits {
  left: calc(50% - 124px);
  top: 112px;
  width: 248px;
  height: 118px;
}

.ks-fruits i {
  border-radius: 999px;
  box-shadow: inset -9px -10px 0 rgba(23, 25, 22, 0.08), 0 16px 26px rgba(23, 25, 22, 0.08);
}

.fruit-a { left: 56px; top: 38px; width: 46px; height: 46px; background: #ff6460; }
.fruit-b { left: 118px; top: 24px; width: 56px; height: 56px; background: #ffc83f; }
.fruit-c { right: 42px; top: 46px; width: 40px; height: 40px; background: #80d36b; }
.fruit-d { left: 92px; bottom: 0; width: 28px; height: 28px; background: #be4be8; }

.ks-juice {
  left: calc(50% - 78px);
  top: 82px;
  width: 156px;
  height: 148px;
}

.ks-juice i {
  left: 28px;
  top: 6px;
  width: 76px;
  height: 94px;
  border-radius: 28px 28px 34px 34px;
  background: linear-gradient(180deg, #ffcf4a, #ff7563);
  box-shadow: 0 22px 34px rgba(255, 117, 99, 0.18);
}

.ks-juice b {
  right: 20px;
  bottom: 20px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.92), #ffda4f, #ff6d64, rgba(255, 255, 255, 0.92));
}

.ks-milk {
  left: 108px;
  top: 62px;
  width: 104px;
  height: 128px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, #fff, #f6f2e6);
  box-shadow: 0 22px 42px rgba(23, 25, 22, 0.11);
}

.ks-milk i {
  left: 0;
  top: -22px;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 32px solid #fff;
}

.ks-milk b {
  left: 22px;
  right: 22px;
  top: 58px;
  height: 10px;
  border-radius: 999px;
  background: rgba(23, 25, 22, 0.12);
}

.ks-milk em {
  right: -46px;
  top: 68px;
  width: 88px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  transform-origin: 0 50%;
}

.ks-teapot {
  right: 96px;
  top: 72px;
  width: 118px;
  height: 78px;
  border-radius: 34px 42px 34px 34px;
  background: linear-gradient(180deg, #fff, #f7f2e1);
  box-shadow: 0 20px 42px rgba(23, 25, 22, 0.1);
}

.ks-teapot i {
  right: -34px;
  top: 26px;
  width: 50px;
  height: 13px;
  border-radius: 999px;
  background: #171916;
}

.ks-teapot b {
  right: -76px;
  top: 44px;
  width: 98px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9a348, rgba(217, 163, 72, 0));
}

.ks-shaker {
  left: calc(50% - 46px);
  top: 74px;
  width: 92px;
  height: 152px;
  border-radius: 28px 28px 36px 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 222, 83, 0.64), rgba(255, 93, 94, 0.52));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 28px 54px rgba(23, 25, 22, 0.14);
}

.ks-shaker i {
  left: 12px;
  right: 12px;
  top: -18px;
  height: 26px;
  border-radius: 18px 18px 8px 8px;
  background: #171916;
}

.ks-shaker b {
  left: 16px;
  right: 16px;
  bottom: 28px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.ks-shaker em {
  left: 26px;
  bottom: 54px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
}

.ks-ice {
  left: calc(50% - 80px);
  top: 34px;
  width: 160px;
  height: 70px;
}

.ks-ice i {
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(18, 107, 68, 0.1), 0 12px 22px rgba(24, 26, 22, 0.08);
}

.ks-ice i:nth-child(1) { left: 26px; top: 8px; }
.ks-ice i:nth-child(2) { left: 70px; top: 24px; }
.ks-ice i:nth-child(3) { right: 22px; top: 4px; }

.ks-cup {
  left: calc(50% - 46px);
  bottom: 48px;
  width: 92px;
  height: 142px;
  border-radius: 24px 24px 36px 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 221, 78, 0.4) 0 40%, rgba(255, 111, 94, 0.55) 40%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.74), 0 28px 54px rgba(23, 25, 22, 0.13);
}

.ks-cup i {
  left: 14px;
  right: 14px;
  top: -10px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.ks-cup b {
  left: 25px;
  bottom: 26px;
  width: 42px;
  height: 30px;
  border-radius: 50%;
  background: rgba(23, 25, 22, 0.08);
}

.ks-cup em {
  left: 50%;
  top: -52px;
  width: 11px;
  height: 82px;
  border-radius: 999px;
  background: #171916;
  transform-origin: 50% 100%;
}

.ks-garnish {
  left: calc(50% - 72px);
  top: 44px;
  width: 144px;
  height: 72px;
}

.ks-garnish i {
  border-radius: 999px 999px 999px 6px;
  transform-origin: 50% 100%;
}

.ks-garnish i:nth-child(1) { left: 36px; top: 24px; width: 52px; height: 18px; background: #7ccf68; }
.ks-garnish i:nth-child(2) { left: 74px; top: 8px; width: 44px; height: 16px; background: #ff7065; }
.ks-garnish i:nth-child(3) { right: 30px; top: 34px; width: 36px; height: 12px; background: #f6d64e; }

.ks-egg {
  left: 130px;
  top: 88px;
  width: 84px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 22px 42px rgba(23, 25, 22, 0.12);
}

.ks-egg i {
  left: 26px;
  top: 34px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffc84f;
}

.ks-egg b {
  left: 42px;
  top: -30px;
  width: 2px;
  height: 164px;
  background: rgba(23, 25, 22, 0.1);
  transform: rotate(34deg);
}

.ks-whisk {
  right: 126px;
  top: 58px;
  width: 104px;
  height: 156px;
}

.ks-whisk i {
  left: 42px;
  top: 0;
  width: 12px;
  height: 110px;
  border-radius: 999px;
  background: #171916;
}

.ks-whisk b {
  left: 20px;
  bottom: 0;
  width: 64px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(23, 25, 22, 0.28);
  box-shadow: inset 12px 0 0 rgba(23, 25, 22, 0.08), inset -12px 0 0 rgba(23, 25, 22, 0.08);
}

.ks-flour {
  left: calc(50% - 70px);
  top: 58px;
  width: 140px;
  height: 136px;
}

.ks-flour i {
  left: 34px;
  top: 4px;
  width: 72px;
  height: 86px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(23, 25, 22, 0.1);
}

.ks-flour b {
  left: 48px;
  bottom: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1e4c6;
  box-shadow: 32px -8px 0 rgba(241, 228, 198, 0.72), -20px -12px 0 rgba(241, 228, 198, 0.58);
}

.ks-oven {
  left: calc(50% - 92px);
  bottom: 44px;
  width: 184px;
  height: 118px;
  border-radius: 30px;
  background: #171916;
  box-shadow: 0 28px 58px rgba(23, 25, 22, 0.18);
}

.ks-oven i {
  left: 22px;
  right: 22px;
  top: 24px;
  height: 56px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 65%, #ffc94f, #f17452 58%, rgba(255, 255, 255, 0.12));
}

.ks-oven b {
  left: 35px;
  right: 35px;
  bottom: 18px;
  height: 8px;
  border-radius: 999px;
  background: var(--lime);
}

.ks-cake {
  left: calc(50% - 84px);
  bottom: 50px;
  width: 168px;
  height: 104px;
  border-radius: 52px 52px 36px 36px;
  background: linear-gradient(180deg, #fff2c4 0 46%, #d8a36c 46%);
  box-shadow: 0 28px 56px rgba(23, 25, 22, 0.13);
}

.ks-cake i {
  left: 0;
  right: 0;
  top: 22px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.ks-cake b,
.ks-cake em {
  border-radius: 50%;
  background: #ff6862;
}

.ks-cake b { left: 58px; top: 10px; width: 24px; height: 24px; }
.ks-cake em { right: 48px; top: 16px; width: 18px; height: 18px; }

.ks-cream {
  left: calc(50% - 102px);
  top: 68px;
  width: 204px;
  height: 92px;
}

.ks-cream i {
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(23, 25, 22, 0.1);
}

.ks-cream b {
  right: 0;
  top: 8px;
  width: 86px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
  transform: rotate(22deg);
}

.ks-bag {
  left: calc(50% - 76px);
  bottom: 50px;
  width: 152px;
  height: 124px;
  border-radius: 20px 20px 30px 30px;
  background: #fff;
  box-shadow: 0 28px 56px rgba(23, 25, 22, 0.13);
}

.ks-bag i {
  left: 42px;
  right: 42px;
  top: -22px;
  height: 42px;
  border: 8px solid #171916;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.ks-bag b {
  left: 34px;
  right: 34px;
  top: 58px;
  height: 10px;
  border-radius: 999px;
  background: var(--lime);
}

.ks-route {
  left: 72px;
  right: 72px;
  top: 88px;
  height: 116px;
}

.ks-route i {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(18, 107, 68, 0.44), transparent);
}

.ks-route i:nth-child(1) { left: 0; top: 18px; width: 46%; }
.ks-route i:nth-child(2) { right: 0; top: 56px; width: 58%; }
.ks-route i:nth-child(3) { left: 18%; bottom: 12px; width: 62%; }
.ks-route b {
  right: 12px;
  top: 36px;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 4px;
  background: var(--green);
  transform: rotate(-45deg);
}

.ks-rider {
  left: 50px;
  bottom: 54px;
  width: 108px;
  height: 86px;
}

.ks-rider i {
  left: 18px;
  bottom: 12px;
  width: 64px;
  height: 42px;
  border-radius: 18px;
  background: #171916;
}

.ks-rider b,
.ks-rider em {
  bottom: 0;
  width: 26px;
  height: 26px;
  border: 5px solid #171916;
  border-radius: 50%;
  background: #fff;
}

.ks-rider b { left: 4px; }
.ks-rider em { right: 8px; }

.ks-door {
  right: 86px;
  bottom: 46px;
  width: 108px;
  height: 156px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fff, #eff5e8);
  box-shadow: 0 26px 52px rgba(23, 25, 22, 0.1);
  transform-origin: 0 50%;
}

.ks-door i {
  left: 18px;
  right: 18px;
  top: 18px;
  height: 46px;
  border-radius: 18px;
  background: rgba(215, 255, 85, 0.5);
}

.ks-door b {
  right: 18px;
  top: 82px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #171916;
}

.delivery-cinema[data-mode^="receipt"] .ks-printer,
.delivery-cinema[data-mode^="receipt"] .ks-receipt,
.delivery-cinema[data-mode^="fruit"] .ks-board,
.delivery-cinema[data-mode^="fruit"] .ks-fruits,
.delivery-cinema[data-mode^="fruit"] .ks-knife,
.delivery-cinema[data-mode="fruit-juice"] .ks-juice,
.delivery-cinema[data-mode="fruit-pour"] .ks-juice,
.delivery-cinema[data-mode="fruit-pour"] .ks-shaker,
.delivery-cinema[data-mode="tea-pour"] .ks-teapot,
.delivery-cinema[data-mode="tea-pour"] .ks-shaker,
.delivery-cinema[data-mode="milk-pour"] .ks-milk,
.delivery-cinema[data-mode="milk-pour"] .ks-shaker,
.delivery-cinema[data-mode="ice-drop"] .ks-ice,
.delivery-cinema[data-mode="ice-drop"] .ks-shaker,
.delivery-cinema[data-mode^="shake"] .ks-shaker,
.delivery-cinema[data-mode="cup-pour"] .ks-shaker,
.delivery-cinema[data-mode="cup-pour"] .ks-cup,
.delivery-cinema[data-mode^="garnish"] .ks-cup,
.delivery-cinema[data-mode^="garnish"] .ks-garnish,
.delivery-cinema[data-mode="cake-egg"] .ks-egg,
.delivery-cinema[data-mode="cake-whisk"] .ks-whisk,
.delivery-cinema[data-mode="cake-whisk"] .ks-flour,
.delivery-cinema[data-mode="cake-bake"] .ks-oven,
.delivery-cinema[data-mode="cake-cream"] .ks-cake,
.delivery-cinema[data-mode="cake-cream"] .ks-cream,
.delivery-cinema[data-mode^="cake-decor"] .ks-cake,
.delivery-cinema[data-mode^="cake-decor"] .ks-garnish,
.delivery-cinema[data-mode="bag"] .ks-bag,
.delivery-cinema[data-mode="route"] .ks-route,
.delivery-cinema[data-mode="rider"] .ks-route,
.delivery-cinema[data-mode="rider"] .ks-rider,
.delivery-cinema[data-mode="arrive"] .ks-rider,
.delivery-cinema[data-mode="arrive"] .ks-door {
  opacity: 1 !important;
  visibility: visible !important;
  animation-play-state: running !important;
}

.delivery-cinema[data-mode="receipt-print"] .ks-receipt { animation: receiptPrint 4.8s var(--silk) infinite; }
.delivery-cinema[data-mode="receipt-wall"] .ks-receipt { animation: receiptToWall 4.8s var(--silk) infinite; }
.delivery-cinema[data-mode^="fruit-cut"] .ks-knife { animation: knifeSlice 3.2s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
.delivery-cinema[data-mode^="fruit-cut"] .ks-fruits i { animation: fruitPop 3.2s var(--snap) infinite; }
.delivery-cinema[data-mode="fruit-cut-b"] .ks-fruits i { animation-name: fruitBurst; }
.delivery-cinema[data-mode="fruit-juice"] .ks-juice { animation: juiceSpin 4s var(--silk) infinite; }
.delivery-cinema[data-mode="fruit-pour"] .ks-juice { animation: pourTilt 4.6s var(--silk) infinite; }
.delivery-cinema[data-mode="tea-pour"] .ks-teapot { animation: pourTiltTea 4.2s var(--silk) infinite; }
.delivery-cinema[data-mode="milk-pour"] .ks-milk { animation: cartonPour 4.6s var(--silk) infinite; }
.delivery-cinema[data-mode="ice-drop"] .ks-ice i { animation: kitchenIceDrop 3.6s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
.delivery-cinema[data-mode^="shake"] .ks-shaker { animation: kitchenShake 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.delivery-cinema[data-mode="shake-b"] .ks-shaker { animation-name: kitchenShakeFlip; }
.delivery-cinema[data-mode="cup-pour"] .ks-shaker { animation: shakerPour 4.4s var(--silk) infinite; }
.delivery-cinema[data-mode="cup-pour"] .ks-cup { animation: cupFill 4.4s var(--silk) infinite; }
.delivery-cinema[data-mode^="garnish"] .ks-garnish i { animation: garnishDrop 3.6s var(--snap) infinite; }
.delivery-cinema[data-mode="cake-egg"] .ks-egg { animation: eggCrack 4.2s var(--silk) infinite; }
.delivery-cinema[data-mode="cake-whisk"] .ks-whisk { animation: whiskSpin 1.8s linear infinite; }
.delivery-cinema[data-mode="cake-whisk"] .ks-flour { animation: flourPuff 4s var(--silk) infinite; }
.delivery-cinema[data-mode="cake-bake"] .ks-oven i { animation: ovenGlow 2.8s ease-in-out infinite; }
.delivery-cinema[data-mode="cake-cream"] .ks-cream { animation: creamSwipe 4.2s var(--silk) infinite; }
.delivery-cinema[data-mode^="cake-decor"] .ks-cake { animation: cakeBounce 4.2s var(--snap) infinite; }
.delivery-cinema[data-mode^="cake-decor"] .ks-garnish i { animation: garnishDrop 3.6s var(--snap) infinite; }
.delivery-cinema[data-mode="bag"] .ks-bag { animation: bagBloom 4.8s var(--snap) infinite; }
.delivery-cinema[data-mode="route"] .ks-route i { animation: routeDraw 3.2s linear infinite; }
.delivery-cinema[data-mode="rider"] .ks-rider { animation: kitchenRider 4.8s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
.delivery-cinema[data-mode="arrive"] .ks-door { animation: kitchenDoor 4s var(--silk) infinite; }
.delivery-cinema[data-mode="arrive"] .ks-rider { animation: riderKnock 4s var(--silk) infinite; }

@keyframes receiptPrint {
  0% { opacity: 0; transform: translateY(-80px) scaleY(0.3); }
  24% { opacity: 1; transform: translateY(-8px) scaleY(0.72); }
  54% { transform: translateY(36px) scaleY(1); }
  78% { transform: translateY(24px) rotate(1deg); }
  100% { opacity: 0; transform: translateY(92px) rotate(-3deg); }
}

@keyframes receiptToWall {
  0% { opacity: 0; transform: translate3d(-120px, 50px, 0) rotate(-12deg) scale(0.78); }
  28% { opacity: 1; transform: translate3d(0, -12px, 0) rotate(5deg) scale(1.05); }
  52% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(0.98); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes knifeSlice {
  0%, 100% { transform: translate3d(20px, -8px, 0) rotate(-28deg); }
  35% { transform: translate3d(-110px, 58px, 0) rotate(-18deg); }
  54% { transform: translate3d(-70px, 24px, 0) rotate(-34deg); }
  72% { transform: translate3d(-142px, 72px, 0) rotate(-16deg); }
}

@keyframes fruitPop {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-22px) scale(1.12, 0.9); }
  58% { transform: translateY(8px) scale(0.88, 1.12); }
}

@keyframes fruitBurst {
  0%, 100% { transform: translate(0, 0) scale(1); filter: saturate(1); }
  42% { transform: translate(var(--x, 12px), -28px) scale(1.18); filter: saturate(1.45); }
  68% { transform: translate(calc(var(--x, 12px) * -0.6), 8px) scale(0.95); }
}

@keyframes juiceSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(10deg) scale(1.04); }
}

@keyframes pourTilt {
  0%, 100% { transform: translateX(-24px) rotate(0deg); }
  42% { transform: translateX(24px) rotate(28deg); }
  70% { transform: translateX(12px) rotate(18deg); }
}

@keyframes pourTiltTea {
  0%, 100% { transform: translateX(20px) rotate(0deg); }
  42% { transform: translateX(-12px) rotate(-24deg); }
  72% { transform: translateX(0) rotate(-12deg); }
}

@keyframes cartonPour {
  0%, 100% { transform: translateX(-10px) rotate(0deg); }
  36% { transform: translateX(34px) rotate(24deg); }
  72% { transform: translateX(18px) rotate(12deg); }
}

@keyframes kitchenIceDrop {
  0%, 100% { opacity: 0; transform: translateY(-52px) rotate(-20deg) scale(0.7); }
  25% { opacity: 1; }
  66% { opacity: 1; transform: translateY(96px) rotate(22deg) scale(1); }
  82% { opacity: 0; transform: translateY(112px) rotate(22deg) scale(0.45); }
}

@keyframes kitchenShake {
  0%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translate(-20px, -8px) rotate(-18deg); }
  38% { transform: translate(18px, 6px) rotate(15deg); }
  58% { transform: translate(-12px, 8px) rotate(-12deg); }
  78% { transform: translate(10px, -5px) rotate(10deg); }
}

@keyframes kitchenShakeFlip {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translate(18px, -18px) rotate(24deg); }
  58% { transform: translate(-18px, 14px) rotate(-22deg); }
  76% { transform: translate(4px, -8px) rotate(8deg); }
}

@keyframes shakerPour {
  0%, 100% { transform: translate(-42px, 0) rotate(0); }
  46% { transform: translate(-20px, -12px) rotate(-34deg); }
  72% { transform: translate(-18px, -4px) rotate(-22deg); }
}

@keyframes cupFill {
  0%, 26% { transform: translateX(44px) scale(0.96); filter: saturate(0.8); }
  64% { transform: translateX(44px) scale(1.02); filter: saturate(1.25); }
  100% { transform: translateX(44px) scale(1); filter: saturate(1); }
}

@keyframes garnishDrop {
  0%, 100% { opacity: 0; transform: translateY(-42px) rotate(-30deg) scale(0.7); }
  34% { opacity: 1; transform: translateY(20px) rotate(16deg) scale(1.08); }
  64% { opacity: 1; transform: translateY(8px) rotate(-4deg) scale(1); }
}

@keyframes eggCrack {
  0%, 100% { transform: rotate(0) scale(1); }
  36% { transform: rotate(-16deg) scale(1.08, 0.92); }
  58% { transform: rotate(12deg) translateY(20px) scale(0.96, 1.06); }
}

@keyframes whiskSpin {
  to { transform: rotate(360deg); }
}

@keyframes flourPuff {
  0%, 100% { transform: translateY(0) scale(0.94); opacity: 0.8; }
  48% { transform: translateY(22px) scale(1.08); opacity: 1; }
}

@keyframes ovenGlow {
  50% { filter: brightness(1.28) saturate(1.35); transform: scale(1.04); }
}

@keyframes creamSwipe {
  0%, 100% { transform: translateX(-34px) rotate(-6deg); }
  46% { transform: translateX(34px) rotate(8deg); }
  72% { transform: translateX(8px) rotate(0); }
}

@keyframes cakeBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-10px) scale(1.04, 0.98); }
  64% { transform: translateY(4px) scale(0.98, 1.03); }
}

@keyframes routeDraw {
  0% { transform: translateX(-28%); opacity: 0; }
  46% { opacity: 1; }
  100% { transform: translateX(28%); opacity: 0; }
}

@keyframes kitchenRider {
  0% { opacity: 0; transform: translate3d(-80px, 24px, 0) rotate(-8deg); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: translate3d(280px, -12px, 0) rotate(4deg); }
  100% { opacity: 0; transform: translate3d(380px, 12px, 0) rotate(0); }
}

@keyframes kitchenDoor {
  0%, 100% { transform: perspective(300px) rotateY(0); }
  42% { transform: perspective(300px) rotateY(-20deg); }
  68% { transform: perspective(300px) rotateY(-8deg); }
}

@keyframes riderKnock {
  0% { opacity: 0; transform: translate3d(-70px, 10px, 0); }
  35% { opacity: 1; transform: translate3d(200px, 0, 0); }
  58% { transform: translate3d(210px, -6px, 0) rotate(-5deg); }
  74% { transform: translate3d(210px, 0, 0) rotate(0); }
  100% { opacity: 0; transform: translate3d(210px, 0, 0); }
}

@media (max-width: 640px) {
  .delivery-cinema {
    height: 270px;
  }

  .kitchen-scene {
    transform: scale(0.86);
    transform-origin: 50% 54%;
  }
}

.delivery-cinema .delivery-ae > span {
  opacity: 0 !important;
  visibility: hidden !important;
  animation-play-state: paused !important;
}

/* Refined kitchen art direction: calmer palette, cleaner geometry, safer framing. */
.delivery-cinema {
  --k-ink: #172018;
  --k-soft-ink: rgba(23, 32, 24, 0.14);
  --k-paper: #fffef8;
  --k-cream: #f7efe1;
  --k-lime: #d9ff55;
  --k-green: #1a7250;
  --k-yellow: #ffd45a;
  --k-coral: #ff7167;
  --k-berry: #b84fd9;
  --k-shadow: 0 22px 48px rgba(23, 32, 24, 0.13);
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 255, 85, 0.2), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(26, 114, 80, 0.12), transparent 34%),
    linear-gradient(150deg, rgba(255, 254, 248, 0.94), rgba(239, 247, 237, 0.9)) !important;
}

.kitchen-scene {
  inset: 14px 18px 18px;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
    radial-gradient(circle at 50% 120%, rgba(23, 32, 24, 0.08), transparent 46%);
}

.ks-wall {
  inset: 0 !important;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(23, 32, 24, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, rgba(23, 32, 24, 0.03) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, rgba(255, 254, 248, 0.72), rgba(245, 248, 238, 0.44));
}

.ks-wall::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 36px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(23, 32, 24, 0.12), transparent 68%);
  filter: blur(2px);
}

.ks-printer,
.ks-receipt,
.ks-board,
.ks-juice i,
.ks-milk,
.ks-teapot,
.ks-shaker,
.ks-cup,
.ks-egg,
.ks-oven,
.ks-cake,
.ks-bag,
.ks-door {
  box-shadow: var(--k-shadow) !important;
}

.ks-printer {
  top: 42px !important;
  width: 148px !important;
  height: 64px !important;
  left: calc(50% - 74px) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, #202821, #111811) !important;
}

.ks-printer b,
.ks-bag b,
.ks-oven b {
  background: var(--k-lime) !important;
}

.ks-receipt {
  top: 88px !important;
  width: 104px !important;
  height: 138px !important;
  left: calc(50% - 52px) !important;
  border-radius: 9px 9px 18px 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 247, 0.92)),
    repeating-linear-gradient(180deg, transparent 0 19px, rgba(23, 32, 24, 0.06) 20px 23px) !important;
}

.ks-board {
  left: calc(50% - 126px) !important;
  bottom: 36px !important;
  width: 252px !important;
  height: 118px !important;
  border-radius: 42px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 238, 0.88)) !important;
}

.ks-knife {
  top: 78px !important;
  width: 106px !important;
  height: 12px !important;
  background: linear-gradient(90deg, var(--k-ink) 0 24%, #f8faf5 24% 88%, rgba(23, 32, 24, 0.2) 88%) !important;
}

.ks-fruits {
  left: calc(50% - 108px) !important;
  top: 120px !important;
  width: 216px !important;
  height: 96px !important;
}

.ks-fruits i {
  box-shadow:
    inset -8px -10px 0 rgba(23, 32, 24, 0.08),
    inset 7px 8px 0 rgba(255, 255, 255, 0.22),
    0 14px 24px rgba(23, 32, 24, 0.08) !important;
}

.fruit-a { background: linear-gradient(135deg, #ff8a78, var(--k-coral)) !important; }
.fruit-b { background: linear-gradient(135deg, #ffe082, var(--k-yellow)) !important; }
.fruit-c { background: linear-gradient(135deg, #a5e780, #65c16c) !important; }
.fruit-d { background: linear-gradient(135deg, #d588ff, var(--k-berry)) !important; }

.ks-juice {
  left: calc(50% - 72px) !important;
  top: 86px !important;
  width: 144px !important;
  height: 140px !important;
}

.ks-juice i {
  width: 68px !important;
  height: 88px !important;
  border-radius: 24px 24px 32px 32px !important;
  background: linear-gradient(180deg, #ffd967, #ff876f 58%, #d4548d) !important;
}

.ks-juice b {
  width: 76px !important;
  height: 76px !important;
  background: conic-gradient(from 24deg, #fff, #ffd967, #ff7167, #b84fd9, #fff) !important;
  box-shadow: 0 18px 34px rgba(255, 113, 103, 0.14);
}

.ks-milk {
  left: 118px !important;
  top: 72px !important;
  width: 92px !important;
  height: 118px !important;
  border-radius: 18px 18px 13px 13px !important;
  background:
    linear-gradient(180deg, #fff, var(--k-cream)) !important;
}

.ks-milk em {
  width: 76px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)) !important;
}

.ks-teapot {
  right: 108px !important;
  top: 82px !important;
  width: 106px !important;
  height: 70px !important;
  border-radius: 32px 38px 32px 32px !important;
}

.ks-teapot b {
  width: 82px !important;
  background: linear-gradient(90deg, #c99342, rgba(201, 147, 66, 0)) !important;
}

.ks-shaker {
  top: 78px !important;
  width: 84px !important;
  height: 142px !important;
  left: calc(50% - 42px) !important;
  border-radius: 24px 24px 34px 34px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.3)),
    linear-gradient(180deg, rgba(255, 217, 93, 0.6), rgba(255, 113, 103, 0.54)) !important;
}

.ks-ice {
  top: 38px !important;
  height: 66px !important;
}

.ks-ice i {
  width: 21px !important;
  height: 21px !important;
  border-radius: 7px !important;
  box-shadow:
    inset 0 0 0 1px rgba(26, 114, 80, 0.12),
    inset 6px 6px 0 rgba(255, 255, 255, 0.55),
    0 12px 20px rgba(23, 32, 24, 0.08) !important;
}

.ks-cup {
  width: 86px !important;
  height: 134px !important;
  left: calc(50% - 43px) !important;
  bottom: 52px !important;
  border-radius: 24px 24px 34px 34px !important;
}

.ks-garnish {
  top: 58px !important;
}

.ks-garnish i {
  box-shadow: inset 5px 5px 0 rgba(255, 255, 255, 0.2), 0 10px 16px rgba(23, 32, 24, 0.08);
}

.ks-egg {
  left: 142px !important;
  top: 94px !important;
  width: 76px !important;
  height: 94px !important;
}

.ks-whisk {
  right: 142px !important;
  top: 62px !important;
  transform-origin: 50% 65%;
}

.ks-flour {
  top: 76px !important;
}

.ks-oven {
  width: 168px !important;
  height: 108px !important;
  left: calc(50% - 84px) !important;
  bottom: 48px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, #202821, #111811) !important;
}

.ks-cake {
  width: 150px !important;
  height: 96px !important;
  left: calc(50% - 75px) !important;
  bottom: 58px !important;
  background:
    linear-gradient(180deg, #fff6ca 0 43%, #d8a16b 43% 72%, #bf8258 72%) !important;
}

.ks-cream {
  left: calc(50% - 90px) !important;
  width: 180px !important;
}

.ks-bag {
  width: 140px !important;
  height: 114px !important;
  left: calc(50% - 70px) !important;
  bottom: 56px !important;
}

.ks-route {
  left: 86px !important;
  right: 86px !important;
  top: 92px !important;
}

.ks-rider {
  left: 56px !important;
  bottom: 60px !important;
}

.ks-door {
  right: 104px !important;
  bottom: 52px !important;
  width: 96px !important;
  height: 142px !important;
}

.delivery-cinema.motion-swap .kitchen-scene {
  animation: kitchenSceneSettle 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes kitchenSceneSettle {
  0% { transform: translateY(6px) scale(0.992); filter: blur(2px); }
  58% { transform: translateY(-2px) scale(1.004); filter: blur(0); }
  100% { transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 640px) {
  .kitchen-scene {
    inset: 12px 12px 16px;
    transform: scale(0.82);
    transform-origin: 50% 54%;
  }
}