/* MASTER CHIEF orbital kit : base. Dépend de tokens.css.
   Reprend le layer app/orbital.css : fond, sélection, focus,
   titres, bouton citron, texte chrome, grain. */

html { background: var(--orb-void); color: var(--orb-text); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body.orb-body {
  margin: 0;
  min-height: 100vh;
  background: transparent; /* le canvas cosmos (z-index -1) doit rester visible */
  color: var(--orb-text);
  font-family: var(--orb-font-body);
  overflow-x: hidden;
}
.orb-body a { color: inherit; text-decoration: none; }
::selection { background: var(--orb-lemon); color: var(--orb-ink); }
:focus-visible { outline: 2px solid var(--orb-lemon); outline-offset: 3px; }

.orb-body :is(h1, h2, h3) {
  font-family: var(--orb-font-display);
  letter-spacing: var(--orb-tracking-display);
}
.orb-body h1 { animation: orb-rise 0.6s var(--orb-ease) both; }
@keyframes orb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Halo statique sous le canvas + grain par-dessus tout (jamais de capture du pointeur) */
.orb-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--orb-z-cosmos);
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, var(--orb-halo-top) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 95%, var(--orb-halo-low) 0%, transparent 65%),
    radial-gradient(circle at 12% 70%, var(--orb-halo-left) 0%, transparent 40%);
}
.orb-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--orb-z-grain);
  opacity: var(--orb-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bouton citron + reflet chrome au survol */
.orb-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 11px 15px;
  font: 600 13px/1 var(--orb-font-body);
  color: var(--orb-text);
  background: var(--orb-glass);
  border: 1px solid var(--orb-line);
  border-radius: var(--orb-radius-pill);
  cursor: pointer;
  transition: transform var(--orb-dur-normal) var(--orb-ease), border-color var(--orb-dur-normal) ease, box-shadow var(--orb-dur-normal) ease;
}
.orb-btn:hover { border-color: var(--orb-lemon); }
.orb-btn--primary { background: var(--orb-lemon); border-color: var(--orb-lemon); color: var(--orb-ink); }
.orb-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.45) 48%, transparent 74%);
  opacity: 0;
  transform: translateX(-120%);
  transition: transform 380ms var(--orb-ease), opacity var(--orb-dur-normal) ease;
}
.orb-btn--primary:hover { background: var(--orb-lemon-soft); box-shadow: var(--orb-glow-hover); transform: translateY(-1px); }
.orb-btn--primary:hover::after, .orb-btn--primary:focus-visible::after { opacity: 1; transform: translateX(120%); }

/* Verre : panneau flou, bordure fine */
.orb-glass {
  background: var(--orb-panel-nav);
  border: 1px solid var(--orb-line);
  border-radius: var(--orb-radius-lg);
  -webkit-backdrop-filter: var(--orb-blur-panel);
  backdrop-filter: var(--orb-blur-panel);
  box-shadow: var(--orb-shadow-panel);
}
.orb-card {
  background: linear-gradient(180deg, rgba(22, 22, 25, 0.88), rgba(10, 10, 12, 0.92));
  border: 1px solid var(--orb-line);
  border-radius: var(--orb-radius-lg);
  transition: border-color var(--orb-dur-normal) ease, transform var(--orb-dur-normal) ease;
}
a.orb-card:hover, a.orb-card:focus-visible { border-color: var(--orb-lemon); transform: translateY(-2px); }
.orb-chip {
  display: inline-block;
  font: 500 13px/1 var(--orb-font-body);
  color: var(--orb-text-2);
  background: var(--orb-glass);
  border: 1px solid var(--orb-line);
  border-radius: var(--orb-radius-pill);
  padding: 8px 12px;
}
.orb-label { font: 600 11px/1 var(--orb-font-mono); letter-spacing: var(--orb-tracking-label); text-transform: uppercase; color: var(--orb-lemon); }
.orb-chrome-text { background: var(--orb-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orb-lemon-text { color: var(--orb-lemon); }
.orb-wrap { max-width: var(--orb-content-max); margin: 0 auto; padding: 0 var(--orb-gutter); position: relative; z-index: var(--orb-z-content); }

/* Pause globale quand l'onglet est caché (posé par les modules JS) */
html[data-tab-hidden='true'] *, html[data-tab-hidden='true'] *::before, html[data-tab-hidden='true'] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .orb-body h1 { animation: none; }
  .orb-btn, .orb-btn--primary::after, .orb-card { transition: none; transform: none; }
}
