/* หน้า "เกี่ยวกับเรา" /about — 2026-10-29 · คลาสขึ้นต้น sf-about (ห้าม ad-) · สีผ่านตัวแปรของ storefront.css
   ภาพทั้งหมดเป็น SVG วาดเอง เคลื่อนไหวด้วย CSS · ลดการเคลื่อนไหว = ปิดทุกอัน แสดงภาพนิ่งที่ครบสมบูรณ์ */

.sf-about { margin-block: 36px 80px; }
.sf-about > * { max-width: 1120px; margin-inline: auto; }
.sf-about .sf-display span { color: var(--sf-pink); }

/* ปุ่มรอง (ขาว ตัวม่วง ขอบม่วงอ่อน) ใช้เฉพาะหน้านี้ */
.sf-pill-ghost { background: #fff; color: var(--sf-violet); box-shadow: inset 0 0 0 1.5px var(--purple-br); }
.sf-pill-ghost:hover { background: var(--purple-lt); }

/* ═══════════ เปิดหน้า ═══════════ */
.sf-about-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; margin-block: 24px 72px; }
.sf-about-hero h1 { margin: 0 0 16px; font-size: clamp(36px, 5.6vw, 60px); }
.sf-about-lead { margin: 0 0 26px; max-width: 34em; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.sf-about-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-about-cta .sf-pill { min-height: 46px; padding-inline: 24px; }

/* เวทีสีมะนาว = ป้ายสดบนกระดาษขาว (ไม่มีข้อความบนพื้นสี) */
.sf-about-stage { background: var(--sf-lime); border-radius: 32px; padding: 28px 24px 10px; overflow: hidden; }
.sf-about-stage svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }

.ab-led { animation: ab-blink 1.2s steps(2, jump-none) infinite; }
.ab-in-sheet { animation: ab-feed 5.2s infinite; }
.ab-sheet { animation: ab-print 5.2s infinite; }
@keyframes ab-blink { 50% { opacity: .25; } }
/* กระดาษออก: ค่อยๆ ไหลออกจากช่อง (ease-out แบบเอ็กซ์โปเนนเชียล) ค้างให้เห็น แล้วจางหายก่อนรอบใหม่ */
@keyframes ab-print {
  0%   { transform: translateY(-104px); opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  58%  { transform: translateY(0); opacity: 1; }
  86%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(18px); opacity: 0; }
}
@keyframes ab-feed {
  0%   { transform: translateY(-6px); opacity: 0; }
  8%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(14px); opacity: 1; }
  60%, 100% { transform: translateY(14px); opacity: 0; }
}

/* ═══════════ หัวข้อ + ส่วนเนื้อหา ═══════════ */
.sf-about-sec { margin-block: 0 72px; }
.sf-about-sec h2, .sf-about-end h2 { margin: 0 0 22px; font-size: clamp(28px, 4vw, 42px); }

.sf-about-vision {
  margin: 0; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--purple-lt);
  font-size: clamp(21px, 2.8vw, 32px); font-weight: 700; line-height: 1.5; color: var(--sf-ink); text-wrap: balance;
}
/* ไฮไลต์ปากกามาร์คเกอร์ใต้คำเดียว (ตัวหนังสือยังเป็นหมึกบนพื้นอ่อน) */
.sf-about-vision mark { background: linear-gradient(transparent 58%, var(--sf-lime) 58% 92%, transparent 92%); color: inherit; padding-inline: 2px; }

/* พันธกิจ: แถวเรียบแบ่งด้วยเส้นบาง */
.sf-about-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sf-about-rows li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 4px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.6; }
.sf-about-tick { flex: none; width: 28px; height: 28px; margin-top: 1px; color: var(--sf-violet); }

/* ═══════════ เครื่องจักร (ไอคอนเคลื่อนไหว) ═══════════ */
.sf-about-machines { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
.sf-about-m { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 22px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sf-about-m-art { display: grid; place-items: center; margin-bottom: 8px; padding: 12px; border-radius: 12px; background: #fff; }
.sf-about-m-art svg { display: block; width: 100%; height: auto; max-height: 170px; }
.sf-about-m h3 { margin: 0; padding-inline: 8px; font-size: 18.5px; line-height: 1.3; }
.sf-about-m p { margin: 0; padding-inline: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* หัวพิมพ์วิ่งไป-กลับ + แถบหมึกไล่ตาม (ใช้ transform ล้วน ลื่นบนมือถือ) */
.ab-head { animation: ab-sweep 4.4s ease-in-out infinite; }
.ab-ink-line { transform-box: fill-box; transform-origin: left center; animation: ab-ink 4.4s ease-in-out infinite; }
@keyframes ab-sweep { 0%, 6% { transform: translateX(0); } 50%, 56% { transform: translateX(300px); } 100% { transform: translateX(0); } }
@keyframes ab-ink {
  0%, 6% { transform: scaleX(.04); fill: #FF2E93; }
  50%, 56% { transform: scaleX(1); fill: #FF2E93; }
  57% { fill: #5B18F2; }
  100% { transform: scaleX(.04); fill: #5B18F2; }
}

/* ลูกกลิ้งหมุนสวนทางกัน · กระดาษสองแผ่นไหลผ่านช่องกลางสลับกัน */
.sf-about .ab-roll { transform-box: fill-box; transform-origin: center; animation: ab-spin 3.6s linear infinite; }
.sf-about .ab-roll-rev { animation-direction: reverse; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-paper { animation: ab-pass 3.6s linear infinite; }
.ab-paper-2 { animation-delay: -1.8s; }
@keyframes ab-pass { from { transform: translateX(0); } to { transform: translateX(220px); } }

/* ใบมีดวิ่งรอบรูปทรง รอยตัดสีม่วงไล่ตามความยาวเส้น */
.ab-cut { stroke-dasharray: 100; animation: ab-draw 4.2s linear infinite; }
.ab-blade { offset-path: path("M40 34H120A12 12 0 0 1 132 46V104A12 12 0 0 1 120 116H40A12 12 0 0 1 28 104V46A12 12 0 0 1 40 34Z"); offset-rotate: 0deg; animation: ab-travel 4.2s linear infinite; }
@keyframes ab-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 70%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ab-travel { 0% { offset-distance: 0%; opacity: 1; } 70% { offset-distance: 100%; opacity: 1; } 71%, 100% { offset-distance: 100%; opacity: 0; } }

/* ═══════════ บริการ ═══════════ */
.sf-about-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin: 0; }
.sf-about-services > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sf-about-services svg { grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; color: var(--sf-violet); }
.sf-about-services dt { font-size: 18.5px; font-weight: 700; line-height: 1.3; }
.sf-about-services dd { margin: 4px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.sf-about-services dd a { margin-left: 4px; color: var(--sf-violet); font-weight: 600; text-underline-offset: 3px; }
.sf-about-services dd a:hover { color: var(--sf-pink-dk); }

/* ═══════════ ปิดหน้า ═══════════ */
.sf-about-end { padding: clamp(28px, 5vw, 52px) 0 0; border-top: 1px solid var(--line); }
.sf-about-end p { margin: 0 0 22px; font-size: 17px; color: var(--ink-soft); }

/* ═══════════ มือถือ ═══════════ */
@media (max-width: 880px) {
  .sf-about-hero { grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }
  .sf-about-machines { grid-template-columns: 1fr 1fr; }
  .sf-about-m-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sf-about { margin-top: 24px; }
  .sf-about-lead { font-size: 16.5px; }
  .sf-about-cta .sf-pill { flex: 1 1 auto; justify-content: center; }
  .sf-about-sec { margin-bottom: 52px; }
  .sf-about-machines { grid-template-columns: 1fr; gap: 16px; }
  .sf-about-services { grid-template-columns: 1fr; }
  .sf-about-rows li { font-size: 16.5px; }
}

/* ลดการเคลื่อนไหว: ทุกภาพหยุดนิ่งในท่าที่ครบสมบูรณ์ */
@media (prefers-reduced-motion: reduce) {
  .ab-led, .ab-in-sheet, .ab-sheet, .ab-head, .ab-ink-line, .sf-about .ab-roll, .ab-paper, .ab-cut, .ab-blade { animation: none; }
  .ab-in-sheet, .ab-paper { display: none; }
  .ab-head { transform: translateX(150px); }
  .ab-blade { offset-distance: 25%; }
  .ab-cut { stroke-dashoffset: 0; }
}