/* Afterlife — shared tokens and resets used inside every direction artboard */

:root {
  --af-bg-0: #07091a;
  --af-bg-1: #0c1126;
  --af-bg-2: #131a34;
  --af-bg-3: #1c2548;
  --af-line: rgba(255, 255, 255, 0.10);
  --af-line-strong: rgba(255, 255, 255, 0.20);
  --af-ink-1: #f4f1ff;
  --af-ink-2: #a89cc0;
  --af-ink-3: #6a5f80;
  --af-pink: #ff2e7e;
  --af-pink-strong: #ff579a;
  --af-pink-soft: rgba(255, 46, 126, 0.14);
  --af-teal: #3de0c3;
  --af-teal-soft: rgba(61, 224, 195, 0.14);
  --af-amber: #ffb547;
  --af-red: #ff5577;
  --af-display: "Chakra Petch", "Inter", system-ui, sans-serif;
  --af-mono: "Space Mono", ui-monospace, monospace;
  --af-body: "Inter", system-ui, sans-serif;
}

.af-root {
  font-family: var(--af-body);
  color: var(--af-ink-1);
  background: var(--af-bg-0);
  -webkit-font-smoothing: antialiased;
  width: 1280px;
  position: relative;
  overflow: hidden;
}
.af-root *,
.af-root *::before,
.af-root *::after { box-sizing: border-box; }
.af-root img { display: block; max-width: 100%; }
.af-root h1, .af-root h2, .af-root h3, .af-root h4 { margin: 0; font-family: var(--af-display); font-weight: 600; letter-spacing: 0.01em; }
.af-root p { margin: 0; line-height: 1.6; }
.af-root button { font: inherit; cursor: pointer; }
.af-root a { color: inherit; text-decoration: none; }

.af-mono { font-family: var(--af-mono); letter-spacing: 0.04em; }
.af-display { font-family: var(--af-display); }
.af-eyebrow {
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--af-ink-3);
}

/* Starfield used by every direction (cheap radial-gradient stipple) */
.af-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 71%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 47% 14%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 48%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 81% 30%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 91% 88%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 38% 92%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 80%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
}

/* Reusable placeholder for missing screenshots */
.af-placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),
    var(--af-bg-2);
  border: 1px dashed var(--af-line-strong);
  color: var(--af-ink-3);
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mini wordmark — same diagonal pink→teal gradient as the hero */
.af-wordmark-mini {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.18em;
  background: linear-gradient(45deg, var(--af-pink) 0%, #ffffff 50%, var(--af-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Photo-planet — keep atmosphere ring, kill clouds + lighting overlays since
   the photo has those baked in. Slow spin still applied to the image. */
.af-planet-wrap.af-planet-photo .clouds,
.af-planet-wrap.af-planet-photo .lighting { display: none; }
.af-planet-wrap.af-planet-photo .surface {
  border-radius: 50%;
  /* Sharp clip near the rim — kills the baked feather, leaves a crisp edge */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 96%, transparent 97%);
          mask-image: radial-gradient(circle at 50% 50%, #000 96%, transparent 97%);
}
.af-planet-wrap.af-planet-photo .atmosphere {
  background: radial-gradient(circle at 50% 50%, transparent 49%, rgba(120,200,220,0.18) 51%, rgba(120,200,220,0.05) 56%, transparent 64%);
}
.af-planet-wrap.af-planet-photo .atmosphere.outer {
  background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(168,125,255,0.10) 53%, transparent 66%);
}
.af-planet-wrap.af-moon-photo .lighting { display: none; }
.af-planet-wrap.af-moon-photo .surface {
  border-radius: 50%;
  /* Sharp clip on the moon too — reveals the actual disc edge */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 93%, transparent 94.5%);
          mask-image: radial-gradient(circle at 50% 50%, #000 93%, transparent 94.5%);
}
.af-planet-wrap.af-moon-photo { filter: drop-shadow(0 0 14px rgba(180,200,220,0.18)); }

/* Moon orbit — rotates around planet center (slow) */
@keyframes af-moon-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.af-moon-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: af-moon-orbit 90s linear infinite;
}

/* Realistic planet — uses the SVG asset, slow rotation, atmospheric glow */
@keyframes af-planet-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes af-cloud-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes af-planet-drift {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes af-atmo-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.af-planet-wrap {
  position: absolute;
  pointer-events: none;
  animation: af-planet-drift 14s ease-in-out infinite;
}
.af-planet-wrap .spin {
  position: absolute; inset: 0;
  animation: af-planet-spin 240s linear infinite;
  transform-origin: 50% 50%;
  border-radius: 50%;
  overflow: hidden;
}
.af-planet-wrap .clouds {
  position: absolute; inset: 4%;
  animation: af-cloud-spin 180s linear infinite reverse;
  transform-origin: 50% 50%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 60% 18% at 20% 30%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(ellipse 70% 14% at 65% 48%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(ellipse 50% 12% at 30% 68%, rgba(255,255,255,0.40), transparent 60%),
    radial-gradient(ellipse 45% 10% at 75% 80%, rgba(180,240,230,0.40), transparent 60%);
}
.af-planet-wrap .surface {
  width: 100%; height: 100%;
  display: block;
}
/* Static highlight overlays that DON'T rotate (sit on top of spinning surface) */
.af-planet-wrap .lighting {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    /* Sun specular hot-spot */
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55), rgba(255,255,255,0.20) 12%, transparent 30%),
    /* Pink rim catch from secondary star */
    radial-gradient(circle at 82% 78%, rgba(255,46,126,0.32), transparent 45%),
    /* Terminator shadow */
    radial-gradient(circle at 78% 70%, rgba(0,0,0,0.65), transparent 60%);
  pointer-events: none;
}
/* Atmospheric halo ring — outside the planet body, soft glow */
.af-planet-wrap .atmosphere {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(61,224,195,0.12) 53%, rgba(61,224,195,0.04) 58%, transparent 62%);
  filter: blur(4px);
  pointer-events: none;
  animation: af-atmo-pulse 8s ease-in-out infinite;
}
.af-planet-wrap .atmosphere.outer {
  inset: -14%;
  background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(168,125,255,0.08) 52%, transparent 65%);
  animation-delay: 2s;
}
/* Moon variant — no atmosphere, no rim halo, cooler shadow */
.af-planet-wrap.moon {
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.10));
}
.af-planet-wrap.moon .clouds,
.af-planet-wrap.moon .atmosphere { display: none; }
.af-planet-wrap.moon .lighting {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30), transparent 28%),
    radial-gradient(circle at 80% 72%, rgba(0,0,0,0.70), transparent 55%);
}

/* Animated nebula clouds — large soft radial gradients drifting slowly */
@keyframes af-nebula-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, -30px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes af-nebula-b {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-80px, 40px) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}
.af-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.af-nebula.a {
  width: 700px; height: 700px;
  left: -180px; top: -120px;
  background: radial-gradient(circle, rgba(255,46,126,0.55), rgba(168,125,255,0.25) 40%, transparent 70%);
  animation: af-nebula-a 28s ease-in-out infinite;
}
.af-nebula.b {
  width: 800px; height: 800px;
  right: -220px; bottom: -200px;
  background: radial-gradient(circle, rgba(61,224,195,0.5), rgba(80,140,255,0.20) 40%, transparent 70%);
  animation: af-nebula-b 34s ease-in-out infinite;
}
.af-nebula.c {
  width: 500px; height: 500px;
  left: 30%; top: 40%;
  background: radial-gradient(circle, rgba(255,181,71,0.35), transparent 60%);
  animation: af-nebula-a 40s ease-in-out infinite reverse;
  opacity: 0.30;
}

/* Animated starfield — twinkle + drift via canvas (no class needed here),
   but we also keep a CSS twinkle for fallback dots */
@keyframes af-twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.af-stars-twinkle > i {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: af-twinkle 3s ease-in-out infinite;
}

/* Ship flybys — animate across the hero */
.af-ships-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.af-ship {
  position: absolute;
  pointer-events: none;
  will-change: transform, left;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.af-ship.ltr { left: -360px; animation-name: af-ship-ltr; }
.af-ship.rtl { left: calc(100% + 360px); animation-name: af-ship-rtl; }
.af-ship.depth-far  { opacity: 0.55; filter: blur(0.3px); }
.af-ship.depth-mid  { opacity: 0.85; }
.af-ship.depth-near { opacity: 1; }
@keyframes af-ship-ltr {
  0%   { left: -360px; }
  100% { left: calc(100% + 60px); }
}
@keyframes af-ship-rtl {
  0%   { left: calc(100% + 360px); }
  100% { left: -460px; }
}
/* Preserve the horizontal-flip we set via inline transform during the animation */
.af-ship { transform-origin: 50% 50%; }

/* Shooting star streak */
@keyframes af-shoot {
  0%   { transform: translate3d(0,0,0) rotate(-22deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(800px, 320px, 0) rotate(-22deg); opacity: 0; }
}
.af-shoot {
  position: absolute;
  width: 180px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, rgba(255,46,126,0.8));
  border-radius: 2px;
  filter: drop-shadow(0 0 6px #fff);
  pointer-events: none;
  animation: af-shoot 3.6s ease-in forwards;
}

/* Subtle ambient glow at top of page so it isn't pitch black */
.af-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(168,125,255,0.18), transparent 70%),
    radial-gradient(ellipse 900px 500px at 100% 30%, rgba(61,224,195,0.10), transparent 70%),
    radial-gradient(ellipse 900px 500px at 0% 60%, rgba(255,46,126,0.12), transparent 70%);
}

/* Generic chip / pill */
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--af-line-strong);
  background: rgba(255,255,255,0.03);
  font-family: var(--af-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-ink-2);
}
.af-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--af-teal);
  box-shadow: 0 0 10px var(--af-teal);
}
.af-chip.warn .dot { background: var(--af-amber); box-shadow: 0 0 10px var(--af-amber); }
.af-chip.danger .dot { background: var(--af-red); box-shadow: 0 0 10px var(--af-red); }

/* Animated progress bar */
@keyframes af-fill { from { width: 0%; } }
.af-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.af-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--af-pink), var(--af-teal));
  animation: af-fill 1.4s cubic-bezier(.2,.7,.3,1);
  border-radius: 3px;
}

/* Mini glitch shimmer on hover for cards */
.af-card-hover {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.af-card-hover:hover {
  border-color: var(--af-pink);
  box-shadow: 0 8px 30px rgba(255, 46, 126, 0.18);
  transform: translateY(-2px);
}

/* Bracket frame used in direction A */
.af-bracket {
  position: relative;
}
.af-bracket::before, .af-bracket::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--af-pink);
  border-style: solid;
  border-width: 0;
}
.af-bracket::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.af-bracket::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Hero side rails — visible on viewports wider than the content column.
   They're absolutely positioned relative to the hero <section>, which is
   full-bleed. Each rail sits in the gap between the viewport edge and the
   1400px content column, so on a 1280px viewport they're hidden (negative
   width). The vertical wordmark + scan dashes give the empty space an
   intentional "HUD telemetry" feel without enlarging the main text. */
.af-side-rail {
  position: absolute;
  top: 80px;
  bottom: 80px;
  width: 80px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  opacity: 0.55;
  z-index: 2;
}
.af-side-rail.left  { left:  max(8px,  calc((100% - 1400px) / 2 - 90px)); }
.af-side-rail.right { right: max(8px,  calc((100% - 1400px) / 2 - 90px)); }
@media (max-width: 1559px) {
  .af-side-rail { display: none; }
}
.af-side-rail .vlabel {
  font-family: var(--af-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--af-ink-3);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
}
.af-side-rail.right .vlabel { transform: none; color: var(--af-teal); opacity: 0.7; }
.af-side-rail .scan {
  width: 1px;
  flex: 1;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0.18) 80%,
    transparent 100%);
  margin: 16px 0;
}
.af-side-rail .ticks {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.af-side-rail .ticks span {
  width: 14px; height: 1px; background: var(--af-pink); opacity: 0.6;
}
.af-side-rail .ticks span:nth-child(odd) { width: 8px; opacity: 0.35; }
.af-side-rail .corner {
  width: 18px; height: 18px;
  border: 1px solid var(--af-pink);
  border-right: none; border-bottom: none;
}
.af-side-rail.right .corner {
  border: 1px solid var(--af-teal);
  border-left: none; border-bottom: none;
}
.af-section {
  /* Section bg/borders span full viewport, but the content stays max ~1400
     wide via fluid padding that grows on wider screens. */
  padding: 80px max(64px, calc((100% - 1400px) / 2));
  position: relative;
}
.af-section .af-eyebrow { display: inline-block; margin-bottom: 14px; }
.af-section h2 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.af-section .af-lede {
  font-size: 16px;
  color: var(--af-ink-2);
  max-width: 720px;
}

/* Glitch text effect for titles */
.af-glitch { position: relative; display: inline-block; }
.af-glitch::before, .af-glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.7;
}
.af-glitch::before { color: var(--af-pink); transform: translate(-1.5px, 0); mix-blend-mode: screen; }
.af-glitch::after { color: var(--af-teal); transform: translate(1.5px, 0); mix-blend-mode: screen; }

/* Tag list */
.af-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.af-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--af-line-strong);
  border-radius: 4px;
  font-family: var(--af-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--af-ink-2);
}
.af-tag.pink { color: var(--af-pink); border-color: rgba(255,46,126,0.5); background: rgba(255,46,126,0.06); }
.af-tag.teal { color: var(--af-teal); border-color: rgba(61,224,195,0.5); background: rgba(61,224,195,0.06); }

/* Form inputs */
.af-input, .af-select, .af-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--af-line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--af-ink-1);
  font: inherit;
  border-radius: 4px;
  outline: none;
  transition: border-color .15s;
}
.af-input:focus, .af-select:focus, .af-textarea:focus {
  border-color: var(--af-pink);
  box-shadow: 0 0 0 3px rgba(255,46,126,0.12);
}
.af-label {
  display: block;
  font-family: var(--af-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--af-ink-3);
  margin-bottom: 6px;
}

/* Buttons */
.af-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  background: var(--af-pink);
  color: #1a0610;
  font-family: var(--af-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .12s, box-shadow .15s;
}
.af-btn:hover { filter: brightness(1.1); box-shadow: 0 8px 28px rgba(255,46,126,0.4); }
.af-btn:active { transform: translateY(1px); }
.af-btn.ghost {
  background: transparent;
  color: var(--af-ink-1);
  border-color: var(--af-line-strong);
}
.af-btn.ghost:hover { border-color: var(--af-teal); color: var(--af-teal); box-shadow: 0 0 0 1px var(--af-teal); }
.af-btn.teal { background: var(--af-teal); color: #022019; }
.af-btn.teal:hover { box-shadow: 0 8px 28px rgba(61,224,195,0.45); }

/* Modal */
.af-modal-backdrop {
  position: fixed; inset: 0; background: rgba(7,5,12,0.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.af-modal {
  width: 460px;
  background: var(--af-bg-1);
  border: 1px solid var(--af-line-strong);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,46,126,0.2);
}