/* The KOHO Air Hotel — site-wide motion (assets/motion.css)
   Loaded on every page after site.css. Pairs with assets/motion.js.
   Motion tokens: one settle curve, one soft spring, three speeds. */
:root{
  --m-settle:cubic-bezier(.16,1,.3,1);
  --m-move:cubic-bezier(.65,0,.35,1);
  --m-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --m-fast:.24s; --m-med:.6s; --m-slow:1.1s;
}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- D2 · page transitions: soft crossfade, header and bar stay put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--m-settle)}
#hdr{view-transition-name:site-hdr}
.mbar{view-transition-name:site-mbar}
.wa-float{view-transition-name:site-wa}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--m-settle)}

/* ---------- rolling digits (KOHO.odo) */
.odo{display:inline-flex;overflow:hidden;vertical-align:bottom;line-height:1.15;height:1.15em}
.odo[hidden]{display:none}
.odo > span{display:inline-block;position:relative}
.odo .odo-c{display:flex;flex-direction:column;transition:transform .9s var(--m-spring)}
.odo .odo-c > span{height:1.15em;display:block;text-align:center}
.odo .odo-ch{display:inline-block}

/* ---------- D10 · currency picker: the currency's sign and the code, no outline (owner, 2026-10-15/16).
   The select spans the whole label (sign included), so a tap anywhere on it opens the list. */
.cur-wrap{display:flex;align-items:center;margin-left:4px}
.cur-pick{position:relative;display:inline-flex;align-items:center}
.cur-pick .cur-sign{position:absolute;left:2px;top:50%;transform:translateY(-50%);min-width:14px;text-align:center;
  font:400 1.05rem/1 'Cormorant Garamond',Georgia,serif;pointer-events:none;opacity:.86;white-space:nowrap}
.cur-pick .cur-caret{position:absolute;right:2px;top:50%;margin-top:-4px;width:9px;height:9px;pointer-events:none;opacity:.6}
.cur-pick select{appearance:none;-webkit-appearance:none;background:transparent;color:inherit;border:0;border-radius:6px;
  font:400 .68rem/1 'Jost',sans-serif;letter-spacing:.16em;padding:8px 18px 8px 28px;min-height:34px;cursor:pointer;opacity:.86}
.cur-pick select:hover,.cur-pick select:focus-visible{opacity:1}
.cur-pick option{color:var(--ink)}
.cur-wrap.mob{display:block;margin:0}
.cur-wrap.mob .grp{margin-top:0}
.cur-wrap.mob select{font-size:.8rem;min-height:44px;padding:10px 26px 10px 40px}
.cur-wrap.mob .cur-pick .cur-sign{left:10px;font-size:1.25rem}
.cur-wrap.mob .cur-pick .cur-caret{right:8px}
@media(max-width:680px){ #hdr .cur-wrap:not(.mob){display:none} }

/* ---------- D1 · the mobile book bar steps aside while reading */
.mbar{transition:transform .6s var(--m-settle);gap:12px}
.mbar a{white-space:nowrap;flex:none}
.mbar .from{min-width:0}
body.bar-away .mbar{transform:translateY(calc(100% + 2px))}
.mbar .from .odo{height:1.15em}
@media(max-width:680px){
  .wa-float{transition:transform .6s var(--m-settle)}
  body.bar-away .wa-float{transform:translateY(62px)} /* follows the bar down: 82px → 20px from the bottom */
}

/* ---------- D8 · WhatsApp label: a dark pill that slides out beside the green circle (clip-path only,
   so nothing around it moves and the text keeps AA contrast). The circle itself is unchanged. */
.wa-float .wa-lbl{position:absolute;right:calc(100% + 10px);top:50%;translate:0 -50%;pointer-events:none;
  background:var(--ink);color:var(--bone);border-radius:999px;padding:11px 16px;box-shadow:0 8px 22px rgba(21,42,46,.22);
  clip-path:inset(0 0 0 100% round 999px);opacity:0;transition:clip-path .8s var(--m-settle),opacity .4s var(--m-settle)}
.wa-float .wa-lbl span{display:block;white-space:nowrap;font:400 .78rem/1 'Jost',sans-serif;letter-spacing:.01em;max-width:62vw;overflow:hidden;text-overflow:ellipsis}
.wa-float.say .wa-lbl{clip-path:inset(0 0 0 0 round 999px);opacity:1}

/* ---------- D4 · the mobile menu opens like a lens from the burger */
#mobnav.lens{display:block;visibility:hidden;clip-path:circle(0px at var(--mx,92%) var(--my,36px));
  transition:clip-path .75s var(--m-move),visibility 0s linear .75s}
#mobnav.lens.open{visibility:visible;clip-path:circle(150% at var(--mx,92%) var(--my,36px));transition:clip-path .75s var(--m-move),visibility 0s}
#mobnav.lens li,#mobnav.lens .grp,#mobnav.lens .cur-wrap,#mobnav.lens .mob-book{opacity:0;transform:translateY(14px);transition:opacity .5s var(--m-settle),transform .7s var(--m-settle)}
#mobnav.lens.open li,#mobnav.lens.open .grp,#mobnav.lens.open .cur-wrap,#mobnav.lens.open .mob-book{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * 22ms)}

/* ---------- D9 · buttons fill from where you touch them (keeps the thin-rule look)
   Inside @supports: a browser without unprefixed clip-path (older Safari) keeps site.css's plain
   scaleX sweep instead of a permanently filled ::after under same-colour text. The text colour runs
   on the same .7s curve as the fill (it was .5s, so on light backgrounds the text turned bone before
   the ink fill reached it). Keyboard focus fills too, so it gets the same text colours as hover. */
.btn{transition:color .5s var(--ease),transform .5s var(--m-settle)}
@supports (clip-path:circle(0 at 0 0)){
  .btn::after{transform:none!important;clip-path:circle(0 at var(--fx,0) var(--fy,50%));transition:clip-path .7s var(--m-settle)}
  .btn:hover::after,.btn:focus-visible::after{clip-path:circle(150% at var(--fx,0) var(--fy,50%))}
  .btn{transition:color .7s var(--m-settle),transform .5s var(--m-settle)}
  .btn:focus-visible{color:var(--bone)}
  .btn-solid:focus-visible{color:var(--ink)}
  .dark .btn:focus-visible{color:var(--ink)}
  .dark .btn.btn-solid:focus-visible{color:var(--bone)}
}
.btn:active,.mbar a:active,.nav-book:active,.booking button:active{transform:scale(.97)}
.mbar a,.nav-book,.booking button{transition:transform .3s var(--m-settle),filter .3s}

/* ---------- reduced motion: still and complete */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .odo .odo-c,.mbar,.wa-float,.wa-float .wa-lbl,#mobnav.lens,#mobnav.lens li,#mobnav.lens .grp,#mobnav.lens .cur-wrap,#mobnav.lens .mob-book,.btn::after{transition:none!important}
  body.bar-away .mbar{transform:none}
}