/* Progressive enhancement: links and content remain usable without animation. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:editorial-out .18s ease both}
::view-transition-new(root){animation:editorial-in .28s ease both}
::view-transition-group(*){animation-duration:.3s}
@keyframes editorial-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes editorial-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-arrival{animation:editorial-in .28s ease both}
.brand-preview{position:fixed;inset:0 auto auto 0;width:min(32vw,410px);aspect-ratio:16/9;z-index:110;pointer-events:none;opacity:0;transition:opacity .16s;filter:drop-shadow(0 18px 30px #0002);contain:layout style}
.brand-preview.is-visible{opacity:1}
.brand-preview video{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;background:#151718}
.context-cursor{position:fixed;top:0;left:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#202326;color:#fff;font:600 9px/1 Arial,sans-serif;letter-spacing:.8px;z-index:2100;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 0 0 1px #ffffff80}
.context-cursor.is-visible{opacity:.9}
.reading-progress{position:fixed;left:0;right:0;top:0;height:2px;background:#1f2225;transform:scaleX(0);transform-origin:left;z-index:2200;pointer-events:none}
.profile-section-nav .section-nav-indicator{height:2px;width:1px;background:#202326;bottom:0;transform:translateX(var(--indicator-x,0px)) scaleX(var(--indicator-scale,90));transform-origin:left;transition:transform .35s}
.profile-section-nav a[aria-current="location"]{font-weight:700}
.scroll-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none;transform:rotate(-90deg)}
.scroll-ring circle{fill:none;stroke:#30363c;stroke-width:1.8;stroke-dasharray:100;stroke-dashoffset:100}
.btt,#sct{border-radius:50%}
.closing-note{padding:56px 0 32px}
.closing-note h2{margin:20px 0 32px;font-weight:500;font-size:clamp(36px,4.8vw,72px);line-height:1.16;letter-spacing:-.045em;overflow:hidden}
.closing-note h2 a{display:inline-block;transform:translateY(calc((1 - var(--closing-reveal,1))*35px));opacity:var(--closing-reveal,1)}
.closing-note h2 a:hover{opacity:.65}
.closing-meta{display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:1.5px;color:#656b71}
.bangkok-clock{font-variant-numeric:tabular-nums;min-width:13ch;text-align:right}
/* Separate backplate and transparent portrait: the silhouette breaks the frame. */
.personal-gallery{min-width:0}
.personal-gallery h2{font-size:clamp(30px,3.3vw,48px);font-weight:500;letter-spacing:-.045em;margin:16px 0 16px}
.personal-gallery-tools{display:flex;justify-content:space-between;align-items:center;gap:20px}
.personal-hint{font-size:12px;color:#626970;margin:0}
.personal-arrows{display:flex;gap:8px}
.personal-arrows button{width:44px;height:44px;border:1px solid #dce0e3;border-radius:50%;background:white;color:#25282b;font-size:20px;cursor:pointer}
.personal-arrows button:disabled{opacity:.3;cursor:default}
.personal-arrows button:focus-visible{outline:2px solid #222;outline-offset:3px}
.personal-panels{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;padding:36px 12px 24px;margin:0 -12px;scrollbar-width:thin;scrollbar-color:#bdc2c6 transparent;scroll-padding-inline:12px;scroll-snap-type:none}
.personal-panel{position:relative;flex:0 0 clamp(270px,28vw,340px);height:480px;min-width:0;overflow:visible;border-radius:22px;isolation:isolate;scroll-snap-align:start;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .2s,opacity .2s}
.personal-panel:before{content:'';position:absolute;inset:76px 0 146px;border:1px solid #e0e3e3;border-radius:22px;background:radial-gradient(ellipse at 50% 25%,#fff,#e8e9e6);z-index:-1}
.personal-panel:nth-child(2):before{background:radial-gradient(ellipse at 50% 25%,#fff,#e4e9ed)}
.personal-panel:nth-child(3):before{background:radial-gradient(ellipse at 50% 25%,#fff,#e6ebe3)}
.personal-panel:nth-child(4):before{background:radial-gradient(ellipse at 50% 25%,#f4f5fb,#dce0e9)}
.personal-panel:nth-child(5):before{background:radial-gradient(ellipse at 50% 25%,#fff,#ece5dc)}
.personal-panel>img{display:block;width:100%;height:334px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 10px #18202816);transform-origin:50% 90%;transition:transform .3s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-drag:none}
.personal-panel-copy{position:absolute;top:355px;left:12px;right:12px;color:#25282b}
.personal-number{font-size:10px;letter-spacing:1px;color:#697178;font-variant-numeric:tabular-nums}
.personal-panel h3{font-size:21px;font-weight:600;line-height:1.4;margin:5px 0 9px;white-space:normal}
.personal-panel p{font-size:13px;line-height:1.75;color:#59616a;margin:0}
.personal-panel:focus-visible{outline:2px solid #363c40;outline-offset:5px}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 .personal-panel:hover,.personal-panel:focus-visible{transform:translateY(-12px);z-index:2}
 .personal-panel:hover>img,.personal-panel:focus-visible>img{transform:scale(1.045)}
 .personal-panels:has(.personal-panel:hover) .personal-panel:not(:hover),.personal-panels:has(.personal-panel:focus-visible) .personal-panel:not(:focus-visible):not(:hover){filter:blur(1.2px);opacity:.66}
}
.skill-meter>span{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.skills-app:focus .skill-meter>span,.skills-app:hover .skill-meter>span,.skills-app.is-inspected .skill-meter>span,.skills-meters-ready .skill-meter>span{transform:scaleX(1)}
.skill-live-detail{margin:18px 0 0;min-height:54px;font-size:13px;color:#515960}
.skill-live-detail strong{color:#25282c;margin-right:12px}
.skill-live-bar{display:block;background:#e8ebed;height:3px;max-width:220px;margin-top:9px}
.skill-live-bar span{display:block;height:100%;background:#293038;transform-origin:left;transform:scaleX(var(--skill-value,0));transition:transform .55s}
.arrival-loader{position:fixed;inset:0;background:#fff;z-index:5000;display:grid;place-content:center;gap:24px;animation:loader-away .18s 1s both;pointer-events:none}
.arrival-loader strong{font-size:32px;letter-spacing:-1.8px;animation:editorial-in .45s both}
.arrival-loader button{pointer-events:auto;font-size:12px;text-decoration:underline;color:#5c6268;min-height:44px}
.arrival-loader-track{width:160px;height:2px;background:#eceeef;overflow:hidden}
.arrival-loader-track:after{content:'';display:block;height:100%;background:#222;transform-origin:left;animation:loader-line .9s both}
@keyframes loader-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes loader-away{to{opacity:0;visibility:hidden}}
@media(max-width:900px),(pointer:coarse){
 .brand-preview,.context-cursor{display:none!important}
 .brand-row-image{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:5px;background:#f0f1f2}
 .brand-row-image img{width:100%;height:100%;object-fit:cover}
 .personal-panels{gap:18px;padding-top:24px;scroll-snap-type:x proximity}
 .personal-panel{flex-basis:min(80vw,320px)}
 .closing-note{padding:40px 0 28px}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .page-arrival,.arrival-loader{animation:none}.arrival-loader,.brand-preview,.context-cursor{display:none}
 .brand-selection-name,.brand-row-arrow,.personal-panel p,.personal-panel>img,.skill-meter>span,.skill-live-bar span{transition:none!important}
 .personal-panel,.personal-panel>img{transition:none!important;transform:none!important}
 .personal-panels .personal-panel{filter:none!important;opacity:1!important}
 .closing-note h2 a{transform:none;opacity:1}
 .skill-meter>span{transform:scaleX(1)}
}