/* ONE VELA Keynote — พรีเซนต์สไตล์งานเปิดตัว (พื้นดำ ตัวอักษรใหญ่ ทรานซิชันนุ่ม) */
#kn{position:fixed;inset:0;z-index:300;background:#000;color:#f5f5f7;overflow:hidden;cursor:default;
  font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Noto Sans Thai","Sarabun",sans-serif;-webkit-font-smoothing:antialiased}
#kn.hidecur{cursor:none}
#kn .st{position:absolute;inset:0}
#kn .sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:6vh 7vw;visibility:hidden;will-change:transform,opacity,filter}
#kn .sl.cur,#kn .sl.prev{visibility:visible}
#kn .sl.center{align-items:center;text-align:center}
#kn .sl.bottom{justify-content:flex-end;padding-bottom:12vh}
#kn .sl.top{justify-content:flex-start;padding-top:9vh}
#kn .chip.dk{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.16)}
#kn .ifrbox{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/10;width:100%;background:#111;box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
#kn .ifrbox .poster{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(.7)}
#kn .hl{color:#d2d2d7}

/* ── ทรานซิชัน ── */
#kn .sl.in-fade{animation:knFadeIn 1.1s ease both}#kn .sl.out-fade{animation:knFadeOut 1.1s ease both}
#kn .sl.in-push{animation:knPushIn .95s cubic-bezier(.77,0,.18,1) both}#kn .sl.out-push{animation:knPushOut .95s cubic-bezier(.77,0,.18,1) both}
#kn .sl.in-push.back{animation-name:knPushInB}#kn .sl.out-push.back{animation-name:knPushOutB}
#kn .sl.in-zoom{animation:knZoomIn 1.2s cubic-bezier(.2,.8,.2,1) both}#kn .sl.out-zoom{animation:knZoomOut .9s ease both}
#kn .sl.in-rise{animation:knRiseIn 1s cubic-bezier(.2,.8,.2,1) both}#kn .sl.out-rise{animation:knFadeOut .7s ease both}
#kn .sl.in-black{animation:knFadeIn 1s ease .55s both}#kn .sl.out-black{animation:knFadeOut .55s ease both}
#kn .sl.in-iris{animation:knIris 1.3s cubic-bezier(.65,0,.35,1) both}#kn .sl.out-iris{animation:knFadeOut 1.3s ease both}
@keyframes knFadeIn{from{opacity:0}to{opacity:1}}@keyframes knFadeOut{from{opacity:1}to{opacity:0}}
@keyframes knPushIn{from{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes knPushOut{from{transform:none;opacity:1}to{transform:translate3d(-35%,0,0);opacity:.15}}
@keyframes knPushInB{from{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes knPushOutB{from{transform:none;opacity:1}to{transform:translate3d(35%,0,0);opacity:.15}}
@keyframes knZoomIn{from{opacity:0;transform:scale(1.18);filter:blur(24px)}to{opacity:1;transform:none;filter:none}}@keyframes knZoomOut{to{opacity:0;transform:scale(.9);filter:blur(10px)}}
@keyframes knRiseIn{from{opacity:0;transform:translate3d(0,10vh,0)}to{opacity:1;transform:none}}
@keyframes knIris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}

/* ── บิลด์ภายในสไลด์ (เล่นเมื่อสไลด์ขึ้น) ── */
#kn .b{opacity:0}
#kn .sl.on .b{animation:knUp .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
#kn .sl.on .b.blur{animation-name:knBlur;animation-duration:1.3s}
#kn .sl.on .b.scale{animation-name:knScale;animation-duration:1.1s}
#kn .sl.on .b.left{animation-name:knLeft}
#kn .sl.on .b.fade{animation-name:knFadeIn;animation-duration:1.2s}
#kn .sl.on .b.wipe{animation-name:knWipe;animation-duration:1.4s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
#kn .sl.on .b.grow{animation-name:knGrow;animation-duration:1.3s;transform-origin:left center}
@keyframes knUp{from{opacity:0;transform:translate3d(0,5vh,0)}to{opacity:1;transform:none}}
@keyframes knBlur{from{opacity:0;filter:blur(30px);transform:scale(1.06)}to{opacity:1;filter:none;transform:none}}
@keyframes knScale{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes knLeft{from{opacity:0;transform:translate3d(-6vw,0,0)}to{opacity:1;transform:none}}
@keyframes knWipe{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes knGrow{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

/* ── ตัวอักษร ── */
#kn .eb{font-size:clamp(14px,1.45vw,26px);font-weight:600;color:#a1a1a6;letter-spacing:.01em;margin-bottom:1.2vh}
#kn .eb.g{background:linear-gradient(90deg,#f6dcbc,#e4a86f,#c98a58);-webkit-background-clip:text;background-clip:text;color:transparent}
#kn .h1{font-size:clamp(40px,7.2vw,140px);font-weight:700;line-height:1.05;letter-spacing:-.035em;font-family:"SF Pro Display","Inter","Noto Sans Thai",sans-serif}
#kn .h2{font-size:clamp(30px,4.6vw,88px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
#kn .mega{font-size:clamp(60px,12vw,240px);font-weight:800;line-height:.95;letter-spacing:-.045em}
#kn .num{font-size:clamp(70px,15vw,300px);font-weight:700;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;font-family:"SF Pro Display","Inter",sans-serif}
#kn .num small,#kn .h2 small{white-space:nowrap;font-size:.22em;font-weight:600;letter-spacing:0;color:#a1a1a6;margin-left:.25em}
#kn .sub{font-size:clamp(16px,1.9vw,36px);color:#a1a1a6;font-weight:500;line-height:1.4;margin-top:2vh;max-width:70vw}
#kn .sub b{color:#f5f5f7;font-weight:600}
#kn .sub b.g,#kn .sub b.g2,#kn .sub .g,#kn .sub .g2{color:transparent}
#kn .g{background:linear-gradient(100deg,#fff4e6 0%,#f2c58f 35%,#d98f55 70%,#b8734a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#kn .g2{background:linear-gradient(100deg,#b5f0c4,#7ed6a0 50%,#3fae7a);-webkit-background-clip:text;background-clip:text;color:transparent}
#kn .gray{color:#6e6e73}
#kn .foot{position:absolute;left:7vw;bottom:5vh;font-size:clamp(11px,.95vw,16px);color:#6e6e73;max-width:80vw}

/* ── รูปเต็มจอ ── */
#kn .ph{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.02)}
#kn .sl.on .ph{animation:knKB 14s ease-out forwards}
@keyframes knKB{from{transform:scale(1.02)}to{transform:scale(1.13) translate3d(-1%,-1%,0)}}
#kn .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.7) 34%,rgba(0,0,0,.15) 62%,rgba(0,0,0,0) 80%)}
#kn .shade.t{background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.1) 58%,rgba(0,0,0,0) 72%)}
#kn .shade.l{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 34%,rgba(0,0,0,0) 64%)}
#kn .over{position:relative;z-index:2}
#kn .ifr{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;opacity:0;transition:opacity 1.2s}
#kn .ifr.ok{opacity:1}

/* ── ชิ้นส่วน ── */
#kn .chips{display:flex;flex-wrap:wrap;gap:1.2vw;margin-top:5vh}
#kn .chip{padding:1.6vh 1.8vw;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px)}
#kn .chip .k{font-size:clamp(12px,1vw,18px);color:#a1a1a6}
#kn .chip .v{font-size:clamp(20px,2.4vw,46px);font-weight:700;letter-spacing:-.02em;margin-top:.3vh}
#kn .row2{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;width:100%}
#kn .lst{display:grid;gap:2.1vh;width:100%}
#kn .li{display:grid;grid-template-columns:minmax(150px,24vw) 1fr auto;align-items:center;gap:1.6vw;font-size:clamp(14px,1.45vw,28px)}
#kn .li .bar{height:clamp(8px,1.1vh,14px);border-radius:99px;background:linear-gradient(90deg,#d98f55,#f2c58f)}
#kn .li .bar.dim{background:rgba(255,255,255,.18)}
#kn .li .v{font-weight:700;font-variant-numeric:tabular-nums;min-width:8vw;text-align:right}
#kn .split{display:flex;height:clamp(28px,5.5vh,70px);border-radius:16px;overflow:hidden;width:100%;margin-top:4vh}
#kn .split i{display:block;height:100%}
#kn .leg{display:flex;flex-wrap:wrap;gap:1vh 2.4vw;margin-top:2.4vh;font-size:clamp(13px,1.2vw,22px);color:#a1a1a6}
#kn .leg span i{display:inline-block;width:.8em;height:.8em;border-radius:4px;margin-right:.5em;vertical-align:-.05em}
#kn .vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:3vw;width:100%;text-align:center}
#kn .vs .x{font-size:clamp(20px,3vw,60px);color:#6e6e73;font-weight:300}
#kn .bars4{display:grid;gap:3vh;width:100%;margin-top:4vh}
#kn .bars4 .r{display:grid;grid-template-columns:clamp(110px,12vw,220px) 1fr;align-items:center;gap:2vw}
#kn .bars4 .nm{font-size:clamp(16px,1.8vw,34px);font-weight:700;letter-spacing:-.01em}
#kn .bars4 .nm small{display:block;font-size:.55em;color:#a1a1a6;font-weight:500}
#kn .bars4 .stk{display:flex;height:clamp(30px,6vh,64px);border-radius:14px;overflow:hidden}
#kn .bars4 .stk i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:clamp(10px,.95vw,17px);color:rgba(0,0,0,.75);font-weight:700;white-space:nowrap;overflow:hidden}
#kn .glow{position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(217,143,85,.38),transparent 70%);filter:blur(40px);opacity:0}
#kn .sl.on .glow{animation:knGlow 6s ease-in-out .4s infinite alternate}
@keyframes knGlow{from{opacity:.35;transform:scale(.9)}to{opacity:.8;transform:scale(1.08)}}
#kn .logo{width:clamp(70px,8vw,140px);height:auto;color:#f5f5f7}
#kn .logo path{stroke-dasharray:240;stroke-dashoffset:240}
#kn .sl.on .logo path{animation:knDraw 2.2s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes knDraw{to{stroke-dashoffset:0}}
#kn .brand{font-family:"Cormorant Garamond",serif;letter-spacing:.5em;font-size:clamp(16px,2vw,36px);margin-top:3vh;font-weight:500;padding-left:.5em}
#kn .plan{width:100%;height:clamp(80px,16vh,190px);background:center/cover no-repeat;border-radius:18px;margin-bottom:4vh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#kn .hint{position:absolute;right:3vw;bottom:4vh;z-index:5;font-size:13px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.45);padding:8px 14px;border-radius:99px;backdrop-filter:blur(10px)}

/* ── ปุ่มควบคุม (ซ่อนเองเมื่อไม่ขยับเมาส์) ── */
#kn .ui{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;padding:14px 22px;opacity:0;transition:opacity .4s;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
#kn.showui .ui{opacity:1}
#kn .ui button{font:inherit;font-size:14px;color:#f5f5f7;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:8px 14px;cursor:pointer}
#kn .ui button:hover{background:rgba(255,255,255,.2)}
#kn .ui .sp{flex:1}
#kn .ui .cnt{font-size:13px;color:#a1a1a6;font-variant-numeric:tabular-nums;min-width:60px;text-align:center}
#kn .prog{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,#d98f55,#f2c58f);z-index:21;transition:width .8s cubic-bezier(.2,.8,.2,1)}
@media (max-width:760px){#kn .sl{padding:6vh 6vw}#kn .row2,#kn .vs{grid-template-columns:1fr}#kn .li{grid-template-columns:1fr auto}#kn .li .bar{display:none}}