/* ════════════════════════════════════════════════════════════════
   Sky Host BD — motion layer v3 (shared by every page, index.html too)
   Calm, smooth, premium: one easing curve, transform/opacity only,
   no hover "lift" (it flickers at card edges), nothing that clips text.
   Design stays flat & square — no shadows, gradients or rounded corners.
   Everything animated is gated by prefers-reduced-motion.
   Pair: js/motion.js
   ════════════════════════════════════════════════════════════════ */
:root{--mo-ease:cubic-bezier(.22,1,.36,1)}

/* thin scroll-progress bar (JS creates it) */
.mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:700;background:var(--brand,#0e8f6e);transform:scaleX(0);transform-origin:left;pointer-events:none}

@media (prefers-reduced-motion:no-preference){

/* ── keyframes ─────────────────────────────────────────────── */
@keyframes moUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes moRight{from{opacity:0;translate:40px 0}to{opacity:1;translate:0 0}}
@keyframes moDown{from{opacity:0;translate:0 -100%}to{opacity:1;translate:0 0}}
@keyframes moDrop{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes moPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes moFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes moDrift{0%,100%{translate:0 0}50%{translate:10px -10px}}
@keyframes moRing{from{transform:scale(1);opacity:.65}to{transform:scale(1.6);opacity:0}}
@keyframes moBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes moLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes moWiggle{25%{rotate:-12deg}75%{rotate:12deg}}
@keyframes moWipe{from{clip-path:inset(0 100% 0 0);scale:1.12}to{clip-path:inset(0 0 0 0);scale:1}}
@keyframes moDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes moType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes moCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes moFadeOut{to{opacity:0}}
@keyframes moFadeIn{from{opacity:0}}

/* ── ONE scroll-reveal system (covers site.js .rv and JS-tagged .mo) ── */
.js .rv,.mo-on .mo{opacity:0;transform:translateY(28px);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease)}
.js .rv.in,.mo-on .mo.mo-in{opacity:1;transform:none}
.js .rv.in.done,.mo-on .mo.mo-in.mo-done{transition:opacity .25s,transform .3s var(--mo-ease),translate .3s var(--mo-ease),background .2s,border-color .2s}
/* two-column splits: the halves glide in from their own side */
.js .split>.rv:first-child,.mo-on .split>.mo:first-child{transform:translateX(-34px)}
.js .split>.rv:last-child,.mo-on .split>.mo:last-child{transform:translateX(34px)}
.js .split>.rv.in:first-child,.js .split>.rv.in:last-child,
.mo-on .split>.mo.mo-in:first-child,.mo-on .split>.mo.mo-in:last-child{transform:none}
@media (max-width:700px){.js .rv,.mo-on .mo{transform:translateY(18px)}}

/* ── page entrance ─────────────────────────────────────────── */
.top-sticky,.top{animation:moDown .7s var(--mo-ease) backwards}
.mo-ret .top-sticky,.mo-ret .top,.mo-ret .wa{animation:none}
.mo-on .mo-h{animation:moUp .95s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0)*85ms + 120ms)}
.mo-on .mo-h-side{animation-name:moRight;animation-duration:1.1s;animation-delay:.45s}
.phero .chip{animation:moPop .5s var(--mo-ease) backwards;animation-delay:calc(var(--c,0)*70ms + 560ms)}
.phero .chip:nth-child(1){--c:0}.phero .chip:nth-child(2){--c:1}.phero .chip:nth-child(3){--c:2}
.phero .chip:nth-child(4){--c:3}.phero .chip:nth-child(5){--c:4}.phero .chip:nth-child(6){--c:5}
.hero .photo,.hero-photo{animation:moWipe 1.3s var(--mo-ease) .3s backwards}

/* hero extras that gently float */
.float-chip,.hv .chip{animation:moPop .55s var(--mo-ease) 800ms backwards,moFloat 6s ease-in-out 1.4s infinite}
.float-chip.b,.hv .chip.b{animation-delay:1000ms,2.4s}
.hv::before{animation:moDrift 9s ease-in-out infinite}
.hv::after{animation:moDrift 10s ease-in-out -3s infinite reverse}

/* ── cards & plans: no lift (it flickers at the edge). An accent bar grows, the icon swells ── */
a.card,.card.hov,.plan{position:relative}
.card{transition:background .2s,border-color .2s}
a.card::after,.card.hov::after,.plan::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;background:var(--brand,#0e8f6e);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--mo-ease);pointer-events:none}
a.card:hover::after,.card.hov:hover::after,.plan:hover::after{transform:scaleX(1)}
.ci{transition:transform .5s var(--mo-ease)}
a.card:hover .ci,.card.hov:hover .ci{transform:scale(1.1)}
.plan{transition:background .2s}
.cc,.ccard{transition:border-color .2s,background .2s}
.more .ico,.go{transition:translate .35s var(--mo-ease)}
a.card:hover .more .ico,.card.hov:hover .more .ico,.more:hover .ico{translate:5px 0}

/* ── buttons & links ───────────────────────────────────────── */
.btn{transition:background .2s,color .2s,border-color .2s,scale .25s var(--mo-ease)}
.btn:active{scale:.97}
.mo-arrow{transition:translate .35s var(--mo-ease)}
a:hover>.mo-arrow,button:hover>.mo-arrow,.btn:hover .mo-arrow,.foot-cta:hover .mo-arrow{translate:5px 0}
.more{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .25s}
.more:hover{text-decoration-color:currentColor}

/* ── navigation dropdown: items cascade in ─────────────────── */
.nav>li:hover>.menu a,.nav>li.open>.menu a,.nav>li:focus-within>.menu a{animation:moDrop .4s var(--mo-ease) backwards;animation-delay:calc(var(--k,0)*40ms + 30ms)}
.menu a:nth-child(1){--k:0}.menu a:nth-child(2){--k:1}.menu a:nth-child(3){--k:2}.menu a:nth-child(4){--k:3}
.menu a:nth-child(5){--k:4}.menu a:nth-child(6){--k:5}.menu a:nth-child(7){--k:6}.menu a:nth-child(8){--k:7}

/* ── small touches ─────────────────────────────────────────── */
.wa{animation:moPop .6s var(--mo-ease) 1.2s backwards}
.wa::after{content:"";position:absolute;inset:0;border:2px solid #16a34a;pointer-events:none;animation:moRing 2.8s ease-out 2s infinite}
.wa:hover .ico{animation:moWiggle .5s}
.status-dot,.dot,.live i{animation:moBlink 2s ease-in-out infinite}
.rv.in .kicker::before,.mo-in .kicker::before{transform-origin:left;animation:moLine .7s var(--mo-ease) .25s backwards}
.step.in::before,.step.mo-in::before,.step.mo-in .n,.rv.in .hiw .num,.hiw.mo-in .num,.mo-in .num{animation:moPop .55s var(--mo-ease) .2s backwards}

/* ── line-draw icons: card icons draw themselves when revealed ── */
.mo-icons :is(.rv,.mo) .ci svg{stroke-dasharray:1 2;stroke-dashoffset:1}
.mo-icons :is(.rv.in,.mo-in) .ci svg{animation:moDraw 1.1s var(--mo-ease) .3s forwards}

/* ── cross-page fade (View Transitions; ignored where unsupported) ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:moFadeOut .2s ease both}
::view-transition-new(root){animation:moFadeIn .4s ease both}

/* ── "How it works": connector drawn by scroll ─────────────── */
@media (min-width:901px){
  .steps.mo-line{position:relative}
  .steps.mo-line::before,.steps.mo-line::after{content:"";position:absolute;left:22px;right:calc((100% - 26px*(var(--mo-n,3) - 1))/var(--mo-n,3) - 22px);top:21px;height:2px;pointer-events:none}
  .steps.mo-line::before{background:var(--edge,#b4dccd)}
  .steps.mo-line::after{background:var(--brand,#0e8f6e);transform:scaleX(var(--mo-p,0));transform-origin:left}
  .steps.mo-line .step::before{z-index:1}
}

/* ── comparison tables: rows cascade ───────────────────────── */
.rv.in .t tbody tr,.mo-in .t tbody tr{animation:moUp .6s var(--mo-ease) backwards;animation-delay:calc(var(--r,0)*70ms + 150ms)}
.t tbody tr:nth-child(1){--r:0}.t tbody tr:nth-child(2){--r:1}.t tbody tr:nth-child(3){--r:2}.t tbody tr:nth-child(4){--r:3}
.t tbody tr:nth-child(5){--r:4}.t tbody tr:nth-child(6){--r:5}.t tbody tr:nth-child(7){--r:6}.t tbody tr:nth-child(8){--r:7}

/* ── terminal typing (data-lines) ──────────────────────────── */
.mo-l{display:inline-block;vertical-align:top;animation:moType var(--d,600ms) steps(var(--n,30),end) var(--t,0ms) backwards}
[data-lines]:not(.mo-play) .mo-l{animation-play-state:paused}
.mo-caret{display:inline-block;width:.55em;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--accent-lt,#ffd25e);opacity:0;animation:moCaret 1s steps(1) var(--t,0ms) infinite}
[data-lines]:not(.mo-play) .mo-caret{animation-play-state:paused}

/* ── FAQ: icon turns back while closing ────────────────────── */
.faq details.mo-closing[open] summary .ico{transform:none}
.faq details.mo-closing[open]{background:#fff;border-left-color:var(--edge,#b4dccd)}
}