/* =========================================================
   Hyperion Development — main.css
   Palette inherited from logo: deep cool black, silver, gold
   ========================================================= */

:root {
  --bg: #0B0F1A;
  --bg-elev: #11172A;
  --bg-elev-2: #161D33;
  --text: #F2F4F8;
  --text-muted: #8A92A6;
  --text-dim: #5A6178;
  --gold: #F4E9C8;
  --gold-warm: #E8C792;
  --gold-deep: #B8923A;
  --hairline: rgba(244, 233, 200, 0.12);
  --hairline-strong: rgba(244, 233, 200, 0.28);
  --border-radius: 4px;
  --max-w: 1280px;
  --content-w: 920px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 600ms var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle background texture — adds depth without noise */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(244, 233, 200, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(244, 233, 200, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: 'Chakra Petch', 'Eurostile', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 500;
}

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

p { color: var(--text-muted); margin-bottom: 1rem; font-size: 1.05rem; }
p.lead { font-size: 1.2rem; line-height: 1.65; color: var(--text); max-width: 56ch; }

a { color: var(--gold); text-decoration: none; transition: color 200ms var(--ease); }
a:hover { color: var(--text); }

::selection { background: var(--gold); color: var(--bg); }

/* Eyebrow label — gold uppercase with flanking lines (matches logo) */
.eyebrow {
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.eyebrow.left::before { display: none; }
.eyebrow.left { padding-left: 0; }
.eyebrow.left::after { display: none; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 32px;
}

section { padding: 120px 0; position: relative; }
section.tight { padding: 80px 0; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(11, 15, 26, 0.6);
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--ease), background 400ms var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--hairline);
  background: rgba(11, 15, 26, 0.85);
}
.nav-logo {
  display: flex;
  align-items: center;
  height: 48px; /* new logo is 6:1 aspect, so height controls overall size */
}
.nav-logo img { height: 100%; width: auto; display: block; max-width: 320px; }
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: uppercase;
  transition: color 200ms var(--ease);
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--gold);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 300ms var(--ease);
  border-radius: 0;
}
.btn:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--text);
  border-color: var(--text);
}
.btn .arrow { transition: transform 300ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero CTA row (used by .hero-text on the home page) ---------- */
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Orbital animation ----------
   Establishes the 3D viewing depth for the rings. .scroll-orbital extends
   this with its own width/height/perspective; .orbital provides the shared
   perspective-origin. */
.orbital {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

/* Each orbit ring is a wrapper that rotates; the satellite sits at its top edge.
   The ring (and its rotating child) is tilted in 3D space so it reads as a
   real planetary orbit viewed from slightly above and at an angle — not a
   flat circle perpendicular to the viewer. */
.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  /* Order: center first, then tilt forward (rotateX) and twist the tilt axis
     diagonally (rotateZ). Result: an elliptical ring whose long axis runs
     diagonally across the viewport. */
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-22deg);
  transform-style: preserve-3d;
  pointer-events: none;
}
.orbit-ring::after {
  /* faint inner glow on the ring */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(244, 233, 200, 0.03);
}
.orbit-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  animation: orbit-rotate linear infinite;
}
/* Note: .satellite as a button (with interactive states) is defined below
   in the scroll-hero section — these earlier divs-as-dots styles are gone. */

.orbit-1 { width: 50%; height: 50%; }
.orbit-2 { width: 70%; height: 70%; }
.orbit-3 { width: 90%; height: 90%; }
.orbit-4 { width: 100%; height: 100%; border-color: rgba(244, 233, 200, 0.05); }

@keyframes orbit-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
.spin-slow   { animation-duration: 60s; }
.spin-medium { animation-duration: 45s; }
.spin-fast   { animation-duration: 35s; }
.spin-slower { animation-duration: 90s; }
.spin-reverse { animation-direction: reverse; }

/* ---------- Section heading block ---------- */
.section-head {
  margin-bottom: 64px;
  max-width: 720px;
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.15rem; color: var(--text-muted); max-width: 56ch; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; display: flex; }

/* ---------- Divider ---------- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
.divider-narrow { max-width: var(--content-w); margin-left: auto; margin-right: auto; }

/* ---------- Cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  padding: 36px;
  position: relative;
  transition: border-color 300ms var(--ease), background 300ms var(--ease), transform 400ms var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 1px;
  background: var(--gold);
  transition: width 400ms var(--ease);
}
.card:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-elev-2);
  transform: translateY(-2px);
}
.card:hover::before { width: 80px; }
.card .card-tag {
  display: inline-block;
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  font-weight: 500;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-muted); margin-bottom: 0; font-size: 0.98rem; }
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--gold);
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card .card-link .arrow { transition: transform 300ms var(--ease); }
.card .card-link:hover .arrow { transform: translateX(4px); }

/* ---------- Portfolio featured card ---------- */
.portfolio-feature {
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.portfolio-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 1px;
  background: var(--gold);
}
.portfolio-feature-visual {
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, rgba(244, 233, 200, 0.08) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Apex logo image sits inside the gold-halo visual block.
   Sized to roughly 70% of container width so the gold gradient
   reads as a halo behind the logo rather than a tight frame. */
.portfolio-feature-visual .apex-logo {
  width: 72%;
  max-width: 300px;
  height: auto;
  display: block;
}
.portfolio-feature .tag {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
}
.portfolio-feature h2 { margin-bottom: 16px; }
.portfolio-feature p { font-size: 1.08rem; color: var(--text-muted); margin-bottom: 28px; }
.portfolio-feature .feature-meta {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.portfolio-feature .feature-meta div { font-size: 0.85rem; color: var(--text-muted); }
.portfolio-feature .feature-meta strong {
  display: block;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 6px;
}

/* ---------- Stats / metrics row ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat {
  padding: 36px 28px;
  border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: none; }
.stat .stat-num {
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.stat .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- Thesis sector blocks ---------- */
.thesis-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.thesis-block {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  padding: 60px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.thesis-block-number {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.thesis-block-number span {
  display: block;
  font-size: 2.2rem;
  color: var(--text);
  margin-top: 14px;
  letter-spacing: 0;
}
.thesis-block h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: 16px;
}
.thesis-block p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 16px; }
.thesis-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
.thesis-tag {
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Quote / pull ---------- */
.pull-quote {
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.005em;
}
.pull-quote::before, .pull-quote::after {
  display: block;
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 24px auto;
}

/* ---------- Footer ---------- */
footer {
  padding: 80px 32px 40px;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.footer-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
/* Footer logo: 6:1 aspect, sized by max-width since the column is narrow */
.footer-brand img { height: auto; width: 100%; max-width: 280px; display: block; margin-bottom: 24px; }
.footer-brand p { color: var(--text-muted); font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--text-muted);
  font-size: 0.92rem;
  transition: color 200ms var(--ease);
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 200px 32px 100px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.page-header .eyebrow { margin-bottom: 24px; }
.page-header h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-bottom: 24px; max-width: 18ch; }
.page-header p.lead { color: var(--text-muted); max-width: 60ch; font-size: 1.2rem; }

/* ---------- Prose blocks ---------- */
.prose {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 32px;
}
.prose p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 24px; }
.prose p.lead { color: var(--text); }
.prose h2 { margin-top: 48px; margin-bottom: 20px; }
.prose h3 { margin-top: 36px; margin-bottom: 12px; }
.prose ul {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
.prose ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 100ms; }
.reveal.delay-2 { transition-delay: 200ms; }
.reveal.delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .orbit-spin { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================
   Scroll-driven hero — pinned section, scroll-progress
   drives logo fade-out, eclipse zoom-in, orbit reveal.
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Hero is a normal 100vh section. Animation is time-driven (auto-plays on
   page load), not scroll-driven. The user can scroll past it like any
   other section. */
.scroll-hero {
  height: 100vh;
  min-height: 600px;
  position: relative;
  /* No background — the body's bg + the fixed star field show through */
  padding: 0; /* override default section padding */
}

.scroll-hero-pin {
  position: relative;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* STAR FIELD — sparse cosmic background.
   position: fixed so it persists across all hero-page scrolling — the cosmic
   field stays anchored to the viewport while content scrolls past it.
   Only appears on index.html (the #heroStars element doesn't exist on inner pages). */
.hero-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-star {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
}
.hero-star.white { background: #F2F4F8; }

/* Sequential sparkle — each star takes its turn briefly.
   The animation spends most of the cycle at base opacity (dim, calm),
   then briefly peaks (~6% of the cycle = ~0.6s in a 10s loop).
   JS staggers the delay across all sparkling stars so they take turns. */
.hero-star.sparkle {
  animation: star-sparkle var(--sparkle-dur, 10s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
}
@keyframes star-sparkle {
  0%, 76%, 100% {
    opacity: var(--star-base-op, 0.4);
    transform: scale(1);
  }
  82% {
    opacity: 1;
    transform: scale(2.6);
  }
  90% {
    opacity: var(--star-base-op, 0.4);
    transform: scale(1);
  }
}

/* STACKED LOGO: wordmark on top, bottom (development + tagline) below.
   z-index 2 so it sits above the rings layer. */
.hero-stack {
  position: absolute;
  top: 50%; left: 50%;
  width: 88%;
  max-width: 1100px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  z-index: 3;
  pointer-events: none; /* logo isn't a link in this layout */
}
.hero-wordmark img,
.hero-bottom img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-bottom {
  opacity: 1;
  will-change: opacity;
  margin-top: -2%; /* subtle pull-up to close the gap left by the crop */
  position: relative;
  overflow: hidden; /* contain the sweeping sheen layer */
  /* Time-driven fade-out: starts 2.5s after page load, takes 1s.
     animation-fill-mode: forwards keeps the end state after animation finishes. */
  animation: heroBottomFade 1s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}
@keyframes heroBottomFade {
  to { opacity: 0; }
}

/* Glow pulse — the DEVELOPMENT + tagline briefly brighten with a warm halo
   before fading. No movement; the text stays still, just lifts and settles. */
.hero-bottom img {
  animation: bottomGlow 1.6s cubic-bezier(0.4, 0, 0.6, 1) 1.0s;
}
@keyframes bottomGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 235, 180, 0));
  }
  45% {
    filter: brightness(1.45) drop-shadow(0 0 18px rgba(255, 235, 180, 0.55));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 235, 180, 0));
  }
}

/* ORBITAL RINGS — positioned by JS at the eclipse-O coords.
   Sits BEHIND the wordmark (z-index 1) so the letters appear to be in front
   of the rings, and any satellites passing behind a letter are visually
   occluded — creating real depth rather than just floating dots. */
.hero-rings {
  position: absolute;
  /* JS sets left/top/width/height in pixels on load + resize */
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
  /* Rings fade in starting at 3.2s (overlapping slightly with the bottom
     fade-out for a smooth handoff). 1.2s fade duration. */
  animation: heroRingsFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 3.2s forwards;
}
@keyframes heroRingsFade {
  to { opacity: 1; }
}
.hero-rings.interactive { pointer-events: auto; }
.scroll-orbital {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

/* ----- Satellite as a button (interactive) ----- */
.satellite {
  /* override default button styling */
  position: absolute;
  top: -11px; left: 50%;
  margin-left: -11px;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  /* override the previous fill rules */
  box-shadow: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.satellite.small { width: 18px; height: 18px; top: -9px; margin-left: -9px; }
.satellite.tiny  { width: 14px; height: 14px; top: -7px; margin-left: -7px; }

.satellite-dot {
  display: block;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow:
    0 0 12px rgba(244, 233, 200, 0.8),
    0 0 24px rgba(244, 233, 200, 0.35);
  transition: width 250ms var(--ease), height 250ms var(--ease), box-shadow 250ms var(--ease);
}
.satellite.small .satellite-dot { width: 7px; height: 7px; box-shadow: 0 0 8px rgba(244,233,200,0.7), 0 0 18px rgba(244,233,200,0.3); }
.satellite.tiny  .satellite-dot { width: 5px; height: 5px; box-shadow: 0 0 6px rgba(244,233,200,0.6), 0 0 12px rgba(244,233,200,0.25); }

.satellite:hover .satellite-dot,
.satellite:focus-visible .satellite-dot,
.satellite.active .satellite-dot {
  width: 16px; height: 16px;
  background: #FFFFFF;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.9),
    0 0 36px rgba(244, 233, 200, 0.6),
    0 0 64px rgba(244, 233, 200, 0.3);
}
.satellite:focus-visible {
  outline: 1px dashed var(--gold);
  outline-offset: 4px;
}

/* Pauseable orbit (JS toggles .paused when a satellite is interacted with) */
.orbit-spin.paused { animation-play-state: paused; }

/* ----- Asset info card — appears below the orbital ----- */
.asset-card {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 6; /* above rings (1) and stack (3), below nav (100) */
  background: rgba(17, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-strong);
  padding: 18px 28px;
  min-width: 320px;
  max-width: 420px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.asset-card.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.asset-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 1px;
  background: var(--gold);
}
.asset-card .card-tag {
  display: block;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 500;
}
.asset-card h4 {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.05rem;
  margin: 0 0 6px 0;
  color: var(--text);
  letter-spacing: 0.04em;
}
.asset-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ----- Scroll hint — appears after the intro animation completes ----- */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  /* Fades in after the rings settle, at ~4.8s */
  animation: scrollHintAppear 0.6s ease-out 4.8s forwards;
}
@keyframes scrollHintAppear {
  to { opacity: 0.7; }
}
/* JS adds .hidden once user starts scrolling */
.scroll-hint.hidden { opacity: 0; transition: opacity 300ms var(--ease); animation: none; }
.scroll-hint-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}
.scroll-hint::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  animation: scroll-bob 2s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(-32px); opacity: 0; }
  40%      { opacity: 1; }
  100%     { transform: translateX(-50%) translateY(8px); opacity: 0; }
}

/* ----- Hero text section (after the pinned scroll-hero unpins) ----- */
.hero-text {
  padding: 100px 32px 60px;
  text-align: center;
}
.hero-text .eyebrow {
  display: inline-flex;
  margin-bottom: 28px;
}
.hero-text .display-h1 {
  font-family: 'Chakra Petch', 'Eurostile', 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 24px;
}
.hero-text .lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
  max-width: 60ch;
}
.hero-text .hero-ctas {
  justify-content: center;
}

/* ----- Mobile: same layout as desktop, choreography still works.
   Hero is 100vh (single viewport) since the animation is time-driven,
   not scroll-driven — there's no need for extra scroll length here. ----- */
@media (max-width: 768px) {
  .hero-stack { width: 92%; }
  .scroll-hint { display: none; }
  .asset-card { min-width: 260px; padding: 14px 20px; }
  /* Nav always visible on mobile */
  #siteNav { opacity: 1 !important; pointer-events: auto !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Skip all hero auto-play animations — show settled end state immediately */
  .hero-bottom { opacity: 0 !important; animation: none !important; }
  .hero-rings { opacity: 1 !important; animation: none !important; pointer-events: auto; }
  .nav.nav-hidden { opacity: 1 !important; pointer-events: auto !important; animation: none !important; }
  .scroll-hint { opacity: 0.7 !important; animation: none !important; }
}

/* Intro skip: applied by inline script in <head> on return visits within
   the same session. Snaps everything to the settled end state instantly. */
html.intro-skip .hero-bottom { opacity: 0 !important; animation: none !important; }
html.intro-skip .hero-bottom img { animation: none !important; }
html.intro-skip .hero-rings { opacity: 1 !important; animation: none !important; pointer-events: auto; }
html.intro-skip .nav.nav-hidden { opacity: 1 !important; pointer-events: auto !important; animation: none !important; }
html.intro-skip .scroll-hint { display: none !important; }

/* Nav fade — by default it's opaque; .nav-hidden plays the intro fade-in.
   Once the @keyframes completes (animation-fill-mode: forwards), it stays
   at opacity 1 and pointer-events auto. */
.nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
  animation: navFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 4.0s forwards;
}
@keyframes navFadeIn {
  to { opacity: 1; pointer-events: auto; }
}
/* Pure scroll-state for nav (independent of the intro fade) */
#siteNav { transition: background 400ms var(--ease), border-color 400ms var(--ease); }

/* =========================================================
   Founder block — About page
   Side-by-side photo + bio on desktop; stacks on mobile.
   The photo's dark navy background already matches the site,
   so a thin gold hairline does the framing without competing.
   ========================================================= */
.founder-block {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  margin: 24px 0 32px;
}
.founder-photo {
  width: 200px;
}
.founder-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  border: 1px solid var(--hairline-strong);
}
.founder-caption {
  margin-top: 14px;
  text-align: left;
}
.founder-name {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.founder-role {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.founder-text p:first-child { margin-top: 0; }

/* =========================================================
   Portfolio constellation — interactive year scrubber
   Hyperion sun + tilted orbital rings; satellites appear as
   the user drags the scrubber forward in time. Used only on
   portfolio.html.
   ========================================================= */
.portfolio-constellation {
  padding: 80px 0;
}
.cstl-viz {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 48px;
}
.cstl-caption {
  border-left: 1px solid var(--gold);
  padding: 12px 0 12px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cstl-cap-year {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.cstl-cap-tag {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 500;
  transition: color 280ms var(--ease);
}
.cstl-cap-text {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  transition: opacity 280ms var(--ease);
}

/* The orbital container — square, centered.
   Reuses .orbital + .orbit-ring + .orbit-spin / .orbit-1..4 classes. */
.cstl-rings {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}
/* The Hyperion mark sits at the centre of the constellation — the eclipse
   logo, identical to the one in the hero wordmark. Size is roughly 22% of
   the orbital container so it reads as the "sun" the rings orbit. */
.cstl-sun {
  position: absolute;
  top: 50%; left: 50%;
  width: 22%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(244, 233, 200, 0.35));
  animation: cstl-sun-pulse 6s ease-in-out infinite;
}
.cstl-sun img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@keyframes cstl-sun-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(244, 233, 200, 0.35)); }
  50%      { filter: drop-shadow(0 0 22px rgba(244, 233, 200, 0.55)); }
}

/* Satellite state machine: dormant (future) vs active (in portfolio)
   Default state = dormant. JS adds .active when the scrubber's year
   includes that asset. Smooth 300ms transitions on opacity + glow. */
.cstl-rings .satellite {
  cursor: default;
  pointer-events: none; /* visual only — caption panel tells the story */
  opacity: 0.32;
  transition: opacity 320ms var(--ease);
}
.cstl-rings .satellite .satellite-dot {
  background: transparent;
  border: 1.5px dashed var(--gold);
  box-shadow: none;
  transition: background 320ms var(--ease), border 320ms var(--ease), box-shadow 320ms var(--ease);
}
.cstl-rings .satellite.active {
  opacity: 1;
}
.cstl-rings .satellite.active .satellite-dot {
  background: var(--gold);
  border: none;
  box-shadow:
    0 0 12px rgba(244, 233, 200, 0.8),
    0 0 24px rgba(244, 233, 200, 0.35);
}
/* Trust phase (2030+): outer ring takes on a stronger gold tone */
.cstl-rings.trust-phase .orbit-4 {
  border-color: rgba(244, 233, 200, 0.32);
  transition: border-color 400ms var(--ease);
}
.cstl-rings .orbit-4 { transition: border-color 400ms var(--ease); }

/* The scrubber: a styled native range input over a thin visual track. */
.cstl-scrubber {
  margin-top: 32px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
}
.cstl-scrub-track-wrap {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
}
.cstl-scrub-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: var(--hairline-strong);
}
.cstl-scrub-fill {
  position: absolute;
  /* Starts at thumb's leftmost center (7px in from track edge) so the bar
     length matches the thumb's actual travel rather than the full track. */
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: var(--gold);
  width: 0; /* JS updates */
  transition: width 240ms var(--ease);
}
/* Today marker lives as a styled button label below the track instead of a
   floating marker above the track — see .cstl-today-marker below. */
/* Native range input, restyled. Sits invisible over the visual track. */
.cstl-scrub-input {
  position: relative;
  width: 100%;
  height: 36px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.cstl-scrub-input:active { cursor: grabbing; }
.cstl-scrub-input:focus { outline: none; }
.cstl-scrub-input::-webkit-slider-runnable-track {
  background: transparent;
  height: 36px;
  border: none;
}
.cstl-scrub-input::-moz-range-track {
  background: transparent;
  height: 36px;
  border: none;
}
.cstl-scrub-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 12px rgba(244, 233, 200, 0.6);
  cursor: grab;
  margin-top: 0;
}
.cstl-scrub-input::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 12px rgba(244, 233, 200, 0.6);
  cursor: grab;
}
.cstl-scrub-input:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 0 4px rgba(244, 233, 200, 0.25);
}
.cstl-scrub-input:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 0 4px rgba(244, 233, 200, 0.25);
}
/* Year labels below the track.
   Absolutely positioned so each label's CENTER sits exactly under the thumb's
   center for the corresponding scrubber value. The thumb has 14px diameter,
   so its centre travels from 7px to (track_width − 7px); the labels use the
   same math via calc() to stay in lock-step. */
.cstl-scrub-labels {
  position: relative;
  margin-top: 12px;
  height: 28px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.cstl-scrub-labels button {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.cstl-scrub-labels button:nth-child(1) { left: 7px; }
.cstl-scrub-labels button:nth-child(2) { left: calc(7px + (100% - 14px) * 1 / 6); }
.cstl-scrub-labels button:nth-child(3) { left: calc(7px + (100% - 14px) * 2 / 6); }
.cstl-scrub-labels button:nth-child(4) { left: calc(7px + (100% - 14px) * 3 / 6); }
.cstl-scrub-labels button:nth-child(5) { left: calc(7px + (100% - 14px) * 4 / 6); }
.cstl-scrub-labels button:nth-child(6) { left: calc(7px + (100% - 14px) * 5 / 6); }
.cstl-scrub-labels button:nth-child(7) { left: calc(100% - 7px); }
.cstl-scrub-labels button:hover,
.cstl-scrub-labels button:focus-visible {
  color: var(--gold);
  outline: none;
}
.cstl-scrub-labels button.current { color: var(--text); }
/* Today label — always gold, regardless of where the scrubber is.
   Acts as a permanent visual anchor for "where we are now in time".
   When the user IS at this position, .current adds the brighter highlight. */
.cstl-scrub-labels button.cstl-today-marker {
  color: var(--gold);
  position: relative;
}
.cstl-scrub-labels button.cstl-today-marker::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 6px;
  background: var(--gold);
  opacity: 0.6;
}
.cstl-scrub-labels button.cstl-today-marker.current { color: var(--text); }

/* Small hint line below */
.cstl-hint {
  text-align: center;
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cstl-hint .ti {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .orbital { max-width: 420px; }
  .portfolio-feature { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
  .thesis-block { grid-template-columns: 1fr; gap: 16px; padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--hairline); }
  .stat:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .stat:nth-child(even) { border-right: none; }
  /* Constellation: stack caption above rings */
  .cstl-viz { grid-template-columns: 1fr; gap: 32px; }
  .cstl-caption { border-left: none; border-top: 1px solid var(--gold); padding: 24px 0 0; min-height: 0; }
  .cstl-rings { max-width: 380px; }
  /* Founder block: stack photo above text */
  .founder-block { grid-template-columns: 1fr; gap: 24px; }
  .founder-photo { width: 180px; }
}

@media (max-width: 640px) {
  section { padding: 80px 0; }
  .container, .container-narrow { padding: 0 22px; }
  .nav { padding: 16px 22px; }
  .nav-logo { height: 32px; }
  .nav-links {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    padding: 30px 22px;
    border-bottom: 1px solid var(--hairline);
    gap: 24px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .hero { padding: 120px 22px 60px; }
  .page-header { padding: 140px 22px 80px; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .portfolio-feature { padding: 28px; }
  .stats-row { grid-template-columns: 1fr; }
  .stat { border-right: none !important; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: none; }
  /* Constellation mobile tweaks */
  .cstl-rings { max-width: 300px; }
  .cstl-cap-year { font-size: 2rem; }
  .cstl-scrub-labels { font-size: 0.6rem; letter-spacing: 0.1em; }
  .cstl-scrub-labels button { padding: 4px 2px; }
}