/*
 * POSEIDON ORBIT — v1.0.27-rc1.6
 * Math-verified geometry from rc1.4 retained (cross-ring gap 80px).
 * rc1.5 set the H1 hero title size — one step smaller (clamp 1.75–2.75rem, ~44px desktop max).
 * rc1.6 ONLY changes H1 alignment: flush-left (Option B) — resolves deferred item DI-H1-BALANCE.
 *   Root cause: base .hero h1 (poseidon.css) centers; the eyebrow + body paragraphs were
 *   explicitly left-aligned inline when rc1.2 split the hero into a grid, but the H1 was never
 *   overridden — so it sat centered/indented inside a left-aligned column.
 *   Fix is scoped to .po-hero-text h1 only. No size change, no geometry, no other selectors.
 */

:root {
  --po-gold: #d4a847;
  --po-gold-dim: #a48334;
  --po-gold-glow: rgba(212, 168, 71, 0.18);
  --po-black: #0a0d14;
  --po-surface: #11141c;
  --po-line: #272e3d;
  --po-line-2: #3a3f4a;
  --po-text: #e8ebf0;
  --po-text-mute: #b3bdcc;
  --po-text-dim: #8b95a8;
  --po-spin-drift: 22s;
  --po-orbit-inner: 38s;
  --po-orbit-outer: 52s;
  --po-hover-tx: 220ms;
}

/* ============ HERO LAYOUT (60/40 split — unchanged) ============ */
.po-hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.po-hero-container:not(:has(.po-orbit-embedded)) {
  grid-template-columns: 1fr;
}
.po-hero-text {
  min-width: 0;
}
.po-orbit-embedded {
  width: 540px;
  max-width: 100%;
  position: relative;
}

/* H1 TITLE SIZE OVERRIDE — only inside .po-hero-text so other H1s elsewhere are untouched.
   The default .hero h1 is ~64-72px (from poseidon.css). This caps it at ~52px on desktop,
   ~42px on tablets, ~32px on phones. Prevents collision with language text. */
.po-hero-text h1 {
  font-size: clamp(1.75rem, 2.8vw + 0.5rem, 2.75rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 0.6em 0 !important;   /* rc1.6: was margin-bottom only — zero L/R kills any inherited auto-centering */
  text-align: left !important;      /* rc1.6 DI-H1-BALANCE: H1 was inheriting center from base .hero h1 while eyebrow + paragraphs are flush-left */
  text-wrap: balance;               /* rc1.6: even out 2-line wraps at tablet widths; ignored gracefully where unsupported */
}
.po-hero-text .eyebrow {
  margin-bottom: 1rem;
}

@media (max-width: 1180px) {
  .po-orbit-embedded { width: 500px; }
}
@media (max-width: 980px) {
  .po-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .po-orbit-embedded {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .po-hero-text h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
  }
}

/* ============ ORBIT STAGE ============ */
.po-orbit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 540px;
}
.po-orbit-svg { width: 100%; height: 100%; display: block; }

/* ============ ROTATION (preserves Rule #1) ============ */
.po-sphere-group {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: po-sphere-spin var(--po-spin-drift) linear infinite;
}
.po-orbit-ring-inner {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: po-orbit-drift-cw var(--po-orbit-inner) linear infinite;
}
.po-orbit-ring-outer {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: po-orbit-drift-ccw var(--po-orbit-outer) linear infinite;
}
@keyframes po-sphere-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes po-orbit-drift-cw { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes po-orbit-drift-ccw { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }

/* ============ COUNTER-ROTATION (text stays upright) ============ */
.po-node-content {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.po-orbit-ring-inner .po-node-content {
  animation: po-counter-rotate-cw var(--po-orbit-inner) linear infinite;
}
.po-orbit-ring-outer .po-node-content {
  animation: po-counter-rotate-ccw var(--po-orbit-outer) linear infinite;
}
@keyframes po-counter-rotate-cw { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
@keyframes po-counter-rotate-ccw { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.po-orbit-ring-inner[data-frozen="true"],
.po-orbit-ring-outer[data-frozen="true"],
.po-orbit-ring-inner[data-frozen="true"] .po-node-content,
.po-orbit-ring-outer[data-frozen="true"] .po-node-content {
  animation-play-state: paused;
}

/* ============ NODE STYLES — v1.0.27-rc1.4 SIZING (math-verified) ============ */
.po-node { cursor: pointer; }
.po-node-bg { fill: var(--po-surface); stroke: var(--po-line-2); stroke-width: 0.5; transition: fill var(--po-hover-tx), stroke var(--po-hover-tx); }
.po-node-halo { fill: var(--po-gold); opacity: 0; transition: opacity var(--po-hover-tx); }
.po-node-text { fill: var(--po-text); pointer-events: none; }
.po-node-speakers { fill: var(--po-text-dim); font-family: monospace; letter-spacing: 1px; pointer-events: none; }

/* INNER RING: r=28, text 11px Latin / 10px CJK */
.po-node-inner .po-node-bg { r: 28; }
.po-node-inner .po-node-halo { r: 34; }
.po-node-inner .po-node-text { font-size: 11px; }
.po-node-inner .po-node-speakers { font-size: 8px; }

/* OUTER RING: r=22, text 9px */
.po-node-outer .po-node-bg { r: 22; }
.po-node-outer .po-node-halo { r: 28; }
.po-node-outer .po-node-text { font-size: 9px; }
.po-node-outer .po-node-speakers { font-size: 7px; }

.po-node:hover .po-node-halo, .po-node:focus-visible .po-node-halo { opacity: 0.22; }
.po-node:hover .po-node-bg, .po-node:focus-visible .po-node-bg { fill: #1f1a0a; stroke: var(--po-gold); }

/* ============ HEADER ENGLISH PILL (unchanged from rc1.3) ============ */
.po-english-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--po-gold);
  border-radius: 100px;
  color: var(--po-gold);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background var(--po-hover-tx);
  text-decoration: none;
}
.po-english-pill[data-visible="true"] { display: inline-flex; }
.po-english-pill:hover, .po-english-pill:focus-visible { background: var(--po-gold-glow); }
.po-english-pill-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--po-gold);
}

/* ============ MERIDIAN SWEEP ============ */
.po-meridian-sweep {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 45%, var(--po-gold) 50%, transparent 55%, transparent 100%);
  transform: translateX(-100%);
  transition: opacity 200ms ease;
}
.po-meridian-sweep[data-active="true"] {
  opacity: 0.85;
  animation: po-sweep-x 1200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes po-sweep-x { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ============ HEADER ORBIT ICON ============ */
.po-orbit-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: transparent;
  border: 1px solid var(--po-line-2); border-radius: 50%;
  color: var(--po-gold); cursor: pointer;
  transition: border-color var(--po-hover-tx), background var(--po-hover-tx);
}
.po-orbit-header-icon:hover, .po-orbit-header-icon:focus-visible {
  border-color: var(--po-gold); background: var(--po-gold-glow);
}
.po-orbit-header-icon svg {
  width: 18px; height: 18px;
  animation: po-icon-rot var(--po-spin-drift) linear infinite;
  transform-origin: center;
}
@keyframes po-icon-rot { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .po-sphere-group, .po-orbit-ring-inner, .po-orbit-ring-outer,
  .po-node-content, .po-orbit-header-icon svg {
    animation: none;
  }
  .po-meridian-sweep[data-active="true"] {
    animation: none; opacity: 0.5; transform: translateX(0); transition: opacity 600ms;
  }
}