/* ============================================================
   landing.css — STARCHAN "Circumpolar Sky" landing page
   Port of Claude Design variant 2c (2026-07-26). Three beats:
   HERO (star-atlas plate: polar graticule on Polaris, Big Dipper
   armature, engraved cartouche) → EXPLORE (4 plate tiles) →
   CLOSE (rings return from below the fold). All motion is CSS —
   landing-orrery.js retired. Tokens reuse vars.css; page-scoped
   under body.landing-page.
   Opacity tiers on the chart are deliberate and locked:
   whisper (0.06–0.13) < constellation lines (0.35) < mid stars
   (0.55) < Polaris (bright). ✦ appears exactly twice by design
   (cartouche rule; site footer) — do not add more.
   ============================================================ */

body.landing-page {
  background: #05070e;
  color: #e8ecf2;
  font-family: var(--font-main);
}
body.landing-page main { padding: 0; }

body.landing-page ::selection {
  background: rgba(200, 146, 58, 0.35);
  color: #f2ede2;
}

/* ─── Shared keyframes ────────────────────────────────────── */
@keyframes lpRiseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lpPolePulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes lpDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }
}

/* ─── Buttons (scoped to landing; shared hero/close) ──────── */
body.landing-page .lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: #16202e;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(200, 146, 58, 0.6),
    0 12px 40px rgba(200, 146, 58, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 200ms var(--ease-standard);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.landing-page .lp-btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(212, 168, 78, 0.85),
    0 16px 48px rgba(200, 146, 58, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
body.landing-page .lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #f2ede2;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 58, 0.55);
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 200ms var(--ease-standard);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.landing-page .lp-btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(200, 146, 58, 0.08);
  color: var(--gold-light);
}
body.landing-page .lp-btn-primary .arr,
body.landing-page .lp-btn-ghost .arr {
  display: inline-block;
  transition: transform 240ms cubic-bezier(.5, 1.6, .4, 1);
}
body.landing-page .lp-btn-primary:hover .arr,
body.landing-page .lp-btn-ghost:hover .arr {
  transform: translateX(5px);
}
body.landing-page .lp-btn-primary::before,
body.landing-page .lp-btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 720ms cubic-bezier(.4, .1, .3, 1);
}
body.landing-page .lp-btn-primary:hover::before,
body.landing-page .lp-btn-ghost:hover::before {
  transform: translateX(110%);
}

/* ─── Starfield (CSS-only, tiled radial gradients) ────────── */
body.landing-page .lp-stars-fine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 13px 47px, rgba(232, 236, 242, 0.55) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 107px 83px, rgba(232, 236, 242, 0.4) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 61px 19px, rgba(228, 182, 96, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 41px 121px, rgba(232, 236, 242, 0.35) 50%, transparent 51%);
  background-size: 173px 191px, 211px 157px, 149px 227px, 259px 293px;
}

/* ─── HERO — the atlas plate ──────────────────────────────── */
/* Pulled up behind the sticky translucent chrome so the sky runs
   behind it (chrome z-index 199/200 sits above). padding-top puts
   the content back below the chrome. */
body.landing-page .lp-hero {
  position: relative;
  min-height: max(720px, 100vh);
  margin-top: calc(-1 * (var(--header-height) + var(--tabs-height)));
  padding-top: calc(var(--header-height) + var(--tabs-height));
  box-sizing: border-box;
  overflow: hidden;
  color: #e8ecf2;
  background:
    radial-gradient(ellipse 55% 45% at 72% 24%, rgba(96, 130, 190, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 22% 78%, rgba(200, 146, 58, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0a1120 60%, #0a101d 100%);
}
body.landing-page .lp-hero .lp-stars-fine { opacity: 0.55; }
body.landing-page .lp-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 40% 30% at 64% 30%, rgba(160, 180, 220, 0.06) 0%, transparent 70%);
  animation: lpDrift 26s ease-in-out infinite alternate;
}
body.landing-page .lp-plate {
  position: absolute;
  inset: 44px 56px;
  border: 1px solid rgba(200, 146, 58, 0.4);
  pointer-events: none;
}
body.landing-page .lp-plate::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(200, 146, 58, 0.18);
}
body.landing-page .lp-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(212, 168, 78, 0.85);
  border-style: solid;
  border-width: 0;
}
body.landing-page .lp-corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
body.landing-page .lp-corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
body.landing-page .lp-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
body.landing-page .lp-corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Chart linework — shared by hero, explore seam, and close */
body.landing-page .lp-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.landing-page .lp-grat {
  fill: none;
  stroke: rgba(200, 146, 58, 0.13);
  stroke-width: 0.7;
}
body.landing-page .lp-grat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: rgba(200, 146, 58, 0.4);
  letter-spacing: 0.15em;
}
body.landing-page .lp-const { stroke: rgba(232, 236, 242, 0.35); stroke-width: 0.7; }
body.landing-page .lp-const-faint { stroke: rgba(232, 236, 242, 0.09); stroke-width: 0.6; }
body.landing-page .lp-cstar { fill: rgba(232, 236, 242, 0.75); }
body.landing-page .lp-cstar-mid { fill: rgba(232, 236, 242, 0.55); }
body.landing-page .lp-cstar-faint { fill: rgba(232, 236, 242, 0.25); }
body.landing-page .lp-const-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: rgba(180, 200, 230, 0.45);
  letter-spacing: 0.24em;
}
body.landing-page .lp-star-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(232, 236, 242, 0.45);
  letter-spacing: 0.16em;
}
body.landing-page .lp-dash {
  fill: none;
  stroke: rgba(200, 146, 58, 0.38);
  stroke-width: 0.7;
  stroke-dasharray: 3 6;
}
body.landing-page .lp-pole { fill: #fff; }
body.landing-page .lp-pole-halo {
  fill: none;
  stroke: rgba(255, 240, 200, 0.5);
  stroke-width: 0.6;
  animation: lpPolePulse 5s ease-in-out infinite;
}
body.landing-page .lp-pole-flare { stroke: rgba(255, 240, 200, 0.75); stroke-width: 0.7; }
body.landing-page .lp-pole-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: rgba(255, 230, 168, 0.85);
  letter-spacing: 0.2em;
}

/* Hero content + cartouche */
body.landing-page .lp-hero-content {
  position: relative;
  z-index: 3;
  min-height: calc(max(720px, 100vh) - var(--header-height) - var(--tabs-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 40px 24px 70px;
}
body.landing-page .lp-cartouche {
  position: relative;
  text-align: center;
  padding: 56px 88px 48px;
  border: 1px solid rgba(200, 146, 58, 0.55);
  background: radial-gradient(ellipse at center, rgba(5, 8, 18, 0.82) 0%, rgba(5, 8, 18, 0.55) 70%, rgba(5, 8, 18, 0.2) 100%);
  opacity: 0;
  animation: lpFadeIn 700ms 150ms ease-out forwards;
}
body.landing-page .lp-cartouche::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(200, 146, 58, 0.25);
  pointer-events: none;
}
body.landing-page .lp-hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 9.5vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #f2ede2;
  margin: 0;
}
body.landing-page .lp-hero-headline .w {
  display: inline-block;
  opacity: 0;
  animation: lpRiseIn 450ms cubic-bezier(.22, .85, .32, 1) forwards;
}
body.landing-page .lp-hero-headline .w1 { animation-delay: 300ms; }
body.landing-page .lp-hero-headline .w2 {
  animation-delay: 650ms;
  font-style: italic;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(200, 146, 58, 0.35);
}
body.landing-page .lp-hero-punct {
  font-style: normal;
  color: rgba(242, 237, 226, 0.7);
  margin-left: -0.05em;
}
body.landing-page .lp-cart-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 34px auto 0;
  max-width: 520px;
  opacity: 0;
  animation: lpFadeIn 500ms 1000ms ease-out forwards;
}
body.landing-page .lp-cart-rule .l { flex: 1; height: 1px; background: rgba(200, 146, 58, 0.5); }
body.landing-page .lp-cart-rule .mark { color: var(--gold); font-size: 14px; }
body.landing-page .lp-hero-sub {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 2;
  color: rgba(242, 237, 226, 0.72);
  opacity: 0;
  animation: lpFadeIn 500ms 1100ms ease-out forwards;
}
body.landing-page .lp-hero-sub em {
  font-style: italic;
  color: var(--gold);
}
body.landing-page .lp-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 48px;
  opacity: 0;
  animation: lpRiseIn 380ms 1250ms ease-out forwards;
}

/* Discord widget under hero CTAs */
body.landing-page .lp-discord-widget {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: lpFadeIn 500ms 1400ms ease-out forwards;
}
body.landing-page .lp-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 236, 242, 0.7);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(200, 146, 58, 0.35);
  border-radius: 6px;
  transition: color 200ms, border-color 200ms;
}
body.landing-page .lp-discord-badge:hover {
  color: var(--gold-light);
  border-color: var(--gold);
}

/* ─── EXPLORE — four destination tiles ────────────────────── */
body.landing-page .lp-explore {
  position: relative;
  background: linear-gradient(180deg, #0a101d 0%, #0b1220 100%);
  padding: 130px 56px 140px;
  overflow: hidden;
}
body.landing-page .lp-explore .lp-stars-fine { opacity: 0.25; }
body.landing-page .lp-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
}
body.landing-page .lp-explore-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1328px;
  margin: 0 auto;
}
body.landing-page .lp-explore-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(15, 22, 38, 0.85);
  border: 1px solid rgba(237, 232, 223, 0.16);
  /* 2px radius is intentional — atlas plate, not rounded card */
  border-radius: 2px;
  padding: 40px 30px 30px;
  text-decoration: none;
  color: inherit;
  min-height: 360px;
  box-sizing: border-box;
  transition:
    transform 240ms var(--ease-standard),
    border-color 240ms,
    box-shadow 240ms;
}
body.landing-page .lp-explore-tile::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(237, 232, 223, 0.08);
  pointer-events: none;
  transition: border-color 240ms;
}
body.landing-page .lp-explore-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 146, 58, 0.6);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}
body.landing-page .lp-explore-tile:hover::before {
  border-color: rgba(200, 146, 58, 0.25);
}
body.landing-page .lp-fig {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(200, 146, 58, 0.55);
}
body.landing-page .lp-tile-svg {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
}
body.landing-page .lp-tile-svg .ln {
  stroke: rgba(232, 236, 242, 0.4);
  stroke-width: 0.8;
  fill: none;
  transition: stroke 240ms;
}
body.landing-page .lp-tile-svg .dt {
  fill: rgba(232, 236, 242, 0.75);
  transition: fill 240ms;
}
body.landing-page .lp-tile-svg .dt-g { fill: var(--gold); }
body.landing-page .lp-explore-tile:hover .lp-tile-svg .ln { stroke: rgba(212, 168, 78, 0.7); }
body.landing-page .lp-explore-tile:hover .lp-tile-svg .dt { fill: #fff; }
body.landing-page .lp-et-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
body.landing-page .lp-et-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f2ede2;
  margin: 0 0 13px;
}
body.landing-page .lp-et-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(221, 232, 244, 0.6);
  margin: 0 auto 0 0;
}
body.landing-page .lp-et-arrow {
  margin-top: 20px;
  align-self: flex-end;
  font-size: 24px;
  color: var(--gold);
  transition: transform 240ms cubic-bezier(.5, 1.6, .4, 1);
}
body.landing-page .lp-explore-tile:hover .lp-et-arrow {
  transform: translateX(6px);
}

/* ─── CLOSE — the rings return ────────────────────────────── */
body.landing-page .lp-close {
  position: relative;
  background: #05070e;
  padding: 170px 48px 150px;
  text-align: center;
  overflow: hidden;
  color: #e8ecf2;
}
body.landing-page .lp-close .lp-stars-fine { opacity: 0.18; }
body.landing-page .lp-close-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.landing-page .lp-close-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}
body.landing-page .lp-close-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #f2ede2;
  margin: 0 0 44px;
}
body.landing-page .lp-close-h em {
  font-style: italic;
  color: var(--gold);
}
body.landing-page .lp-close-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  body.landing-page .lp-explore-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body.landing-page .lp-plate { inset: 20px; }
  body.landing-page .lp-cartouche { padding: 44px 44px 40px; }
  body.landing-page .lp-explore { padding: 100px 32px 110px; }
}
@media (max-width: 600px) {
  body.landing-page .lp-plate { inset: 12px; }
  body.landing-page .lp-cartouche { padding: 36px 22px 32px; }
  body.landing-page .lp-cart-rule { margin-top: 26px; }
  body.landing-page .lp-hero-sub { font-size: 11px; letter-spacing: 0.15em; margin-top: 18px; }
  body.landing-page .lp-hero-ctas { margin-top: 38px; }
  body.landing-page .lp-explore { padding: 90px 20px 100px; }
  body.landing-page .lp-explore-grid { grid-template-columns: 1fr; gap: 18px; }
  body.landing-page .lp-explore-tile { min-height: 0; padding: 34px 26px 26px; }
  body.landing-page .lp-close { padding: 130px 24px 110px; }
}

/* ─── Reduced motion — everything rests at final state ────── */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .lp-nebula,
  body.landing-page .lp-pole-halo,
  body.landing-page .lp-cartouche,
  body.landing-page .lp-cart-rule,
  body.landing-page .lp-hero-sub,
  body.landing-page .lp-hero-headline .w,
  body.landing-page .lp-hero-ctas,
  body.landing-page .lp-discord-widget {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.landing-page .lp-btn-primary,
  body.landing-page .lp-btn-ghost,
  body.landing-page .lp-explore-tile {
    transition: none;
  }
}