/* ============================================================
   wansuk.com — Time (เวลา) product page
   builds on style.css (aurora stage + glass primitives)
   ภาพนำ ข้อความรอง — ทุกบล็อกให้ art กินพื้นที่มากกว่าคำ
   ============================================================ */

/* ---------- 1. Page chrome ---------- */
.t-page{padding:24px 0 18px}
/* ---------- 2. Hero ----------
   การ์ดกว้างเท่าหน้าแรกอยู่แล้ว (ใช้ .wrap ตัวเดียวกัน = 1180px)
   ส่วนความสูง: ใส่ .hero--full ให้เต็มจอเหมือนหน้าแรก แล้วสั่งให้การ์ดยืดเต็ม
   พื้นที่ที่เหลือ แทนที่จะสูงตามเนื้อหา (เดิมสูง 704px คงที่ทุกจอ)
   align-content:stretch ทับค่า center ของ .hero--full เพื่อให้ .wrap ยืดได้ */
.t-hero.hero--full{align-content:stretch;padding:clamp(10px,2.2vh,26px) 0}
.t-hero.hero--full > .wrap{display:flex;flex-direction:column;min-height:0}
.t-hero.hero--full .stage{flex:1;display:flex;flex-direction:column;min-height:0}

.t-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,48px);align-items:center;
  padding:clamp(14px,3vh,38px) 0 clamp(12px,2.4vh,30px);
  flex:1;
}
/* เนื้อหาในการ์ดต้องย่อตามความสูงจอด้วย ไม่งั้นจอเตี้ยจะล้นออกนอกการ์ด */
.t-hero.hero--full h1{font-size:clamp(27px,min(4.4vw,6.2vh),52px)}
.t-hero.hero--full .t-hero__lead{margin-top:clamp(9px,1.7vh,16px);font-size:clamp(15px,2vh,17px)}
.t-hero.hero--full .t-hero__cta{margin-top:clamp(15px,2.8vh,26px)}
/* ภาพโทรศัพท์คือชิ้นที่สูงที่สุด (อัตราส่วน 260:400) จึงผูกความกว้างกับ vh */
.t-hero.hero--full .t-phone .art{max-width:min(335px,38vh)}
/* Thai headline: keep the Thai face, borrow only the hero gradient */
.t-hero h1{
  font-family:var(--ff-th);letter-spacing:-.01em;
  font-size:clamp(33px,4.4vw,52px);font-weight:700;line-height:1.28;
}
.t-hero h1 .accent{
  font-weight:700;
  background:linear-gradient(110deg,#3b93f7 0%,#7a8cff 32%,#0f5ccd 64%,#0a2a63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.t-hero__lead{margin-top:16px;font-size:17px;color:var(--ink-soft);max-width:30ch}
.t-hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* phone artwork */
.t-phone{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.t-phone .art{width:100%;max-width:335px;filter:drop-shadow(0 26px 44px rgba(12,58,128,.26))}
.t-phone .chip{top:10px;right:-6px}
.t-phone .chip--pin{top:auto;bottom:22px;right:auto;left:-10px;animation-delay:-2.2s}
.chip--pin svg{color:#f2578c}

/* ---------- 2b. ภาพโทรศัพท์ที่ขยับได้ (prefix .tx-) ----------
   เล่าเป็นลำดับเหมือนใช้งานจริง: เปิดแชท → ข้อความเด้ง → กดปุ่ม →
   สลิปขึ้น → ติ๊กถูก → พิกัดหล่นลงมา → เวลา แล้วค้างไว้ที่ลูปเบา ๆ   */
@keyframes txFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes txIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes txInL{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes txInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes txUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes txPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes txDrop{
  0%{opacity:0;transform:translateY(-14px)}
  70%{opacity:1;transform:translateY(2px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes txRipple{
  0%{opacity:.7;transform:scale(1)}
  28%{opacity:0;transform:scale(1.14)}
  100%{opacity:0;transform:scale(1.14)}
}
@keyframes txBreathe{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes txGlare{0%{transform:translateX(0)}45%,100%{transform:translateX(330px)}}

.tx-body{animation:txFloat 7s ease-in-out infinite}
.tx-head{animation:txIn .7s cubic-bezier(.2,.8,.3,1) .25s both}
.tx-b1{animation:txInL .7s cubic-bezier(.2,.8,.3,1) .5s both}
.tx-b2{animation:txInR .7s cubic-bezier(.2,.8,.3,1) .85s both}
.tx-card{animation:txUp .8s cubic-bezier(.2,.8,.3,1) 1.2s both}
.tx-bar{animation:txIn .7s cubic-bezier(.2,.8,.3,1) 1.05s both}
.tx-check{transform-box:fill-box;transform-origin:center;animation:txPop .6s cubic-bezier(.34,1.56,.64,1) 1.55s both}
.tx-photo{animation:txIn .6s cubic-bezier(.2,.8,.3,1) 1.7s both}
.tx-pin{animation:txDrop .7s cubic-bezier(.2,.8,.3,1) 1.85s both}
.tx-clock{animation:txIn .6s cubic-bezier(.2,.8,.3,1) 2s both}
.tx-row{animation:txIn .6s cubic-bezier(.2,.8,.3,1) 2.15s both}
/* วงกระเพื่อมรอบปุ่มที่กด บอกว่า "แตะตรงนี้" */
.tx-ripple{transform-box:fill-box;transform-origin:center;animation:txRipple 3.6s ease-out 1.9s infinite}
.tx-avatar{animation:txBreathe 3.4s ease-in-out infinite}
.tx-send{transform-box:fill-box;transform-origin:center;animation:txBreathe 2.6s ease-in-out 2.4s infinite}
.tx-glare{animation:txGlare 8s ease-in-out 2.6s infinite}

/* ---------- 3. Flow: three screens ---------- */
.t-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.t-frame{
  margin:0;padding:22px 20px 20px;border-radius:var(--r-xl);text-align:center;
  display:flex;flex-direction:column;
}
.t-frame svg{width:100%;max-width:190px;margin:0 auto;filter:drop-shadow(0 16px 26px rgba(12,58,128,.18))}
.t-frame figcaption{margin-top:auto;padding-top:18px;font-size:16px;font-weight:600;color:var(--navy-800)}
.t-frame figcaption i{
  display:block;margin-bottom:6px;font-family:var(--ff-en);font-style:normal;
  font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--sky-400);
}
.t-flow__tail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.t-tick{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-sm);
}
.t-tick svg{width:18px;height:18px;color:var(--blue-600);flex:none}
.t-script{
  margin:0;font-family:var(--ff-script);font-size:clamp(34px,3.8vw,46px);font-weight:600;line-height:1;
  transform:rotate(-4deg);
  background:linear-gradient(100deg,#1a73e8 0%,#7a8cff 46%,#3fc9c2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 20px rgba(26,115,232,.18));
}

/* ---------- 4. Bento of what the system holds ---------- */
.t-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.t-tile{
  display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:var(--r-xl);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,background .35s;
}
.t-tile:hover{transform:translateY(-6px);background:rgba(255,255,255,.7);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.9)}
.t-tile__art{flex:1;display:grid;place-items:center;min-height:148px}
.t-tile__art svg{width:100%;filter:drop-shadow(0 16px 26px rgba(12,58,128,.18))}
.t-tile h3{margin-top:18px;font-size:17px;font-weight:700;line-height:1.5}
.t-tile p{margin-top:6px;font-size:14px;color:var(--ink-mute)}
.t-tile--wide{grid-column:span 2}
.t-tile--big{grid-column:span 2;grid-row:span 2}
.t-tile--big .t-tile__art{min-height:250px}
.t-tile--big h3{font-size:19px}

/* ---------- 5. Who uses it ---------- */
.t-chips{display:flex;flex-wrap:wrap;gap:10px}
.t-chips li{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.t-chips svg{width:19px;height:19px;color:var(--blue-600);flex:none}

/* ---------- 6. FAQ ---------- */
.t-faq{display:grid;gap:12px;max-width:760px}
.t-faq details{padding:2px 22px;border-radius:var(--r-lg)}
.t-faq summary{
  list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-size:15.5px;font-weight:600;color:var(--navy-800);
}
.t-faq summary::-webkit-details-marker{display:none}
.t-faq summary::after{
  content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;margin-top:-6px;
  border-right:2.4px solid var(--blue-600);border-bottom:2.4px solid var(--blue-600);
  border-radius:2px;transform:rotate(45deg);transition:transform .25s;
}
.t-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.t-faq__a{padding:14px 0 18px;font-size:14.6px;color:var(--ink-soft);line-height:1.85;border-top:1px solid rgba(255,255,255,.7)}

/* ---------- 7. Closing ---------- */
.t-cta{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,3vw,40px);align-items:center;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3.2vw,42px);border-radius:var(--r-xl);
}
.t-cta h2{font-size:clamp(23px,2.8vw,31px);font-weight:700;line-height:1.45}
.t-cta__row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.t-cta__contact{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14.5px;color:var(--ink-soft)}
.t-cta__contact li{display:flex;align-items:center;gap:10px}
.t-cta__art svg{width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(12,58,128,.2))}

/* ---------- 8. Responsive ---------- */
@media (max-width:1040px){
  .t-hero__grid{grid-template-columns:1fr;gap:30px}
  /* จอแคบซ้อนเป็นคอลัมน์เดียว ภาพโทรศัพท์ต้องเล็กลงอีก ไม่งั้นการ์ดล้นจอ */
  .t-hero.hero--full .t-phone .art{max-width:min(300px,32vh)}
  .t-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-tile--big,.t-tile--wide{grid-column:span 2;grid-row:auto}
  .t-tile--big .t-tile__art{min-height:200px}
  .t-cta{grid-template-columns:1fr}
  .t-cta__art{order:-1}
}
@media (max-width:820px){
  .t-flow{grid-template-columns:1fr;gap:16px}
  .t-frame{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:18px;text-align:left}
  .t-frame svg{max-width:120px}
  .t-frame figcaption{margin-top:0;padding-top:0}
  /* จอแคบ: ให้ชิปเกาะอยู่บนตัวเครื่องเหมือนจอใหญ่
     ถ้าปล่อยให้ static มันจะกลายเป็นแคปซูลลอยเพิ่มอีก 2 อันซ้อนกับปุ่ม CTA
     .t-phone จึงย่อความกว้างให้เท่าตัวเครื่อง ชิปจะได้เกาะขอบเครื่องพอดี */
  /* padding-bottom เว้นที่ให้ชิปล่างลงมาอยู่ใต้เครื่อง
     ไม่ไปทับช่องพิมพ์ข้อความในภาพ */
  .t-phone{width:min(100%,300px);margin-inline:auto;min-height:0;padding-bottom:22px}
  /* ต้องประกาศ position:absolute ซ้ำ เพราะ style.css มีกฎ global ที่ ≤900px
     บังคับ .chip เป็น static ไว้ ถ้าไม่ทับ ชิปจะกลายเป็น flex item เบียดตัวเครื่อง */
  .t-phone .chip{
    position:absolute;top:2px;right:-4px;
    width:max-content;max-width:none;font-size:11.5px;padding:7px 12px;
    animation:bob 5s ease-in-out infinite;
  }
  .t-phone .chip--pin{top:auto;bottom:0;left:-6px;right:auto;animation-delay:-2.2s}
}
@media (max-width:640px){
  .t-bento{grid-template-columns:1fr}
  .t-tile--big,.t-tile--wide{grid-column:span 1}
  .t-hero h1{font-size:29px}
  .t-tile,.t-frame{padding:20px 18px}
  .t-faq details{padding:0 18px}
}

/* ---------- 9. ปิดแอนิเมชันภาพเมื่อผู้ใช้ขอ ----------
   style.css ตัด duration ให้แล้ว ตรงนี้ตัด delay กับสถานะเริ่มต้นทิ้ง
   ไม่งั้นชิ้นส่วนในภาพจะหายไปเป็นวินาทีก่อนโผล่                  */
@media (prefers-reduced-motion:reduce){
  .t-phone [class^="tx-"]{
    animation:none!important;animation-delay:0s!important;
    opacity:1;transform:none;
  }
  .tx-ripple,.tx-glare{display:none}
}