/* Citelx — the orbit scene.
 *
 * Ported from the app landing page. Every selector is prefixed ob- and scoped
 * to .ob-wrap: the original used .core, .ring, .sat, .badge and .answer, which
 * would have collided with pages.css the way .mk-row, .foot-phone and .btn all
 * did earlier.
 *
 * Loads only on the About template.
 */

.ob-wrap{
  position:relative;height:clamp(420px,44vw,560px);perspective:1200px;
  /* The rings reach past the box on purpose; without this the outermost one is
     clipped into a flat edge. */
  overflow:visible;
}
.ob-scene{position:absolute;inset:0;transform-style:preserve-3d}

.ob-stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  opacity:.35;animation:obTw 4s ease-in-out infinite;
}
@keyframes obTw{0%,100%{opacity:.12}50%{opacity:.55}}

.ob-core{
  position:absolute;left:50%;top:50%;width:clamp(112px,13vw,150px);height:clamp(112px,13vw,150px);
  transform:translate(-50%,-50%);border-radius:50%;z-index:5;
  background:radial-gradient(circle at 34% 30%,#CFC6FF 0%,var(--violet) 34%,#2A2170 72%,#14103A 100%);
  box-shadow:0 0 60px rgba(124,108,255,.65),0 0 160px rgba(124,108,255,.35),
             inset -14px -18px 40px rgba(0,0,0,.5),inset 8px 10px 26px rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  animation:obBreathe 5s ease-in-out infinite;
}
@keyframes obBreathe{
  0%,100%{box-shadow:0 0 60px rgba(124,108,255,.65),0 0 160px rgba(124,108,255,.35),inset -14px -18px 40px rgba(0,0,0,.5),inset 8px 10px 26px rgba(255,255,255,.22)}
  50%{box-shadow:0 0 90px rgba(124,108,255,.9),0 0 220px rgba(124,108,255,.5),inset -14px -18px 40px rgba(0,0,0,.5),inset 8px 10px 26px rgba(255,255,255,.22)}
}
.ob-lab{font-family:'Unbounded',Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fff}
.ob-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:rgba(255,255,255,.78)}

.ob-pulse{
  position:absolute;left:50%;top:50%;border-radius:50%;z-index:1;
  border:1px solid rgba(124,108,255,.5);transform:translate(-50%,-50%);
  animation:obPl 3.6s ease-out infinite;
}
.ob-p2{animation-delay:1.2s}
.ob-p3{animation-delay:2.4s}
@keyframes obPl{from{width:150px;height:150px;opacity:.7}to{width:430px;height:430px;opacity:0}}

.ob-ring{
  position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);transform-style:preserve-3d;
}
.ob-r1{width:330px;height:330px;margin:-165px 0 0 -165px;transform:rotateX(68deg)}
.ob-r2{width:470px;height:470px;margin:-235px 0 0 -235px;transform:rotateX(68deg) rotateY(-14deg)}
.ob-r3{width:590px;height:590px;margin:-295px 0 0 -295px;transform:rotateX(68deg) rotateY(16deg)}

.ob-sat{position:absolute;left:50%;top:50%;margin:-24px 0 0 -66px;width:132px;height:48px;z-index:6}
.ob-badge{
  width:100%;height:100%;display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:13px;
  background:rgba(21,19,48,.8);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.ob-ic{
  width:26px;height:26px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded',Inter,sans-serif;font-weight:700;font-size:12.5px;color:#fff;
}
.ob-txt{display:flex;flex-direction:column;min-width:0}
.ob-txt b{font-size:11.5px;font-weight:600;line-height:1.15;color:#fff}
.ob-txt i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--green)}

/* The counter-rotations keep each badge upright while its orbit turns. */
@keyframes obOrb1{
  from{transform:rotateX(68deg) rotateZ(0deg) translateX(165px) rotateZ(0deg) rotateX(-68deg)}
  to{transform:rotateX(68deg) rotateZ(360deg) translateX(165px) rotateZ(-360deg) rotateX(-68deg)}
}
@keyframes obOrb2{
  from{transform:rotateX(68deg) rotateY(-14deg) rotateZ(360deg) translateX(235px) rotateZ(-360deg) rotateY(14deg) rotateX(-68deg)}
  to{transform:rotateX(68deg) rotateY(-14deg) rotateZ(0deg) translateX(235px) rotateZ(0deg) rotateY(14deg) rotateX(-68deg)}
}
@keyframes obOrb3{
  from{transform:rotateX(68deg) rotateY(16deg) rotateZ(0deg) translateX(295px) rotateZ(0deg) rotateY(-16deg) rotateX(-68deg)}
  to{transform:rotateX(68deg) rotateY(16deg) rotateZ(360deg) translateX(295px) rotateZ(-360deg) rotateY(-16deg) rotateX(-68deg)}
}
.ob-o1{animation:obOrb1 22s linear infinite}
.ob-o2{animation:obOrb2 34s linear infinite}
.ob-o3{animation:obOrb3 46s linear infinite}

@media (max-width:1080px){
  /* The orbits are sized in px, so the scene is scaled rather than reflowed —
     rewriting three keyframe sets per breakpoint would be four copies of the
     same maths to keep in sync. */
  .ob-wrap{height:clamp(360px,40vw,460px)}
  .ob-scene{transform:scale(.82)}
}
@media (max-width:640px){
  .ob-wrap{height:330px}
  .ob-scene{transform:scale(.62)}
}

@media (prefers-reduced-motion:reduce){
  .ob-o1,.ob-o2,.ob-o3,.ob-pulse,.ob-core,.ob-stars i{animation:none}
  /* Without their orbit animations the badges all stack on the centre, so they
     are placed statically instead. */
  .ob-o1{transform:translate(-190px,-120px)}
  .ob-o2{transform:translate(120px,-150px)}
  .ob-o3{transform:translate(-210px,90px)}
  .ob-sat:nth-of-type(5){transform:translate(150px,60px)}
  .ob-sat:nth-of-type(6){transform:translate(-40px,-190px)}
  .ob-sat:nth-of-type(7){transform:translate(60px,170px)}
  .ob-pulse{display:none}
}