/* ══════════════════════════════════════════════════════════════════════════
   fx.css — ชั้นลูกเล่นและแอนิเมชัน โหลดต่อจาก app.css
   ══════════════════════════════════════════════════════════════════════════
   ทำไมแยกไฟล์: app.css คือโครงกับโทเคน แก้แล้วกระทบทุกหน้ารวมหน้าแอป
   ส่วนไฟล์นี้เป็นของตกแต่งหน้าขายล้วน ๆ ถอดออกทั้งไฟล์แล้วเว็บต้องยังใช้งานได้

   กฎที่ยังต้องรักษาไว้แม้จะ "ตัดข้อจำกัด" แล้ว
   1. ห้าม letter-spacing / text-transform กับข้อความไทย
   2. ทุกแอนิเมชันต้องหยุดเมื่อผู้ใช้ปิดแอนิเมชันในเครื่อง
      (prefers-reduced-motion) — บล็อกรวมอยู่ท้ายไฟล์
   3. ห้ามให้เนื้อหาค้างมองไม่เห็นเพราะแอนิเมชันไม่ทำงาน
      ทุกอย่างที่ซ่อนไว้รอ reveal ต้องมีตัวปลดใน fx.js และใน media query ท้ายไฟล์
   4. รูปทุกอย่างต้องเป็นไฟล์ในเครื่อง CSP ไม่ให้โหลดรูปข้ามโดเมน
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --grad-blue:linear-gradient(135deg,#2563EB 0%,#4F8CFF 48%,#06B6D4 100%);
  --grad-warm:linear-gradient(135deg,#F59E0B 0%,#FB923C 55%,#F43F5E 100%);
  --grad-ink:linear-gradient(160deg,#0E1A31 0%,#132542 55%,#0B1220 100%);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.55);
  --fx-blur:saturate(150%) blur(12px);
}


/* ═══ 1 · แถบความคืบหน้าเวลาเลื่อนหน้า ═══════════════════════════════════ */
.qprog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;
  transform:scaleX(0);transform-origin:0 50%;background:var(--grad-blue);
  pointer-events:none;will-change:transform}


/* ═══ 2 · แสงเหนือ — พื้นหลังไล่สีที่ขยับช้า ๆ ═══════════════════════════
   ใช้กับกล่องที่ position:relative แล้วมันจะวาดอยู่ข้างหลังเนื้อหา
   สามก้อน สีต่างกัน ขยับคนละจังหวะ ไม่ให้เห็นเป็นลูปชัด ๆ */
.aurora{position:relative;overflow:hidden;isolation:isolate}
.aurora > *{position:relative;z-index:1}
/* ขนาดก้อนต้องใหญ่กว่ารัศมีเบลอหลายเท่า ไม่งั้นจางจนมองไม่เห็น
   ของเดิมตั้ง 46vw (บนมือถือ = 172px) แล้วเบลอ 64px → หายไปเลย
   ใช้ clamp กันพลาดแบบนั้นอีก */
.aurora::before,.aurora::after{content:"";position:absolute;z-index:0;
  border-radius:50%;filter:blur(46px);opacity:.72;pointer-events:none}
.aurora::before{width:clamp(300px,48vw,660px);height:clamp(300px,48vw,660px);
  top:-14%;right:-14%;background:radial-gradient(circle,#8FB4FF 0%,rgba(143,180,255,0) 66%);
  animation:auroraA 19s ease-in-out infinite}
.aurora::after{width:clamp(250px,40vw,540px);height:clamp(250px,40vw,540px);
  bottom:-24%;left:-16%;background:radial-gradient(circle,#7FEBFA 0%,rgba(127,235,250,0) 68%);
  animation:auroraB 23s ease-in-out infinite}
.aurora .blob3{position:absolute;z-index:0;
  width:clamp(210px,30vw,380px);height:clamp(210px,30vw,380px);
  top:30%;left:46%;border-radius:50%;
  filter:blur(52px);opacity:.5;pointer-events:none;
  background:radial-gradient(circle,#FCC94E 0%,rgba(252,201,78,0) 68%);
  animation:auroraC 27s ease-in-out infinite}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5%,7%,0) scale(1.12)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8%,-6%,0) scale(1.16)}}
@keyframes auroraC{0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-8%,5%,0)} 66%{transform:translate3d(6%,-7%,0)}}

/* ตารางจุดจาง ๆ ให้พื้นหลังมีเนื้อ ไม่เรียบจนดูว่าง
   วาดลงพื้นหลังของตัวเอง ไม่ใช้ ::before เพราะ .aurora จองไว้แล้วทั้งสองตัว
   พื้นหลังของกล่องจะอยู่ใต้ ::before/::after ของตัวเองเสมอ ลำดับเลยถูกอยู่ */
.dotgrid{
  background-image:radial-gradient(circle at 1px 1px,var(--hair) 1px,transparent 0);
  background-size:26px 26px;background-position:0 0;
  -webkit-mask-image:none;mask-image:none}


/* ═══ 3 · ตัวอักษร — ไฮไลต์และไล่สี ══════════════════════════════════════ */
/* .hl = ขีดเน้นสีส้มใต้คำ วาดเองด้วย ::after จะได้สั่งให้มันค่อย ๆ ยืดออกได้
   ห้ามใช้ background-image กับ text เพราะภาษาไทยมีสระบน/ล่าง ขีดจะทับสระ */
/* z-index ตรงนี้ห้ามลบ — ต้องมีเพื่อสร้าง stacking context ของตัวเอง
   ไม่งั้น ::after ที่เป็น z-index:-1 จะทะลุไปอยู่หลังพื้นหลังของทั้ง section แล้วหายไปเลย */
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.36em;
  z-index:-1;border-radius:.2em;background:rgba(245,158,11,.34);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .62s cubic-bezier(.22,1,.36,1) .22s}
.in .hl::after,.hl.on::after{transform:scaleX(1)}

/* .grad = ตัวอักษรไล่สี ใช้กับคำเดียวหรือวลีสั้น ห้ามใช้ทั้งย่อหน้า */
.grad{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* ป้ายเล็กมีจุดกะพริบ บอกว่า "ยังมีชีวิต" */
.livedot{display:inline-flex;align-items:center;gap:8px}
.livedot::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--rise);box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}


/* ═══ 4 · การโผล่เข้ามาของแต่ละบล็อก ════════════════════════════════════
   .fx = ตัวตั้งต้น ยังไม่โผล่ · .in = โผล่แล้ว (fx.js เป็นคนใส่ให้)
   --i = ลำดับในกลุ่ม เอาไว้หน่วงทีละใบ ให้เข้ามาเป็นระลอกไม่ใช่พรวดเดียว */
.fx{opacity:0;will-change:opacity,transform;
  transition:opacity .66s cubic-bezier(.22,1,.36,1),transform .66s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 78ms)}
.fx.up{transform:translate3d(0,26px,0)}
.fx.left{transform:translate3d(-28px,0,0)}
.fx.right{transform:translate3d(28px,0,0)}
.fx.zoom{transform:scale(.94)}
.fx.in{opacity:1;transform:none}


/* ═══ 5 · การ์ดที่เอียงตามเมาส์ ═════════════════════════════════════════
   --mx/--my เป็นตำแหน่งเมาส์ 0-1 fx.js เป็นคนเขียนลงมา
   จอสัมผัสไม่ต้องทำอะไร เพราะ hover ไม่มีจริง */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;transition:transform .32s cubic-bezier(.22,1,.36,1)}
  .tilt:hover{transform:perspective(900px)
    rotateX(calc((var(--my,.5) - .5) * -7deg))
    rotateY(calc((var(--mx,.5) - .5) * 9deg))
    translate3d(0,-4px,0)}
  /* แสงวิ่งตามเมาส์บนการ์ด */
  .sheen{position:relative;overflow:hidden}
  .sheen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .3s ease;
    background:radial-gradient(240px circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%),
      rgba(37,99,235,.13),transparent 62%)}
  .sheen:hover::after{opacity:1}
}


/* ═══ 6 · ปุ่ม — มีน้ำหนักและมีแสงวิ่งตอนชี้ ════════════════════════════ */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity .26s ease;background:var(--grad-blue)}
.btn:not(.ghost):not(.line):hover::after{opacity:1}
.btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:var(--sh-blue)}
.btn{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}
.btn:active{transform:translateY(0)}

/* ปุ่มหลักบนแถบส้ม ห้ามโดนไล่สีน้ำเงินทับ */
.strip .btn::after{display:none}


/* ═══ 7 · แถบตัวเลขใหญ่ ═════════════════════════════════════════════════ */
.numband{background:var(--grad-ink);border-radius:var(--r-l);color:#EAF0FA;
  padding:44px 38px;position:relative;overflow:hidden}
.numband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 12% 0%,rgba(90,141,246,.34),transparent 62%),
             radial-gradient(46% 80% at 88% 100%,rgba(245,158,11,.20),transparent 64%)}
.numband > *{position:relative}
.numband .nb-h{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap;margin-bottom:30px}
.numband h2{color:#fff;font-size:clamp(22px,2.9vw,32px)}
.numband .nb-h p{color:rgba(234,240,250,.72);font-size:14.5px;line-height:1.75;max-width:44ch}
.numband .ns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.numband .n .v{font:700 clamp(30px,4vw,46px)/1.05 var(--disp);
  font-variant-numeric:tabular-nums;color:#fff}
.numband .n .v small{font-size:.5em;font-weight:600;margin-left:3px;
  color:rgba(234,240,250,.7)}
.numband .n .k{margin-top:9px;font-size:13.5px;color:rgba(234,240,250,.72);line-height:1.7}
@media (max-width:760px){
  .numband{padding:32px 24px}
  .numband .ns{grid-template-columns:1fr 1fr;gap:22px}
}


/* ═══ 8 · แถบมืด — ใช้เล่าเรื่องความลับของข้อมูล ═══════════════════════
   ทั้งเว็บสว่างหมด พอมีแถบมืดคั่นหนึ่งช่วง สายตาจะได้พัก
   และเรื่องที่เล่าตรงนี้ (ข้อมูลลูกค้า) ก็ควรดูหนักแน่นกว่าส่วนอื่น */
.band.ink{background:var(--grad-ink);color:#EAF0FA;position:relative;overflow:hidden}
.band.ink::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 70% at 78% 8%,rgba(90,141,246,.30),transparent 64%),
             radial-gradient(40% 60% at 8% 96%,rgba(6,182,212,.20),transparent 66%)}
.band.ink > *{position:relative}
.band.ink h2,.band.ink h3{color:#fff}
.band.ink .band-head p,.band.ink .lede{color:rgba(234,240,250,.76)}
.band.ink .kicker{background:rgba(122,165,255,.16);color:#A8C4FF}
.band.ink .fine{color:rgba(234,240,250,.6)}
.band.ink a{color:#9DC0FF}


/* ═══ 9 · เส้นแบ่งข้อมูล เวอร์ชันบนพื้นมืด ══════════════════════════════ */
.band.ink .split{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);
  backdrop-filter:var(--fx-blur);-webkit-backdrop-filter:var(--fx-blur)}
.band.ink .split .side.local{background:rgba(255,255,255,.03)}
.band.ink .split .cnt{color:rgba(234,240,250,.55)}
.band.ink .split li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);
  color:rgba(234,240,250,.88)}
.band.ink .split .side.cloud li{background:rgba(122,165,255,.17);color:#BBD3FF}
.band.ink .split .gate{background:var(--grad-blue)}
/* หัวข้อในเส้นแบ่งถูกกำหนดสีไว้ในสไตล์ของหน้าแรกด้วย var(--text)/var(--signal)
   ซึ่งบนแถบมืดยังเป็นค่าของธีมสว่างอยู่ อ่านไม่ออก ต้องเขียนทับให้ชัดตรงนี้
   ใช้ selector ที่ยาวกว่าเดิม (.band.ink นำหน้า) เพื่อให้ชนะแน่นอน */
.band.ink .split .side.local h3{color:#FFFFFF}
.band.ink .split .side.cloud h3{color:#9DC0FF}
.band.ink .split .side.local h3,.band.ink .split .side.cloud h3{opacity:1}
.band.ink .iso figcaption{color:rgba(234,240,250,.72)}
.band.ink .iso figcaption b{color:#fff}
.band.ink .pr-note{color:rgba(234,240,250,.66);border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04)}


/* ═══ 10 · ขั้นตอน — เส้นเชื่อมที่ค่อย ๆ ลากออกมา ═══════════════════════ */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--signal),var(--cyan),var(--orange));
  opacity:.28;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s cubic-bezier(.22,1,.36,1) .1s}
.steps.in::before{transform:scaleX(1)}
.steps > *{position:relative;z-index:1}
@media (max-width:860px){ .steps::before{display:none} }

/* ตัวเลขขั้นตอน เด้งเบา ๆ ตอนโผล่ */
.stepn{position:relative;overflow:visible}
.stepn::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--signal);opacity:0}
.fx.in .stepn::after{animation:halo 1.5s cubic-bezier(.22,1,.36,1) .2s}
@keyframes halo{0%{opacity:.6;transform:scale(.82)}100%{opacity:0;transform:scale(1.5)}}


/* ═══ 11 · การ์ดฟีเจอร์ — ไอคอนมีสีประจำตัว ═════════════════════════════ */
.fcard{position:relative;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-l);padding:26px 24px 24px;box-shadow:var(--sh-1);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease,border-color .26s ease}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent}
.fcard .fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:16px;background:var(--accent-soft);color:var(--accent-ink);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fcard:hover .fi{transform:rotate(-7deg) scale(1.08)}
.fcard .fi svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:17.5px;margin-bottom:7px}
.fcard p{font-size:14.6px;color:var(--muted);line-height:1.82}
/* เส้นไล่สีบางๆ ที่ขอบบน โผล่ตอนชี้ */
.fcard::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;
  border-radius:2px;background:var(--grad-blue);transform:scaleX(0);
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.fcard:hover::before{transform:scaleX(1)}


/* ═══ 12 · บทความ ═══════════════════════════════════════════════════════ */
.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.art{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);height:100%;
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease}
.art:hover{transform:translateY(-5px);box-shadow:var(--sh-3);text-decoration:none}
.art .cov{aspect-ratio:16/9;background:var(--paper-2);overflow:hidden;position:relative}
.art .cov img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.art:hover .cov img{transform:scale(1.06)}
/* ไม่มีรูปปก = วาดลายไล่สีแทน จะได้ไม่โบ๋ */
.art .cov.ph{background:var(--grad-blue);position:relative}
.art .cov.ph::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.30) 1.5px,transparent 0);
  background-size:20px 20px}
.art .bd{padding:20px 21px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.art .tag{font:600 11.5px/1 var(--body);color:var(--accent-ink);background:var(--accent-soft);
  border-radius:var(--r-pill);padding:5px 11px;align-self:flex-start}
.art h3{font-size:17px;line-height:1.45;color:var(--text)}
.art p{font-size:14.2px;color:var(--muted);line-height:1.8;flex:1}
.art .mt{font:500 12.5px/1 var(--mono);color:var(--muted);
  display:flex;gap:10px;align-items:center}
@media (max-width:900px){ .arts{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .arts{grid-template-columns:1fr} }

/* หน้าบทความเดี่ยว */
.post{max-width:74ch;margin:0 auto}
.post .phead{margin-bottom:30px}
.post .phead h1{font-size:clamp(27px,4vw,42px);margin-bottom:14px}
.post .phead .mt{font:500 13px/1 var(--mono);color:var(--muted);display:flex;
  gap:12px;align-items:center;flex-wrap:wrap}
.post .cov{border-radius:var(--r-l);overflow:hidden;margin-bottom:32px;
  box-shadow:var(--sh-2);aspect-ratio:16/9;background:var(--paper-2)}
.post .cov img{width:100%;height:100%;object-fit:cover;display:block}
.pbody{font-size:16.6px;line-height:1.92;color:var(--text-2)}
.pbody > * + *{margin-top:20px}
.pbody h2{font-size:clamp(20px,2.6vw,26px);margin-top:42px;color:var(--text)}
.pbody h3{font-size:18px;margin-top:32px;color:var(--text)}
.pbody ul,.pbody ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.pbody li{line-height:1.86}
.pbody strong,.pbody b{color:var(--text);font-weight:600}
.pbody blockquote{border-left:3px solid var(--signal);padding:4px 0 4px 20px;
  color:var(--muted);background:var(--paper-2);border-radius:0 var(--r-m) var(--r-m) 0;
  padding-right:18px}
.pbody blockquote > * + *{margin-top:12px}
.pbody code{font:500 .88em/1.5 var(--mono);background:var(--paper-2);
  padding:2px 7px;border-radius:7px;color:var(--text)}
.pbody pre{background:var(--paper-3);padding:18px 20px;border-radius:var(--r-m);
  overflow-x:auto;border:1px solid var(--hair)}
.pbody pre code{background:none;padding:0}
.pbody img{border-radius:var(--r-m);width:100%;height:auto;display:block}
.pbody table{width:100%;border-collapse:collapse;font-size:15px}
.pbody th,.pbody td{padding:11px 14px;border-bottom:1px solid var(--hair-2);text-align:left}
.pbody th{font-weight:600;color:var(--text);background:var(--paper-2)}
.pbody hr{border:0;border-top:1px solid var(--hair);margin:34px 0}


/* ═══ 12.5 · ภาพหน้าจอโปรแกรมจริง ═══════════════════════════════════════
   ภาพพวกนี้จับจากโปรแกรมจริงด้วย OrderBox/make_web_shots.py
   ข้อมูลในภาพเป็นของแต่งขึ้นทั้งหมด ห้ามเอาภาพที่มีข้อมูลลูกค้าจริงมาลงเด็ดขาด
   เพราะหน้าเว็บนี้สัญญาไว้เองว่าข้อมูลลูกค้าไม่ออกจากคอมที่ร้าน */
.shots{display:grid;gap:20px}
.shotframe{border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  border:1px solid var(--hair);box-shadow:var(--sh-3);position:relative}
.shotframe img{display:block;width:100%;height:auto}
.shotframe .cap{position:absolute;left:16px;bottom:16px;z-index:2;
  background:var(--glass);backdrop-filter:var(--fx-blur);-webkit-backdrop-filter:var(--fx-blur);
  border:1px solid var(--glass-line);border-radius:var(--r-pill);
  padding:9px 16px;font:600 13.5px/1 var(--body);color:var(--text);box-shadow:var(--sh-2)}
.shots .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){
  .shots .pair{grid-template-columns:1fr}
  .shotframe .cap{left:11px;bottom:11px;padding:7px 13px;font-size:12.5px}
}
/* บนมือถือใช้ภาพคนละไฟล์ที่ตัดเอาเฉพาะเนื้อหาฝั่งขวามาแล้ว (ดู <picture> ในเทมเพลต)
   เคยลองทำเป็นกล่องเลื่อนแนวนอน ปรากฏว่าเปิดมาเห็นแต่แถบเมนูซ้าย ไม่เห็นของสำคัญเลย
   และเคยลองย่อทั้งจอ ตัวหนังสือก็เล็กจนอ่านไม่ออก */
.shotframe picture{display:block}

/* ═══ 13 · ปุ่มกลับขึ้นบน ════════════════════════════════════════════════ */
.totop{position:fixed;right:20px;bottom:22px;z-index:60;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--hair);background:var(--surface);
  color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .28s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--signal);border-color:var(--signal)}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
body.app .totop{bottom:calc(78px + env(safe-area-inset-bottom))}


/* ═══ 14 · การ์ดลอยข้างจอจำลอง ══════════════════════════════════════════ */
.tagf{animation:bob 5.6s ease-in-out infinite}
.tagf.t2{animation-delay:-2.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* มือถือในหน้าแรก ลอยคนละจังหวะกับป้าย */
.phone{animation:bob 7.4s ease-in-out infinite;animation-delay:-1.2s}


/* ═══ 15 · แถบโลโก้ช่องทาง — ไล่เข้ามาทีละใบ ════════════════════════════ */
.chan .c{transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease}
@media (hover:hover){ .chan .c:hover{transform:translateY(-5px) scale(1.02)} }


/* ═══ 16 · เคารพการตั้งค่า "ลดการเคลื่อนไหว" ════════════════════════════
   ปิดทุกอย่างที่ขยับ แต่ต้องปลดของที่ซ่อนไว้ให้เห็นครบด้วย
   ห้ามมีเนื้อหาไหนหายไปเพราะผู้ใช้ปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .fx{opacity:1 !important;transform:none !important}
  .hl::after{transform:scaleX(1) !important}
  .steps::before{transform:scaleX(1) !important}
  .qprog{display:none}
}