/* XMAN Studio home — the constellation. Layered on top of site.css. */

/* The sky is held back where the COPY is, not in the middle. The headline sits
   in the left column, so a centre vignette protected empty space and dimmed the
   band exactly where it is worth seeing. */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 52%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 52%)}
@media (max-width:980px){
  /* stacked layout: the copy is centred over everything, so go back to a
     gentle all-over hold-back instead of a left-side one */
  #sky{opacity:.55;
    -webkit-mask-image:radial-gradient(90% 55% at 50% 26%,rgba(0,0,0,.25) 0%,#000 70%);
    mask-image:radial-gradient(90% 55% at 50% 26%,rgba(0,0,0,.25) 0%,#000 70%)}
}

.home .nav{background:linear-gradient(180deg,rgba(4,5,13,.92),rgba(4,5,13,.5) 70%,transparent)}

/* ── the system ──────────────────────────────────────────── */
.system{
  position:relative;z-index:2;min-height:88vh;display:grid;align-items:center;gap:clamp(20px,4vw,60px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  padding:clamp(24px,5vh,64px) clamp(16px,4vw,42px) clamp(30px,6vh,70px);
}
.sys-copy{max-width:540px}
.system h1{font-size:clamp(34px,4.6vw,64px);font-weight:800;
  text-shadow:0 2px 40px rgba(3,4,12,.9),0 0 90px rgba(3,4,12,.7)}
.system .lede{margin:22px 0 0;max-width:none}
.hint-line{margin:26px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase}

.orbit-wrap{position:relative;aspect-ratio:1/1;width:100%;max-height:82vh;margin-inline:auto}
#orbit{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#orbit:active{cursor:grabbing}

/* hover card — follows the pointer, never covers the body it describes */
.tip{
  position:absolute;transform:translate(-50%,-140%);pointer-events:none;z-index:5;
  min-width:210px;max-width:290px;padding:12px 15px;border-radius:14px;
  background:rgba(8,10,24,.92);border:1px solid rgba(108,240,255,.28);
  box-shadow:0 20px 50px -22px #000;backdrop-filter:blur(12px);
}
.tip b{display:block;font-family:var(--sans);font-weight:700;font-size:15px;margin-bottom:5px}
.tip span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.tip em{display:block;margin-top:9px;font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;color:var(--cy);text-transform:uppercase}

/* ── product cards: whole card is the link ───────────────── */
.prod{position:relative}
.prod-hit{position:absolute;inset:0;z-index:3;border-radius:18px}
.prod.is-link{border-color:rgba(108,240,255,.24)}
.prod.is-link:hover{border-color:rgba(108,240,255,.55);box-shadow:0 30px 60px -30px rgba(108,240,255,.25)}
.prod-open{position:relative;display:inline-block;margin-top:14px;font-family:var(--sans);
  font-weight:600;font-size:13px;color:var(--cy)}

@media (max-width:980px){
  .system{grid-template-columns:1fr;min-height:auto;padding-top:20px}
  .sys-copy{max-width:none;text-align:center;margin-inline:auto}
  .orbit-wrap{max-height:64vh}
  .system .lede{margin-inline:auto}
}