/* ============================================================
   wansuk.com — SkyTale product page
   โหลดต่อจาก style.css + time.css (ยืมเลย์เอาต์ .t- ทั้งชุด)
   ไฟล์นี้มีแค่ของเฉพาะ SkyTale (prefix .s-): จอภาพ, ฝน, แกลเลอรี
   ============================================================ */

/* ---------- 1. Hero: โทนส้ม-ฟ้า ---------- */
.s-hero h1 .accent{
  background:linear-gradient(104deg,#f7961e 0%,#ffb35c 30%,#3b93f7 70%,#0f5ccd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.s-hero h1{margin-top:16px}
.s-note{margin-top:12px;font-size:13px;color:var(--ink-mute)}

/* ---------- 2. จอภาพ + ฝนเคลื่อนไหว ---------- */
.s-screen{position:relative;width:100%;max-width:min(560px,64vh);margin-inline:auto}
.s-screen__frame{
  position:relative;padding:10px;border-radius:20px;background:#ffffff;
  border:2px solid #c4def9;box-shadow:0 26px 44px rgba(12,58,128,.26);
}
.s-screen__frame img{display:block;width:100%;height:auto;border-radius:12px;aspect-ratio:16/9;object-fit:cover}
.s-screen__bar{position:absolute;left:10px;right:10px;bottom:10px;height:16px;border-radius:0 0 12px 12px;background:rgba(18,58,118,.82)}
.s-screen__stand{width:22%;height:18px;margin:0 auto;background:#e6f2ff;border:2px solid #c4def9;border-top:0;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.s-screen__base{width:40%;height:8px;margin:0 auto;border-radius:4px;background:#d3e7fb}
.s-rain{position:absolute;inset:10px 10px 26px;overflow:hidden;border-radius:12px 12px 0 0;pointer-events:none}
.s-rain i{
  position:absolute;top:-14%;width:1.6px;height:13%;border-radius:2px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85));
  animation:sDrop 1.15s linear infinite;
}
@keyframes sDrop{to{transform:translateY(880%)}}
.s-screen .chip{top:-14px;right:-8px}
.s-screen .chip--sky{top:auto;bottom:54px;right:auto;left:-14px;animation-delay:-2.2s}

/* ---------- 3. แกลเลอรี ---------- */
.s-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.s-shot{margin:0;padding:10px 10px 14px;border-radius:var(--r-xl)}
.s-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.s-shot figcaption{margin-top:12px;font-size:15px;font-weight:600;color:var(--navy-800);text-align:center}

.s-cta-img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

/* ---------- 4. Responsive ---------- */
@media (max-width:1040px){
  .s-screen{max-width:min(480px,40vh)}
}
/* style.css บังคับ .chip เป็น static ที่ ≤900px — ประกาศ absolute ซ้ำให้ชิปเกาะขอบจอภาพ */
@media (max-width:900px){
  .s-screen .chip{position:absolute;width:max-content;font-size:11.5px;padding:7px 12px;animation:bob 5s ease-in-out infinite}
  .s-screen .chip--sky{animation-delay:-2.2s}
}
@media (max-width:820px){
  .s-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-screen .chip{top:-12px;right:-4px}
  .s-screen .chip--sky{top:auto;bottom:40px;left:-6px;right:auto}
}
@media (max-width:520px){
  .s-gallery{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .s-rain{display:none}
}