/* ============================================================
   วิธีใช้: นำทั้งไฟล์นี้ไป "วางต่อท้าย" public/styles.css เดิม
   (สไตล์เหล่านี้เป็นของใหม่ ไม่ทับของเดิมในหน้าอื่น)
   อย่าลืมเปลี่ยน <link> ฟอนต์ใน index.html เป็น Anuphan + IBM Plex Sans Thai
   ============================================================ */

/* ใช้ฟอนต์ใหม่ทั้งแอป (โมเดิร์น อ่านง่าย) */
body { font-family: "IBM Plex Sans Thai", system-ui, sans-serif; }

/* ============================================================
   fit with me · หน้า intro (introView)
   แนวทาง Lifesum + โทนทองอบอุ่น "เหลืองเข้ม"
   ฟอนต์: Anuphan (display) + IBM Plex Sans Thai (text)
   แอนิเมชัน: Spin & Expand (วงกลมกลาง → หมุน → คลี่ไอคอน 5 พฤติกรรม)
   ============================================================ */

.hp {
  --font-text: "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-display: "Anuphan", var(--font-text);

  --bg-grad: radial-gradient(120% 95% at 50% 16%, #ddb451 0%, #b3812a 50%, #845b18 100%);
  --ink:      #382611;
  --ink-soft: rgba(56, 38, 16, 0.74);
  --ink-mut:  rgba(56, 38, 16, 0.55);
  --cream:    #fff8ec;
  --cream-2:  #f5e8cf;
  --espresso: #2c1d0a;
  --gold-hi:  #ffeec2;
  --line:     rgba(56, 38, 16, 0.12);
  --line-2:   rgba(56, 38, 16, 0.22);

  --c-eat:    #c2861a;
  --c-sleep:  #6b5fa6;
  --c-move:   #3f8e6e;
  --c-stress: #cf6a4a;
  --c-poll:   #5d7585;

  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--bg-grad);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hp.tone-deep {
  --bg-grad: radial-gradient(120% 95% at 50% 14%, #c7972d 0%, #8f6620 52%, #5c3d11 100%);
}

/* ---------- top bar ---------- */
.hp__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 4px;
}
.hp__brand { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.hp__brand .seal {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--espresso), #1b1206);
  color: var(--gold-hi);
}
.hp__brand .seal svg { width: 17px; height: 17px; fill: currentColor; }
.hp__brand .name { font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: 0.01em; }
.hp__chip {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  background: rgba(255, 248, 236, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(60, 40, 10, 0.5);
}

/* ---------- body ---------- */
.hp__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 22px;
}

/* ===========================================================
   วงโคจร · Spin & Expand
   =========================================================== */
.va {
  position: relative;
  width: 300px;
  height: 286px;
  margin: 10px auto 6px;
}

/* central core (ไอคอนชัยชนะ/สุขภาพ) */
.va__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px; height: 124px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(76% 76% at 38% 30%, #fffbf2, #f1e1c0);
  color: #6e4a12;
  box-shadow: 0 18px 38px -16px rgba(70, 46, 10, 0.6);
  animation: coreBreathe 3.6s ease-in-out infinite;
  z-index: 3;
}
.va__core svg { width: 52px; height: 52px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.va__core .spark { position: absolute; top: 16px; right: 24px; width: 14px; height: 14px; fill: #e0a52c; stroke: none; }

/* pulsing halo rings */
.va__halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px; height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 248, 230, 0.85);
  opacity: 0;
  animation: haloPulse 3.4s ease-out infinite;
  z-index: 1;
}
.va__halo.h2 { animation-delay: 1.7s; }
.va__orbit-ring {
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(56, 38, 16, 0.22);
  z-index: 0;
}

/* nodes — radial layout via angle + radius */
.va .node {
  --r: 112px;
  position: absolute;
  left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  z-index: 2;
}
.va .node.n1 { --a: 0deg; }
.va .node.n2 { --a: 72deg; }
.va .node.n3 { --a: 144deg; }
.va .node.n4 { --a: 216deg; }
.va .node.n5 { --a: 288deg; }
.va .node .label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

.bubble {
  --c: var(--c-eat);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(76% 76% at 34% 28%, #fffaf0 0%, #f5e7cd 82%);
  border: 1px solid rgba(56, 38, 16, 0.08);
  box-shadow: 0 12px 22px -12px rgba(70, 46, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--c);
}
.bubble svg { width: 46%; height: 46%; stroke: currentColor; stroke-width: 1.85; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- intro keyframes ---------- */
@keyframes coreSpin {
  from { transform: translate(-50%, -50%) rotate(-300deg) scale(0.4); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes expandNode {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) rotate(calc(-1 * var(--a))) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1);
  }
}
@keyframes ringIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes haloPulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes coreBreathe {
  0%, 100% { box-shadow: 0 18px 38px -16px rgba(70, 46, 10, 0.6); }
  50%      { box-shadow: 0 0 26px 4px rgba(255, 244, 214, 0.55), 0 18px 38px -16px rgba(70, 46, 10, 0.6); }
}

/* ---------- intro reveal (one-time) ----------
   ฐาน = สถานะปลายทาง (มองเห็นเสมอ). คลาส .intro เพิ่ม "เฉพาะ" การคลี่เข้ามา
   แล้ว JS จะถอดคลาสออกเมื่อจบ → ไม่มีทางค้างซ่อนแม้ไทม์ไลน์จะสะดุด */
.va.intro .va__orbit-ring { animation: ringIn 0.7s ease-out both; }
.va.intro .va__core { animation: coreSpin 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.va.intro .va__halo { opacity: 0; animation: none; }
.va.intro .node {
  opacity: 0;
  animation: expandNode 0.66s cubic-bezier(0.34, 1.28, 0.5, 1) both;
}
.va.intro .node.n1 { animation-delay: 0.60s; }
.va.intro .node.n2 { animation-delay: 0.69s; }
.va.intro .node.n3 { animation-delay: 0.78s; }
.va.intro .node.n4 { animation-delay: 0.87s; }
.va.intro .node.n5 { animation-delay: 0.96s; }

@media (prefers-reduced-motion: reduce) {
  .va.intro .va__core,
  .va.intro .node,
  .va.intro .va__orbit-ring { animation: none !important; opacity: 1 !important; }
}

/* ===========================================================
   เนื้อหา · การ์ดสไตล์ Lifesum
   =========================================================== */
.intro-card {
  background: linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 26px;
  padding: 22px 20px 20px;
  box-shadow: 0 26px 54px -28px rgba(60, 38, 8, 0.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a9761d;
}
.hp__eyebrow::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: #a9761d; }
.hp__title {
  font-family: var(--font-display);
  font-size: 27px; line-height: 1.26; font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0; color: var(--ink);
  text-wrap: balance;
}
.hp__title b { color: var(--espresso); box-shadow: inset 0 -0.32em 0 rgba(232, 178, 60, 0.32); }
.hp__purpose { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* "สิ่งที่คุณจะได้รับ" */
.reward {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(63, 142, 110, 0.09);
  border: 1px solid rgba(63, 142, 110, 0.22);
  border-radius: 16px;
  padding: 13px 14px;
}
.reward .tick {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #3f8e6e; color: #fff;
}
.reward .tick svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reward p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.reward p b { font-weight: 700; }

/* disclaimer */
.disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  border-top: 1px dashed var(--line-2);
  padding-top: 14px;
  font-size: 12px; line-height: 1.62; color: var(--ink-mut);
}
.disclaimer .info {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(56, 38, 16, 0.1); color: var(--ink-soft);
  font-weight: 700; font-size: 12px; font-family: var(--font-display);
}
.disclaimer b { color: var(--ink-soft); font-weight: 700; }

/* ---------- CTA ---------- */
.hp__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.btn-primary {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: 16px; font-weight: 700;
  color: #fdf3df;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(160deg, #4a3414, var(--espresso));
  box-shadow: 0 14px 26px -10px rgba(40, 25, 6, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform 0.18s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary .arrow { transition: transform 0.2s ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-ghost {
  appearance: none; cursor: pointer;
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  padding: 12px 18px; border-radius: 14px;
  background: transparent; border: 1px solid var(--line-2);
  transition: background 0.18s ease, color 0.18s ease;
}
.btn-ghost:hover { color: var(--ink); background: rgba(56, 38, 16, 0.05); }

/* social proof under CTA */
.hp__proof {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; color: rgba(255, 248, 236, 0.92);
  margin: 12px 0 0;
  text-shadow: 0 1px 2px rgba(60, 38, 8, 0.3);
}
.hp__proof .dots { display: flex; }
.hp__proof .dots i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c89c34; margin-left: -7px;
  background: radial-gradient(70% 70% at 35% 30%, #fffaf0, #f0ddba);
}
.hp__proof .dots i:first-child { margin-left: 0; }
.hp__proof b { color: #fff; font-weight: 700; }