/* Astorbit v2 — decorative layer on top of style.css (non-gameplay flourishes). */

/* Scroll progress, styled like a fuel gauge */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; background: rgba(255, 255, 255, .05); }
.progress span {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--cyan), var(--magenta) 60%, var(--gold));
  box-shadow: 0 0 8px var(--magenta);
}

/* Pointer spark trail */
#trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }

/* Sticky nav */
.nav {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px; transition: background .3s, border-color .3s, transform .3s;
  border-bottom: var(--line) solid transparent;
}
.nav.scrolled { background: rgba(18, 12, 38, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(77, 232, 255, .2); }
.nav-logo { font: 600 1.2rem var(--pixel); color: var(--cyan); text-decoration: none; letter-spacing: .08em; opacity: 0; transition: opacity .3s; }
.nav.scrolled .nav-logo { opacity: 1; }
.nav nav { display: flex; gap: 4px; align-items: center; }
.nav nav a { font: 500 .95rem var(--pixel); color: var(--muted); text-decoration: none; padding: 6px 10px; border: var(--line) solid transparent; }
.nav nav a:hover, .nav nav a.active { color: var(--text); border-color: rgba(77, 232, 255, .4); }
.nav nav a.nav-cta { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }
.nav nav a.nav-cta:hover { box-shadow: 0 0 12px var(--cyan); }
@media (max-width: 639px) { .nav nav a:not(.nav-cta) { display: none; } }

/* Glitch logo: rare RGB-split twitch */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.glitch::before { color: var(--magenta); animation: glitch-a 6s infinite steps(1); }
.glitch::after { color: var(--gold); animation: glitch-b 6s infinite steps(1); }
@keyframes glitch-a {
  0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  92% { opacity: .8; transform: translate(-4px, 0); clip-path: inset(10% 0 60% 0); }
  94% { opacity: .8; transform: translate(4px, 0); clip-path: inset(55% 0 20% 0); }
  96% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  93% { opacity: .7; transform: translate(3px, 2px); clip-path: inset(70% 0 5% 0); }
  95% { opacity: .7; transform: translate(-3px, -1px); clip-path: inset(25% 0 50% 0); }
  97% { opacity: 0; }
}

/* Hero visual: pixel planet with orbit rings behind the ship */
.hero-visual { position: relative; display: grid; place-items: center; transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .4s ease-out; }
.hero-visual > * { grid-area: 1 / 1; }
#hero-canvas { position: relative; z-index: 2; }
.planet {
  width: 78%; aspect-ratio: 1; border-radius: 50%; position: relative; z-index: 0; opacity: .85;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle, rgba(255, 64, 192, .06) 0 6px, transparent 7px) 0 0 / 70px 46px,
    radial-gradient(circle, rgba(20, 8, 50, .15) 0 10px, transparent 11px) 30px 20px / 110px 70px,
    repeating-linear-gradient(180deg, #3a1f6e 0 14px, #4a2585 14px 22px, #2d1757 22px 40px, #5b2a7a 40px 46px);
  box-shadow: inset -28px -18px 0 rgba(10, 4, 30, .55), 0 0 30px rgba(255, 64, 192, .12), 0 0 0 2px rgba(255, 64, 192, .18);
  animation: planet-spin 40s linear infinite;
  image-rendering: pixelated;
}
@keyframes planet-spin { to { background-position: 0 0, -700px 0, -1100px 20px, 0 0; } }
.orbit {
  width: 108%; aspect-ratio: 1; border-radius: 50%; position: relative; z-index: 1;
  border: 2px dashed rgba(77, 232, 255, .25);
  transform: rotateX(74deg) rotateZ(0deg); animation: orbit 18s linear infinite;
}
.orbit i { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.orbit.o2 { width: 92%; border-color: rgba(255, 184, 64, .2); animation-duration: 26s; animation-direction: reverse; transform: rotateX(70deg) rotateY(-14deg); }
.orbit.o2 i { background: var(--gold); box-shadow: 0 0 10px var(--gold); width: 8px; height: 8px; }
@keyframes orbit { to { transform: rotateX(74deg) rotateZ(360deg); } }

/* Marquee bands */
.marquee {
  overflow: hidden; border-block: var(--line) solid var(--cyan); background: rgba(77, 232, 255, .08);
  transform: rotate(-2deg); margin: 24px 0; box-shadow: none;
}
.marquee .track { display: flex; width: max-content; animation: marquee 28s linear infinite; padding: 10px 0; }
.marquee span, .marquee b { font: 600 clamp(1.1rem, 4vw, 1.6rem) var(--pixel); letter-spacing: .12em; white-space: nowrap; padding: 0 18px; }
.marquee b { color: var(--magenta); font-weight: 400; }
.marquee.alt { transform: rotate(1.5deg); border-color: var(--magenta); background: rgba(255, 64, 192, .08); box-shadow: none; }
.marquee.alt .track { animation-direction: reverse; animation-duration: 34s; }
.marquee.alt b { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Stats strip */
.stats { padding: 48px 0; }
.stats .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: center; }
.stat b { display: block; font: 600 clamp(2.6rem, 10vw, 4rem) / 1 var(--pixel); color: var(--gold); text-shadow: 0 0 10px rgba(255, 184, 64, .25); }
.stat span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
@media (min-width: 640px) { .stats .wrap { grid-template-columns: repeat(4, 1fr); } }

/* Pixel stair-step divider above a section */
.divided::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; opacity: .35;
  background:
    repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 16px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--cyan) 8px 16px) 0 8px / 100% 8px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
#log.divided::before { background-color: transparent; filter: hue-rotate(100deg); }

/* Hover tilt */
.tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out, box-shadow .2s, border-color .2s; will-change: transform; }

/* CRT terminal devlog */
.terminal { position: relative; max-width: 760px; margin: 32px auto 0; padding: 0; overflow: hidden; border-color: rgba(77, 232, 255, .5); }
.terminal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
}
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: var(--line) solid rgba(77, 232, 255, .3); background: rgba(0, 0, 0, .35); }
.term-bar i { width: 10px; height: 10px; background: var(--magenta); }
.term-bar i:nth-child(2) { background: var(--gold); }
.term-bar i:nth-child(3) { background: var(--cyan); }
.term-bar span { margin-left: 8px; font: .85rem var(--pixel); color: var(--muted); }
.term-lines { list-style: none; margin: 0; padding: 16px; font: .95rem/1.7 ui-monospace, "SF Mono", Menlo, monospace; color: #bdf6ff; text-shadow: 0 0 6px rgba(77, 232, 255, .5); }
.term-lines li { display: flex; gap: 12px; }
.term-lines time { color: var(--gold); flex: none; }
.term-lines.typing li { visibility: hidden; }
.term-lines.typing li.shown { visibility: visible; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Planet horizon above the footer */
.horizon {
  height: 120px; margin-top: 40px; position: relative; overflow: hidden;
}
.horizon::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: 30px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, #3a1f6e, #1b1238 40%);
  box-shadow: 0 -2px 0 var(--magenta), 0 -10px 40px rgba(255, 64, 192, .4);
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { display: none; }
  .tilt { transform: none !important; }
  .hero-visual { transform: none !important; }
  .marquee .track { transform: none; }
}

/* ===== Polish pass ===== */

/* Pixel nebula layer (generated in v2.js) */
#nebula {
  position: fixed; inset: 0; width: 100%; height: 100%; scale: 1.15; z-index: -2; pointer-events: none;
  image-rendering: pixelated; object-fit: cover; opacity: .22; animation: nebula-drift 90s ease-in-out infinite alternate;
}
@keyframes nebula-drift { to { transform: translate(-4%, -3%); } }

/* Intro: neon-sign logo + ship rising in */
.logo .ch { display: inline-block; }
.intro .logo .ch { animation: neon-on .9s steps(1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes neon-on {
  0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .15; } 45% { opacity: 1; } 55% { opacity: .4; } 70%, 100% { opacity: 1; }
}
.intro .tagline, .intro .hero .lead, .intro .soon, .intro .badges, .intro .hero .signup { animation: rise .7s ease-out both; }
.intro .tagline { animation-delay: .8s; }
.intro .hero .lead { animation-delay: .9s; }
.intro .soon { animation-delay: 1s; }
.intro .badges { animation-delay: 1.1s; }
.intro .hero .signup { animation-delay: 1.2s; }
.intro #hero-canvas { animation: ship-in 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
.intro .hero-visual { animation: fade-in 1.6s ease-out .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes ship-in { from { opacity: 0; transform: translateY(60%) scale(.9); } }

/* Staggered reveal for card groups (uses `translate`, so hover tilt `transform` is untouched) */
.stagger > * { opacity: 0; translate: 0 18px; transition: opacity .5s ease-out, translate .5s ease-out, transform .2s ease-out, box-shadow .2s, border-color .2s; transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s; }
.reveal.in .stagger > *, .stagger.in > * { opacity: 1; translate: 0 0; }

/* Captain's Log scan */
.entry .art { position: relative; overflow: hidden; }
.entry .art img { opacity: 0; transition: opacity .3s; }
.entry .art::after {
  content: ""; position: absolute; left: 0; right: 0; top: -10%; height: 6px; opacity: 0;
  background: var(--cyan); box-shadow: 0 0 14px 4px rgba(77, 232, 255, .6);
}
.entry.scan .art::after { animation: scan 1s ease-in-out both; animation-delay: var(--d, 0s); }
.entry.scan .art img { opacity: 1; transition-delay: calc(var(--d, 0s) + .5s); }
.entry.locked .art::after { background: var(--magenta); box-shadow: 0 0 14px 4px rgba(255, 64, 192, .6); }
.entry.locked.scan .art::after { animation-name: scan-fail; }
.entry.locked .art::before {
  content: "SIGNAL LOST"; position: absolute; inset: auto 0 8px; z-index: 1; text-align: center;
  font: .75rem var(--pixel); letter-spacing: .12em; color: var(--magenta); opacity: 0;
}
.entry.locked.scan .art::before { animation: blink 1s steps(1) infinite; animation-delay: calc(var(--d, 0s) + 1s); opacity: 1; }
@keyframes scan { 0% { top: -10%; opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
@keyframes scan-fail { 0% { top: -10%; opacity: 1; } 50% { top: 45%; opacity: 1; } 60% { top: 40%; } 100% { top: 48%; opacity: 0; } }

/* Merge animation */
#merge { display: block; width: 100%; max-width: 480px; margin: 24px auto 8px; image-rendering: pixelated; }

/* Custom crosshair cursor (fine pointers only, enabled by v2.js) */
.xhair { display: none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .tilt { cursor: none; }
.has-cursor input { cursor: text; }
.has-cursor .xhair {
  display: block; position: fixed; left: 0; top: 0; width: 22px; height: 22px; z-index: 40; pointer-events: none;
  translate: -50% -50%; transform: translate(var(--cx, -100px), var(--cy, -100px));
  transition: width .15s, height .15s;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 2px 6px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 50% 100% / 2px 6px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 50% / 6px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 50% / 6px 2px no-repeat,
    linear-gradient(var(--text), var(--text)) 50% 50% / 2px 2px no-repeat;
  filter: drop-shadow(0 0 3px var(--cyan));
}
.has-cursor .xhair.hot { width: 34px; height: 34px; filter: drop-shadow(0 0 4px var(--magenta)) hue-rotate(110deg); }
.has-cursor .xhair.down { width: 16px; height: 16px; }
.has-cursor .xhair.hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #nebula { animation: none; }
  .stagger > * { opacity: 1; translate: none; }
  .entry .art img { opacity: 1; }
  .entry .art::after { display: none; }
  .entry.locked .art::before { opacity: 1; }
}