/* The KOHO Air Hotel — motion graphics (assets/motion-graphics.css)
   Pairs with assets/motion-graphics.js and assets/mg-intro.js. Round 2 of
   the motion-graphics study (owner's picks 2026-10-15). Everything here is
   built by the scripts, so with reduced motion or without JS none of it
   exists and the pages are as they were. */

/* ================================================================ 1 · the emblem draws itself (mg-intro.js) */
#mg-intro{position:fixed;inset:0;z-index:2147483000;pointer-events:none;animation:mgi-out .4s ease 3.6s forwards}
#mg-intro svg{display:block;width:100%;height:100%}
#mg-intro .mgi-s{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
@keyframes mgi-out{to{opacity:0;visibility:hidden}}
/* the hero's load animations wait for the curtain */
.mg-intro .hm-hero *{animation-play-state:paused!important}

/* ================================================================ 2 · the offers as a film (Offers hero) */
.mg-film{position:absolute;inset:0;z-index:3;overflow:hidden;overflow:clip;color:#FAF7F1;background:#0E1D20}
.mg-film .sc{position:absolute;inset:0;visibility:hidden}
.mg-film .sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.mg-film .sc::after{content:'';position:absolute;inset:0;background:rgba(9,26,30,.4)}
.mg-film .bars{position:absolute;z-index:4;left:16px;right:16px;top:calc(var(--mg-hdr,84px) + 8px);display:flex;gap:6px}
.mg-film .bars i{flex:1;height:2px;background:rgba(250,247,241,.3);position:relative;overflow:hidden}
.mg-film .bars b{position:absolute;inset:0;background:#FAF7F1;transform-origin:left;transform:scaleX(0)}
.mg-film .tx{position:absolute;z-index:2;inset:0;display:grid;place-items:center;align-content:center;gap:16px;text-align:center;padding:calc(var(--mg-hdr,84px) + 10px) 20px 20px}
.mg-film h2{font:500 clamp(30px,6.4vw,92px)/.95 Jost,sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0;color:#FAF7F1;text-wrap:balance}
.mg-film .pc{font:400 clamp(44px,8vw,120px)/1 'Cormorant Garamond',serif;color:#F2D49B}
.mg-film .pc small{display:block;font:400 11px/1.4 Jost,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#FAF7F1;margin-top:8px}
.mg-film .fa{font:400 11px/1.5 Jost,sans-serif;letter-spacing:.22em;text-transform:uppercase;max-width:60ch}
.mg-film .end{position:absolute;inset:0;z-index:5;background:#F3EEE5;color:#152A2E;display:grid;place-items:center;align-content:center;gap:16px;visibility:hidden}
.mg-film .end svg{width:70px;height:70px;overflow:visible}
.mg-film .end b{font:400 clamp(36px,5vw,64px)/1 'Cormorant Garamond',serif}
.mg-film-skip,.mg-film-play{position:absolute;z-index:6;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(250,247,241,.55);border-radius:999px;
  background:rgba(9,26,30,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#FAF7F1;font:500 10px/1 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.mg-film-skip:hover,.mg-film-play:hover{background:rgba(9,26,30,.7)}
.mg-film-play svg{width:8px;height:8px}
.mg-film-play[hidden]{display:none}

/* ================================================================ 3 · hand-written notes (Private Villa hero) */
.mg-notes{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .25s linear}
.mg-notes .scr{position:absolute;inset:0;background:rgba(9,26,30,.16)}
.mg-notes svg{position:absolute;inset:0;overflow:visible}
.mg-notes .lb{position:absolute;color:#FAF7F1;font:italic 400 25px/1.05 'Cormorant Garamond',serif;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero-s .hero-inner{position:relative;z-index:2}
@media (max-width:760px){.mg-notes .lb{font-size:19px}}

/* ================================================================ 4 · depth (Private Villa hero) */
.mg-depth{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .4s linear}
.mg-depth.on{opacity:1}

/* ================================================================ 9 · tonight's sky (homepage hero after sunset) */
.mg-sky{position:absolute;inset:0;z-index:1;overflow:hidden;overflow:clip}
.mg-sky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-sky .gr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,40,.45),rgba(8,14,40,.15) 55%,rgba(8,14,40,.4));mix-blend-mode:multiply}
.mg-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.mg-sky .moon{position:absolute;left:14%;top:15%;filter:drop-shadow(0 0 18px rgba(244,238,221,.35))}
.mg-sky .moon svg{display:block}
.hm-dusk.mg-night .hm-frame::after{opacity:.3}

/* ================================================================ 11 · where our guests come from (Reviews) */
.mg-globe .w11{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:40px;align-items:center}
.mg-globe h2{margin:10px 0 8px}
.mg-globe .nt{font-size:.8rem;opacity:.7;margin:0 0 18px;max-width:46ch}
.mg-gb{position:relative;height:480px}
.mg-gb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mg-globe ol{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mg-globe li{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;font:400 14px Jost,sans-serif;opacity:.5;transition:opacity .3s}
.mg-globe li.on{opacity:1}
.mg-globe li i{display:block;height:4px;background:rgba(250,247,241,.15);position:relative}
.mg-globe li i b{position:absolute;left:0;top:0;bottom:0;width:0;background:#8FD6CF}
.mg-globe li span:last-child{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .mg-globe .w11{grid-template-columns:1fr;gap:16px}
  .mg-gb{height:320px}
  .mg-globe ol{gap:5px}
  .mg-globe li{grid-template-columns:116px 1fr 40px;font-size:12px}
}

/* ================================================================ 12 · why direct is cheaper (Offers) */
.mg-price{background:#EEE9E0}
.mg-price h2{margin:10px 0 8px}
.mg-price .nt{font-size:.8rem;color:var(--soft);max-width:72ch;margin:0 0 30px}
.mg-price .stk{display:flex;gap:90px;align-items:flex-end;max-width:900px;padding:0 0 30px 20px}
.mg-price .col{display:flex;flex-direction:column-reverse;width:170px;position:relative}
.mg-price .bl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:500 12px/1.25 Jost,sans-serif;color:#152A2E;border-top:2px solid #EEE9E0;overflow:hidden}
.mg-price .bl small{display:block;font-weight:400;opacity:.8}
.mg-price .cap{position:absolute;top:100%;margin-top:8px;font:500 11px Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7D5E3C;white-space:nowrap}
.mg-price .tt{font:400 28px 'Cormorant Garamond',serif;margin-bottom:6px;font-variant-numeric:tabular-nums}
.mg-price .df{font:400 32px 'Cormorant Garamond',serif;color:#1B5F6B;margin-top:22px}
.mg-price .df button{margin-left:14px;vertical-align:middle}
.mg-price.mg-pre .bl,.mg-price.mg-pre .tt,.mg-price.mg-pre .df{opacity:0}
@media (max-width:760px){
  .mg-price .stk{gap:40px;padding-left:0}
  .mg-price .col{width:120px}
  .mg-price .bl{font-size:10px}
  .mg-price .tt{font-size:22px}
  .mg-price .df{font-size:24px}
  .mg-price .df button{display:block;margin:12px 0 0}
}

/* ================================================================ 13 · the ledger, moving (Sustainability) */
.mgv{display:flex;flex-wrap:wrap;gap:3px;margin-top:10px;max-width:340px}
.mgv i{display:block;width:7px;height:15px;border-radius:3px 3px 1px 1px;background:rgba(21,42,46,.12);transition:background-color .25s}
.mgv i.f{background:#2FA9A6}
.mgv.dot i{width:9px;height:9px;border-radius:50%}
.mgv.dv i{width:22px;height:12px;background:none;border-radius:0;border-bottom:2px solid #2FA9A6;opacity:.15;transition:opacity .25s}
.mgv.dv i.f{background:none;opacity:1}
.mgv.sun{display:block;height:8px;background:rgba(21,42,46,.1);border-radius:4px;position:relative;overflow:hidden}
.mgv.sun i{position:absolute;inset:0 auto 0 0;width:0;height:auto;background:#E0A84A;border-radius:4px}
.mgv-k{display:block;margin-top:4px;font-size:.7rem;color:var(--soft)}

/* ================================================================ 15 · experiences that move (Experiences) */
.mg-tv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1.2s var(--ease);z-index:1;pointer-events:none}
.mg-tv.on{opacity:1}
.tile:hover .mg-tv{transform:scale(1.06)}
.tile.mg-moving::after{z-index:2}
.tile.mg-moving .lab{z-index:3}
.mg-hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s linear;pointer-events:none}
.mg-hv.on{opacity:1}
.mg-hv.packed{height:200%;object-position:50% 25%}
/* a wide hero shows a band of these portrait clips; at Sunset Point the upper part (sky, head and shoulders) */
@media (min-width:761px){.hero video.mg-hv.packed[src*="sunset-point"]{object-position:50% 8%}}
.mg-cap{position:absolute;left:24px;bottom:22px;z-index:3;color:#FAF7F1;font:500 10px Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:8px;align-items:center;text-shadow:0 1px 8px rgba(0,0,0,.4);transition:opacity .5s}
.mg-cap i{width:18px;height:1px;background:#FAF7F1;display:block}

/* ================================================================ 5 · the villa, unfolded (Private Villa) */
.mg-villa{background:#EFE9DF}
.mg-vw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 60px;align-items:end}
.mg-vw h2{margin:10px 0 0}
.mg-vw > p{color:var(--soft);margin:0;max-width:46ch}
.mg-va{grid-column:1/-1;max-width:1100px;width:100%;margin:10px auto 0}
.mg-va svg{display:block;width:100%;height:auto;overflow:visible}
.mg-vt{font:500 6.6px Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;fill:#152A2E}
.mg-vn{font:600 6px Jost,sans-serif;fill:#152A2E}
.mg-vlg{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font:500 10px/1.3 Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#152A2E}
.mg-vlg li{display:flex;gap:7px;align-items:center;opacity:0}
.mg-vlg b{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid #152A2E;font-size:9px;letter-spacing:0;background:#FAF7F1}
@media (max-width:760px){.mg-vw{grid-template-columns:1fr;gap:10px}.mg-va{margin-top:8px}}

/* ================================================================ 6 · heat, cold, calm (Soma Vita, the recovery dial) */
.mg-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 44px}
.mg-svc figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;box-shadow:0 18px 40px -24px rgba(27,29,51,.6);background:#2A2C4A}
.mg-svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-svc figure::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,29,51,.08) 25%,rgba(27,29,51,.82)),linear-gradient(135deg,rgba(79,99,232,.18),rgba(215,127,184,.12))}
.mg-svc .disc{position:absolute;left:50%;top:42%;width:128px;height:128px;transform:translate(-50%,-50%);z-index:2;border-radius:50%;background:rgba(247,247,252,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1.5px rgba(247,247,252,.35),0 10px 30px -10px rgba(79,99,232,.6)}
.mg-svc .disc::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#4F63E8,#8A6FD4,#D77FB8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mg-svc .disc svg{position:absolute;inset:12%;width:76%;height:76%;overflow:visible}
.mg-svc figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#F7F7FC}
.mg-svc b{display:block;font:400 26px/1.05 'Cormorant Garamond',serif}
.mg-svc small{display:inline-block;margin-top:8px;font:500 10px Jost,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.mg-svc .chip{position:absolute;top:14px;right:14px;z-index:2;padding:5px 11px;border-radius:999px;background:linear-gradient(100deg,#4F63E8,#8A6FD4 50%,#D77FB8);color:#fff;font:500 11px Jost,sans-serif;letter-spacing:.08em;box-shadow:0 6px 18px -6px rgba(79,99,232,.7)}
.svd-ring.mg-ring{overflow:visible}
.mg-svt{font:600 11px Jost,sans-serif;letter-spacing:.04em;fill:#5B4DB8}
@media (max-width:760px){
  .mg-svc{gap:8px;margin-bottom:30px}
  .mg-svc figure{aspect-ratio:3/4}
  .mg-svc .disc{width:66px;height:66px}
  .mg-svc figcaption{left:8px;right:8px;bottom:8px}
  .mg-svc b{font-size:15px}
  .mg-svc small{font-size:7.5px;letter-spacing:.12em;margin-top:4px}
  .mg-svc .chip{top:7px;right:7px;padding:3px 7px;font-size:8.5px}
  .mg-svd-on .svd-ring{max-width:250px}
}
@media (prefers-reduced-motion:no-preference){
  .mg-heat path{animation:mg-heat 2.4s ease-in infinite;animation-delay:calc(var(--i) * .45s);transform-box:fill-box}
  .mg-bub circle{animation:mg-bub 2.2s ease-in infinite;animation-delay:calc(var(--i) * .4s);transform-box:fill-box}
  .mg-frost path{stroke-dasharray:1;animation:mg-frost 4s ease infinite;animation-delay:calc(var(--i) * .25s)}
  .mg-sway{animation:mg-sway 4s ease-in-out infinite;transform-origin:0 18px}
  .mg-still .mg-heat path,.mg-still .mg-bub circle,.mg-still .mg-frost path,.mg-still .mg-sway{animation-play-state:paused}
}
@keyframes mg-heat{0%{opacity:0;transform:translateY(4px)}30%{opacity:.95}100%{opacity:0;transform:translateY(-14px)}}
@keyframes mg-bub{0%{opacity:0;transform:translateY(3px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.1)}}
@keyframes mg-frost{0%,8%{stroke-dashoffset:1}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.25}}
@keyframes mg-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}