/* The KOHO Air Hotel — Motion Ten (assets/motion-ten.css). Parts are described in assets/motion-ten.js. */

/* ---------- shared bits */
.mt-ey{display:block;font:500 .66rem/1.3 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.mt-pill{display:inline-flex;align-items:center;padding:13px 22px;border:0;border-radius:99px;background:var(--sea);color:var(--bone);font:500 .66rem/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.mt-pill-plum{background:var(--plum)}
.mt-rect{display:inline-flex;align-items:center;padding:12px 18px;border:1px solid currentColor;color:inherit;font:500 .66rem/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.mt-pill:focus-visible,.mt-rect:focus-visible,.mt-br:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* ---------- 2 · titles behind the foliage */
.hero.mt-cut-on{isolation:isolate;overflow:hidden;--mt-veil:linear-gradient(180deg,rgba(10,22,25,.56) 0%,rgba(10,22,25,.16) 26%,rgba(10,22,25,.28) 52%,rgba(10,22,25,.70) 100%),radial-gradient(70% 55% at 50% 52%,rgba(10,22,25,.36) 0%,rgba(10,22,25,0) 100%)}
.hero.mt-cut-on .ph.bg{z-index:0;transform-origin:50% 40%;will-change:transform}
/* the same veil sits over the photo and, baked in, over the cut-out in front of the title */
.hero.mt-cut-on::after{z-index:1;background:var(--mt-veil)}
.hero.mt-cut-on .mt-word{position:absolute;left:0;right:0;top:0;z-index:2;margin:0;padding:0 3vw;text-align:center;pointer-events:none;color:var(--bone);
  font:400 10vw/.86 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;white-space:nowrap;text-transform:none;font-style:normal;text-shadow:0 2px 34px rgba(10,30,60,.22);will-change:transform}
.hero.mt-cut-on .mt-fg{position:absolute;inset:0;z-index:3;pointer-events:none;background-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform-origin:50% 40%;will-change:transform}
.hero.mt-cut-on .hero-inner{position:relative;z-index:4;align-self:flex-end;padding-bottom:7svh}
.hero.mt-cut-on .mt-fgv{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;transform-origin:50% 40%}
.hero.mt-cut-on video.packed{transform-origin:50% 20%}
/* the hero video (site.js puts it right after the photo) stays above the photo, which sits on 0 here */
.hero.mt-cut-on>video{z-index:0}
.hero.mt-cut-on .mg-notes,.hero.mt-cut-on .mg-cap{z-index:4}
.hero.mt-cut-rise{height:86svh}
.hero.mt-cut-name{height:76svh}
.hero.mt-cut-word{height:80svh}
.mt-word-rise{font-size:8.4vw!important}
.mt-word-name{font-size:11vw!important}
.mt-word-word{font-size:14vw!important}
@media (max-width:760px){
  .hero.mt-cut-rise{height:82svh}.hero.mt-cut-name{height:70svh}.hero.mt-cut-word{height:78svh}
  .mt-word-rise{font-size:13.5vw!important}.mt-word-name{font-size:16vw!important;white-space:normal!important}.mt-word-word{font-size:25vw!important}
}

/* ---------- 1 · scroll the garden */
.mt-fly-track{position:relative;height:250vh;margin-top:10px}
.mt-fly-stick{position:sticky;top:max(86px,calc(50vh - 34vh));}
.tour-frame.mt-fly{width:min(100%,calc(74vh * 16 / 9));margin-inline:auto;border-radius:6px}
.mt-fly-box{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.mt-fly-box.on{opacity:1}
.mt-fly-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mt-fly-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,25,28,.3),rgba(10,25,28,0) 26%,rgba(10,25,28,0) 50%,rgba(10,25,28,.68))}
.mt-fly-cap{position:absolute;left:5%;bottom:8%;color:var(--bone);display:grid;gap:8px;max-width:64%;text-align:left}
.mt-fly-cap .mt-ey{opacity:.85}
.mt-fly-cap b{font:300 italic clamp(30px,4.4vw,58px)/1 'Cormorant Garamond',serif}
.mt-fly-s{font:300 .86rem/1.4 'Jost',sans-serif;opacity:.88}
.mt-fly-rail{position:absolute;right:4%;top:16%;bottom:16%;width:2px;background:rgba(250,247,241,.28)}
.mt-fly-rail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--bone)}
.mt-tk{position:absolute;left:-5px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--bone);background:rgba(21,42,46,.6);transform:translateY(-50%);transition:background .3s}
.mt-tk.on{background:var(--bone)}
.mt-tk span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .6rem/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);opacity:0;transition:opacity .3s}
.mt-tk.cur span{opacity:.95}
.mt-fly-end{position:absolute;right:9%;bottom:8%;z-index:2;display:flex;gap:10px;align-items:center;color:var(--bone);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s,transform .45s}
.mt-fly-end.on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:760px){
  .mt-fly-track{height:200vh}
  .tour-frame.mt-fly{aspect-ratio:4/5;width:100%}
  .mt-fly-stick{top:max(76px,calc(50vh - 30vh))}
  .mt-fly-rail{display:none}
  .mt-fly-cap{bottom:16%;max-width:90%}
  .mt-fly-end{left:5%;right:auto;bottom:5%}
}

/* ---------- 4 · the dive gauge */
.mt-dv-track{position:relative;height:480vh}
.mt-dv{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#2FA9A6;color:var(--bone)}
.mt-dv canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.32;filter:blur(1px)}
.mt-dv-sky{position:absolute;left:0;right:0;top:0;height:36%;background:linear-gradient(180deg,var(--bone),#D9EEEC);color:var(--ink);will-change:transform}
.mt-dv-sky .mt-ey{position:absolute;left:12%;bottom:18%;color:var(--sea)}
.mt-dv-sky h2{position:absolute;left:12%;bottom:30%;margin:0;font:300 clamp(30px,4vw,52px)/1 'Cormorant Garamond',serif;color:var(--ink)}
.mt-dv-sea{position:absolute;right:6%;bottom:19%;font:400 .9rem/1 'Jost',sans-serif;color:var(--sea)}
.mt-dv-gauge{position:absolute;left:5%;top:14%;bottom:8%;width:1px;background:rgba(250,247,241,.45)}
.mt-dv-gauge>i{position:absolute;left:-5px;width:11px;height:11px;border-radius:50%;background:var(--bone);transform:translateY(-50%);box-shadow:0 0 0 5px rgba(250,247,241,.18)}
.mt-dv-t{position:absolute;left:0;width:8px;height:1px;background:rgba(250,247,241,.6)}
.mt-dv-t.M{width:14px}
.mt-dv-t span{position:absolute;left:18px;top:-6px;font:400 .62rem/1 'Jost',sans-serif;color:rgba(250,247,241,.8)}
.mt-dv-read{position:absolute;right:6%;top:14%;text-align:right}
.mt-dv-read b{display:block;font:300 clamp(40px,6vw,76px)/1 'Cormorant Garamond',serif;font-variant-numeric:tabular-nums}
.mt-dv-read span{font:500 .64rem/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.mt-dv-l12{position:absolute;left:5%;right:6%;top:0;border-top:1px dashed rgba(250,247,241,.55);font:500 .64rem/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.mt-dv-l12 span{position:absolute;right:0;top:8px}
.mt-dv-card{position:absolute;left:30%;right:30%;top:56%;display:grid;gap:8px;color:var(--bone);text-decoration:none;opacity:0;visibility:hidden}
.mt-dv-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;box-shadow:0 24px 50px -22px rgba(0,0,0,.6)}
.mt-dv-card .mt-ey{color:#9BDDD9}
.mt-dv-card b{font:400 clamp(22px,2.4vw,30px)/1.1 'Cormorant Garamond',serif}
.mt-dv-card>span:last-child{font:300 .9rem/1.4 'Jost',sans-serif;opacity:.88}
a.mt-dv-card:hover b{text-decoration:underline;text-underline-offset:4px}
.mt-dv-still .mt-dv-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.mt-dv-still .mt-dv-card{position:static;opacity:1;visibility:visible;color:var(--ink)}
.mt-dv-still .mt-dv-card .mt-ey{color:var(--sea)}
@media (max-width:760px){
  .mt-dv-track{height:420vh}
  .mt-dv-sky .mt-ey,.mt-dv-sky h2{left:16%}
  .mt-dv-sea{left:16%;right:auto;bottom:8%}
  .mt-dv-gauge{left:6%}
  .mt-dv-card{left:16%;right:6%}
  .mt-dv-still .mt-dv-row{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 5 · a line of light through the stepping stones */
.mt-pt-track{position:relative;height:280vh;background:var(--bone)}
.mt-pt{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6vw;padding:90px 7vw 24px}
.mt-pt h2{margin:10px 0 14px}
.mt-pt p{max-width:34ch;color:var(--soft)}
.mt-pt-ct{display:block;margin-top:24px;font:500 .66rem/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);font-variant-numeric:tabular-nums}
.mt-pt-fr{position:relative;height:calc(100svh - 130px);aspect-ratio:950/1240;overflow:hidden;border-radius:6px;background:var(--sand)}
.mt-pt-fr img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.mt-pt-fr svg{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:950/1240;overflow:visible}
.mt-pt-glow{fill:none;stroke:#FFC46B;stroke-width:30;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.75}
.mt-pt-line{fill:none;stroke:#FFF6E0;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.mt-pt-head{fill:#FFF6E0;opacity:0}
.mt-pt-dot{fill:#FFFFFF;opacity:0}
.mt-pt-r{fill:none;stroke:#FFE7B8;stroke-width:2;opacity:0}
.mt-pt-lab{position:absolute;right:6%;top:46%;text-align:right;color:var(--bone);font:500 .64rem/1.2 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .6s}
.mt-pt-lab b{display:block;font:300 italic 24px/1.1 'Cormorant Garamond',serif;letter-spacing:0;text-transform:none}
.mt-pt-still{height:auto}
.mt-pt-still .mt-pt{position:relative;height:auto;min-height:0;padding-block:70px}
.mt-pt-still .mt-pt-fr{height:min(80svh,760px)}
@media (max-width:760px){
  .mt-pt{display:block;padding:0}
  .mt-pt-tx{position:absolute;left:0;right:0;top:0;z-index:3;padding:84px 20px 34px;background:linear-gradient(180deg,rgba(21,42,46,.66),rgba(21,42,46,0));color:var(--bone)}
  .mt-pt-tx .eyebrow,.mt-pt-tx h2,.mt-pt-ct{color:var(--bone)}
  .mt-pt-tx p{color:rgba(250,247,241,.9)}
  .mt-pt-fr{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:0}
  .mt-pt-fr img{left:50%;transform:translateX(-50%);height:107.58%;width:auto}
  .mt-pt-fr svg{left:50%;transform:translateX(-50%);height:100%;width:auto}
  .mt-pt-still .mt-pt{padding:0}
  .mt-pt-still .mt-pt-fr{position:relative;inset:auto;height:auto;aspect-ratio:950/1240}
  .mt-pt-still .mt-pt-fr img,.mt-pt-still .mt-pt-fr svg{left:0;transform:none;width:100%;height:auto}
}

/* ---------- 6 · letters that are windows */
.mt-lt-track{position:relative;height:300vh}
.mt-lt{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bone)}
.mt-lt-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mt-lt-cut,.mt-lt-probe{position:absolute;inset:0;width:100%;height:100%}
.mt-lt-cut{will-change:transform}
.mt-lt-probe{visibility:hidden}
.mt-lt-paper{fill:#FAF7F1}
.mt-lt-top{position:absolute;left:0;right:0;top:16%;margin:0;text-align:center;color:var(--sea)}
.mt-lt-hint{position:absolute;left:0;right:0;bottom:12%;margin:0;text-align:center;color:var(--soft);font-size:.92rem}
.mt-lt-end{position:absolute;left:6%;right:6%;bottom:10%;color:var(--bone);opacity:0;text-shadow:0 1px 18px rgba(0,0,0,.35);pointer-events:none}
.mt-lt-end.on{pointer-events:auto}
.mt-lt-end .eyebrow{color:rgba(250,247,241,.85)}
.mt-lt-end h1{margin:8px 0 0;color:var(--bone);font-style:normal}

/* ---------- 7 · breathe with us */
.mt-br{position:absolute;z-index:3;right:5%;top:50%;width:min(24vw,300px);aspect-ratio:1;transform:translateY(-46%);padding:0;border:0;border-radius:50%;background:none;color:var(--bone);cursor:pointer}
.mt-br svg{width:100%;height:100%;overflow:visible}
.mt-br-w{position:absolute;inset:0;display:grid;place-items:center;font:300 italic clamp(20px,2.3vw,30px)/1.1 'Cormorant Garamond',serif;text-align:center;padding:0 18%}
.mt-br-meta{position:absolute;z-index:3;right:5%;width:min(24vw,300px);top:calc(50% + min(13vw,160px));margin:0;text-align:center;color:#EADFF0;font:500 .64rem/1.4 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.mt-br-done{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:16px;padding:0 12%;text-align:center;color:var(--bone);background:rgba(40,24,48,.6)}
.mt-br-done[hidden]{display:none}
.mt-br-done p{margin:0;font:300 clamp(26px,3.2vw,40px)/1.12 'Cormorant Garamond',serif}
@media (max-width:760px){
  .hero.mt-br-on{height:86svh}
  .hero.mt-br-on .hero-inner{align-self:flex-start;padding-top:16svh}
  .mt-br{left:50%;right:auto;top:auto;bottom:11%;width:46vw;transform:translateX(-50%)}
  .mt-br-meta{left:0;right:0;width:auto;top:auto;bottom:5%}
}

/* ---------- 8 · now serving */
.mt-sv{display:inline-flex;align-items:center;gap:12px;margin:0;padding:10px 18px 10px 12px;border-radius:99px;background:rgba(250,247,241,.16);border:1px solid rgba(250,247,241,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--bone);text-shadow:none}
.mt-sv-ic{flex:none;width:24px;height:24px;border-radius:50%;background:#E9A93B;box-shadow:0 0 14px rgba(233,169,59,.6)}
.mt-sv.night .mt-sv-ic{background:#C9D3E6;box-shadow:0 0 12px rgba(201,211,230,.5)}
.mt-sv-tx{display:grid;gap:3px;text-align:left}
.mt-sv small{font:500 .6rem/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.mt-sv b{font:400 .95rem/1.15 'Jost',sans-serif}
.card-i{position:relative}
.mt-sv-badge{position:absolute;left:10px;top:10px;z-index:2;padding:6px 10px;border-radius:99px;background:var(--sea);color:var(--bone);font:500 .6rem/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.mt-sv-badge.nx{background:var(--ink)}
.mt-sv-badge[hidden]{display:none}
.card-i.mt-sv-on{box-shadow:0 0 0 2px var(--sea);border-radius:4px}

/* ---------- 10 · a breeze in the photo (and The Bar's lighter hero) */
.mt-bz{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.mt-bz.on{opacity:1}
.hero.mt-light{color:var(--ink);justify-content:flex-start}
.hero.mt-light::after{background:linear-gradient(90deg,rgba(250,247,241,.42),rgba(250,247,241,0) 55%)}
.hero.mt-light .hero-inner{text-align:left;padding-left:7vw;max-width:48vw;text-shadow:none}
.hero.mt-light .eyebrow{color:var(--sea)}
@media (max-width:760px){
  .hero.mt-light{align-items:flex-start}
  .hero.mt-light::after{background:linear-gradient(180deg,rgba(250,247,241,.5),rgba(250,247,241,0) 50%)}
  .hero.mt-light .hero-inner{max-width:none;padding:15svh 22px 0}
}

@media (prefers-reduced-motion: reduce){
  .mt-fly-box,.mt-fly-end,.mt-pt-lab,.mt-bz{transition:none}
}