.login-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3.4vw, 56px);
  background:
    radial-gradient(ellipse at 50% 25%, #125476 0%, transparent 56%),
    linear-gradient(145deg, #032e49, #061c30 78%);
}
.login-stage {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 380px) minmax(0, 1fr);
  grid-template-areas: "brand brand brand" "right form left";
  grid-template-rows: auto auto;
  gap: clamp(12px, 2.2vw, 30px);
  align-items: center;
  margin: 0;
  padding: 0;
}
.login-wordmark {
  grid-area: brand;
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  color: var(--bg);
  margin: 0;
}
.login-wordmark img { display: block; width: 70px; height: 70px; }
.login-location {
  color: #ecd4a4;
  font: 600 10px/1.4 Arial, sans-serif;
  letter-spacing: .22em;
  margin: 0;
}
#brand-title {
  margin: 8px 0 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.14;
  text-shadow: 0 3px 28px #061525a0;
  animation: brand-in .85s cubic-bezier(.2,.7,.2,1) both;
}
#brand-title span {
  display: block;
  color: #f0ce91;
  font-size: .53em;
  margin-top: 7px;
  animation: brand-in 1s .23s cubic-bezier(.2,.7,.2,1) both;
}
.drink-card {
  position: relative;
  margin: 0;
  isolation: isolate;
  padding-block-start: 24%;
  animation: drink-in .95s cubic-bezier(.2,.7,.2,1) both;
}
.drink-card--right { grid-area: right; --slide: 18px; }
.drink-card--left { grid-area: left; --slide: -18px; animation-delay: .12s; }
.drink-card img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px #00122195); }
.drink-pour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #3218097a);
}
.cream-stream {
  opacity: 0;
  animation: cream-pour 1.85s .38s cubic-bezier(.3,.1,.55,1) both;
}
.cream-shine {
  fill: none;
  stroke: #fffdf4;
  stroke-width: .48;
  stroke-linecap: round;
  opacity: .78;
}
.cream-ripple, .cream-splash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cream-ripple {
  fill: #fbecd5;
  stroke: #fff9ed;
  stroke-width: .16;
  animation: cream-ripple 1.05s 1.05s ease-out both;
}
.cream-splash { animation: cream-splash .48s 1.07s ease-out both; }
.drink-card--left .cream-stream { animation-delay: .56s; }
.drink-card--left .cream-ripple { animation-delay: 1.23s; }
.drink-card--left .cream-splash { animation-delay: 1.25s; }
@keyframes cream-ripple {
  0% { opacity: 0; transform: scale(.38); }
  27% { opacity: .88; }
  100% { opacity: 0; transform: scale(1.55,.96); }
}
@keyframes cream-splash {
  0% { opacity: 0; transform: translateY(2px) scale(.55); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-4px) scale(1.12); }
}
.login-panel {
  grid-area: form;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2.4vw, 25px);
  border-radius: 19px;
  box-shadow: 0 14px 34px #00192b70;
}
.login-panel h2 { font-size: 21px; }
.login-panel .hint { margin: 5px 0 14px; }
.login-panel form { display: grid; gap: 11px; }
.login-panel input { font-size: 16px; min-height: 42px; }
.login-panel button { min-height: 44px; }
.login-panel #error { margin: 0; }
@keyframes brand-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drink-in {
  from { opacity: .45; transform: translateX(var(--slide)) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cream-pour {
  0% { clip-path: inset(0 0 100%); opacity: 0; }
  10% { opacity: 1; }
  43%, 66% { clip-path: inset(0); opacity: 1; }
  92% { opacity: .95; }
  100% { clip-path: inset(29% 0 0); opacity: 0; }
}
@media (max-width: 680px) {
  .login-stage {
    width: min(100%, 420px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "brand brand" "right left" "form form";
    grid-template-rows: auto;
    gap: 14px;
  }
  .login-wordmark img { width: 59px; height: 59px; }
  .login-location { font-size: 9px; }
  #brand-title { font-size: clamp(29px, 8vw, 36px); margin-top: 4px; }
  #brand-title span { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .drink-card, .cream-stream, .cream-ripple, .cream-splash, #brand-title, #brand-title span { animation: none; }
}