/* =========================================================
   sarana (สรณะ) — หน้าแรก
   ---------------------------------------------------------
   ทุกขนาดเขียนเป็น "พิกเซลของแบบ Figma" (กว้าง 1024)
   คูณด้วย --u  →  จอ 1024 ขึ้นไป = ขนาดจริงเป๊ะ
                  จอเล็กกว่า     = ย่อตามสัดส่วนทั้งหน้า
   ========================================================= */

/* ---------- ฟอนต์ (ไฟล์อยู่ใน assets/fonts) ---------- */
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_Rg.woff2") format("woff2");  font-weight: 400; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_Bd.woff2") format("woff2");  font-weight: 700; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_XBd.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_He.woff2") format("woff2");  font-weight: 900; font-display: swap; }

@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Regular.ttf") format("truetype");  font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Medium.ttf") format("truetype");   font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Bold.ttf") format("truetype");     font-weight: 700; font-display: swap; }

/* ---------- สี (ดึงมาจากไฟล์ Figma) ---------- */
:root {
  --u: min(1px, calc(100vw / 1024));   /* 1 พิกเซลของแบบ */

  --bg:         #FFFEFA;
  --brown:      #43301F;
  --brown-soft: #8E6F69;
  --shelf:      #705752;
  --cream:      #FCF3E2;
  --green:      #EEF2C0;
  --blue:       #BCD4FF;
  --pink:       #F8BAD1;
  --mint:       #CDEEE0;
  --salmon:     #F1A492;
  --white:      #FFFFFF;

  --font-head: "LINE Seed Sans TH", "IBM Plex Sans Thai", sans-serif;
  --font-body: "IBM Plex Sans Thai", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--brown);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* ให้กันสาด / แถบล่าง เต็มจอได้โดยไม่เกิดสกรอลแนวนอน */
}

.nowrap { white-space: nowrap; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; }

.page {
  width: calc(1024 * var(--u));
  margin: 0 auto;
  background: var(--bg);
}

/* ส่วนที่ยืดเต็มความกว้างจอ (กันสาด, ตัวหนังสือวิ่ง, footer) */
.awning,
.marquee,
.footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* =========================================================
   กันสาด
   ========================================================= */
.awning {
  display: flex;
  justify-content: center;     /* แถบเขียวตรงกลางอยู่กลางจอเสมอ */
  height: calc(151 * var(--u));
  overflow: hidden;
}
.awning span {
  flex: 0 0 calc(250 * var(--u));
  border-radius: 0 0 calc(125 * var(--u)) calc(125 * var(--u)) / 0 0 calc(64.5 * var(--u)) calc(64.5 * var(--u));
}
.awning .green { background: var(--green); }
.awning .blue  { background: var(--blue); }

/* =========================================================
   Header
   ========================================================= */
.hero { text-align: center; }

.welcome {
  margin-top: calc(18 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(48 * var(--u));
}

.logo { margin-top: calc(1 * var(--u)); }
.logo img {
  width: calc(660 * var(--u));
  margin: 0 auto;
}

.tagline {
  margin-top: calc(-1 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(48 * var(--u));
}

/* =========================================================
   ตู้กด
   ========================================================= */
.machine {
  width: calc(894 * var(--u));
  height: calc(662 * var(--u));
  margin: calc(31 * var(--u)) auto 0;
  padding: calc(30 * var(--u)) calc(41 * var(--u));
  background: var(--brown-soft);
  border-radius: calc(67 * var(--u));
}
.machine-inner {
  height: calc(601 * var(--u));
  padding: calc(44 * var(--u)) calc(22 * var(--u)) 0;
  background: var(--brown);
  border-radius: calc(41 * var(--u));
}

.cards {
  display: flex;
  justify-content: space-between;
  height: calc(232 * var(--u));
  padding: 0 calc(5 * var(--u));
}
.cards + .shelf + .cards { margin-top: calc(18 * var(--u)); }

.card {
  position: relative;
  width: calc(233 * var(--u));
  height: calc(161 * var(--u));
  margin-top: calc(35 * var(--u));
  border-radius: calc(22 * var(--u));
  transform: rotate(-14.9deg);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.card span {
  display: block;
  transform: rotate(14.9deg);              /* ให้ ? ตั้งตรง */
  font-family: var(--font-head);
  font-weight: 800;
  font-size: calc(52 * var(--u));
  line-height: 1;
}
.card:hover,
.card:focus-visible { transform: rotate(-9deg) translateY(calc(-10 * var(--u))) scale(1.04); outline: none; }
.card:active        { transform: rotate(-12deg) scale(.97); }

.c-cream  { background: var(--cream); }
.c-green  { background: var(--green); }
.c-salmon { background: var(--salmon); }
.c-pink   { background: var(--pink); }
.c-mint   { background: var(--mint); }
.c-blue   { background: var(--blue); }
.c-white  { background: var(--white); }

/* ชั้นวางเปลี่ยนสี: การ์ดพลิกทีละใบ (js/main.js สลับชุดสีตามแบบ) */
.card.flip { animation: flip .56s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes flip {
  0%   { transform: rotate(-14.9deg); }
  45%  { transform: rotate(-14.9deg) translateY(calc(-14 * var(--u))) scaleX(0); }
  55%  { transform: rotate(-14.9deg) translateY(calc(-14 * var(--u))) scaleX(0); }
  80%  { transform: rotate(-14.9deg) translateY(calc(-4 * var(--u))) scaleX(1.06); }
  100% { transform: rotate(-14.9deg); }
}

.shelf {
  display: flex;
  justify-content: space-between;
  height: calc(41 * var(--u));
  padding: calc(5 * var(--u)) calc(91 * var(--u)) 0;
  background: var(--shelf);
  border-radius: calc(20.5 * var(--u));
}
.shelf i {
  width: calc(83 * var(--u));
  height: calc(30 * var(--u));
  background: var(--white);
}

/* =========================================================
   ปุ่ม
   ========================================================= */
.controls {
  width: calc(895 * var(--u));
  margin: calc(36 * var(--u)) auto 0;
}

/* ขอบปุ่ม = เส้นน้ำตาลบาง + ขอบขาวหนา (ตามแบบ) */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: calc(6 * var(--u)) solid var(--white);
  box-shadow: 0 0 0 max(1px, calc(1 * var(--u))) var(--brown);
  font-family: var(--font-head);
  font-weight: 700;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover  { transform: translateY(calc(-3 * var(--u))); filter: brightness(1.03); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-start {
  justify-content: space-between;
  width: calc(885 * var(--u));
  height: calc(122 * var(--u));
  margin-left: calc(3 * var(--u));
  padding: 0 calc(33 * var(--u));
  background: var(--pink);
  font-size: calc(46 * var(--u));
}
.btn-start .heart { width: calc(64 * var(--u)); transition: transform .3s ease; }
.btn-start:hover .heart { transform: scale(1.12); }

.btn-row {
  display: flex;
  justify-content: space-between;
  margin-top: calc(23 * var(--u));
}
.btn-green {
  width: calc(263 * var(--u));
  height: calc(105 * var(--u));
  background: var(--green);
  font-size: calc(50 * var(--u));
}

/* สลับภาษา TH / ENG */
.lang {
  width: calc(340 * var(--u));
  height: calc(105 * var(--u));
  padding: calc(4 * var(--u)) calc(7 * var(--u));
  background: var(--brown);
  justify-content: space-between;
}
.lang:hover { transform: none; filter: none; }
.lang button {
  width: calc(155 * var(--u));
  height: calc(81 * var(--u));
  border-radius: 999px;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(52 * var(--u));
  transition: background .25s ease, color .25s ease;
}
.lang button.active { background: var(--green); color: var(--brown); }

/* =========================================================
   กระดาษ
   ========================================================= */
.printer {
  position: relative;
  min-height: calc(114 * var(--u));          /* ตอนปิด: เห็นแค่ช่องปริ้น */
  margin-top: calc(41 * var(--u));
  padding-top: calc(46 * var(--u));
}
.slot {
  position: absolute;
  top: 0;
  left: calc(22.5 * var(--u));
  width: calc(978 * var(--u));
  height: calc(114 * var(--u));
  background: var(--cream);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: 999px;
}
.slot-bar {
  position: absolute;
  z-index: 1;                                /* อยู่หลังกระดาษ (กระดาษโผล่ออกจากช่อง) */
  top: calc(23.5 * var(--u));
  left: calc(65 * var(--u));
  width: calc(894 * var(--u));
  height: calc(62 * var(--u));
  background: var(--brown);
  border-radius: 999px;
}

/* ช่องปล่อยกระดาษ: สูง 0 ตอนปิด → JS ค่อยๆ ขยายจนเห็นทั้งแผ่น */
.feed {
  position: relative;
  z-index: 2;
  height: 0;
  overflow: hidden;
  transition: height 2.2s cubic-bezier(.33, .1, .25, 1);
}
/* กันบัค: บางเบราว์เซอร์ (เช่น Safari) ตอนเลื่อน/ชี้ปุ่มค้างไว้ กระดาษที่ซ่อนอยู่หลุดออกมาให้เห็นทั้งที่ยังไม่กด
   → ตัดขอบด้วย clip-path ด้วย และซ่อนกระดาษไว้จริงๆ จนกว่าจะกด "เกี่ยวกับ" / "ผู้สร้าง" */
.feed { clip-path: inset(0); }
.printer:not(.open) .paper { visibility: hidden; }
.printer.open .feed.done { height: auto; overflow: visible; clip-path: none; }

.paper {
  position: relative;
  z-index: 1;
  width: calc(851 * var(--u));
  margin-left: calc(86.5 * var(--u));
  padding: calc(62 * var(--u)) calc(37 * var(--u)) 0;
  background: var(--white);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-top: 0;                             /* ขอบบนซ่อนอยู่ในช่องปริ้น */
  transform: translateY(calc(-40 * var(--u)));
  transition: transform 2.2s cubic-bezier(.33, .1, .25, 1);
}
.printer.open .paper { transform: none; }

/* กด "เกี่ยวกับ" = แสดงแค่ส่วนเกี่ยวกับ / กด "ผู้สร้าง" = เกี่ยวกับ + ผู้สร้าง */
.paper:not(.with-creator) .creator { display: none; }
.paper:not(.with-creator) { padding-bottom: calc(56 * var(--u)); }
.paper.with-creator { min-height: calc(1427 * var(--u)); }

/* ช่องปริ้นสั่นเบาๆ ตอนกำลังปริ้น */
.printer.printing .slot-bar { animation: buzz .12s linear infinite; }
@keyframes buzz { 50% { transform: translateY(calc(1 * var(--u))); } }

/* ---------- เว็บนี้คือเว็บอะไร ---------- */
.about h2 {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(68 * var(--u));
  line-height: calc(86 * var(--u));
}

.pill {
  margin-top: calc(17 * var(--u));
  padding: calc(24 * var(--u)) 0;
  background: var(--pink);
  border-radius: calc(63.5 * var(--u));
  text-align: center;
  font-weight: 500;
  font-size: calc(23 * var(--u));
  line-height: calc(40 * var(--u));
}
.pill mark {
  padding: 0 calc(5 * var(--u));
  background: var(--cream);
  color: inherit;
}

.story {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(332 * var(--u));
  margin-top: calc(25 * var(--u));
  padding: 0 calc(25 * var(--u));
  background: var(--brown);
  border-radius: calc(48 * var(--u));
  color: var(--cream);
}
.play {
  flex: 0 0 auto;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  transition: transform .2s ease;
}
.play.prev img { transform: scaleX(-1); }   /* ปุ่มซ้ายชี้ย้อนกลับ */
.play:hover   { transform: scale(1.08); }
.play:active  { transform: scale(.94); }

.slides {
  position: relative;
  flex: 1;
  height: 100%;
}
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(23 * var(--u));
  line-height: calc(40 * var(--u));
  opacity: 0;
  transform: translateX(calc(20 * var(--u)));
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.slide.long { font-size: calc(20 * var(--u)); line-height: calc(34 * var(--u)); }
.slide.active { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- เกี่ยวกับผู้สร้าง ---------- */
.creator {
  position: relative;
  display: flex;
  margin-top: calc(40 * var(--u));
  min-height: calc(700 * var(--u));
}
.creator-text { position: relative; z-index: 2; width: calc(410 * var(--u)); }

.tilt {
  margin: calc(42 * var(--u)) 0 0 calc(16 * var(--u));
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(64 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-6.3deg);
  transform-origin: left center;
}

html[lang="en"] .tilt { font-size: calc(48 * var(--u)); }

.bio {
  margin-top: calc(40 * var(--u));
  font-size: calc(19.5 * var(--u));
  line-height: calc(33 * var(--u));
  white-space: nowrap;
}

.contact {
  margin-top: calc(54 * var(--u));
  font-size: calc(20.5 * var(--u));
  line-height: calc(33 * var(--u));
}
.contact-label {
  display: inline-block;
  margin-left: calc(-7 * var(--u));
  padding: 0 calc(7 * var(--u));
  background: var(--mint);
  font-weight: 500;
}
.contact ul { list-style: none; }
.contact li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding-left: calc(5 * var(--u));
  white-space: nowrap;
}
.contact li img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.contact li b   { font-weight: 600; margin-right: calc(-4 * var(--u)); }

.creator-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.polaroid-img {                 /* รูปตัวละคร + กรอบโพลารอยด์ (svg เอียงไว้แล้ว) */
  position: absolute;
  top: calc(-0.5 * var(--u));
  left: calc(400.4 * var(--u));
  width: calc(397 * var(--u));
  height: auto;
}

.id-card {
  position: absolute;
  top: calc(476 * var(--u));
  left: calc(412 * var(--u));
  width: calc(357 * var(--u));
  height: calc(225 * var(--u));
  background: var(--cream);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: calc(22.5 * var(--u));
  transform: rotate(-4.9deg);
  transform-origin: top left;
}
.id-card .hole {
  position: absolute;
  top: calc(18 * var(--u));
  left: calc(140 * var(--u));
  width: calc(79 * var(--u));
  height: calc(14 * var(--u));
  background: var(--white);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: 999px;
}
.id-card .hole::before {           /* ปุ่มเล็กบนรูร้อยสาย (ต่อกับรูเนียนๆ ไม่มีเส้นคั่น) */
  content: "";
  position: absolute;
  top: calc(-8 * var(--u));
  left: calc(26 * var(--u));
  width: calc(22 * var(--u));
  height: calc(8 * var(--u));               /* ชิดขอบบนรูพอดี + พื้นขาวทับเส้นขอบรู */
  background: var(--white);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-bottom: 0;
  border-radius: calc(11 * var(--u)) calc(11 * var(--u)) 0 0;
}
.star {
  position: absolute;
  top: calc(432 * var(--u));
  left: calc(392 * var(--u));
  width: calc(112 * var(--u));
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   ตัวหนังสือวิ่ง
   ========================================================= */
.marquee {
  margin-top: calc(57 * var(--u));
  height: calc(73 * var(--u));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brown);
  color: var(--white);
}
.marquee-track {
  display: flex;
  gap: calc(44 * var(--u));
  width: max-content;
  font-weight: 600;
  font-size: calc(21 * var(--u));
  white-space: nowrap;
  animation: marquee 60s linear infinite;   /* ข้อความ 12 ชุด (เต็มจอกว้างได้) */
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - 22 * var(--u))); }
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  min-height: calc(314 * var(--u));
  padding: calc(42 * var(--u)) 0 calc(40 * var(--u));
  background: var(--green);
  font-size: calc(20.5 * var(--u));
  line-height: calc(33 * var(--u));
}
.footer-inner {
  width: calc(1024 * var(--u));
  margin: 0 auto;
  padding: 0 calc(87 * var(--u));
}
.footer-badge {
  width: calc(64 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
}

/* =========================================================
   📱 มือถือ (จอกว้างไม่เกิน 700px)
   ---------------------------------------------------------
   iPad / คอม ใช้เลย์เอาต์ตามแบบ (ย่อ-ขยายตามจอ)
   มือถือ: ตัวหนังสือใหญ่ขึ้น และจัดส่วนผู้สร้างเป็นแนวตั้ง
   ========================================================= */
/* =========================================================
   🖥 คอม (จอแนวนอนกว้างกว่า 700px): ย่อทั้งหน้าให้พอดีความสูงจอ
   เนื้อหาเป็นคอลัมน์กลางจอ กว้าง ≈ 0.9 × ความสูงจอ
   ของตกแต่ง (กันสาด / ตัวหนังสือวิ่ง / footer) ยังยืดเต็มจอ
   (iPad แนวตั้ง / มือถือ ไม่เปลี่ยน)
   ========================================================= */
@media (min-width: 701px) and (min-aspect-ratio: 1/1) {
  :root { --u: min(1px, calc(100vw / 1024), calc(100dvh * 0.9 / 1024)); }
}

@media (max-width: 700px) {
  /* ---- หัวเว็บ ---- */
  .welcome { margin-top: 14px; font-size: 16px; line-height: 1.6; }
  .tagline { margin-top: 4px;  font-size: 14.5px; line-height: 1.6; padding: 0 16px; }

  /* ---- ส่วนกระดาษ: ใช้สเกลใหญ่ขึ้นให้อ่านง่าย ---- */
  .printer { --u: min(1px, calc((100vw - 32px) / 560)); margin-top: 28px; }
  .slot     { left: 6px;  right: 6px;  width: auto; }
  .slot-bar { left: 18px; right: 18px; width: auto; }
  .paper {
    width: auto;
    min-height: 0;
    margin: 0 30px;
    padding: calc(62 * var(--u)) 18px 28px;
  }
  .paper.with-creator { min-height: 0; }

  .about h2 { font-size: calc(58 * var(--u)); line-height: 1.35; }

  /* ตัดบรรทัดตามความกว้างจอ แทนการขึ้นบรรทัดตายตัว */
  .pill br, .slide br, .bio br { display: none; }

  .pill  { padding: 16px 20px; border-radius: 28px; line-height: 1.75; }

  .story {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
    padding: 24px 20px 20px;
    border-radius: 28px;
  }
  .slides { order: -1; flex: 0 0 100%; display: grid; }
  .slide  { position: relative; inset: auto; grid-area: 1 / 1; display: flex; align-items: center; line-height: 1.75; }
  .play   { width: 44px; height: 44px; }

  /* ---- ผู้สร้าง: เรียงแนวตั้ง ---- */
  .creator       { flex-direction: column; min-height: 0; margin-top: 36px; }
  .creator-text  { width: auto; }
  .tilt          { margin: 12px 0 0 2px; font-size: calc(62 * var(--u)); }
  html[lang="en"] .tilt { font-size: calc(52 * var(--u)); }
  .bio           { margin-top: 28px; white-space: normal; font-size: calc(24 * var(--u)); line-height: 1.75; }
  .contact       { margin-top: 26px; font-size: calc(23 * var(--u)); line-height: 2; }
  .contact-label { margin-left: 0; }
  .contact li    { padding-left: 0; white-space: normal; }
  .contact li img { width: 18px; height: 18px; flex-shrink: 0; }

  .creator-visual {
    position: relative;
    width: calc(440 * var(--u));
    height: calc(720 * var(--u));
    margin: 28px auto 0;
  }
  .polaroid-img { left: calc(8.4 * var(--u)); }
  .id-card  { left: calc(20 * var(--u)); }
  .star     { left: 0; }

  /* ---- แถบวิ่ง + footer ---- */
  .marquee       { height: 44px; margin-top: 36px; }
  .marquee-track { font-size: 14px; gap: 28px; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 14px)); } }

  .footer       { min-height: 0; padding: 24px 0 32px; font-size: 12.5px; line-height: 1.75; }
  .footer-inner { width: auto; padding: 0 24px; }
  .footer-badge { width: 44px; margin-top: 24px; }
}

/* ลดการเคลื่อนไหวสำหรับคนที่ตั้งค่าไว้ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ข้อความแจ้งเรื่องเก็บข้อมูล (ใต้ปุ่ม) */
.privacy {
  max-width: calc(760 * var(--u));
  margin: calc(18 * var(--u)) auto 0;
  font-size: max(11px, calc(17 * var(--u)));
  line-height: 1.5;
  text-align: center;
  opacity: .65;
}