/* ============================================================
   CAMPUS COMMAND CENTER — 3D Loading Feature
   Pure-CSS 3D orbit loader (fullscreen).
   Namespaced under #cb-loader-3d — no globals.
   Visual language matches the landing page: #020204 backdrop,
   cyan glow (#3fe3ff / #35d8ff / #0a86c8), Poppins wordmark.
   ============================================================ */

/* ---------- Fullscreen 3D loader ---------- */
#cb-loader-3d{
  position:fixed;inset:0;z-index:10000;
  display:grid;place-items:center;
  background:
    radial-gradient(60% 45% at 50% 42%,rgba(25,127,255,.10),rgba(25,127,255,0) 70%),
    linear-gradient(180deg,rgba(25,127,255,0) 30%,rgba(25,127,255,.05) 70%,rgba(25,127,255,.03) 100%),
    #020204;
  transition:opacity .55s ease,visibility .55s ease,transform .55s ease;
}
#cb-loader-3d.cb3d-done{opacity:0;visibility:hidden;transform:scale(.985);pointer-events:none}
#cb-loader-3d .cb3d-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px}

/* 3D scene */
#cb-loader-3d .cb3d-scene{width:188px;height:188px;perspective:950px}
#cb-loader-3d .cb3d-system{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:cb3d-drift 7s ease-in-out infinite}
#cb-loader-3d .cb3d-ring{position:absolute;border-radius:50%;transform-style:preserve-3d;pointer-events:none}
#cb-loader-3d .cb3d-r1{inset:0;border:2px solid rgba(63,227,255,.14);border-top-color:#3fe3ff;border-bottom-color:#3fe3ff;
  box-shadow:0 0 22px rgba(63,227,255,.35),inset 0 0 22px rgba(63,227,255,.12);
  animation:cb3d-spin1 2.4s linear infinite}
#cb-loader-3d .cb3d-r2{inset:18px;border:2px solid rgba(53,216,255,.12);border-left-color:#35d8ff;border-right-color:#bff6ff;
  box-shadow:0 0 18px rgba(53,216,255,.30),inset 0 0 18px rgba(53,216,255,.10);
  animation:cb3d-spin2 3.4s linear infinite reverse}
#cb-loader-3d .cb3d-r3{inset:38px;border:1.5px dashed rgba(160,240,255,.45);
  animation:cb3d-spin3 5s linear infinite}
#cb-loader-3d .cb3d-sat{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#8ef4ff 55%,#0a86c8);
  box-shadow:0 0 12px 3px rgba(63,227,255,.8)}
#cb-loader-3d .cb3d-core{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#d8fbff 0%,#8ef4ff 22%,#35d8ff 42%,#0a5a9a 68%,#06121f 100%);
  box-shadow:0 0 34px rgba(63,227,255,.55),0 0 90px rgba(20,140,200,.30),inset 0 2px 8px rgba(255,255,255,.55);
  animation:cb3d-core 2.2s ease-in-out infinite}
#cb-loader-3d .cb3d-core span{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px rgba(0,20,30,.65)}

@keyframes cb3d-spin1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes cb3d-spin2{from{transform:rotateX(64deg) rotateY(24deg) rotateZ(0)}to{transform:rotateX(64deg) rotateY(24deg) rotateZ(360deg)}}
@keyframes cb3d-spin3{from{transform:rotateX(78deg) rotateY(-18deg) rotateZ(0)}to{transform:rotateX(78deg) rotateY(-18deg) rotateZ(360deg)}}
@keyframes cb3d-drift{0%,100%{transform:translateY(0) rotateZ(0)}50%{transform:translateY(-8px) rotateZ(2deg)}}
@keyframes cb3d-core{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* Brand + status + progress */
#cb-loader-3d .cb3d-brand{margin-top:20px;line-height:1.25}
#cb-loader-3d .cb3d-kick{display:block;font-family:Poppins,Inter,system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.34em;color:rgba(255,255,255,.85)}
#cb-loader-3d .cb3d-name{display:block;font-family:Poppins,Inter,system-ui,sans-serif;font-weight:900;font-size:26px;letter-spacing:.06em;color:#fff;text-shadow:0 0 26px rgba(130,180,255,.35)}
#cb-loader-3d .cb3d-status{margin-top:10px;font-family:Poppins,Inter,system-ui,sans-serif;font-size:13px;color:#a9aeb5;min-height:20px}
#cb-loader-3d .cb3d-status::after{content:"";animation:cb3d-dots 1.2s steps(4) infinite}
@keyframes cb3d-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#cb-loader-3d .cb3d-bar{margin-top:14px;width:228px;max-width:60vw;height:5px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#cb-loader-3d .cb3d-bar i{display:block;height:100%;width:0%;border-radius:inherit;
  background:linear-gradient(90deg,#0a86c8,#35d8ff,#8ef4ff);
  box-shadow:0 0 12px rgba(63,227,255,.8);transition:width .18s ease-out}
#cb-loader-3d .cb3d-bar.cb3d-busy i{width:40%!important;animation:cb3d-slide 1.1s ease-in-out infinite alternate}
@keyframes cb3d-slide{from{margin-left:-40%}to{margin-left:100%}}
#cb-loader-3d .cb3d-pct{margin-top:8px;font-family:Poppins,Inter,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;color:#7d8aa0}

/* ---------- Small screens ---------- */
@media (max-width:480px){
  #cb-loader-3d .cb3d-scene{width:150px;height:150px}
  #cb-loader-3d .cb3d-core{width:54px;height:54px;margin:-27px 0 0 -27px}
  #cb-loader-3d .cb3d-core span{font-size:16px}
}

/* ---------- Reduced motion: static but informative ---------- */
@media (prefers-reduced-motion:reduce){
  #cb-loader-3d .cb3d-system,#cb-loader-3d .cb3d-ring,#cb-loader-3d .cb3d-core{animation:none}
  #cb-loader-3d .cb3d-status::after{animation:none;content:"..."}
  #cb-loader-3d{transition:none}
}