/* ============ โทเคน ============ */
:root {
  --sky-1: #2f6bff;
  --sky-2: #8cc6ff;
  --clay: #eef1fb;
  --clay-shade: #d6ddf3;
  --lime: #c4f23a;
  --lime-deep: #8fd62a;
  --green: #37d35c;
  --ink: #101634;
  --cobalt: #2250f4;
  --bubble: #ff9ccf;
  --night: #0b1026;
  /* Y2K: ขอบเหลือบ chromatic + โทนอุ่นของโคม/สไมลีย์ */
  --chroma-pink: #ff4fd8;
  --chroma-cyan: #4fe0ff;
  --amber: #ffc874;
  --smiley: #ffd84a;

  --font-display: "Bagel Fat One", "Mitr", system-ui, sans-serif;
  --font-body: "Mitr", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "Mitr", ui-monospace, monospace;
  --font-ui: "Lucida Grande", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Mitr", sans-serif;

  /* ปุ่มพองแบบ coffee-shop: ไฮไลต์ด้านในบน + เงาซ้อนหลายชั้น (y 1→40, spread ติดลบ) */
  --puff:
    inset 0 3px 1px rgba(255, 255, 255, .42),
    0 1px 1px -.3px rgba(16, 22, 52, .16),
    0 3px 3px -.8px rgba(16, 22, 52, .14),
    0 6px 6px -1.4px rgba(16, 22, 52, .13),
    0 12px 12px -2.4px rgba(16, 22, 52, .12),
    0 24px 24px -4px rgba(16, 22, 52, .10),
    0 40px 40px -6px rgba(16, 22, 52, .08);

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --vh1: 1vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img, video { display: block; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

/* ============ ปุ่มแคปซูลพอง (coffee-shop x Aqua gel) ============ */
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  isolation: isolate;
  transition: transform .28s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.pill::after {            /* เจลสะท้อนแสงด้านบน */
  content: ""; position: absolute; z-index: -1;
  left: 7%; right: 7%; top: 5%; height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .08));
  pointer-events: none;
}
.pill:hover { transform: translateY(-2px) scale(1.04); }
.pill:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.pill-lime {
  background: linear-gradient(180deg, #ecffa4 0%, var(--lime) 46%, #a4dc22 54%, #c9f545 100%);
  box-shadow: var(--puff), inset 0 0 0 1.5px rgba(255, 255, 255, .75);
}
.pill-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(226, 236, 255, .86));
  box-shadow: var(--puff), inset 0 0 0 1.5px #fff, -2px 0 0 -.5px rgba(255, 79, 216, .55), 2px 0 0 -.5px rgba(79, 224, 255, .6);
}
.pill-sm { min-height: 34px; padding: 0 16px; font-size: 14px; }

/* ============ เวที / ท้องฟ้า ============ */
.journey { position: relative; height: calc(var(--vh1) * 600); }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}
.sky {
  position: absolute; left: 0; right: 0; top: -45%; bottom: -45%;
  background:
    linear-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.5px) 0 0 / 76px 76px,
    linear-gradient(90deg, rgba(255, 255, 255, .22) 1.5px, transparent 1.5px) 0 0 / 76px 76px,
    radial-gradient(60% 40% at 82% 30%, rgba(196, 242, 58, .38), transparent 70%),
    radial-gradient(50% 36% at 12% 42%, rgba(255, 255, 255, .28), transparent 70%),
    linear-gradient(180deg, #1d4fe8 0%, var(--sky-1) 26%, #5b9bff 48%, var(--sky-2) 66%, #cfe6ff 100%);
  will-change: transform;
}

.dark {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 52%, rgba(11, 16, 38, .62), rgba(11, 16, 38, .97) 100%),
    var(--night);
  background-blend-mode: normal;
}
.lights { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glow {
  position: absolute; left: 0; top: 0; width: 800px; height: 800px;
  margin: -400px 0 0 -400px;
  border-radius: 50%;
  opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}
.glow-mon { background: radial-gradient(circle, rgba(150, 205, 255, .62) 0%, rgba(79, 140, 255, .30) 32%, rgba(47, 107, 255, 0) 68%); }
.glow-warm { background: radial-gradient(circle, rgba(255, 205, 125, .62) 0%, rgba(255, 168, 70, .26) 34%, rgba(255, 160, 60, 0) 68%); }

/* ============ hero: ข้อความ + ปุ่มชิดขวาใต้ชื่อ ============ */
.hero {
  position: absolute; z-index: 5;
  right: clamp(16px, 4.2vw, 64px);
  top: 66%;
  width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
  text-align: right;
  pointer-events: none;
}
.hero > * { pointer-events: auto; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.jump {
  position: absolute; z-index: 6;
  top: 16px; right: 16px;
  visibility: hidden; opacity: 0;
}
.jump.is-on { visibility: visible; opacity: 1; transition: opacity .3s; }

/* ============ แถบโหลด Y2K ============ */
.loader {
  position: absolute; z-index: 6;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #e6f0ff);
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px var(--lime),
    -3px 0 0 2px rgba(255, 79, 216, .55),
    3px 0 0 2px rgba(79, 224, 255, .6),
    0 14px 28px -8px rgba(5, 20, 80, .45);
  font-family: var(--font-pixel);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
  pointer-events: none;
  transition: opacity .35s;
}
.loader-label { white-space: nowrap; }
.loader-track {
  position: relative; flex: 1; height: 16px; overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.loader-blocks {
  position: absolute; inset: 3px;
  background: repeating-linear-gradient(90deg, var(--green) 0 9px, transparent 9px 12px);
  background-color: transparent;
}
.loader-veil {
  position: absolute; inset: 3px -4px 3px 3px;
  background: #fff;
  will-change: transform;
}
.loader-pct { min-width: 3.4ch; text-align: right; }
.loader.is-hidden { opacity: 0; }
html:not(.js) .loader { display: none; }

/* ============ ลำดับเปิด: ข้อความ/ปุ่ม → ตัวโหลด ============
   อนิเมชันเริ่มเองตอนโหลด (delay + fill backwards = ซ่อนก่อนถึงคิว) — intro.js ถอดคลาส is-intro ตอนจบ */
.js .is-intro .hero     { animation: hero-in .7s var(--ease-out) 1.55s backwards; }
.js .is-intro .loader   { animation: loader-in .7s var(--ease-out) 2.1s backwards; }

@keyframes hero-in {
  0%   { visibility: hidden; opacity: 0; translate: 0 26px; }
  1%   { visibility: visible; opacity: 0; translate: 0 26px; }
  100% { visibility: visible; opacity: 1; translate: 0 0; }
}
@keyframes loader-in {
  0%   { visibility: hidden; opacity: 0; translate: -50% 26px; }
  1%   { visibility: visible; opacity: 0; translate: -50% 26px; }
  100% { visibility: visible; opacity: 1; translate: -50% 0; }
}

/* ============ มือถือ ============ */
@media (max-width: 767px) {
  .hero { top: auto; bottom: 86px; right: 16px; left: 16px; width: auto; align-items: stretch; }
  .hero-btns { justify-content: flex-end; }
  .loader { gap: 8px; padding: 9px 10px; font-size: 10px; }
  .jump { top: 12px; right: 12px; }
}

/* ============ ลดการเคลื่อนไหว ============ */
@media (prefers-reduced-motion: reduce) {
  .journey { height: 100vh; height: 100dvh; }
  .js .is-intro .hero, .js .is-intro .loader { animation: none; }
  .pill, .pill:hover, .pill:active { transition: none; transform: none; }
}

/* ============ โทเคนการเคลื่อนไหว (transitions-dev) — หน้าต่าง/Dock/เมนู/เปิดเครื่องบนเดสก์ท็อป Mac อ่านจากตรงนี้ผ่าน mac.js ============ */
:root {
  --duration-stagger: 40ms;   /* เหลื่อมต่อชิ้น */
  --duration-micro: 80ms;
  --duration-quick: 150ms;    /* ปิดหน้าต่าง/เมนู */
  --duration-fast: 250ms;     /* เปิดหน้าต่าง/เมนู, เมนูบาร์เลื่อนลง, โหมดโรงหนัง */
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
}