/* Voyager3 - reseau autoritaire
   Same direction as the beacon default page. */

:root{
  --space:     #070A18;
  --panel:     #0F1636;
  --panel-2:   #131C44;
  --line:      #26305C;
  --line-soft: #1B2447;
  --starlight: #E7ECFB;
  --muted:     #9AA3CC;
  --faint:     #5B6592;
  --gold:      #E9B950;
  --gold-2:    #F6DFA0;
  --blue:      #6EA8FF;
  --green:     #57E0A8;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r: 16px;
  --pad: clamp(18px, 4vw, 34px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{ min-height:100%; }

body{
  background:var(--space);
  color:var(--starlight);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    clamp(14px, 4vw, 28px)
    calc(env(safe-area-inset-bottom) + 24px);
}

/* ---------- sky ---------- */
.sky{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.nebula{
  position:absolute; inset:-25%;
  background:
    radial-gradient(40% 36% at 16% 20%, rgba(63,42,130,.40), transparent 70%),
    radial-gradient(48% 44% at 84% 82%, rgba(24,52,110,.36), transparent 72%),
    radial-gradient(28% 24% at 72% 12%, rgba(233,185,80,.06), transparent 70%);
  animation:drift 50s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-1.4%,-1%,0) scale(1); }
  to  { transform:translate3d(1.4%,1.4%,0) scale(1.06); }
}
.star{
  position:absolute; border-radius:50%; background:var(--starlight);
  animation:twinkle var(--d,4s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.1; transform:scale(.8); }
  50%    { opacity:.9; transform:scale(1); }
}

/* ---------- card ---------- */
.card{
  position:relative; z-index:1;
  width:min(660px, 100%);
  background:linear-gradient(180deg, rgba(19,28,68,.86), rgba(9,13,32,.92));
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  overflow:hidden;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}

.head{
  display:flex; align-items:center; gap:14px;
  padding:var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.badge{
  flex:0 0 auto; width:52px; height:52px;
  display:grid; place-items:center; border-radius:14px;
  background:radial-gradient(circle at 35% 30%, #F6DFA0, #E9B950 45%, #8F6A1E);
  box-shadow:0 0 0 1px rgba(246,223,160,.4), 0 8px 20px -6px rgba(233,185,80,.5);
}
.badge svg{ width:30px; height:30px; display:block; animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.head-txt{ min-width:0; }
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.beacon{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(233,185,80,.55); }
  60%    { box-shadow:0 0 0 8px rgba(233,185,80,0); }
}
.head-txt h1{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(1.15rem, 5vw, 1.55rem);
  letter-spacing:.16em; text-transform:uppercase;
  margin-top:5px; overflow-wrap:anywhere;
}
.parent{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:3px;
}

.body{ padding:var(--pad); }

/* ---------- orbit ---------- */
.orbit{ display:block; width:100%; height:auto; margin:-6px 0 22px; overflow:visible; }
.orbit ellipse, .orbit circle, .orbit line{
  fill:none; stroke:var(--gold); vector-effect:non-scaling-stroke;
}
#orbit-line{
  stroke:rgba(233,185,80,.5);
  stroke-width:1; stroke-dasharray:2 9; stroke-linecap:round;
  animation:sweep 60s linear infinite;
}
@keyframes sweep{ to{ stroke-dashoffset:-220; } }

#rings ellipse{ stroke:rgba(246,223,160,.5); stroke-width:1.1; }
.planet{ stroke:rgba(246,223,160,.75); stroke-width:1.3; }
.bands line{ stroke:rgba(233,185,80,.45); }
.bands #spot{ stroke:rgba(246,223,160,.7); stroke-width:1.2; }

.moon{
  fill:url(#moon-glow); stroke:none;
  filter:drop-shadow(0 0 6px rgba(233,185,80,.75));
  offset-rotate:0deg;
  animation:travel 38s linear infinite;
}
@keyframes travel{ from{ offset-distance:0%; } to{ offset-distance:100%; } }

/* ---------- host ---------- */
.hostline{
  font-family:var(--mono); font-size:.85rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 14px; margin-bottom:22px;
  background:rgba(110,168,255,.07);
  border:1px solid rgba(110,168,255,.22);
  border-radius:12px; color:var(--muted);
}
.hostline b{ color:var(--blue); font-weight:600; overflow-wrap:anywhere; }

/* ---------- specs ---------- */
.specs{ border-top:1px solid var(--line-soft); margin-bottom:24px; }
.row{
  display:flex; flex-wrap:wrap; gap:4px 20px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.specs dt{
  flex:0 0 9.5rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); padding-top:2px;
}
.specs dd{ font-family:var(--mono); font-size:.86rem; color:var(--starlight); }

.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:9px; vertical-align:.1em;
}
.dot--green{ background:var(--green); }

/* ---------- about ---------- */
.about{ margin-bottom:24px; }
.about h2{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  margin-bottom:10px;
}
.about p{ color:var(--muted); font-size:.96rem; }
.about p + p{ margin-top:10px; }

/* ---------- actions ---------- */
.actions{ display:grid; gap:12px; }
.action{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--starlight); text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.action:hover, .action:focus-visible{
  transform:translateY(-2px); border-color:var(--gold); background:#182150;
}
.action:focus-visible{ outline:2px solid var(--gold-2); outline-offset:2px; }
.action .ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
}
.action.primary .ico{ background:rgba(233,185,80,.16); color:var(--gold); }
.action.ghost .ico{ background:rgba(110,168,255,.14); color:var(--blue); }
.action .ico svg{ width:22px; height:22px; }
.action .txt{ min-width:0; flex:1; display:flex; flex-direction:column; }
.action .txt .t{ font-weight:600; font-size:1rem; }
.action .txt .s{ color:var(--muted); font-size:.82rem; font-family:var(--mono); }
.action .arrow{ flex:0 0 auto; color:var(--faint); transition:transform .18s ease, color .18s ease; }
.action:hover .arrow, .action:focus-visible .arrow{ transform:translateX(3px); color:var(--gold); }

/* ---------- foot ---------- */
.foot{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .star{ opacity:.55; }
}

@media (max-width:420px){
  .head{ gap:11px; }
  .badge{ width:46px; height:46px; }
  .specs dt{ flex-basis:100%; }
  .action{ padding:14px; gap:11px; }
  .action .ico{ width:40px; height:40px; }
}