/* A curved, explorable wall of Kamonwan's actual portfolio. */
.hero.panorama-hero{height:calc(100svh - 24px);min-height:760px;max-height:1080px;background:#101010;color:var(--ivory);isolation:isolate;border:1px solid #292929}
.panorama-hero:after{display:none}
.wall-stage{position:absolute;inset:70px -2% -20px;perspective-origin:50% 46%;touch-action:pan-y;user-select:none;cursor:grab}
.wall-stage.is-dragging,.wall-stage.is-dragging .work-tile{cursor:grabbing}
.work-tile{position:absolute;left:50%;top:46%;width:var(--tile-width,290px);height:var(--tile-height,185px);margin-left:calc(var(--tile-width,290px) / -2);margin-top:calc(var(--tile-height,185px) / -2);padding:0;border:1px solid #ffffff20;border-radius:15px;background:#262626;overflow:hidden;backface-visibility:hidden;cursor:pointer;touch-action:pan-y;color:var(--ivory)}
.work-tile img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.8);transition:filter .24s ease;pointer-events:none}
.work-tile:hover{border-color:var(--yellow)}
.work-tile:hover img{filter:brightness(1) saturate(1)}
.work-tile-caption{position:absolute;bottom:0;left:0;right:0;padding:24px 14px 12px;background:linear-gradient(transparent,#101010e8);text-align:left;font-size:12px;line-height:1.4;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none}
.work-tile:hover .work-tile-caption{opacity:1}
.wall-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#101010f2 0%,#10101085 13%,transparent 26%,transparent 58%,#101010c7 81%,#101010 97%),radial-gradient(ellipse at 50% 47%,#101010e8 0%,#101010bd 22%,#10101035 48%,transparent 65%)}
.panorama-label{position:absolute;top:126px;left:32px;right:32px;display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.13em;font-weight:500;pointer-events:none;color:#f6f4edbb}
.panorama-label>span:last-child{margin-left:auto;color:#a6a6a6}
.live-dot{width:6px;height:6px;flex:none;background:var(--blue);border-radius:50%;box-shadow:0 0 15px #32aef450}
.panorama-content{position:absolute;left:50%;top:47%;width:min(1180px,92%);transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.panorama-kicker{font-size:10px;letter-spacing:.2em;line-height:1.5;margin:0 0 23px;font-weight:500;color:#f6f4edcf}
.panorama-content h1{font-family:'IBM Plex Sans Thai',Inter,'IBM Plex Sans Thai',sans-serif;font-size:clamp(44px,5.1vw,84px);line-height:1.2;font-weight:600;letter-spacing:-.025em;margin:0;text-shadow:0 3px 25px #10101035}
.panorama-content h1 .h1-line{display:block;background:none;padding:0;color:var(--ivory);text-wrap:balance}
.panorama-statement{max-width:690px;margin-left:auto!important;margin-right:auto!important}
.panorama-content h1 .h1-line.h1-accent{color:var(--yellow)}
.panorama-statement{margin:23px 0 25px;font-size:15px;line-height:1.8;color:#eeece7;font-weight:400}
.panorama-cta{display:inline-flex;pointer-events:auto;align-items:center;gap:28px;border:1px solid #f6f4ed60;border-radius:100px;padding:12px 15px 12px 22px;background:#101010a8;backdrop-filter:blur(12px);font-size:13px;transition:background .2s,color .2s}
.panorama-cta>span{display:grid;place-items:center;background:var(--ivory);color:#101010;width:27px;height:27px;border-radius:50%;font-size:18px}
.panorama-cta:hover{background:var(--yellow);color:#101010;border-color:var(--yellow)}
.panorama-bottom{position:absolute;bottom:27px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:end;gap:25px;pointer-events:none}
.work-count>span{font-size:27px;letter-spacing:-.04em;font-weight:500}
.work-count p{font-size:8px;letter-spacing:.1em;margin:9px 0 0;line-height:1.4;color:#a6a6a6}
.work-index-button{pointer-events:auto;margin-left:auto;align-self:center;display:flex;align-items:center;gap:12px;background:#202020d9;color:var(--ivory);border:1px solid #606060;border-radius:100px;padding:14px 18px;font-size:12px;cursor:pointer;white-space:nowrap}
.work-index-button>span:last-child{color:var(--yellow);margin-left:8px;font-size:11px}
.grid-icon{font-size:20px;line-height:1;color:var(--ivory)}
.work-index-button:hover{border-color:var(--yellow);background:#2b2b20}
.wall-fallback{position:absolute;bottom:155px;left:20px;right:20px;background:#101010;padding:15px;font-size:14px;text-align:center}
.wall-fallback a{color:var(--yellow);text-decoration:underline}
.skip{z-index:200}
/* The gallery is available as a keyboard-friendly index, as well as spatial tiles. */
body.work-preview-open{overflow:hidden}
.work-dialog{position:fixed;inset:0;width:min(1180px,calc(100vw - 60px));height:auto;max-height:calc(100dvh - 60px);margin:auto;padding:0;color:var(--ivory);background:#141414;border:1px solid #484848;border-radius:20px;overscroll-behavior:contain;scrollbar-color:#666 #141414;box-shadow:0 30px 100px #0008}
.work-dialog::backdrop{background:#000c;backdrop-filter:blur(12px)}
.work-dialog-toolbar{position:sticky;top:0;z-index:2;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 30px;background:#141414f5;border-bottom:1px solid #333;backdrop-filter:blur(12px)}
.work-dialog-toolbar>span{font-size:9px;letter-spacing:.12em;color:#aaa;margin-right:auto}
.work-dialog-toolbar button{border:0;background:none;color:var(--ivory);cursor:pointer;font-size:12px;padding:7px 0}
.work-dialog-toolbar button:hover{color:var(--yellow)}
.work-dialog-close{display:flex;gap:14px;align-items:center}
.work-dialog-close span{font-size:27px;line-height:1}
.work-dialog-heading{padding:45px 40px 30px}
.work-dialog-heading .eyebrow{font-size:10px;color:var(--yellow);margin:0 0 18px}
.work-dialog-heading h2{font-size:clamp(36px,5vw,68px);line-height:1.06;font-weight:500;letter-spacing:-.055em;margin:0 0 20px}
.work-dialog-heading h2>span{color:var(--yellow)}
.work-dialog-heading h2:focus{outline:none}
.work-dialog-heading>p:last-child,.work-dialog-heading>p:not(.eyebrow){font-size:15px;line-height:1.9;color:#bcbcbc;max-width:780px}
.work-project-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;line-height:1.7;color:#969696;margin-top:28px;border-top:1px solid #3b3b3b;padding-top:22px}
.work-project-meta a{flex:none;color:var(--yellow);border-bottom:1px solid #ffe50070;padding-bottom:4px;font-size:13px}
.work-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;padding:0 40px 45px}
.work-index-card{text-align:left;background:transparent;color:var(--ivory);border:0;padding:0;cursor:pointer;min-width:0}
.work-index-card img{display:block;width:100%;aspect-ratio:1.55;object-fit:cover;border-radius:10px;background:#222;transition:filter .2s}
.work-index-card:hover img{filter:brightness(1.13)}
.work-index-meta{display:block;font-size:8px;letter-spacing:.07em;color:#aaa;margin-top:14px;line-height:1.6}
.work-index-card strong{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:19px;font-weight:500;letter-spacing:-.03em;margin-top:5px}
.work-index-card strong>span{color:var(--yellow)}
.work-pages{padding:0 22px 25px}
.work-pages figure{margin:0 0 20px}
.work-pages img{display:block;width:100%;height:auto;border-radius:10px;background:#222}
.work-pages figcaption{padding:12px 5px 0;font-size:10px;color:#999}
@media(min-width:1600px){.panorama-content{top:46%}.panorama-bottom{bottom:36px}.panorama-label{left:40px;right:40px}}
@media(max-width:1000px){.work-count{display:none}.panorama-label>span:last-child{display:none}.panorama-content h1{font-size:54px}.panorama-content{top:46%}}
@media(max-width:650px){
  .hero.panorama-hero{margin:12px 12px 0;height:calc(100svh - 12px);min-height:760px;max-height:960px}
  .wall-stage{inset:78px -2% 65px;perspective-origin:50% 44%}
  .work-tile{border-radius:10px;top:44%}
  .wall-shade{background:linear-gradient(180deg,#101010 0%,#101010ba 20%,transparent 33%,#10101020 58%,#101010e8 81%,#101010 96%),radial-gradient(ellipse at 50% 48%,#101010eb 0%,#101010b5 25%,transparent 65%)}
  .panorama-label{top:88px;left:20px;right:20px;font-size:8px}
  .panorama-content{top:48%;width:90%}
  .panorama-kicker{font-size:8px;letter-spacing:.16em;margin-bottom:19px}
  .panorama-content h1{font-size:clamp(30px,8.6vw,44px);line-height:1.25}
  .panorama-statement{font-size:13px;margin:20px 0}
  .panorama-cta{padding:10px 12px 10px 18px;font-size:12px;gap:18px}
  .panorama-bottom{left:20px;right:20px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:20px}
  .work-index-button{padding:11px 16px;font-size:11px;gap:10px;align-self:center;margin-left:0}
  .work-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:14px}
  .work-dialog-toolbar{padding:14px 18px;gap:15px;min-height:65px}
  .work-dialog-toolbar>span{font-size:7px}
  .work-dialog-heading{padding:30px 20px 23px}
  .work-dialog-heading>p:not(.eyebrow){font-size:14px}
  .work-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px;padding:0 20px 30px}
  .work-index-meta{font-size:7px}
  .work-index-card strong{font-size:15px}
  .work-project-meta{align-items:start;flex-direction:column;gap:14px}
  .work-pages{padding:0 10px 15px}
  .work-pages img{border-radius:6px}
}
@media(hover:none),(pointer:coarse){.work-tile-caption{display:none}}
@media(prefers-reduced-motion:reduce){.work-tile img,.work-tile-caption,.panorama-cta,.work-index-card img{transition:none}}

/* Hero running text */
.hero-marquee{position:relative;width:100%;margin:28px auto 30px;overflow:hidden;pointer-events:auto;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;background:#101010a6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hm-track{display:flex;width:max-content;animation:hm-scroll var(--hm-dur,45s) linear infinite}
.hero-marquee:hover .hm-track{animation-play-state:paused}
.hm-group{display:flex;align-items:center;gap:20px;padding:14px 20px 14px 0;white-space:nowrap;text-shadow:none}
.hm-tag{font-family:Inter,'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.hm-sep{color:#ffffff59;font-size:13px}
.hm-star{color:var(--yellow);font-size:14px}
.hm-text{font-family:'IBM Plex Sans Thai',Inter,'IBM Plex Sans Thai',sans-serif;font-size:16px;color:#f0eee8;letter-spacing:.005em}
@keyframes hm-scroll{to{transform:translateX(-50%)}}
@media(max-width:650px){.hero-marquee{margin:20px auto 22px}.hm-group{gap:14px;padding:11px 14px 11px 0}.hm-tag{font-size:10px}.hm-text{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hm-track{animation:none;width:auto}.hm-group+.hm-group{display:none}.hm-group{white-space:normal;flex-wrap:wrap;justify-content:center;padding:14px 18px;row-gap:6px}.hero-marquee{-webkit-mask-image:none;mask-image:none}}

/* Running text moved to the bottom-left, small */
.panorama-content h1{margin-bottom:32px}
.hero-bottom-left{display:flex;flex-direction:column;gap:16px;width:min(460px,36vw)}
.hero-marquee.is-small{margin:0;width:100%;background:#10101080;border-color:#ffffff1f;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.hero-marquee.is-small .hm-group{gap:12px;padding:8px 12px 8px 0}
.hero-marquee.is-small .hm-tag{font-size:9px;letter-spacing:.14em}
.hero-marquee.is-small .hm-sep{font-size:10px}
.hero-marquee.is-small .hm-star{font-size:10px}
.hero-marquee.is-small .hm-text{font-size:12px;color:#d9d6cf}
@media(max-width:1000px){.hero-bottom-left{width:min(420px,48vw)}}
@media(max-width:650px){.panorama-content h1{margin-bottom:24px}.hero-bottom-left{width:100%;gap:0}.hero-marquee.is-small .hm-text{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.hero-marquee.is-small .hm-group{padding:10px 12px}}
.panorama-kicker[lang=th]{font-family:'IBM Plex Sans Thai',Inter,'IBM Plex Sans Thai',sans-serif;font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--ivory)}
@media(max-width:650px){.panorama-kicker[lang=th]{font-size:13px}}
.hero-sub{margin:20px auto 0;max-width:760px;font-family:'IBM Plex Sans Thai',Inter,'IBM Plex Sans Thai',sans-serif;font-size:clamp(18px,1.6vw,26px);font-weight:500;line-height:1.55;color:#f6f4ede6;text-shadow:0 2px 18px #10101070;text-wrap:balance}
@media(max-width:650px){.hero-sub{margin-top:14px;font-size:16px}}
.panorama-content h1{margin-bottom:0}.panorama-content .hero-sub{margin:18px auto 30px}
@media(max-width:650px){.panorama-content .hero-sub{margin:12px auto 22px}}
/* hero headline motion (see script.js) — intro once, then a 7 s loop */
.is-kx{--L:3.2s}
.is-kx .kx{display:inline-block;position:relative}
.is-kx .kw,.is-kx .kc,.is-kx .ks{display:inline-block}
.is-kx .kchunk{white-space:nowrap}
.panorama-content h1 .h1-line span{background:none;padding:0;color:inherit}
.is-kx .panorama-kicker,.is-kx>.panorama-kicker{animation:kx-fade .8s cubic-bezier(.2,.75,.2,1) both .05s}
.is-kx .panorama-cta{animation:kx-fade .8s cubic-bezier(.2,.75,.2,1) both 1.7s}
.is-kx .h1-line:not(.h1-accent) .kw{animation:kx-rise .9s cubic-bezier(.2,.75,.2,1) both calc(.15s + var(--i) * 90ms),kx-float 7s ease-in-out calc(var(--L) + var(--i) * 80ms) infinite}
.is-kx .kc{animation:kx-pop .75s cubic-bezier(.2,.8,.25,1.15) both calc(.55s + var(--j) * 40ms),kx-wave 7s ease-in-out calc(var(--L) + .45s + var(--j) * 38ms) infinite}
.is-kx .ks{animation:kx-fade .7s cubic-bezier(.2,.75,.2,1) both calc(1.35s + var(--i) * 60ms),kx-glow 7s ease-in-out calc(var(--L) + 1.25s + var(--i) * 110ms) infinite}
.is-kx.kx-off *{animation-play-state:paused!important}
@keyframes kx-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kx-rise{from{opacity:0;transform:translateY(.45em);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes kx-pop{from{opacity:0;transform:translateY(.55em) rotate(7deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes kx-float{0%,13%,100%{transform:none}5%{transform:translateY(-.07em)}}
@keyframes kx-wave{0%,10%,100%{transform:none;color:var(--yellow)}4%{transform:translateY(-.14em) scale(1.06);color:#fff7b8}}
@keyframes kx-glow{0%,12%,100%{color:#f6f4ede6}4%,7%{color:var(--yellow)}}
.panorama-cta-en{font-family:Inter,'IBM Plex Sans Thai',sans-serif;font-weight:600;font-size:14px;letter-spacing:.24em;padding-left:26px;gap:24px}
@media(max-width:650px){.panorama-cta-en{font-size:13px;padding-left:20px;gap:18px}}
.package-list[hidden]{display:none!important}
.work-film{margin:0 22px 28px;border:1px solid #333;border-radius:14px;overflow:hidden;background:#0b0b0b}
.work-film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
@media(max-width:650px){.work-film{margin:0 10px 20px}}
.work-film .work-demo-head .live-dot{background:var(--yellow);box-shadow:0 0 12px #ffe500aa}

/* Work preview opens full screen */
.work-dialog{inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
.work-dialog-toolbar{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
.work-dialog-heading{padding:56px clamp(20px,4vw,64px) 34px}
.work-index-grid{padding:0 clamp(20px,4vw,64px) 56px}
.work-pages{padding:0 clamp(12px,3vw,48px) 40px}
@media(min-width:1500px){.work-index-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.work-dialog{width:auto;max-height:none;border-radius:0}.work-dialog-heading{padding:30px 20px 23px}}