/* Shell Drop homepage motion. See motion.js. */
html.mo .reveal{opacity:1;transform:none;transition:none}
html.mo [data-mo-wait]{opacity:0}
html.mo:not(.mo-booted) main,html.mo:not(.mo-booted) .nav-glass{opacity:0}
.mo-w{display:inline-block}

/* The bar: the book spine from Duo mode, a dark band with a cyan rim. */
.mo-bar{position:absolute;top:-12px;bottom:-12px;left:0;width:14px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,#02070f 0%,#0b1628 45%,#02070f 100%);
  box-shadow:-1px 0 0 rgba(0,212,255,.55),1px 0 0 rgba(0,212,255,.25),0 0 28px rgba(0,212,255,.18);border-radius:3px}

/* Loader */
.mo-loader{position:fixed;inset:0;z-index:9999;background:var(--bg-deep,#02070f);display:flex;align-items:center;justify-content:center}
.mo-l-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.mo-l-icon{width:72px;height:72px;border-radius:18px;box-shadow:0 0 40px rgba(0,212,255,.25)}
.mo-l-word{font-family:var(--body);font-weight:700;font-size:clamp(34px,6vw,56px);letter-spacing:-.02em;color:#fff;display:flex}
.mo-l-word .mo-l-ch:nth-child(n+7){color:var(--cyan,#00d4ff)}
.mo-l-cmd{font-family:var(--mono);font-size:clamp(12px,1.6vw,15px);color:rgba(255,255,255,.55);display:flex}
.mo-l-ch,.mo-l-c,.mo-l-icon{display:inline-block;will-change:transform}
.mo-l-bar{position:fixed;top:0;bottom:0;left:0;width:max(14px,1.2vw);z-index:10000;
  background:linear-gradient(90deg,#02070f,#0b1628 45%,#02070f);
  box-shadow:-1px 0 0 rgba(0,212,255,.6),1px 0 0 rgba(0,212,255,.3),0 0 40px rgba(0,212,255,.25);transform:translateX(110vw)}
/* Knocked pieces leave the overlay's clip, so they fly over the page. */
.mo-flying{position:relative;z-index:10001}
.mo-loader .mo-l-stage{position:relative;z-index:10001}

/* Scroll spine down the left edge. */
.mo-spine{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:90;pointer-events:none;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--cyan,#00d4ff),rgba(0,212,255,.25))}
@media (max-width:680px){.mo-spine{width:2px}}

/* Pointer magnet: smooth return. */
.tile,.trust-chip,.appbadge,.linkset a{transition:translate .35s cubic-bezier(.2,.8,.2,1),rotate .35s cubic-bezier(.2,.8,.2,1)}
.drop-frame{transition:none}

@media (prefers-reduced-motion: reduce){
  html.mo [data-mo-wait]{opacity:1}
  .mo-loader,.mo-spine{display:none}
}

/* Section formers */
.mo-layer{position:absolute;z-index:95;pointer-events:none;overflow:hidden}
body{position:relative}
.mo-lp,.mo-py{position:absolute;left:0;top:0;will-change:transform}
.mo-lp span,.mo-py span{will-change:transform}
.mo-lp span{position:absolute;background:linear-gradient(135deg,var(--cyan,#00d4ff),rgba(0,212,255,.6));box-shadow:0 0 8px rgba(0,212,255,.35)}
.mo-py span{position:absolute;border-radius:50%;background:#9bd9ff;box-shadow:0 0 8px rgba(155,217,255,.45)}
.mo-ghost{position:absolute;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(0,212,255,.09),rgba(255,255,255,.05));
  border:1px solid rgba(0,212,255,.14);will-change:transform}
.mo-bar2{position:absolute;left:0;top:0;background:linear-gradient(90deg,#02070f,#0b1628 45%,#02070f);will-change:transform}
.mo-bar2.v{width:14px;box-shadow:-1px 0 0 rgba(0,212,255,.6),1px 0 0 rgba(0,212,255,.3),0 0 30px rgba(0,212,255,.22);border-radius:3px}
.mo-bar2.h{height:12px;background:linear-gradient(180deg,#02070f,#0b1628 45%,#02070f);box-shadow:0 -1px 0 rgba(0,212,255,.6),0 1px 0 rgba(0,212,255,.3),0 0 30px rgba(0,212,255,.22);border-radius:3px}