/* mechanics.css — หน้าเรียนรู้ "Bitcoin ทำงานยังไง"
   โหลดต่อจาก landing.css (ใช้โทเคนสีชุดเดียวกัน) เฉพาะหน้า /mechanics และ /th/mechanics

   แนวคิดภาพ (ทิศทางจาก Gemini 15/8): เล่าบิตคอยน์เป็น "เครื่องจักรป้ายพลิก"
   ต่อยอดจากอัตลักษณ์กระดานสนามบินของ BlockClock — ธุรกรรมคือตลับทองเหลืองที่ถูก
   ประทับตรา หย่อนลงราง คัดตามค่าธรรมเนียม แล้วถูกล็อกด้วยรหัสก่อนต่อเข้าโซ่

   กติกาเหล็ก: ข้อความสอนทั้งหมดต้องอยู่ใน HTML ตั้งแต่โหลด แอนิเมชันมีหน้าที่
   "ขยายความ" เท่านั้น ห้ามเป็นที่เดียวที่ข้อมูลอยู่ (หน้านี้มีไว้ให้ Google อ่าน) */

/* ─── เลย์เอาต์ร่วม ─────────────────────────────────────────── */

.mech-lede {
  font-size: clamp(1.0625rem, 2.1vw, 1.1875rem);
  color: var(--muted);
  max-width: 46rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}

/* ─── เครื่องเดินเรื่อง (Part A) ───────────────────────────── */

.journey {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  margin: 1.75rem 0 0;
}
@media (min-width: 46rem) { .journey { padding: 1.75rem; } }

/* ป้ายสถานีบนสุด — บอกตลอดว่าตอนนี้อยู่ช่วงไหนของการเดินทาง */
.stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.stations li {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--faint);
  border-top: 2px solid var(--border-soft);
  padding: .5rem .25rem 0;
  transition: color .3s, border-color .3s;
}
@media (min-width: 34rem) { .stations li { font-size: .6875rem; } }
.stations li[data-on="1"] { color: var(--gold); border-top-color: var(--gold); }

/* ผืนภาพ */
.journey-stage { position: relative; }
.journey-stage svg { display: block; width: 100%; height: auto; }

/* ─── กลไกป้ายพลิก ────────────────────────────────────────── */
/* ทุกไทล์มีรอยต่อกลางแนวนอนเหมือนกระดานสนามบิน — คือลายเซ็นของแบรนด์ */

.flap { fill: url(#flapFace); stroke: var(--sv-hair); stroke-width: 1; }
.seam { stroke: #05070a; stroke-width: 1.4; }
.rail { stroke: var(--sv-hair); stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.mono-t {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  fill: var(--sv-muted);
  font-size: 11px;
  letter-spacing: .08em;
}
.mono-t.lit { fill: var(--sv-gold); }
.mono-t.big { font-size: 15px; font-weight: 600; }
.disp { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; }

/* ตัวธุรกรรมที่วิ่งไปตามราง — ตำแหน่งถูกกำหนดด้วย data-step ที่ตัวครอบ */
.cassette { transition: transform .85s cubic-bezier(.32, .72, 0, 1); }
/* ระยะเลื่อนตรงกับระยะห่างสถานีในไฟล์ SVG (สถานีห่างกัน 196 หน่วย)
   ขั้น 1 หยุดกลางทางโดยตั้งใจ — "กำลังกระจายเข้าเครือข่าย" ยังไม่ถึง mempool */
[data-step="0"] .cassette { transform: translateX(0); }
[data-step="1"] .cassette { transform: translateX(98px); }
[data-step="2"] .cassette { transform: translateX(196px); }
[data-step="3"] .cassette { transform: translateX(392px); }
[data-step="4"] .cassette { transform: translateX(588px); }
[data-step="5"] .cassette { transform: translateX(588px); }

/* ฉากแต่ละขั้น — โชว์ทีละฉาก ไม่ใช่ซ้อนกันจนอ่านไม่ออก */
.scene { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
[data-step="0"] .scene-0,
[data-step="1"] .scene-1,
[data-step="2"] .scene-2,
[data-step="3"] .scene-3,
[data-step="4"] .scene-4,
[data-step="5"] .scene-5 { opacity: 1; }

/* ตราประทับลายเซ็น (ขั้น 0) */
[data-step="0"] .sig-lit { animation: sigStamp 1s .35s both; }
@keyframes sigStamp {
  0%   { opacity: 0; transform: translateY(-8px) scale(1.15); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; }
}

/* คลื่นกระจายเข้าเครือข่าย (ขั้น 1) */
[data-step="1"] .ping { animation: pingOut 1.6s ease-out infinite; }
[data-step="1"] .ping.d2 { animation-delay: .25s; }
[data-step="1"] .ping.d3 { animation-delay: .5s; }
@keyframes pingOut {
  from { r: 6; opacity: .55; }
  to   { r: 30; opacity: 0; }
}

/* ตัวนับ confirmation (ขั้น 5) */
[data-step="5"] .bury { animation: buryIn .6s ease-out both; }
[data-step="5"] .bury.b2 { animation-delay: .35s; }
[data-step="5"] .bury.b3 { animation-delay: .7s; }
[data-step="5"] .bury.b4 { animation-delay: 1.05s; }
@keyframes buryIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── แผงควบคุม ───────────────────────────────────────────── */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.ctl {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--fg);
  background: rgba(224, 171, 56, .06);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .875rem;
  cursor: pointer;
  min-height: 2.5rem;
}
.ctl:hover:not(:disabled) { border-color: var(--gold); }
.ctl:disabled { opacity: .35; cursor: default; }
.ctl-primary { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #1a1204; border-color: rgba(255, 230, 174, .45); font-weight: 600; }
.ctl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.step-count { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); margin-left: auto; }

/* ไม่มี JS = ซ่อนปุ่ม แต่บทเรียนด้านล่างยังอ่านครบ */
.no-js .controls { display: none; }

/* ─── รายการขั้นตอน (ข้อความจริงที่ Google อ่าน) ──────────── */

.steps-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .625rem; }
.steps-list li {
  border: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  border-radius: .75rem;
  padding: .875rem 1.125rem;
  background: rgba(224, 171, 56, .02);
  transition: border-color .3s, background .3s;
}
.steps-list li[data-on="1"] {
  border-left-color: var(--gold);
  background: rgba(224, 171, 56, .06);
  border-color: var(--border);
}
.steps-list h3 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.steps-list p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ปัญหาที่เจอตอนทดสอบจริง 15/8: ภาพขยับอยู่บนจอ แต่ข้อความที่อธิบายขั้นนั้น
   ตกไปอยู่ต่ำกว่าขอบจอ 221px — คนดูภาพแล้วไม่เห็นคำอธิบาย = หน้านี้ไม่สอนอะไรเลย
   แก้ด้วยการพับคำอธิบายของขั้นที่ยังไม่ถึง เหลือแต่หัวข้อ ทำให้ขั้นที่กำลังเล่น
   ขยับขึ้นมาอยู่ในสายตาเสมอ

   ⚠️ พับเฉพาะตอนมี JS (html ไม่มีคลาส no-js) — ถ้าปิด JS ต้องเห็นครบทุกบรรทัด
   ส่วน crawler อ่านได้ทุกกรณีอยู่แล้วเพราะข้อความอยู่ใน DOM ไม่ได้ถูกลบ */
html:not(.no-js) .steps-list .body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
html:not(.no-js) .steps-list li[data-on="1"] .body { grid-template-rows: 1fr; }
html:not(.no-js) .steps-list .body > p { overflow: hidden; }
html:not(.no-js) .steps-list li { cursor: pointer; }

/* คุมความสูงผืนภาพ ไม่ให้ดันข้อความตกจอบนจอเตี้ย */
.journey-stage svg { max-height: min(42vh, 300px); }

/* จอกว้าง: รายการขั้นตอนเป็นสองคอลัมน์ใต้ภาพ
   ลองวางภาพซ้าย-ข้อความขวาแล้ว แต่แผนภาพต้องการความกว้าง (สถานีเรียงกันสี่อัน)
   พอบีบลงคอลัมน์แคบ ตัวหนังสือในภาพเหลือราว 6px = อ่านไม่ออก
   สองคอลัมน์ใต้ภาพจึงลงตัวกว่า: ภาพได้ความกว้างเต็ม และหกขั้นจบใน 3 แถว */
@media (min-width: 52rem) {
  .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.steps-list .sn {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--gold);
  display: block;
  margin-bottom: .25rem;
}

/* ─── เครื่องล็อกรหัส (Part B) ────────────────────────────── */

.lock {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  margin: 1.5rem 0 0;
}
@media (min-width: 46rem) { .lock { padding: 1.75rem; } }
.lock svg { display: block; width: 100%; height: auto; }

/* ลองผิดสามครั้งแล้วถูกหนึ่งครั้ง วนไป — นี่คือหัวใจของบทเรียน */
.try { opacity: 0; }
.try-1 { animation: tryCycle 6s steps(1) infinite; }
.try-2 { animation: tryCycle 6s steps(1) infinite 1.5s; }
.try-3 { animation: tryCycle 6s steps(1) infinite 3s; }
.try-win { animation: winCycle 6s steps(1) infinite; }
@keyframes tryCycle { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes winCycle { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }
.nonce-spin { animation: nonceRoll .45s steps(4) infinite; }
@keyframes nonceRoll { to { transform: translateY(-48px); } }

/* ─── การ์ดเนื้อหา ────────────────────────────────────────── */

.mech-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 46rem) { .mech-cards { grid-template-columns: repeat(2, 1fr); } }
.mech-cards li {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
}
.mech-cards h3 { margin: 0 0 .375rem; font-size: 1.125rem; }
.mech-cards p { margin: 0; color: var(--muted); font-size: .9375rem; }
.mech-cards .metric {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: .5rem;
}

/* ชั้นของระบบ — พับเก็บได้ ของยาว */
.layers { display: grid; gap: .75rem; margin-top: 1.25rem; }
.layers details {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border-soft);
  border-radius: .875rem;
  padding: 1rem 1.25rem;
}
.layers summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
}
.layers summary::-webkit-details-marker { display: none; }
.layers summary::after { content: " +"; color: var(--gold); font-family: var(--font-mono); }
.layers details[open] summary::after { content: " −"; }
.layers .lsub { color: var(--faint); font-size: .875rem; margin: .375rem 0 0; }
.layers dl { margin: 1rem 0 0; }
.layers dt { font-weight: 600; color: var(--fg); font-size: .9375rem; margin-top: .875rem; }
.layers dd { margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; }

/* อภิธานศัพท์ */
.legend { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 46rem) { .legend { grid-template-columns: repeat(2, 1fr); } }
.legend li {
  border: 1px solid var(--border-soft);
  border-radius: .75rem;
  padding: .875rem 1.125rem;
}
.legend b { color: var(--gold); font-family: var(--font-mono); font-size: .875rem; letter-spacing: .06em; }
.legend p { margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; }

/* ตัวเลขที่อัปเดตสดได้ — ค่าตั้งต้นใน HTML เป็นค่าจริงเสมอ ไม่ใช่ขีดกลาง */
.live { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ─── ปิดการเคลื่อนไหวทั้งหมด ─────────────────────────────── */
/* บทเรียนต้องยังสอนได้ครบเมื่อไม่มีแอนิเมชัน — ฉากทุกฉากจะถูกแสดงนิ่ง ๆ */

@media (prefers-reduced-motion: reduce) {
  .cassette, .scene, .steps-list li, .stations li { transition: none !important; }
  .try, .try-1, .try-2, .try-3, .try-win, .nonce-spin,
  .ping, .sig-lit, .bury { animation: none !important; }
  .try-win { opacity: 1 !important; }
  .try-1, .try-2, .try-3 { opacity: 0 !important; }
}