/* Fabulous Beauty Salon Phuket — Gallery × Hospitality (Nexora) */
:root{
  --pearl:#FBF9F5; --ink:#292724; --gold:#AA8864; --sand:#E9E0D4; --dark:#251F1B;
  --gold-text:#8A6A48; /* champagne darkened for small text contrast on pearl */
  --serif:"Cormorant Garamond","Trirong",Georgia,"Times New Roman",serif;
  --sans:"Jost","Prompt",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(22px,4.9vw,70px);
  --max:1440px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:var(--pearl);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:300;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.serif:lang(th),:lang(th) .serif{letter-spacing:0}
.kick{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:500;line-height:1.5}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--dark);color:var(--pearl);padding:10px 16px}
.skip:focus{left:12px;top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:58px;padding:0 22px;
  text-decoration:none;font-size:1rem;font-weight:400;letter-spacing:.04em;border-radius:2px;min-width:230px;transition:background-color .2s,color .2s}
.btn i{font-style:normal;font-size:1.35rem;line-height:1}
.btn-dark{background:var(--dark);color:var(--pearl)}
.btn-dark:hover{background:#3a312b}
.btn-light{background:var(--pearl);color:var(--ink);border:1px solid var(--gold)}
.btn-light:hover{background:var(--sand)}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--pearl);border-bottom:2px solid var(--sand);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:var(--max);margin:0 auto;height:103px;display:flex;align-items:center;padding:0 var(--gut) 0 calc(var(--gut) - 5px)}
.brand img{width:auto;height:52px}
.nav{flex:1;display:flex;justify-content:center;gap:clamp(22px,2.6vw,40px);font-size:1rem;font-weight:400;letter-spacing:.06em}
.nav a{text-decoration:none;padding:10px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold)}
.top-end{display:flex;align-items:center;gap:22px}
.lang{font-size:.92rem;text-decoration:none;color:var(--gold-text);padding:10px 4px;letter-spacing:.04em}
.lang:hover{color:var(--ink)}
.top-book{min-width:175px;min-height:58px}
.burger{display:none;width:48px;height:48px;border:0;background:none;padding:12px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu{border-top:1px solid var(--sand);background:var(--pearl);max-height:calc(100vh - 75px);overflow:auto;padding:8px 22px 28px}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m}
.menu li{counter-increment:m;border-bottom:1px solid var(--sand)}
.menu li a{display:flex;align-items:center;gap:18px;min-height:52px;text-decoration:none;font-size:1.05rem}
.menu li a::before{content:counter(m,decimal-leading-zero);color:var(--gold-text);font-size:.85rem;width:24px}
.menu li a[aria-current]{color:var(--gold-text)}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.menu-foot .btn{min-width:0;flex:0 0 auto}

/* hero — desktop: text panel left over sand band, image right */
.hero{position:relative;background:var(--sand);max-width:var(--max);margin:0 auto}
.hero-media{position:absolute;top:0;bottom:0;left:43.4%;right:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.95)}
.hero-panel{position:relative;width:45.8%;min-height:570px;background:var(--pearl);padding:72px 48px 42px var(--gut);display:flex;flex-direction:column}
.hero-panel .kick{margin-bottom:24px}
.hero h1{font-size:clamp(3rem,5.2vw,4.8rem);line-height:1.05;max-width:9em}
.hero-sub{margin-top:18px;font-size:1.3rem;line-height:1.65;max-width:30em}
.hero-panel .btn{margin-top:auto;align-self:flex-start}
.hero-foot{position:relative;width:43.4%;padding:34px var(--gut) 40px;font-size:.88rem}

/* experience */
.exp{display:grid;grid-template-columns:620fr 580fr;column-gap:clamp(40px,6.6vw,95px);padding-top:56px;padding-bottom:0}
.exp-l,.exp-r{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.exp-text .kick{margin-bottom:16px}
.exp h2{font-size:clamp(2.3rem,3.5vw,3.2rem);line-height:1.15}
.exp-text p:last-child{margin-top:22px;font-size:1.3rem;line-height:1.65;max-width:28em}
.exp-img3 img{width:100%;aspect-ratio:620/545;object-fit:cover}
.exp-img2 img{width:100%;aspect-ratio:580/440;object-fit:cover}
.edit{padding:0 0 4px;margin-left:-55px;max-width:560px}
.edit .kick{margin-bottom:18px}
.edit h3{font-size:2rem;line-height:1.35;font-weight:400}
.edit p:last-child{margin-top:22px;font-size:1.25rem;line-height:1.65}

/* list */
.list{padding-top:92px;padding-bottom:100px}
.list > .kick{padding-bottom:18px;border-bottom:1px solid var(--gold)}
.list-h{display:none}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:55px}
.items li{border-bottom:2px solid var(--sand)}
.items a{display:flex;align-items:center;gap:26px;min-height:84px;text-decoration:none;padding:6px 0}
.items .n{color:var(--gold-text);font-size:.95rem;width:34px;flex:none;align-self:flex-start;padding-top:22px}
.items .t{flex:1;font-size:1.45rem;line-height:1.35;font-weight:300;letter-spacing:.01em}
.items i{font-style:normal;color:var(--gold);font-size:1.4rem;transition:transform .2s}
.items a:hover i,.items a[aria-pressed="true"] i{transform:translateX(4px)}
.items a[aria-pressed="true"] .t{color:var(--gold-text)}

/* work gallery */
.gallery{padding-bottom:100px;margin-top:-40px}
.g-reset{margin-bottom:18px}
.g-reset a{color:var(--gold-text)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.g-item{margin:0}
.g-item[hidden]{display:none}
.g-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.g-item figcaption{margin-top:10px;font-size:.92rem;line-height:1.5}
.g-item figcaption span{color:var(--gold-text);margin-right:6px}

/* book: visit */
.visit{padding-bottom:100px;margin-top:-40px;display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start}
.svc-sel{grid-column:1/-1;font-size:1.1rem}
.visit-dl{margin:0}
.visit-dl div{padding:18px 0;border-bottom:2px solid var(--sand)}
.visit-dl dt{color:var(--gold-text);font-size:.95rem;margin-bottom:4px}
.visit-dl dd{margin:0;font-size:1.2rem}
.map iframe{display:block;width:100%;aspect-ratio:4/3;border:0;background:var(--sand)}

/* band + footer */
.band{background:var(--dark);color:var(--pearl)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:200px;padding-top:30px;padding-bottom:30px}
.band .kick{color:var(--gold);margin-bottom:10px}
.band h2{font-size:clamp(2.3rem,3.8vw,3.4rem);line-height:1.1}
.band .btn{min-width:310px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:30px;padding-bottom:36px;font-size:.95rem}
.foot-name{font-weight:500;letter-spacing:.18em;font-size:.82rem}
.foot-name .m{display:none}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.foot-nav span{color:var(--gold);margin:0 6px}

/* 404 */
.nf{padding-top:90px;padding-bottom:120px;max-width:900px}
.nf h1{font-size:2.6rem;margin:14px 0 20px}
.nf p{margin-bottom:12px;font-size:1.1rem}
.nf-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}

/* mid widths */
@media (max-width:1180px){
  .nav{gap:22px}
  .top-book{min-width:0}
  .hero-sub,.exp-text p:last-child{font-size:1.15rem}
}

/* mobile */
@media (max-width:899px){
  html{scroll-padding-top:84px}
  .top-in{height:73px;padding:0 10px 0 17px}
  .brand img{height:42px}
  .nav,.top-end > .lang,.top-book{display:none}
  .burger{display:flex}
  .hero{background:var(--pearl);display:flex;flex-direction:column}
  .hero-media{position:relative;left:0;inset:auto;aspect-ratio:430/510;max-height:78vh;width:100%}
  .hero-media img{filter:none}
  .hero-panel{width:auto;min-height:0;padding:24px var(--gut) 0}
  .hero-panel .kick{font-size:.72rem;margin-bottom:14px}
  .hero h1{font-size:2.9rem;line-height:1.08}
  .hero-sub{font-size:1rem;margin-top:10px}
  .hero-panel .btn{margin-top:44px;min-width:206px;min-height:54px;font-size:1rem}
  .hero-foot{display:none}
  .exp{display:block;padding-top:52px}
  .exp-l,.exp-r{display:block}
  .exp-text .kick{font-size:.82rem;margin-bottom:12px}
  .exp h2{font-size:2.1rem;line-height:1.2}
  .exp-text p:last-child{font-size:1rem;margin-top:16px}
  .exp-img3,.edit{display:none}
  .exp-img2{margin-top:30px}
  .exp-img2 img{aspect-ratio:380/315}
  .list{padding-top:34px;padding-bottom:40px}
  .list > .kick{border-bottom:0;padding-bottom:10px;font-size:.88rem}
  .list-h{display:block;font-size:1.6rem;line-height:1.4;margin-bottom:8px;font-weight:400}
  .items{grid-template-columns:1fr}
  .items a{min-height:74px;gap:0}
  .items .n{width:50px;font-size:.88rem;padding-top:20px}
  .items .t{font-size:1.2rem}
  .gallery,.visit{margin-top:0;padding-bottom:56px}
  .g-grid{grid-template-columns:1fr 1fr;gap:14px}
  .g-item figcaption{font-size:.82rem}
  .visit{grid-template-columns:1fr;gap:28px}
  .band-in{flex-direction:column;align-items:flex-start;justify-content:center;min-height:200px;gap:22px}
  .band .kick{font-size:.82rem}
  .band h2{font-size:2.1rem}
  .band .btn{min-width:235px;min-height:54px;font-size:1rem}
  .foot-in{flex-direction:column;align-items:flex-start;padding-top:26px}
  .foot-name .d,.foot-nav{display:none}
  .foot-name .m{display:inline;font-size:.82rem}
  .nf h1{font-size:2rem}
}

@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:heroIn 1.1s ease-out both}
  @keyframes heroIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ MOTION LAYER (phi-academy reference) ============ */
/* Everything below only hides content when html.m is set by the head bootstrap (motion allowed + JS running). */

/* loader: first page of a session */
.loader{display:none}
.m.ld .loader{display:flex;position:fixed;inset:0;z-index:200;background:var(--pearl);flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:clip-path .9s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0)}
.loader img{width:200px;height:auto;opacity:0;animation:ldLogo .6s .1s ease-out forwards}
.loader span{display:block;width:200px;height:1px;background:var(--sand);position:relative;overflow:hidden}
.loader span::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:ldLine .7s .15s cubic-bezier(.6,0,.2,1) forwards}
.m.ld.ld-out .loader{clip-path:inset(0 0 100% 0)}
@keyframes ldLogo{to{opacity:1}}
@keyframes ldLine{to{transform:scaleX(1)}}

/* header: slide in, hide on scroll down, gold progress */
.m .top{animation:topIn .8s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes topIn{from{transform:translateY(-100%)}to{transform:none}}
.top{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.top.top--hide{transform:translateY(-102%)}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;pointer-events:none}
.nav a{position:relative;border-bottom:0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* split text primitives */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}
.ch{display:inline-block;will-change:transform}

/* HERO — image reveal differs per page */
.hero-par{position:absolute;inset:-6% 0;will-change:transform}
.hero-par img{width:100%;height:100%;object-fit:cover}
.m .hero-media img{animation:none}
.hero.go .hero-par img{animation:kenburns 9s cubic-bezier(.2,.6,.2,1) both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.sh-wrap{position:absolute;inset:0;display:flex;z-index:2;pointer-events:none}
.sh-wrap i{flex:1;background:var(--pearl);transform-origin:top}
.hero[data-reveal="blinds"] .sh-wrap{flex-direction:column}
.hero[data-reveal="blinds"] .sh-wrap i{transform-origin:left}
.hero.go[data-reveal="shutter"] .sh-wrap i{animation:shutV 1s cubic-bezier(.77,0,.18,1) both}
.hero.go[data-reveal="blinds"] .sh-wrap i{animation:shutH 1s cubic-bezier(.77,0,.18,1) both}
.sh-wrap i:nth-child(2){animation-delay:.08s!important}.sh-wrap i:nth-child(3){animation-delay:.16s!important}
.sh-wrap i:nth-child(4){animation-delay:.24s!important}.sh-wrap i:nth-child(5){animation-delay:.32s!important}
@keyframes shutV{to{transform:scaleY(0)}}
@keyframes shutH{to{transform:scaleX(0)}}
.m .hero[data-reveal="circle"] .hero-media{clip-path:circle(0% at 70% 45%)}
.m .hero.go[data-reveal="circle"] .hero-media{clip-path:circle(150% at 70% 45%);transition:clip-path 1.5s cubic-bezier(.65,0,.2,1)}
.m .hero[data-reveal="diagonal"] .hero-media{clip-path:polygon(100% 0,100% 0,100% 0,100% 0)}
.m .hero.go[data-reveal="diagonal"] .hero-media{clip-path:polygon(-60% 0,100% 0,100% 100%,-60% 100%);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.m .hero:not(.go) .hero-panel > *{opacity:0}
.m .hero .kick.tw::after{content:"";display:inline-block;width:1px;height:1em;background:var(--gold);margin-left:3px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
.m .hero .kick.tw.done::after{display:none}
@keyframes blink{50%{opacity:0}}
.m .hero h1 .wi{transform:translateY(110%) rotate(4deg)}
.hero.go h1 .wi{transform:none;transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.35s + var(--i) * .09s)}
.m .hero .hero-sub{filter:blur(8px);opacity:0;transform:translateY(12px)}
.hero.go .hero-sub{filter:none;opacity:1;transform:none;transition:all 1s .85s ease-out}
.m .hero .hero-panel .btn{clip-path:inset(0 100% 0 0)}
.hero.go .hero-panel .btn{clip-path:inset(0 0 0 0);transition:clip-path .9s 1.1s cubic-bezier(.77,0,.18,1)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(233,224,212,.35),transparent);transform:skewX(-20deg);z-index:-1;pointer-events:none}
.btn:hover::before{left:130%;transition:left .8s ease}
.btn-light::before{background:linear-gradient(100deg,transparent,rgba(170,136,100,.28),transparent)}
.btn i{transition:transform .3s}
.btn:hover i{transform:translateX(5px)}
.m .hero-foot{letter-spacing:.5em;opacity:0}
.hero.go .hero-foot{letter-spacing:.06em;opacity:1;transition:letter-spacing 1.6s 1.1s cubic-bezier(.2,.8,.2,1),opacity 1s 1.1s}

/* generic reveal gate */
.m [data-r]:not(.in){pointer-events:none}

/* EXPERIENCE */
.m [data-r="scramble"]:not(.in){opacity:0}
.m [data-r="flip"] .wi{transform:perspective(600px) rotateX(-90deg);transform-origin:50% 100%;opacity:0}
[data-r="flip"].in .wi{transform:none;opacity:1;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s;transition-delay:calc(var(--i) * .07s)}
.m [data-r="blur"]{opacity:0;filter:blur(10px)}
[data-r="blur"].in{opacity:1;filter:none;transition:opacity 1.1s .25s,filter 1.1s .25s}
.m [data-r="iris"] img{clip-path:circle(0% at 50% 50%)}
[data-r="iris"].in img{clip-path:circle(75% at 50% 50%);transition:clip-path 1.6s cubic-bezier(.65,0,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.exp-img2{perspective:900px}
.exp-img2 img{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1))}
.exp-img3{overflow:hidden;position:relative}
.exp-img3 img{transform:translate3d(0,var(--py,0px),0) scale(1.14)}
.m [data-r="rise"] img{clip-path:inset(100% 0 0 0)}
[data-r="rise"].in img{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1)}
.edit{position:relative}
.edit::before{content:"";position:absolute;left:-28px;top:4px;bottom:4px;width:1px;background:var(--gold);transform:scaleY(0);transform-origin:top}
.edit.in::before{transform:scaleY(1);transition:transform 1s cubic-bezier(.77,0,.18,1)}
.m .edit > *{opacity:0;transform:translateX(40px)}
.edit.in > *{opacity:1;transform:none;transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.edit.in > :nth-child(1){transition-delay:.35s}.edit.in > :nth-child(2){transition-delay:.5s}.edit.in > :nth-child(3){transition-delay:.65s}

/* LIST */
.list > .kick{border-bottom:0;position:relative}
.list > .kick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.m .list > .kick::after{transform:scaleX(0);transform-origin:left}
.list > .kick.in::after{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.77,0,.18,1)}
@media (max-width:899px){.list > .kick::after{display:none}}
.m .items li[data-r]:not(.in){opacity:0;transform:translateX(var(--dx,-50px))}
.items li.in{opacity:1;transform:none;transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .08s)}
.items a{position:relative;isolation:isolate}
.items a::before{content:"";position:absolute;inset:0 -12px;background:var(--sand);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:-1}
.items a:hover::before{transform:scaleX(1);transform-origin:left}
.items .t{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.items a:hover .t{transform:translateX(10px)}
.m [data-r="fade"]{opacity:0;transform:translateY(24px)}
[data-r="fade"].in{opacity:1;transform:none;transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}

/* MARQUEE (new ribbon, phi-style) */
.marquee{overflow:hidden;padding:46px 0 52px;border-top:1px solid var(--sand);font-family:var(--serif);color:var(--ink)}
.mq-row{display:flex;white-space:nowrap;transform:skewX(var(--skew,0deg))}
.mq-row + .mq-row{margin-top:6px}
.mq-track{display:flex;flex:none;animation:mq 38s linear infinite}
.mq-r .mq-track{animation-direction:reverse;animation-duration:44s}
.mq-w{font-size:clamp(2.4rem,5.4vw,5rem);line-height:1.2;padding:0 .35em;font-weight:400}
.mq-w.it{font-style:italic;color:var(--gold)}
.mq-r .mq-w{font-family:"Trirong",var(--serif);font-weight:300;font-size:clamp(1.6rem,3.4vw,3.1rem);color:transparent;-webkit-text-stroke:1px var(--ink)}
.mq-r .mq-w.it{color:var(--gold);-webkit-text-stroke:0}
.mq-d{font-size:clamp(1.6rem,3.4vw,3rem);color:var(--gold);align-self:center}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}

/* GALLERY */
.m .g-item[data-r]:not(.in){opacity:0;transform:scale(.82) rotate(var(--rot,-3deg))}
.g-item.in{opacity:1;transform:none;transition:opacity .8s,transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .07s)}
.g-img{overflow:hidden;position:relative}
.g-img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.g-item:hover .g-img img{transform:scale(1.08)}
.g-img::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:0;transform:scale(1.06);transition:opacity .5s,transform .5s;pointer-events:none;margin:10px}
.g-item:hover .g-img::after{opacity:1;transform:none}

/* VISIT (book) */
.m .visit-dl > div[data-r]:not(.in){opacity:0;transform:translateY(30px)}
.visit-dl > div.in{opacity:1;transform:none;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .12s)}
.m .map[data-r]:not(.in){opacity:0;transform:scale(.92)}
.map.in{opacity:1;transform:none;transition:opacity 1s,transform 1.4s cubic-bezier(.2,.8,.2,1)}

/* BAND */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--gx,80%) var(--gy,50%),rgba(170,136,100,.28),transparent 70%);transition:background .1s;pointer-events:none}
.band-in{position:relative}
.m .band h2 .ch{opacity:0;transform:translateY(.7em) rotate(8deg)}
.band h2.in .ch{opacity:1;transform:none;transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .03s)}
.btn.mag{transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .2s}

/* cursor ring (desktop, fine pointer only) */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:300;
  transition:width .3s,height .3s,margin .3s,background-color .3s,opacity .3s;opacity:0;mix-blend-mode:multiply}
.cur.on{opacity:1}
.cur.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(170,136,100,.14)}

/* mobile menu stagger */
.menu li{opacity:0;transform:translateY(12px)}
.menu:not([hidden]) li{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .035s)}

@media (max-width:899px){
  .edit::before{display:none}
  .m .items li[data-r]{--dx:-30px}
  .marquee{padding:30px 0 34px}
}
@media (hover:none){.exp-img2 img{transform:none}}

/* Thai labels: no wide tracking (breaks Thai word shapes) */
html[lang="th"] .list > .kick,html[lang="th"] .visit-dl dt{letter-spacing:.02em;font-size:.95rem;font-weight:400}