:root {
  --bg: #f3f0ec;
  --bg-deep: #e7e1da;
  --ink: #0a0a0a;
  --ink-soft: #5f5a55;
  --black: #000000;
  --white: #ffffff;
  --gray: #8a8a8a;
  --page-max: 430px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --hit: 44px;
  --motion-fast: 150ms;
  --motion: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: ease-out;
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.12);
  --img-outline: rgba(0, 0, 0, 0.1);
  --glass-bg: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.64) 0%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.16) 100%
  );
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --glass-shadow:
    0 14px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  --glass-blur: blur(28px) saturate(180%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

html,
body {
  min-height: 100%;
  background: #1a1512;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  font-family: "Montserrat", sans-serif;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img {
  outline: 1px solid var(--img-outline);
  outline-offset: -1px;
}

@media (min-width: 768px) {
  :root {
    --page-max: 760px;
  }
}

@media (min-width: 1100px) {
  :root {
    --page-max: 1080px;
  }
}

/* Shared liquid glass surface */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(90% 60% at 85% 100%, rgba(255, 255, 255, 0.12), transparent 50%);
}

.glass > * {
  position: relative;
  z-index: 1;
}

.glass--interactive {
  transition-property: transform, box-shadow, background-color, border-color;
  transition-duration: var(--motion);
  transition-timing-function: var(--ease-out);
}

.glass--interactive:active {
  transform: scale(0.96);
}

.page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  max-width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 15% 10%, rgba(224, 164, 106, 0.35), transparent 55%),
    radial-gradient(ellipse 80% 50% at 90% 30%, rgba(92, 58, 36, 0.22), transparent 50%),
    radial-gradient(ellipse 70% 45% at 50% 85%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(165deg, #f7f2ec 0%, #ebe4dc 45%, #d9cfc4 100%);
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-top: max(36px, calc(env(safe-area-inset-top) + 24px));
  padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  animation: page-fade 0.7s var(--ease-soft) both;
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmosphere__wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
}

.atmosphere__wash--a {
  top: 14%;
  left: -18%;
  width: 260px;
  height: 260px;
  background: rgba(224, 164, 106, 0.35);
  animation: wash-drift 9s ease-in-out infinite;
}

.atmosphere__wash--b {
  right: -18%;
  bottom: 10%;
  width: 280px;
  height: 280px;
  background: rgba(59, 34, 20, 0.2);
  animation: wash-drift 11s ease-in-out 1s infinite reverse;
}

.atmosphere__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.atmosphere__ring {
  position: absolute;
  top: 46%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.atmosphere__ring--1 {
  width: min(320px, 84vw);
  height: min(320px, 84vw);
  animation: ring-in 1.2s var(--ease) 0.35s both, ring-spin 28s linear 1.5s infinite;
}

.atmosphere__ring--2 {
  width: min(390px, 102vw);
  height: min(390px, 102vw);
  border-style: dashed;
  opacity: 0.7;
  animation: ring-in 1.3s var(--ease) 0.5s both, ring-spin 40s linear 1.6s infinite reverse;
}

.atmosphere__ring--3 {
  width: min(250px, 66vw);
  height: min(250px, 66vw);
  border-color: rgba(196, 131, 74, 0.35);
  animation: ring-in 1.1s var(--ease) 0.45s both, pulse-ring 5s ease-in-out 1.6s infinite;
}

.atmosphere__bean {
  position: absolute;
  width: 18px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(135deg, #7a4a2a, #3b2214);
  box-shadow: inset -2px -1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0.45;
}

.atmosphere__bean::after {
  content: "";
  position: absolute;
  inset: 35% 20% auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(-18deg);
}

.atmosphere__bean--1 {
  top: 22%;
  left: 14%;
  animation: bean-in 0.9s var(--ease) 0.7s both, bean-float 6s ease-in-out 1.6s infinite;
}

.atmosphere__bean--2 {
  top: 28%;
  right: 12%;
  width: 14px;
  height: 10px;
  rotate: 28deg;
  animation: bean-in 0.9s var(--ease) 0.9s both, bean-float 7s ease-in-out 1.9s infinite reverse;
}

.atmosphere__bean--3 {
  bottom: 26%;
  left: 18%;
  width: 16px;
  height: 11px;
  rotate: -22deg;
  opacity: 0.35;
  animation: bean-in 0.9s var(--ease) 1.05s both, bean-float 8s ease-in-out 2.1s infinite;
}

.brand,
.visual,
.actions {
  position: relative;
  z-index: 1;
}

.brand {
  width: 100%;
  max-width: 340px;
  padding: 22px 20px 20px;
  border-radius: var(--radius-xl);
  text-align: center;
  animation: fade-up 0.8s var(--ease) 0.08s both;
}

.brand__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.88;
}

.brand__line {
  display: block;
  font-size: clamp(2.7rem, 12vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  color: #1c1008;
  text-wrap: balance;
  animation: title-in 1.05s var(--ease) 0.12s both;
}

.brand__line--accent {
  background: linear-gradient(120deg, #3b2214 10%, #c4834a 55%, #e0a46a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: title-in 1.05s var(--ease) 0.2s both, shimmer 5s ease-in-out 1.4s infinite;
  background-size: 180% 100%;
}

.brand__tagline {
  margin-top: 14px;
  max-width: 16rem;
  margin-inline: auto;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-wrap: pretty;
  animation: fade-up 0.9s var(--ease) 0.32s both;
}

.visual {
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
}

.visual__orbit {
  position: absolute;
  width: min(300px, 78vw);
  height: min(300px, 78vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.7) 0%, transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(196, 131, 74, 0.28) 0%, transparent 70%);
  filter: blur(2px);
  animation:
    glow-in 1.2s var(--ease) 0.25s both,
    glow-pulse 4.8s ease-in-out 1.45s infinite;
}

.visual__steam {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 70px;
  height: 90px;
  translate: -50% 0;
  z-index: 2;
  pointer-events: none;
}

.visual__steam span {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  filter: blur(3px);
  opacity: 0;
  animation: steam 3.4s ease-in-out infinite;
}

.visual__steam span:nth-child(1) {
  left: 12px;
  animation-delay: 1.5s;
}

.visual__steam span:nth-child(2) {
  left: 30px;
  width: 12px;
  animation-delay: 1.9s;
}

.visual__steam span:nth-child(3) {
  left: 48px;
  animation-delay: 2.3s;
}

.visual__frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 50%;
  animation: cup-in 1.2s var(--ease) 0.45s both;
}

.visual__image {
  display: block;
  width: min(250px, 68vw);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 22px 48px rgba(40, 20, 8, 0.28);
  animation: float 5.2s ease-in-out 1.7s infinite;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  padding: 16px;
  border-radius: var(--radius-xl);
  animation: fade-up 0.9s var(--ease) 0.55s both;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  min-height: 52px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(40, 24, 14, 0.92) 0%, rgba(20, 12, 8, 0.88) 100%);
  color: #fff8f0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 14px 32px rgba(20, 12, 8, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition-property: transform, box-shadow, filter, background-color;
  transition-duration: var(--motion);
  transition-timing-function: var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: btn-shine 3.8s ease-in-out 2s infinite;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 18px 36px rgba(20, 12, 8, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn:active {
  transform: scale(0.96);
}

.btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.btn__arrow {
  display: inline-block;
  transition-property: transform;
  transition-duration: var(--motion);
  transition-timing-function: var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.actions__hint {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
}

.actions__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 16, 8, 0.28);
  padding-bottom: 1px;
}

.actions__link:active {
  opacity: 0.7;
}

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

@keyframes title-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

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

@keyframes cup-in {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.7) rotate(-10deg);
    filter: blur(12px);
  }
  65% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
    transform: scale(0.45);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(12px) scaleX(1);
  }
  25% { opacity: 0.7; }
  100% {
    opacity: 0;
    transform: translateY(-58px) scaleX(1.5);
  }
}

@keyframes ring-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

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

@keyframes pulse-ring {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.45;
  }
}

@keyframes wash-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -14px) scale(1.12); }
}

@keyframes bean-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.6);
  }
  to {
    opacity: 0.45;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes btn-shine {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

.auth-gate-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(calc(100% - 32px), 360px);
  translate: -50% 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(17, 17, 17, 0.94);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 200ms ease-out,
    translate 200ms ease-out;
}

.auth-gate-toast.is-visible {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.auth-gate-toast[hidden] {
  display: none !important;
}

.auth-gate-toast.is-visible[hidden] {
  display: flex !important;
}

.auth-gate-toast__text {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

.auth-gate-toast__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-gate-toast__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.auth-gate-toast__btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.auth-gate-toast__btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .page,
  .atmosphere__wash,
  .atmosphere__ring,
  .atmosphere__bean,
  .brand,
  .brand__line,
  .brand__tagline,
  .visual__orbit,
  .visual__steam span,
  .visual__frame,
  .visual__image,
  .actions,
  .btn,
  .btn::before {
    animation: none !important;
  }

  .brand__line,
  .brand__tagline,
  .visual__image,
  .btn,
  .atmosphere__bean {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (hover: none) {
  .btn:hover {
    transform: none;
    filter: none;
  }
}