/* น้องเควีพาเที่ยว — ทัวร์แนะนำหน้าแรก (asset/js/kv-tour.js)
 * ใช้สีแบรนด์ชุดเดียวกับ style.css · ทุกอย่างอยู่ใต้ prefix kvt- ไม่แตะคลาสเดิมของหน้า */

.kvt-launch{position:fixed;left:16px;bottom:18px;z-index:85;display:flex;align-items:flex-end;gap:6px;
  font-family:var(--font-body);pointer-events:none}
.kvt-launch > *{pointer-events:auto}
.kvt-launch-btn{position:relative;width:92px;height:92px;border:0;padding:0;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 18px rgba(43,38,32,.28));animation:kvt-bob 2.6s ease-in-out infinite}
.kvt-launch-btn img{width:100%;height:100%;object-fit:contain}
.kvt-launch-btn::after{content:"▶";position:absolute;right:2px;bottom:6px;width:28px;height:28px;border-radius:50%;
  background:var(--sage-deep);color:#fff;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
.kvt-launch-btn:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:50%}
.kvt-hint{position:relative;margin-bottom:58px;background:#fff;color:var(--ink);border-radius:14px;padding:9px 30px 9px 13px;
  font-size:.92rem;line-height:1.35;box-shadow:var(--shadow);max-width:210px;opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .35s,transform .35s}
.kvt-hint.show{opacity:1;transform:none}
.kvt-hint b{color:var(--sage-deep)}
.kvt-hint::before{content:"";position:absolute;left:-7px;bottom:12px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.kvt-hint-x{position:absolute;top:3px;right:5px;border:0;background:none;color:var(--ink-3);font-size:16px;cursor:pointer;line-height:1;padding:3px}

/* ผู้ใช้ใหม่: ปุ่มเต้นขยาย-หด + ส่ายหัว + ระลอกคลื่น 2 ชั้น + ป้ายเด้ง — ดึงสายตาจนกว่าจะกด */
.kvt-ring{position:absolute;left:50%;top:55%;width:86%;height:86%;border-radius:50%;transform:translate(-50%,-50%) scale(.6);
  border:3px solid rgba(255,210,31,.85);opacity:0;pointer-events:none}
.kvt-attract .kvt-ring{animation:kvt-ring 2s ease-out infinite}
.kvt-attract .kvt-ring.r2{animation-delay:1s}
.kvt-attract .kvt-launch-btn{animation:kvt-attn 2.8s ease-in-out infinite}
.kvt-attract .kvt-launch-btn::after{background:#FFD21F;color:var(--kvt-brown,#623A31)}
.kvt-attract .kvt-hint{background:#FFD21F;color:#3a2412;font-weight:600;font-size:.98rem;max-width:230px}
.kvt-attract .kvt-hint::before{border-right-color:#FFD21F}
.kvt-attract .kvt-hint.show{animation:kvt-hintbob 1.8s ease-in-out infinite}
@keyframes kvt-ring{0%{transform:translate(-50%,-50%) scale(.6);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes kvt-attn{0%,55%,100%{transform:scale(1) rotate(0)}12%{transform:scale(1.22) rotate(-8deg)}20%{transform:scale(1.18) rotate(8deg)}
  28%{transform:scale(1.22) rotate(-6deg)}36%{transform:scale(1) rotate(0)}}
@keyframes kvt-hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- ระหว่างทัวร์ ---------- */
/* น้ำตาลสีหมวกน้องเควี (ดูดจาก kvBird_*.png) — ใช้แทนเขียวแบรนด์บนการ์ด ให้การ์ดเข้าชุดกับตัวนก */
:root{--kvt-brown:#623A31}
.kvt-dock{position:fixed;left:18px;bottom:18px;z-index:86;display:flex;align-items:flex-end;gap:4px;
  font-family:var(--font-body);max-width:min(620px,calc(100vw - 36px));pointer-events:none}
.kvt-dock > *{pointer-events:auto}
.kvt-bird{position:relative;width:170px;height:170px;flex:0 0 auto;transform-origin:50% 95%}
.kvt-bird img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(43,38,32,.3));
  transition:opacity .25s}
.kvt-bird .kvt-body{transform:scale(calc(1 + var(--kvt-amp,0) * .07)) rotate(calc(var(--kvt-amp,0) * -2deg));transform-origin:50% 92%;
  transition:transform .06s linear;position:absolute;inset:0}
.kvt-bird.enter{animation:kvt-fly .9s cubic-bezier(.2,.9,.25,1.15) both}
.kvt-bird.idle .kvt-float{animation:kvt-bob 2.4s ease-in-out infinite}
.kvt-float{position:absolute;inset:0}

.kvt-bubble{position:relative;background:rgba(255,253,248,.5);color:var(--ink);border-radius:20px;padding:14px 18px 12px;margin-bottom:62px;
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.7);min-width:0;flex:1 1 auto;border:1.5px solid rgba(231,212,166,.85)}
.kvt-bubble::before{content:"";position:absolute;left:-11px;bottom:26px;border:11px solid transparent;border-right-color:rgba(231,212,166,.85);border-left:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kvt-bubble{background:rgba(255,253,248,.95)}}
.kvt-bubble.pop{animation:kvt-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.kvt-step{font-size:.72rem;letter-spacing:.08em;color:var(--gold-deep);font-weight:700;text-transform:uppercase}
.kvt-title{font-family:var(--font-display);font-size:1.45rem;font-weight:700;line-height:1.2;margin:2px 0 6px;color:var(--kvt-brown)}
.kvt-title .w{display:inline-block;animation:kvt-word .5s cubic-bezier(.2,1.5,.4,1) both}
.kvt-text{font-size:1.02rem;line-height:1.6;min-height:3.2em;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.kvt-text b{color:var(--kvt-brown);background:linear-gradient(transparent 62%,rgba(194,154,75,.32) 62%)}
.kvt-text.in{animation:kvt-textin .6s cubic-bezier(.2,.9,.3,1) .15s both}
.kvt-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:30px}
.kvt-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--kvt-brown);color:#fff;
  font-size:.86rem;font-weight:600;box-shadow:0 6px 14px -6px rgba(98,58,49,.6);animation:kvt-badge .6s cubic-bezier(.2,1.6,.4,1) both}
.kvt-badge::before{content:"✦";color:#FFD21F;font-size:.85em;text-shadow:0 0 6px rgba(255,210,31,.65)}
.kvt-ctrl{display:flex;align-items:center;gap:4px;margin-top:10px;border-top:1px solid var(--line-2);padding-top:8px}
.kvt-ctrl button{border:0;background:var(--cream);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:14px;
  display:grid;place-items:center;transition:background .2s,transform .15s}
.kvt-ctrl button:hover{background:var(--gold-soft);transform:translateY(-1px)}
.kvt-ctrl button:focus-visible{outline:2px solid var(--kvt-brown);outline-offset:2px}
.kvt-ctrl button[aria-pressed="true"]{background:var(--kvt-brown);color:#fff}
.kvt-dots{display:flex;gap:4px;margin-left:auto;align-items:center}
.kvt-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .3s}
.kvt-dots i.on{background:var(--gold);width:18px;border-radius:5px}
.kvt-dots i.done{background:var(--ink-2)}
.kvt-progress{position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:3px;overflow:hidden;background:transparent}
.kvt-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--kvt-brown));transition:width .2s linear}
.kvt-end{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kvt-end a,.kvt-end button{border:0;border-radius:999px;padding:8px 16px;font:600 .92rem var(--font-body);cursor:pointer;text-decoration:none}
.kvt-end .p{background:var(--kvt-brown);color:#fff}.kvt-end .s{background:var(--cream);color:var(--ink)}

.kvt-veil{position:fixed;inset:0;z-index:83;pointer-events:none;background:radial-gradient(ellipse at 30% 90%,rgba(36,31,26,.0),rgba(36,31,26,.0));transition:background .6s}
.kvt-veil.on{background:radial-gradient(ellipse at 25% 100%,rgba(36,31,26,.0) 0,rgba(36,31,26,.18) 70%)}

/* ประกาย + ป้ายตัวเลขลอย */
.kvt-fx{position:fixed;inset:0;z-index:87;pointer-events:none;overflow:hidden}
.kvt-spark{position:absolute;width:10px;height:10px;color:var(--gold);font-size:14px;line-height:10px;animation:kvt-spark 1s ease-out forwards}
.kvt-conf{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:kvt-conf linear forwards}
.kvt-whoosh{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(194,154,75,.8),transparent);
  animation:kvt-whoosh .7s ease-out forwards}

/* นกที่หันหน้าไปทางซ้าย → ย้ายไปอยู่ฝั่งขวา ให้หันเข้าหาการ์ด · หางลูกศรของการ์ดย้ายตามไปชี้นก */
.kvt-dock.right{left:auto;right:18px;flex-direction:row-reverse}
.kvt-dock.right .kvt-bubble::before{left:auto;right:-11px;border-right:0;border-left:11px solid rgba(231,212,166,.85)}
.kvt-dock.right .kvt-bird.enter{animation-name:kvt-fly-r}
@keyframes kvt-fly-r{0%{transform:translate(160px,120px) rotate(25deg) scale(.6);opacity:0}
  55%{transform:translate(-18px,-30px) rotate(-8deg) scale(1.06);opacity:1}
  80%{transform:translate(4px,4px) rotate(3deg) scale(.98)}100%{transform:none}}
@keyframes kvt-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes kvt-fly{0%{transform:translate(-160px,120px) rotate(-25deg) scale(.6);opacity:0}
  55%{transform:translate(18px,-30px) rotate(8deg) scale(1.06);opacity:1}
  80%{transform:translate(-4px,4px) rotate(-3deg) scale(.98)}100%{transform:none}}
@keyframes kvt-textin{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes kvt-pop{0%{transform:scale(.7) translateY(14px);opacity:0}100%{transform:none;opacity:1}}
@keyframes kvt-word{0%{transform:translateY(.6em) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes kvt-badge{0%{transform:scale(0) rotate(-12deg);opacity:0}70%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes kvt-spark{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(140deg);opacity:0}}
@keyframes kvt-conf{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}
@keyframes kvt-whoosh{0%{transform:translateX(-30%) scaleX(.3);opacity:0}40%{opacity:1}100%{transform:translateX(60%) scaleX(1);opacity:0}}

@media (max-width:640px){
  .kvt-launch{bottom:84px;left:10px}
  .kvt-launch-btn{width:72px;height:72px}
  .kvt-hint{margin-bottom:44px;font-size:.85rem}
  .kvt-dock,.kvt-dock.right{left:8px;right:8px;bottom:82px;max-width:none}
  .kvt-bird{width:92px;height:92px}
  .kvt-bubble{margin-bottom:30px;padding:11px 13px 9px;border-radius:16px}
  .kvt-bubble::before{bottom:16px}
  .kvt-title{font-size:1.15rem}
  .kvt-text{font-size:.93rem;min-height:0}
  .kvt-badge{font-size:.78rem;padding:4px 9px}
  .kvt-ctrl button{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .kvt-launch-btn,.kvt-bird.idle .kvt-float{animation:none}
  .kvt-bird.enter,.kvt-bubble.pop,.kvt-badge,.kvt-title .w,.kvt-text.in{animation-duration:.01s}
  .kvt-fx{display:none}
}