/* Yak VPN motion layer for the promo page (assets/motion.js). Gated by html.m-js, which motion.js keeps only when the visitor has not asked the
   system to reduce motion. Brandbook: amber accents, no glows, no gradient text. */
:root { --m-ease: cubic-bezier(.2, .75, .2, 1); interpolate-size: allow-keywords; }

/* ---------- 1. hero comes alive ---------- */
html.m-js .hero h1, html.m-js .hero .motto, html.m-js .hero .lead, html.m-js .hero .ctas, html.m-js .hero .facts {
  animation: m-up .9s var(--m-ease) both; }
html.m-js .hero .motto { animation-delay: .12s; }
html.m-js .hero .lead { animation-delay: .22s; }
html.m-js .hero .ctas { animation-delay: .32s; }
html.m-js .hero .facts { animation-delay: .42s; }
html.m-js .hero .phone { animation: m-phone 1.1s var(--m-ease) .15s both; }
html.m-js .hero-art .pill { animation: m-pop .7s var(--m-ease) both, m-float 6s ease-in-out infinite; }
html.m-js .hero-art .p1 { animation-delay: 1.9s, 2.6s; }
html.m-js .hero-art .p2 { animation-delay: 2.3s, 3.4s; animation-duration: .7s, 7s; }
html.m-splash .hero *, html.m-splash .hero-art .pill { animation-play-state: paused !important; }
@keyframes m-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes m-phone { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes m-pop { from { opacity: 0; transform: scale(.85) translateY(8px); } }
@keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* the phone: off -> button press -> connecting -> connected */
.ph-btn { position: relative; transition: border-color .5s, transform .18s var(--m-ease), box-shadow .6s; }
.ph-btn .i { transition: color .5s; }
.ph-btn.press { transform: scale(.92); }
.phone.is-off .ph-btn { border-color: rgba(255, 240, 220, .16); box-shadow: 0 0 0 12px rgba(255, 240, 220, .03); }
.phone.is-off .ph-btn .i { color: var(--muted); }
.ph-pill i { transition: background .4s, box-shadow .4s; }
.phone.is-off .ph-pill i { background: var(--muted); box-shadow: 0 0 0 4px rgba(185, 171, 152, .15); }
.phone.is-connecting .ph-pill i { background: var(--accent); animation: m-blink 1s ease-in-out infinite; }
@keyframes m-blink { 50% { opacity: .25; } }
.phone.is-connecting .ph-btn::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--accent); animation: m-spin .9s linear infinite; }
@keyframes m-spin { to { transform: rotate(1turn); } }
.phone.is-on .ph-btn::before, .phone.is-on .ph-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: m-ring 3.2s ease-out infinite; pointer-events: none; }
.phone.is-on .ph-btn::after { animation-delay: 1.6s; }
@keyframes m-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.ph-ping { display: inline-block; min-width: 2ch; transition: opacity .25s; }
.ph-ping.flip { opacity: .3; }
.ph-timer { font-variant-numeric: tabular-nums; }

/* ---------- 2. reveal on scroll ---------- */
html.m-js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--m-ease), transform .8s var(--m-ease), background .2s, translate .25s var(--m-ease); }
html.m-js .rv.in { opacity: 1; transform: none; }
html.m-js .rv.done { transition: opacity .3s, background .2s, translate .25s var(--m-ease); }
html.m-js .loc.soon.rv.in { opacity: .6; }

/* header gets denser once the page scrolls */
header.top { transition: background .3s, box-shadow .3s; }
header.top.scrolled { background: rgba(23, 18, 13, .9); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
svg.bg-yak { will-change: transform; }

/* ---------- 4. small living details ---------- */
@media (hover: hover) {
  .feature, .platform, .loc:not(.soon), .plan { transition: translate .25s var(--m-ease), background .2s; }
  .feature:hover, .platform:hover, .loc:not(.soon):hover, .plan:hover { translate: 0 -5px; }
  .feature .ico, .platform .em { transition: transform .35s var(--m-ease), color .25s; }
  .feature:hover .ico, .platform:hover .em { transform: rotate(-8deg) scale(1.08); color: var(--accent); }
  .btn-primary:hover { translate: 0 -2px; }
  .btn { transition: transform .15s ease, background .2s ease, translate .2s var(--m-ease); }
}
/* partner bars grow when the card shows up */
html.m-js #levels .lvl .bar span { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--m-ease); }
html[dir="rtl"].m-js #levels .lvl .bar span { transform-origin: right; }
html.m-js #levels.in .lvl .bar span { transform: none; }
html.m-js #levels.in .lvl:nth-child(2) .bar span { transition-delay: .1s; }
html.m-js #levels.in .lvl:nth-child(3) .bar span { transition-delay: .2s; }
html.m-js #levels.in .lvl:nth-child(4) .bar span { transition-delay: .3s; }
html.m-js #levels.in .lvl:nth-child(5) .bar span { transition-delay: .4s; }
/* FAQ: the plus turns into a cross, the answer slides open */
summary::after { content: "+" !important; transition: transform .3s var(--m-ease); }
details[open] summary::after { transform: rotate(45deg); }
details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--m-ease), content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; }
details[open] p { animation: m-up .45s var(--m-ease) both; }

/* ---------- 5. route map (scene) ---------- */
.m-map { margin-top: 44px; padding: 22px 22px 14px; position: relative; overflow: hidden; }
.m-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-map .rt { fill: none; stroke: rgba(255, 240, 220, .13); stroke-width: 2; transition: stroke .3s, opacity .3s; }
.m-map .rt.soon { stroke-dasharray: 5 7; }
.m-map .rt.best { stroke: rgba(233, 162, 59, .45); }
.m-map .nd { cursor: default; transition: opacity .3s; }
.m-map .nd circle.ring { fill: var(--surface-2); stroke: rgba(255, 240, 220, .14); stroke-width: 2; transition: stroke .3s; }
.m-map .nd.soon { opacity: .45; }
.m-map text { fill: var(--text); font: 700 15px var(--font-body); }
.m-map text.sub { fill: var(--muted); font-weight: 600; font-size: 13px; }
.m-map text.amb { fill: var(--accent); }
.m-map .hub circle.ring { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2.5; }
.m-map .hub .i { color: var(--text); }
.m-map .pk { fill: var(--accent); }
.m-map .pulse { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.m-map.hl .rt, .m-map.hl .nd:not(.on):not(.hub) { opacity: .35; }
.m-map.hl .rt.on { opacity: 1; stroke: var(--accent); }
.m-map .nd.on circle.ring { stroke: var(--accent); }
.m-map .cap { position: absolute; left: 22px; top: 18px; color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 600px) { .m-map { margin-top: 26px; padding: 14px 8px 8px; } .m-map .cap { display: none; } }

/* ---------- 6. logo drawing (scene) ---------- */
.m-splash-box { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; cursor: pointer;
  transition: opacity .6s var(--m-ease), visibility .6s; }
.m-splash-box.out { opacity: 0; visibility: hidden; }
.m-splash-box svg { width: min(440px, 72vw); height: auto; transition: transform .7s var(--m-ease); }
.m-splash-box.out svg { transform: scale(.82) translateY(-30px); }
.m-draw path { fill: transparent; stroke: var(--accent); transition: stroke-dashoffset 1.5s cubic-bezier(.55, .1, .3, 1), fill .5s ease, stroke .5s ease; }
.m-draw.filled path { fill: var(--text); stroke: transparent; }
.final .ghost.m-draw path { stroke: var(--accent); stroke-opacity: .5; }
.final .ghost.m-draw.filled path { fill: var(--surface); stroke: transparent; }
html.m-splash body::before { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--bg); }