/* Opt-in localhost preview only; ordinary pages retain the existing layout. */
.motion-preview{--motion-header:88px;--motion-travel:1600px}
.motion-preview .site-header{position:fixed;top:0;left:0;width:100%}
.motion-preview .hero-story{margin-top:var(--motion-header);height:calc(100svh - var(--motion-header) + var(--motion-travel))}
.motion-preview .hero{position:sticky;top:var(--motion-header);height:calc(100svh - var(--motion-header));min-height:420px;max-height:none;overflow:hidden;background:#fff}
.motion-preview .hero-media{margin:0}
.motion-preview .hero-media>img,.motion-preview .hero-video,.motion-preview .hero-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.motion-preview .hero-video,.motion-preview .hero-canvas{visibility:hidden;pointer-events:none}
.motion-preview .video-ready .hero-video,.motion-preview .video-ready .hero-canvas{visibility:visible}
.motion-preview .video-ready .hero-media>img{visibility:hidden}
/* One constant crop removes the source's initial side bars without a moving zoom.
   Matching poster scale keeps the first frame aligned on desktop. */
@media(min-width:761px){
 .motion-preview .hero-canvas{--frame-crop-x:.052;--frame-crop-y:.052}
 .motion-preview .hero-media>img{transform:scale(1.1160714286)}
}
.motion-preview .hero-title{top:24%;pointer-events:none;will-change:transform,opacity}
.motion-preview .hero-scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%;box-shadow:none;color:#776143;cursor:pointer}
.motion-preview .hero-scroll-cue svg{opacity:.8;animation:hero-cue-nudge 1.8s ease-in-out 2}
.motion-preview .motion-started .hero-scroll-cue svg{animation:none}
.motion-preview .hero-scroll-cue:hover svg{opacity:1}
@keyframes hero-cue-nudge{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(4px);opacity:1}}
.motion-preview .motion-image-missing:not(.video-ready) .hero-media>img{visibility:hidden}
.motion-preview .motion-image-missing:not(.video-ready) .hero-title{color:var(--ink);opacity:1!important;transform:translateX(-50%)!important}
.motion-preview .hero-story-static{height:calc(100svh - var(--motion-header))}
.motion-preview .home-contacts{scroll-margin-top:calc(var(--motion-header) + 24px)}
@media(max-width:760px){
 .motion-preview{--motion-header:78px;--motion-travel:1000px}
 .motion-preview .hero{min-height:0}
 .motion-preview .hero-media>img,.motion-preview .hero-video,.motion-preview .hero-canvas{object-fit:cover;object-position:var(--camera-x,65%) center}
 .motion-preview .hero-title{top:22%;left:50%;width:calc(100% - 40px)}
 .motion-preview .hero-title span{font-size:26px}
 .motion-preview .hero-title strong{font-size:56px}
 .motion-preview .hero-scroll-cue{bottom:calc(14px + env(safe-area-inset-bottom))}
 .motion-preview .palm-layer{height:145px}
 :lang(th) .motion-preview .hero-title strong{font-size:46px}
 :lang(th) .motion-preview .hero-title span{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.motion-preview .hero-title{will-change:auto}.motion-preview .hero-scroll-cue svg{animation:none}}