/* ------------------------------------------------------------------
   Orbital Hero, feuille de style
   Tout est scope sous .oh-root pour ne rien casser dans le site hote.
   Les couleurs sont peintes explicitement, la scene ne depend pas du
   theme de la page.
   ------------------------------------------------------------------ */
.oh-root{
  --oh-ivory:  #F3EEE4;
  --oh-mist:   #8AA3B4;
  --oh-accent: #22B8DA;   /* V14 — Miami blue partout, cf Anthony msg 3813 */
  --oh-mono:   ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  position: relative;
  height: 560vh;            /* reserve de scroll, voir STAGE_VH */
  background: transparent;
}
.oh-root *{ box-sizing: border-box; }

.oh-sticky{ position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Le fond de scene doit valoir exactement la couleur de page du site,
   sinon la liberation du sticky laisse voir une demarcation horizontale.
   A definir par l'hote : .oh-root{ --oh-bg: #0B0B0D } */
.oh-night{ position: absolute; inset: 0; background: var(--oh-bg, #000); }
.oh-gl{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.oh-scrim{
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(54% 34% at 50% 50%,
    rgba(0,0,0,.80) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.22) 74%, transparent 100%);
}

.oh-hud{ position: absolute; inset: 0; color: var(--oh-ivory); pointer-events: none; }
.oh-pad{
  position: absolute; inset: 0;
  padding: clamp(22px, 4vh, 44px) clamp(20px, 5vw, 64px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
}
.oh-eyebrow{
  font-family: var(--oh-mono); font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oh-mist); margin: 0;
}
.oh-hero{ align-self: center; max-width: 19ch; will-change: transform, opacity; }
.oh-hero h1{
  font-size: clamp(2.5rem, 7vw, 5.2rem); font-weight: 700;
  line-height: .96; letter-spacing: -.02em; text-wrap: balance;
  margin: 0 0 18px; color: var(--oh-ivory);
}
.oh-hero p{
  font-size: clamp(1.1rem, 1.7vw, 1.32rem); color: #C6D4DE;
  max-width: 34ch; margin: 0; font-weight: 300;
}

.oh-core{
  position: absolute; left: 50%; top: 50%;
  width: min(92%, 33ch); text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0; z-index: 2000; will-change: transform, opacity;
}
.oh-core h2{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600;
  line-height: 1.08; letter-spacing: -.015em; margin: 10px 0 14px;
  color: var(--oh-ivory); text-shadow: 0 0 24px rgba(0,0,0,.9);
}
.oh-core p{
  margin: 0 auto; max-width: 30ch; color: #B9CBD6; font-weight: 300;
  text-shadow: 0 0 18px rgba(0,0,0,.9);
}

.oh-hint{
  justify-self: start; align-self: end;
  font-family: var(--oh-mono); font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oh-mist);
  display: flex; align-items: center; gap: 10px;
}
.oh-hint i{
  display: block; width: 1px; height: 26px;
  background: linear-gradient(var(--oh-mist), transparent);
  animation: oh-drop 2.2s ease-in-out infinite;
}
@keyframes oh-drop{
  0%,100%{ transform: translateY(0); opacity: .9 }
  50%{ transform: translateY(7px); opacity: .3 }
}

/* ---- pastilles projetees du 3D vers le DOM ---- */
.oh-nodes{ position: absolute; inset: 0; }
.oh-node{
  position: absolute; top: 0; left: 0;
  width: 64px; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transform: translate3d(-9999px,-9999px,0); transform-origin: 50% 50%;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.oh-node.is-live{ pointer-events: auto; }
.oh-node .oh-badge{
  width: 46px; height: 46px; border-radius: 50%;   /* 46 = BADGE_PX */
  display: grid; place-items: center;
  background: var(--oh-tone);
  transition: box-shadow .25s ease, transform .18s ease;
}
.oh-node .oh-badge span{
  font-family: var(--oh-mono); font-weight: 700; font-size: 10px;
  letter-spacing: .02em; color: var(--oh-ink, #FFF);
  opacity: 0; transition: opacity .3s ease;
}
.oh-node .oh-badge .oh-mark{
  width: 62%; height: 62%; object-fit: contain; display: block;
  opacity: 0; transition: opacity .3s ease;
}
.oh-node.is-mid .oh-badge span,
.oh-node.is-mid .oh-badge .oh-mark{ opacity: 1; }
.oh-node.is-big .oh-badge{ box-shadow: 0 0 20px -3px var(--oh-tone); }
.oh-node .oh-name{
  font-family: var(--oh-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--oh-ivory);
  background: rgba(3,10,16,.66); padding: 2px 6px; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
}
.oh-node.is-big .oh-name{ opacity: 1; }
.oh-node:hover .oh-badge,
.oh-node:focus-visible .oh-badge{ transform: scale(1.12); }
.oh-node:focus-visible{ outline: 2px solid var(--oh-accent); outline-offset: 4px; }

/* ---- rail de phases ---- */
.oh-rail{
  position: absolute; right: clamp(20px, 5vw, 64px); top: 50%;
  transform: translateY(-50%); display: grid; gap: 14px;
  font-family: var(--oh-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--oh-mist);
}
.oh-rail div{
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  opacity: .32; transition: opacity .35s ease;
}
.oh-rail div.is-on{ opacity: 1; color: var(--oh-ivory); }
.oh-rail span{ width: 26px; height: 1px; background: currentColor; }
.oh-rail div.is-on span{ width: 40px; background: var(--oh-accent); }

@media (max-width: 760px){
  .oh-rail{ display: none; }
  .oh-pad{ grid-template-rows: auto auto 1fr auto; }
  .oh-hero{
    align-self: start; justify-self: center;
    max-width: 22ch; text-align: center; margin-top: 1vh;
  }
  .oh-hero h1{ font-size: clamp(2rem, 8.4vw, 2.9rem); margin-bottom: 12px; }
  .oh-hero p{ font-size: 1rem; max-width: 30ch; margin: 0 auto; }
}

/* ---- sorties de secours ---- */
@media (prefers-reduced-motion: reduce){
  .oh-root{ height: 100vh; }
  .oh-hint i{ animation: none; }
  .oh-core{ opacity: 1; }
}
.oh-root.oh-nogl{ height: 100vh; }
.oh-root.oh-nogl .oh-gl{ display: none; }
.oh-root.oh-nogl .oh-night{
  background: radial-gradient(115% 78% at 50% 46%, #06131F 0%, #01060A 50%, #000 100%);
}