/* Branded intro splash, shown once on the marketing landing page before the
   homepage paints. Lives outside style.css because landing.html is
   self-contained and does not load the app stylesheet; it reads the design
   tokens from whichever page includes it. */
body.welcome-active { overflow: hidden; }
.welcome {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(46,44,139,.055) 1.4px, transparent 0),
    radial-gradient(circle at 50% 47%, rgba(255,225,0,.16) 0, rgba(255,225,0,.055) 22%, transparent 48%),
    radial-gradient(760px 480px at 90% -10%, rgba(255,225,0,.16), transparent 60%),
    radial-gradient(700px 520px at -8% 110%, rgba(142,202,230,.18), transparent 60%);
  background-size: 22px 22px, auto, auto, auto;
  background-attachment: fixed;
  opacity: 1;
  transition: opacity .16s .24s ease, visibility .4s ease;
}
.welcome::before,
.welcome::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  border-radius: 50%; pointer-events: none;
  background: var(--yellow); opacity: .7;
  animation: welcome-dot 1.8s ease-in-out infinite;
}
.welcome::before { width: 9px; height: 9px; margin: -204px 0 0 -246px; }
.welcome::after {
  width: 6px; height: 6px; margin: 190px -268px 0 0;
  background: var(--sky); animation-delay: -.7s;
}
.welcome.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome.is-leaving .welcome-inner { animation: none; }
.welcome.is-leaving .welcome-logo-wrap,
.welcome.is-leaving .welcome-greeting,
.welcome.is-leaving .welcome-progress {
  animation: welcome-elements-out .22s ease both;
}
.welcome.is-leaving .welcome-letter {
  animation: welcome-letter-out .2s ease both;
}
.welcome.is-leaving .welcome-orbit {
  animation: welcome-fade-out .16s ease both;
}
.welcome.is-leaving .welcome-mascot {
  animation: welcome-mascot-out .28s cubic-bezier(.4,0,.8,.25) both;
}
.welcome.is-leaving .welcome-halo {
  animation: welcome-halo-out .4s cubic-bezier(.4,0,.6,1) both;
}
.welcome-inner {
  position: relative; width: min(84vw, 380px);
  display: flex; flex-direction: column; align-items: center;
  animation: welcome-in .62s cubic-bezier(.2,.9,.25,1) both;
}
.welcome-logo-wrap {
  width: min(54vw, 216px); overflow: hidden;
  animation: welcome-logo-reveal .56s .12s cubic-bezier(.25,.8,.25,1) both;
}
.welcome-logo { display: block; width: 100%; height: auto; }
.welcome-mascot-wrap {
  position: relative; width: clamp(150px, 38vw, 182px); aspect-ratio: 1;
  margin-top: 24px; display: grid; place-items: center;
}
.welcome-halo {
  position: absolute; z-index: 0; width: 82%; height: 82%; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #FFF39A 0, var(--yellow) 40%, #F7CA00 100%);
  box-shadow: 0 12px 34px rgba(224,181,0,.24);
  transform: scale(.4); opacity: 0;
  animation:
    welcome-halo .55s .38s cubic-bezier(.2,.9,.25,1) both,
    welcome-halo-breathe 1.3s 1.05s ease-in-out infinite;
}
.welcome-halo::after {
  content: ""; position: absolute; inset: 8px; border-radius: inherit;
  border: 2px solid rgba(255,255,255,.72);
}
.welcome-orbit {
  position: absolute; z-index: 0; inset: -8%; border-radius: 50%;
  border: 1.5px dashed rgba(46,44,139,.18);
  opacity: 0;
  animation:
    welcome-orbit-in .45s .58s ease both,
    welcome-orbit-spin 7s 1.04s linear infinite;
}
.welcome-letter {
  position: absolute; z-index: 3; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  font-family: var(--font-thai); font-size: 1rem; font-weight: 700;
  color: var(--navy); background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: 0 5px 14px rgba(46,44,139,.13);
  opacity: 0;
  animation: welcome-letter-pop .48s cubic-bezier(.2,1.35,.3,1) both;
}
.welcome-letter-a { --letter-rotate: -9deg; left: -18px; top: 19%; animation-delay: .67s; }
.welcome-letter-b { --letter-rotate: 8deg; right: -20px; top: 12%; animation-delay: .75s; }
.welcome-letter-c { --letter-rotate: 7deg; left: -10px; bottom: 3%; animation-delay: .83s; }
.welcome-letter-d { --letter-rotate: -7deg; right: -16px; bottom: 7%; animation-delay: .91s; }
.welcome-sparks { position: absolute; z-index: 2; inset: 50%; pointer-events: none; }
.welcome-sparks span {
  --spark-distance: -103px;
  position: absolute; left: -2px; top: -5px;
  width: 4px; height: 11px; border-radius: 999px;
  background: var(--navy); opacity: 0;
  transform-origin: 2px 5px;
  animation: welcome-spark .58s .68s cubic-bezier(.2,.7,.2,1) both;
}
.welcome-sparks span:nth-child(1) { --spark-angle: 0deg; }
.welcome-sparks span:nth-child(2) { --spark-angle: 45deg; --spark-distance: -110px; background: var(--sky); animation-delay: .72s; }
.welcome-sparks span:nth-child(3) { --spark-angle: 90deg; background: var(--yellow-deep); animation-delay: .7s; }
.welcome-sparks span:nth-child(4) { --spark-angle: 135deg; --spark-distance: -110px; background: var(--pink); animation-delay: .75s; }
.welcome-sparks span:nth-child(5) { --spark-angle: 180deg; animation-delay: .71s; }
.welcome-sparks span:nth-child(6) { --spark-angle: 225deg; --spark-distance: -110px; background: var(--sky); animation-delay: .76s; }
.welcome-sparks span:nth-child(7) { --spark-angle: 270deg; background: var(--yellow-deep); animation-delay: .73s; }
.welcome-sparks span:nth-child(8) { --spark-angle: 315deg; --spark-distance: -110px; background: var(--pink); animation-delay: .77s; }
.welcome-mascot {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 15px rgba(35,33,95,.18));
  transform-origin: 50% 90%;
  animation:
    welcome-mascot-in .72s .3s cubic-bezier(.2,1.15,.3,1) both,
    welcome-mascot-float 1.2s 1.08s ease-in-out infinite;
}
.welcome-greeting {
  margin: 8px 0 13px;
  font-family: var(--font-thai); font-size: clamp(.9rem, 2.6vw, 1.02rem);
  font-weight: 600; letter-spacing: .03em; color: var(--ink-soft);
  animation: welcome-copy .4s .96s ease both;
}
.welcome-progress {
  position: relative; width: 54px; height: 4px; overflow: hidden; border-radius: 999px;
  background: var(--navy-soft);
  animation: welcome-copy .4s 1.05s ease both;
}
.welcome-progress span {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: var(--navy);
  transform: translateX(-100%);
  animation: welcome-progress 1.12s 1.1s cubic-bezier(.55,0,.25,1) both;
}
.welcome-progress::after {
  content: ""; position: absolute; inset: 0 auto 0 -14px; width: 12px;
  background: rgba(255,255,255,.72); transform: skewX(-20deg);
  animation: welcome-progress-shine .72s 1.38s ease-in-out both;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes welcome-logo-reveal {
  0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-8px) scale(.94); }
  70% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
}
@keyframes welcome-halo {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes welcome-halo-breathe {
  0%,100% { transform: scale(1); box-shadow: 0 12px 34px rgba(224,181,0,.24); }
  50% { transform: scale(1.055); box-shadow: 0 16px 40px rgba(224,181,0,.32); }
}
@keyframes welcome-halo-out {
  0% { opacity: 1; transform: scale(1); }
  42% { opacity: 1; transform: scale(1.2); }
  100% { opacity: .88; transform: scale(12); }
}
@keyframes welcome-orbit-in {
  from { opacity: 0; transform: scale(.72) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes welcome-orbit-spin {
  from { opacity: 1; transform: rotate(0); }
  to { opacity: 1; transform: rotate(360deg); }
}
@keyframes welcome-letter-pop {
  0% { opacity: 0; transform: translateY(10px) rotate(var(--letter-rotate)) scale(.4); }
  68% { opacity: 1; transform: translateY(-3px) rotate(var(--letter-rotate)) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--letter-rotate)) scale(1); }
}
@keyframes welcome-letter-out {
  from { opacity: 1; transform: translateY(0) rotate(var(--letter-rotate)) scale(1); }
  to { opacity: 0; transform: translateY(-8px) rotate(var(--letter-rotate)) scale(.7); }
}
@keyframes welcome-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes welcome-spark {
  0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-36px) scaleY(.2); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(var(--spark-distance)) scaleY(1); }
}
@keyframes welcome-mascot-in {
  0% { opacity: 0; transform: translateY(35px) rotate(-9deg) scale(.64); }
  58% { opacity: 1; transform: translateY(-5px) rotate(4deg) scale(1.08); }
  78% { transform: translateY(2px) rotate(-2deg) scale(.98); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes welcome-mascot-float {
  0%,100% { transform: translateY(0) rotate(0); }
  24% { transform: translateY(-4px) rotate(-1deg); }
  52% { transform: translateY(-7px) rotate(2deg); }
  76% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes welcome-mascot-out {
  from { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  to { opacity: 0; transform: translateY(-16px) rotate(4deg) scale(.88); }
}
@keyframes welcome-elements-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(.96); }
}
@keyframes welcome-copy {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcome-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes welcome-progress-shine {
  from { left: -14px; opacity: 0; }
  35% { opacity: 1; }
  to { left: 60px; opacity: 0; }
}
@keyframes welcome-dot {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome *, .welcome *::before, .welcome *::after {
    animation: none !important; transition: none !important;
  }
  .welcome-halo { opacity: 1; transform: scale(1); }
  .welcome-progress span { transform: translateX(0); }
  .welcome-inner, .welcome-logo-wrap, .welcome-letter, .welcome-orbit,
  .welcome-mascot, .welcome-greeting, .welcome-progress,
  .welcome-sparks span { opacity: 1; }
}

@media (max-width: 560px) {
  .welcome::before { margin-left: -78vw; }
  .welcome::after { margin-right: -82vw; }
}