/* Aviator Trail page — retro 80s neon (the Game Zone code-screen palette: cyan ink, hot magenta, deep space). */
@font-face { font-family: 'Press Start 2P'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/PressStart2P-400.woff2) format('woff2'); }
@font-face { font-family: 'VT323'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/VT323-400.woff2) format('woff2'); }

body.at {
  --cyan: #5af0ff;
  --hot: #ff46c8;
  --deep: #0a041e;
  --violet: #2a0b52;
  --sun1: #ffe066;
  --sun2: #ff3fa0;
  --pixel: 'Press Start 2P', monospace;
  --term: 'VT323', monospace;
  --line: rgba(90, 240, 255, 0.22);
  background: var(--deep);
  color: #eaf6ff;
}
body.at main { overflow: hidden; }

/* menu bar and footer, recoloured for this page */
body.at .nav.solid { background: rgba(10, 4, 30, 0.85); border-bottom-color: rgba(255, 70, 200, 0.35); }
body.at .nav-links a[aria-current="page"] { color: var(--cyan); background: rgba(90, 240, 255, 0.1); }
body.at .footer { background: #07021a; border-top: 1px solid rgba(255, 70, 200, 0.35); }
body.at .footer-mail a { color: var(--cyan); }

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

/* ---------- hero ---------- */
.at-hero {
  position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 96px 16px 140px; isolation: isolate;
}
.at-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #05010f 0%, var(--deep) 30%, var(--violet) 55%, #6b0f6e 66%, #ff3fa0 74%, #1a0530 74.4%); }
#at-stars { position: absolute; inset: 0 0 30% 0; width: 100%; height: 70%; }

.at-sun {
  position: absolute; left: 50%; bottom: 26%; width: min(46vw, 420px); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun1) 0%, #ff9b3d 45%, var(--sun2) 80%);
  box-shadow: 0 0 80px 20px rgba(255, 63, 160, 0.45), 0 0 200px 60px rgba(255, 120, 60, 0.2);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
          mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
  animation: sunbands 3s linear infinite;
}
@keyframes sunbands { to { -webkit-mask-position: top, 0 22px; mask-position: top, 0 22px; } }

.at-mountains { position: absolute; left: 0; right: 0; bottom: 25.6%; width: 100%; height: 18%; }
.at-mountains .far { fill: #1a0638; stroke: var(--hot); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--hot)); }
.at-mountains .near { fill: #12042a; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--cyan)); }

.at-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 26%; perspective: 260px; perspective-origin: 50% 0%; overflow: hidden;
  background: linear-gradient(180deg, #1a0530, #0a041e); }
.at-grid-lines {
  position: absolute; inset: 0 0 -100% 0; transform-origin: 50% 0; transform: rotateX(62deg);
  background-image:
    linear-gradient(90deg, rgba(255, 70, 200, 0.9) 2px, transparent 2px),
    linear-gradient(0deg, rgba(90, 240, 255, 0.85) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: gridrun 1.1s linear infinite;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%);
          mask: linear-gradient(180deg, transparent, #000 18%);
  filter: drop-shadow(0 0 4px rgba(255, 70, 200, 0.8));
}
@keyframes gridrun { to { background-position: 0 60px, 0 60px; } }

.at-plane { position: absolute; top: 22%; left: -12%; width: clamp(90px, 11vw, 150px); image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(90, 240, 255, 0.55)); animation: fly 18s linear infinite; }
.at-plane::after { content: ""; }
@keyframes fly {
  0% { left: -14%; top: 24%; rotate: -3deg; }
  25% { top: 18%; rotate: 2deg; }
  50% { top: 22%; rotate: -2deg; }
  75% { top: 15%; rotate: 3deg; }
  100% { left: 112%; top: 19%; rotate: -2deg; }
}
.at-scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

.at-hero-text { position: relative; max-width: 980px; }
.at-kicker { display: inline-block; padding: 4px 10px; background: rgba(10, 4, 30, 0.6); margin: 0 0 18px; font: 400 clamp(0.55rem, 1.6vw, 0.75rem) var(--pixel); letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.at-title {
  position: relative; margin: 0; font: 400 clamp(1.9rem, 8.4vw, 5.6rem)/1.15 var(--pixel); letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--hot), 0 0 42px var(--hot), 4px 4px 0 #3a0b6e, 8px 8px 0 rgba(90, 240, 255, 0.5);
}
.at-title .flick { animation: flicker 5s infinite; }
@keyframes flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: 0.25; } }
.at-tag { margin: 22px 0 0; font: 400 clamp(1.3rem, 3.6vw, 2.1rem) var(--term); color: var(--sun1); letter-spacing: 0.06em; min-height: 1.3em;
  display: inline-block; padding: 2px 12px; background: rgba(10, 4, 30, 0.72); text-shadow: 0 0 10px rgba(255, 224, 102, 0.6); }
.caret { animation: blink 1s steps(1) infinite; color: var(--cyan); }
@keyframes blink { 50% { opacity: 0; } }

.at-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.at-soon { font: 400 clamp(0.6rem, 1.7vw, 0.8rem) var(--pixel); color: var(--hot); padding: 12px 16px; border: 2px solid var(--hot); background: rgba(10, 4, 30, 0.85);
  box-shadow: 0 0 12px var(--hot), inset 0 0 12px rgba(255, 70, 200, 0.4); text-shadow: 0 0 8px var(--hot); animation: blink 1.6s steps(1) infinite; }
.at-btn {
  display: inline-block; font: 400 clamp(0.6rem, 1.7vw, 0.8rem) var(--pixel); color: var(--deep); background: var(--cyan);
  padding: 14px 18px; border: 0; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 18px rgba(90, 240, 255, 0.7), 4px 4px 0 var(--hot);
  transition: transform 0.12s, box-shadow 0.12s;
}
.at-btn:hover { transform: translate(-2px, -2px); box-shadow: 0 0 26px rgba(90, 240, 255, 0.9), 6px 6px 0 var(--hot); }
.at-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 12px rgba(90, 240, 255, 0.7), 1px 1px 0 var(--hot); }
.at-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.at-buy { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.at-buy-btn { font-size: clamp(0.75rem, 2vw, 1rem); padding: 18px 26px; background: var(--sun1); box-shadow: 0 0 22px rgba(255, 224, 102, 0.7), 4px 4px 0 var(--hot); }
.at-buy-note { margin: 0; font: 400 1.1rem var(--term); color: var(--cyan); }
.at-down { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; color: var(--cyan); text-decoration: none; font-size: 1.2rem; text-shadow: 0 0 10px var(--cyan); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- sections ---------- */
.at-section { position: relative; max-width: 1080px; margin: 0 auto; padding: 96px 16px 24px; }
.at-h2 { margin: 0 0 36px; font: 400 clamp(0.95rem, 2.8vw, 1.5rem) var(--pixel); color: #fff; letter-spacing: 0.08em; text-shadow: 0 0 12px var(--hot); }
.at-h2 span { color: var(--cyan); margin-right: 14px; text-shadow: 0 0 10px var(--cyan); }
.lead { font: 400 clamp(1.5rem, 3.4vw, 2rem)/1.2 var(--term); color: var(--sun1); margin: 0 0 16px; }
.at-pitch { max-width: 760px; font-size: 1.08rem; color: #cfd9f5; border-left: 3px solid var(--hot); padding-left: 22px; box-shadow: -10px 0 24px -14px var(--hot); }
.at-pitch p { margin: 0 0 14px; }

/* the trail: a flight path that lights up as you scroll */
.at-route { --p: 0; list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; counter-reset: leg; }
.at-route::before, .at-route::after { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 4px; }
.at-route::before { background: repeating-linear-gradient(180deg, rgba(90, 240, 255, 0.25) 0 10px, transparent 10px 18px); }
.at-route::after { bottom: auto; height: calc(var(--p) * (100% - 16px)); background: linear-gradient(180deg, var(--cyan), var(--hot)); box-shadow: 0 0 12px var(--hot); }
.at-route li { position: relative; padding: 10px 0 22px 18px; counter-increment: leg; opacity: 0.35; transform: translateX(-8px); transition: opacity 0.4s, transform 0.4s; }
.at-route li.lit { opacity: 1; transform: none; }
.at-route li::before { content: ""; position: absolute; left: -31px; top: 14px; width: 14px; height: 14px; background: var(--deep); border: 3px solid rgba(90, 240, 255, 0.4); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.at-route li.lit::before { background: var(--hot); border-color: #fff; box-shadow: 0 0 14px var(--hot); }
.at-route b { display: block; font: 400 clamp(0.72rem, 2vw, 0.95rem)/1.5 var(--pixel); color: #fff; }
.at-route b::before { content: counter(leg, decimal-leading-zero) "  "; color: var(--cyan); }
.at-route i { display: block; margin-top: 4px; font: 400 1.35rem/1.2 var(--term); font-style: normal; color: #b6c3ea; }

/* features */
.at-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.at-feats li {
  position: relative; padding: 22px 20px 20px; background: linear-gradient(160deg, rgba(42, 11, 82, 0.8), rgba(10, 4, 30, 0.9));
  border: 2px solid rgba(90, 240, 255, 0.35); color: #c5d0f0; font-size: 0.98rem; line-height: 1.5;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.at-feats b { display: block; margin: 0 0 8px; font: 400 0.72rem/1.5 var(--pixel); color: var(--sun1); }
.at-feats .ico { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; font-size: 1.2rem; color: var(--deep); background: var(--cyan); box-shadow: 3px 3px 0 var(--hot); }

/* career-over ticker */
.at-ticker { margin: 96px 0 0; padding: 16px 0; overflow: hidden; background: #000; border-block: 2px solid var(--hot); box-shadow: 0 0 24px rgba(255, 70, 200, 0.35); }
.at-ticker-track { display: flex; gap: 64px; width: max-content; animation: tick 46s linear infinite; }
.at-ticker span { font: 400 clamp(1.4rem, 3vw, 2rem) var(--term); color: #ff7a5c; letter-spacing: 0.08em; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 122, 92, 0.6); }
.at-ticker span::before { content: "\25B6  "; color: var(--cyan); }
@keyframes tick { to { transform: translateX(-50%); } }

/* screenshots in a CRT */
.at-crt { max-width: 860px; margin: 0 auto; padding: 22px; background: linear-gradient(160deg, #2b2440, #141022); border-radius: 26px;
  box-shadow: 0 30px 80px -30px rgba(255, 70, 200, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -6px 0 rgba(0, 0, 0, 0.4); }
.at-crt-screen { position: relative; border-radius: 18px / 22px; overflow: hidden; background: #000; aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 0 3px #0c0a14; }
.at-crt-screen img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: opacity 0.25s, filter 0.25s; }
.at-crt-screen img.swap { opacity: 0; filter: brightness(3) blur(2px); }
.at-crt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55)); }
.at-crt-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 40%); }
.at-crt-cap { min-height: 2.6em; margin: 14px 0 0; text-align: center; font: 400 1.4rem var(--term); color: var(--cyan); }
.at-thumbs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.at-thumbs button { width: 112px; padding: 0; border: 2px solid rgba(90, 240, 255, 0.3); background: #000; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s; }
.at-thumbs button img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.at-thumbs button:hover, .at-thumbs button.on { opacity: 1; border-color: var(--hot); box-shadow: 0 0 14px rgba(255, 70, 200, 0.6); }
.at-thumbs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* launch alert */
.at-signup { max-width: 680px; margin: 0 auto; text-align: center; padding: 34px 22px; border: 2px solid var(--cyan);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 70, 200, 0.18), transparent 70%), rgba(10, 4, 30, 0.7);
  box-shadow: 0 0 26px rgba(90, 240, 255, 0.35), inset 0 0 26px rgba(90, 240, 255, 0.12); }
.at-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.at-form input {
  flex: 1 1 260px; max-width: 380px; min-width: 0; padding: 12px 14px; font: 400 1.5rem var(--term); letter-spacing: 0.04em;
  color: var(--cyan); background: #000; border: 2px solid rgba(90, 240, 255, 0.6); outline: none;
}
.at-form input::placeholder { color: rgba(90, 240, 255, 0.45); }
.at-form input:focus { border-color: var(--hot); box-shadow: 0 0 14px rgba(255, 70, 200, 0.5); }
.at-form[aria-disabled="true"] input, .at-form[aria-disabled="true"] button { opacity: 0.45; cursor: not-allowed; }
.at-form-msg { text-transform: uppercase; min-height: 1.4em; margin: 14px 0 0; font: 400 1.35rem var(--term); color: var(--sun1); }
.at-fine { margin: 6px 0 0; color: #8e9ac4; font-size: 0.85rem; }
.at-platforms { margin: 28px auto 0; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; font: 400 1.35rem var(--term); color: #c5d0f0; }
.at-platforms p { margin: 0; }
.at-platforms b { color: var(--hot); font-weight: 400; }

/* credits roll */
.at-credits { text-align: center; padding-top: 110px; padding-bottom: 110px; }
.at-roll { margin: 0; font: 400 0.65rem var(--pixel); letter-spacing: 0.2em; color: var(--cyan); }
.at-name { margin: 12px 0 40px; font: 400 clamp(1rem, 3vw, 1.5rem) var(--pixel); color: #fff; text-shadow: 0 0 14px var(--hot); }

.at-disclaimer { max-width: 760px; margin: 0 auto; padding: 22px 26px; text-align: left; border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 10px; background: rgba(6, 4, 20, 0.6); color: #b9b4d6; font-size: 0.92rem; line-height: 1.6; }
.at-disclaimer h2 { margin: 0 0 10px; font: 400 0.6rem var(--pixel); letter-spacing: 0.2em; color: var(--cyan); }
.at-disclaimer p { margin: 0 0 10px; }
.at-disclaimer p:last-child { margin-bottom: 0; }
.at-disclaimer b { color: #fff; font-weight: 600; }

/* scroll reveals (shared .reveal from site.css) */

@media (max-width: 560px) {
  .at-hero { padding-top: 88px; }
  .at-thumbs button { width: 30%; }
  .at-crt { padding: 12px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .at-route li { opacity: 1; transform: none; }
  .at-route::after { height: calc(100% - 16px); }
  .at-ticker-track { flex-wrap: wrap; width: auto; justify-content: center; gap: 12px 32px; padding: 0 16px; }
  .at-ticker span[aria-hidden] { display: none; }
  .at-plane { left: 70%; top: 18%; }
}

/* thanks page */
.at-thanks main { min-height: 70vh; }
.thx { padding-top: 120px; max-width: 820px; }
.thx-title { margin: 6px 0 14px; font: 400 clamp(1.5rem, 6vw, 3rem)/1.2 var(--pixel); color: #fff; text-shadow: 0 0 6px #fff, 0 0 22px var(--hot); }
.thx-steps { list-style: none; counter-reset: s; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.thx-steps > li { counter-increment: s; position: relative; padding: 20px 20px 18px 66px; border: 2px solid rgba(90, 240, 255, 0.35); background: rgba(10, 4, 30, 0.7); color: #c5d0f0; }
.thx-steps > li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center;
  font: 400 0.8rem var(--pixel); color: var(--deep); background: var(--cyan); box-shadow: 3px 3px 0 var(--hot); }
.thx-steps > li > b { display: block; margin-bottom: 6px; font: 400 0.8rem/1.6 var(--pixel); color: var(--sun1); }
.thx-steps p { margin: 0 0 8px; }
.thx-steps p a, .thx-help a { color: var(--cyan); }
.thx-small b { color: #dbe3ff; }
.thx-get .at-btn { color: var(--deep); }
.thx-get { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 12px; }
.thx-get .at-btn.off { opacity: 0.35; pointer-events: none; }
.thx-small { font-size: 0.9rem; color: #8e9ac4; }
.thx-msg { min-height: 1.3em; font: 400 1.3rem var(--term); color: var(--hot); }
.thx-help { margin-top: 26px; color: #c5d0f0; }

/* trailer */
.at-vid { max-width: 920px; margin: 0 auto; padding: 8px; border: 2px solid var(--cyan); background: #000;
  box-shadow: 0 0 26px rgba(90, 240, 255, 0.35), 8px 8px 0 rgba(255, 70, 200, 0.6); }
.at-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }