/* Motus.MOV — Gateway experience: hype loader → video → black → Discord
   Davara Distinct: indigo void, rationed signal-cyan, slow legible motion. */

:root{
  --ink:#eaf2ff; --void:#05060a;
  --cy:#22e0f0; --cy2:#3aa0ff; --vi:#b48bff; --gold:#ffe6a3;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%; background:#000; color:var(--ink);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- STAGE ---------- */
#stage{ position:fixed; inset:0; background:#000; z-index:5; opacity:0;
  transition:opacity .7s ease; }
#stage.show{ opacity:1; }
#stage.fadeblack{ opacity:0; }   /* dissolve-to-black after playthrough */
#vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;                 /* full-bleed on landscape/desktop */
  background:#000; transform:scale(1.06); transition:transform 1.1s ease;
}
#stage.show #vid{ transform:scale(1); }
@media (orientation:portrait){ #vid{ object-fit:contain; } } /* whole frame on mobile */

/* subtle skip / safety affordance */
#skip{ position:fixed; right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom)); z-index:30;
  font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
  color:rgba(234,242,255,.55); background:rgba(8,12,24,.45);
  border:1px solid rgba(34,224,240,.22); border-radius:999px;
  padding:9px 15px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .5s ease,color .2s,border-color .2s,transform .15s; backdrop-filter:blur(8px); }
#skip.on{ opacity:1; pointer-events:auto; }
#skip:hover{ color:#fff; border-color:rgba(34,224,240,.6); }
#skip:active{ transform:scale(.95); }

/* ---------- LOADER ---------- */
#loader{ position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(34,224,240,.10), transparent 55%),
    radial-gradient(110% 80% at 50% 108%, rgba(58,160,255,.10), transparent 58%),
    #05060a;
  transition:opacity .7s ease, filter .7s ease, transform .7s ease; }
#loader.dissolve{ opacity:0; filter:blur(16px); transform:scale(1.09); pointer-events:none; }
#fld{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.core{ position:relative; z-index:2; display:grid; place-items:center;
  width:min(74vw,360px); aspect-ratio:1; }
.ring{ position:absolute; inset:0; border-radius:50%; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ring .trk{ fill:none; stroke:rgba(58,160,255,.14); stroke-width:2; }
.ring .arc{ fill:none; stroke:url(#g); stroke-width:3.4; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(34,224,240,.85)); transition:stroke-dashoffset .12s linear; }
.spin{ position:absolute; inset:7%; border-radius:50%;
  border:1px solid transparent; border-top-color:rgba(34,224,240,.55);
  border-right-color:rgba(180,139,255,.30); animation:spin 2.4s linear infinite; }
.spin.b{ inset:15%; animation-duration:3.6s; animation-direction:reverse;
  border-top-color:rgba(180,139,255,.40); border-right-color:rgba(34,224,240,.25); }
@keyframes spin{ to{ transform:rotate(360deg);} }

.coreInner{ position:relative; z-index:3; display:grid; place-items:center; text-align:center; }
.pulse{ position:absolute; width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(34,224,240,.30), rgba(34,224,240,0) 68%);
  animation:pulse 2.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.82); opacity:.55;} 50%{ transform:scale(1.12); opacity:1;} }
.mark{ position:relative; font-weight:800; letter-spacing:.30em; font-size:clamp(20px,5.4vw,30px);
  background:linear-gradient(180deg,#fff,#bfe9ff 60%,#7fdfff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(34,224,240,.35); padding-left:.30em; }
.mark::after{ content:""; position:absolute; left:0; top:-6px; bottom:-6px; width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  mix-blend-mode:screen; filter:blur(2px); animation:scan 2.2s ease-in-out infinite; }
@keyframes scan{ 0%{ transform:translateX(-40%); opacity:0;} 35%{opacity:.9;} 70%,100%{ transform:translateX(300%); opacity:0;} }
.pct{ margin-top:.7em; font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.30em;
  color:rgba(34,224,240,.9); text-shadow:0 0 14px rgba(34,224,240,.5); }

.status{ position:absolute; bottom:14vh; z-index:3; width:100%; text-align:center;
  font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(180,200,230,.72); }
.status b{ color:rgba(34,224,240,.95); font-weight:500; }
.bar{ position:absolute; bottom:11vh; z-index:3; width:min(62vw,340px); height:2px;
  background:rgba(58,160,255,.16); border-radius:2px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cy2),var(--cy));
  box-shadow:0 0 12px rgba(34,224,240,.8); transition:width .12s linear; }

/* ---------- JOIN OVERLAY (popup-blocked fallback) ---------- */
#join{ position:fixed; inset:0; z-index:40; display:none; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 30%, rgba(34,224,240,.10), transparent 60%), #000; padding:24px; }
#join.on{ display:grid; animation:fade .6s ease both; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
#join .ttl{ font:600 13px/1 'JetBrains Mono',monospace; letter-spacing:.30em; color:rgba(180,200,230,.7);
  text-transform:uppercase; margin-bottom:18px; }
#join .btn{ display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-weight:800; letter-spacing:.04em; font-size:clamp(18px,5vw,26px); color:#04121a;
  background:linear-gradient(180deg,#8df0ff,#22e0f0); border-radius:999px;
  padding:.78em 1.5em; box-shadow:0 0 40px rgba(34,224,240,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease, box-shadow .2s ease; }
#join .btn:hover{ transform:translateY(-2px); box-shadow:0 0 60px rgba(34,224,240,.75); }
#join .btn:active{ transform:scale(.97); }
#join .sub{ margin-top:16px; font:400 12px/1.5 'JetBrains Mono',monospace; color:rgba(180,200,230,.5); }

@media (prefers-reduced-motion:reduce){
  .spin,.pulse,.mark::after,#join.on{ animation:none !important; }
}