/* ==========================================================================
   YiBB — hero น้องหยิบอนุภาคเหลว + ปรับทั้งชุดแบบ editorial (สีเดิมทั้งหมด)
   แรงบันดาลใจ: Sculpture Hero (21st.dev) · คืนแบบเดิม: ลบ <link sculpt.css>
   ========================================================================== */

/* ---------- hero ---------- */
.sh{position:relative;isolation:isolate;overflow:hidden;padding:0;
  min-height:max(640px,calc(100svh - 68px - env(safe-area-inset-top,0px)));display:flex;touch-action:pan-y}
.sh-grid{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;width:100%;padding-top:22px;padding-bottom:44px;min-height:inherit}
.sh-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.sh-fallback{position:absolute;display:block;max-width:none!important;user-select:none;-webkit-user-drag:none;transition:opacity .5s ease;
  filter:drop-shadow(0 30px 40px rgba(242,84,45,.18))}
.sh[data-gl="on"] .sh-canvas{opacity:1}
.sh[data-gl="on"] .sh-fallback{opacity:0}

/* คำใหญ่จางๆ ด้านหลัง */
.sh-backdrop{position:absolute;left:50%;top:46%;z-index:0;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:Kanit,sans-serif;font-weight:800;font-size:min(36vw,560px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 20%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 85%);-webkit-background-clip:text;background-clip:text}

/* แถวบน */
.sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sh-eyebrow{margin:6px 0 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;font-weight:500}
.sh-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.sh-eyebrow span{color:var(--accent)}
.sh-top-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.sh .eyebrow{background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(8px)}
.sh-recent{position:static!important;display:flex;align-items:center;gap:8px;width:230px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;padding:7px 12px 7px 7px;font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:shIn .6s .6s both}
.sh-recent[hidden]{display:none!important}
.sh-recent>div{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sh-recent img{flex:0 0 34px;width:34px;height:34px;border-radius:9px;object-fit:cover;background:var(--surface-2)}
.sh-recent small{display:block;color:var(--muted);font-weight:500;font-size:12px}

/* พื้นที่วางน้องหยิบ (sculpture.js ใช้กรอบนี้) */
.sh-figure{position:relative;min-height:260px;margin:4px auto 0;width:min(560px,62%)}
.sh-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:opacity .8s;pointer-events:none}
.sh-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:shPulse 2.4s ease-in-out infinite}
.sh[data-touched="1"] .sh-hint{opacity:0}
@keyframes shPulse{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}
@keyframes shIn{from{opacity:0;transform:translateY(10px)}}

/* แถวล่าง: หัวเรื่องใหญ่ซ้าย / ข้อความ + ช่องวางลิงก์ขวา */
.sh-content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end;gap:clamp(24px,4vw,64px);margin-top:18px}
.sh-kick{margin:0 0 14px;font-size:13px;color:var(--muted);font-weight:500}
.sh-h1{margin:0;font-family:Kanit,sans-serif;font-weight:600;font-size:clamp(46px,6.8vw,104px);line-height:.98;white-space:nowrap;letter-spacing:-.035em;color:var(--text)}
.sh-h1>span{display:block;animation:shIn .8s cubic-bezier(.2,.8,.2,1) both}
.sh-h1>span+span{animation-delay:.12s}
.sh-h1 em{font-style:normal;color:var(--accent)}
.sh-acc{font-family:Mali,cursive;font-weight:700;color:var(--accent);letter-spacing:-.01em;font-size:.92em;padding-left:.04em}
.sh-aside{max-width:520px;justify-self:end;width:100%;padding-bottom:.4em;animation:shIn .8s .25s both}
.sh-body{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.55;text-wrap:pretty}
.sh .paste{border-radius:999px;padding:6px;border-color:var(--line-2);background:var(--surface)}
.sh .paste::before{border-radius:999px}
.sh .paste .in{padding-left:14px}
.sh .paste input{font-size:15px;padding:11px 0;text-overflow:ellipsis}
.sh .paste .pbtn{padding:6px 11px;font-size:13.5px}
.sh .paste .go{border-radius:999px;padding:12px 18px 12px 20px;font-size:15px}
.sh .paste .go svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.sh .paste .go:hover svg{transform:translateX(3px)}
.sh .status-line{padding:10px 16px 2px}
.sh-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.sh-links a{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text) 30%,transparent);padding-bottom:2px}
.sh-links a:hover{border-color:var(--accent);color:var(--accent)}
.sh-links a svg{transition:transform .3s}.sh-links a:hover svg{transform:translateX(3px)}
.sh-links span::before{content:"✓";color:var(--ok);font-weight:700;margin-right:6px}

@media (max-width:1023px){
  .sh-content{grid-template-columns:1fr;gap:22px}
  .sh-aside{justify-self:start;max-width:560px}
  .sh-figure{width:min(460px,78%)}
}
@media (max-width:640px){
  .sh{min-height:0}
  .sh-grid{padding-top:14px;padding-bottom:32px}
  .sh-top{flex-direction:column;align-items:flex-start;gap:10px}
  .sh-top-r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .sh-recent{display:none!important}
  .sh-eyebrow{font-size:11px;letter-spacing:.1em}
  .sh-figure{min-height:0;height:min(54vw,230px);width:80%}
  .sh-backdrop{top:30%;font-size:44vw}
  .sh-h1{font-size:clamp(42px,13.4vw,60px)}
  .sh .paste{border-radius:22px}
  .sh .paste::before{border-radius:24px}
  .sh .paste form{flex-wrap:wrap}
  .sh .paste .in{flex-basis:100%}
  .sh .paste .go{flex:1;border-radius:16px}
}

.sh-sup{margin-top:12px;font-size:13.5px}
.sh-sup+.sh-links{margin-top:10px}

/* ---------- ตอนแปลเป็นภาษาอื่น (Google แปลภาษา) ข้อความยาวขึ้น: ให้ตัดบรรทัดได้และเล็กลง ---------- */
.translated-ltr .sh-hint{display:none}
.translated-ltr .sh-content{margin-top:28px;align-items:start}
.translated-ltr .sh-kick .tr{display:inline;margin:0 .3em}
.translated-ltr .sh-h1{white-space:normal;font-size:clamp(38px,5vw,76px);line-height:1.04}
.translated-ltr .sh-acc{font-family:Kanit,sans-serif;font-weight:600;font-size:1em}
@media (min-width:1024px){.translated-ltr .sh-content{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:640px){.translated-ltr .sh-h1{font-size:clamp(34px,10vw,46px)}}
.translated-ltr .sh-kick .tr{height:auto}
.translated-ltr .sec-head h2,.translated-ltr .xs h2{font-size:clamp(24px,3vw,40px)}
.translated-ltr .xb-txt b{font-size:22px}
.translated-ltr .xc-chips button,.translated-ltr .xc-modes .mode b{font-size:13px}

/* ---------- ปรับทั้งชุด: หัวข้อแบบ editorial ---------- */
main{counter-reset:sec}
.sec-head .kicker{counter-increment:sec;display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important;font-weight:500;background:none!important;padding:0!important;margin:0 0 14px}
.sec-head .kicker::before{content:counter(sec,decimal-leading-zero);font-family:Kanit,sans-serif;font-weight:600;color:var(--accent);letter-spacing:.04em}
.sec-head .kicker::after{content:"";width:28px;height:1px;background:currentColor;order:-0}
.sec-head h2{font-family:Kanit,sans-serif;font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.02;letter-spacing:-.03em;margin:0}
.sec-head .result-line{margin-top:12px;max-width:40em}
.go{transition:background .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.go:hover{transform:translateY(-1px)}

:root[data-theme="dark"] .sh-fallback{filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
@media (prefers-reduced-motion:reduce){.sh-hint::before,.sh-h1>span,.sh-aside,.sh-recent{animation:none}.sh-canvas,.sh-fallback{transition:none}}