:root {
  --c1: #ffd9b3;
  --c2: #e6d1ff;
  --c3: #b3ecec;
  --c4: #ffc6d9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}

/* Living, breathing animated gradient */
.page-bg {
  background: linear-gradient(-45deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 400% 400%;
  animation: driftGradient 18s ease infinite;
}

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

/* Frosted glass welcome card */
.welcome-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 60px -15px rgba(80, 60, 120, 0.35);
}

/* Gentle waving hand loop */
.wave-emoji {
  animation: wave 2.6s ease-in-out infinite;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* Card entrance */
.fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Greeting swap animation */
.greeting-swap {
  animation: swapIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes swapIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pill button */
.pill-btn {
  background: linear-gradient(135deg, #fb7185, #f472b6);
  box-shadow: 0 8px 20px -6px rgba(244, 114, 182, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  cursor: pointer;
  border: none;
}
.pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(244, 114, 182, 0.8);
  filter: brightness(1.05);
}
.pill-btn:active {
  transform: translateY(0) scale(0.97);
}

.footer-link {
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: #fb7185;
}