/* #region zone:monitor.auth.welcome-style — หน้าต้อนรับเต็มจอ (CSS ล้วน) */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  overflow: hidden;
  background: var(--surface-0);
  cursor: pointer;
}
.welcome-screen[hidden] {
  display: none;
}
.welcome-aurora {
  position: absolute;
  inset: -20%;
  background: none;
  filter: blur(var(--s-6));
  opacity: 0;
}
.welcome-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 100%;
  text-align: center;
}
.welcome-logo {
  width: var(--s-12);
  height: var(--s-12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  opacity: 0;
}
.welcome-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  max-width: 100%;
  line-height: 1.1;
  font-weight: var(--fw-semibold);
}
.welcome-hello {
  font-size: clamp(var(--fs-xl), 3.4vw, 36px);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  opacity: 0;
}
.welcome-name {
  --welcome-text-name: clamp(44px, 11vw, 120px);
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--welcome-text-name);
  letter-spacing: -0.03em;
  padding-bottom: var(--s-1);
  color: var(--text-1);
  opacity: 0;
}
.welcome-sub {
  margin: 0;
  font-size: clamp(var(--fs-lg), 2vw, 22px);
  color: var(--text-3);
  opacity: 0;
}
.welcome-screen.is-on .welcome-aurora {
  animation: welcome-glow 1.8s var(--ease) both;
}
.welcome-screen.is-on .welcome-logo {
  animation: welcome-rise 0.6s var(--ease) 0.05s both;
}
.welcome-screen.is-on .welcome-hello {
  animation: welcome-rise 0.6s var(--ease) 0.2s both;
}
.welcome-screen.is-on .welcome-name {
  animation: welcome-pop 0.9s var(--ease) 0.4s both;
}
.welcome-screen.is-on .welcome-sub {
  animation: welcome-rise 0.6s var(--ease) 0.95s both;
}
@keyframes welcome-glow {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translateY(var(--s-4));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes welcome-pop {
  from {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(var(--s-3));
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* Reduced motion: a static greeting, no animation at all. */
.welcome-screen.is-reduced .welcome-aurora,
.welcome-screen.is-reduced .welcome-logo,
.welcome-screen.is-reduced .welcome-hello,
.welcome-screen.is-reduced .welcome-name,
.welcome-screen.is-reduced .welcome-sub {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-screen .welcome-aurora,
  .welcome-screen .welcome-logo,
  .welcome-screen .welcome-hello,
  .welcome-screen .welcome-name,
  .welcome-screen .welcome-sub {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* #endregion */
