/*
 * X-COASTER PROMO STYLES — EDITING GUIDE
 *
 * Start with the theme variables below for site-wide colors and content width.
 * Sections 01–07 match the labeled sections in index.html.
 * Desktop rules come first; phone overrides and reduced-motion rules come last.
 * Keep rule order: later rules intentionally override earlier ones.
 */

/* THEME: colors and maximum page width. */
:root {
  --bg: #000000;
  --text: #f6f3ec;
  --muted: #a5a59f;
  --accent: #ffac82;
  --line: #ffffff24;
  --max: 1240px;
}
/* BASE: sizing, page defaults, links, and keyboard focus. */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
/* Shared centered container used by header, hero, invitation, and footer. */
.wrap {
  max-width: var(--max);
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}
/* Keyboard-only skip link becomes visible when focused. */
.skip-link {
  position: absolute;
  left: 20px;
  top: -100px;
  background: var(--accent);
  color: #000;
  padding: 12px;
  z-index: 9;
}
.skip-link:focus {
  top: 12px;
}
/* 01. HEADER — logo and Sign In button. */
.site-header {
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: block;
  width: 210px;
  height: 44px;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}
/* Offset crops the unused black space in the supplied logo. */
.brand img {
  display: block;
  width: 210px;
  height: auto;
  transform: translateY(-16px);
}
.sign-in {
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #ffffff45;
  border-radius: 50px;
  padding: 13px 23px;
  display: flex;
  gap: 25px;
  align-items: center;
}
.sign-in:hover {
  background: var(--text);
  color: #000;
}
/* 02. HERO — desktop layout and introductory text. */
.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  overflow: hidden;
  padding-top: 64px;
  padding-bottom: 80px;
}
.hero-copy {
  z-index: 1;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px #ffac8260;
}
h1 {
  font-size: clamp(64px, 7vw, 100px);
  line-height: 0.96;
  letter-spacing: -6px;
  margin: 0 0 30px;
  font-weight: 800;
}
h1 em {
  color: var(--accent);
  font-style: normal;
}
.intro {
  max-width: 390px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 32px;
}
/* Launch status badge and availability text. */
.launch {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 0 23px;
}
.launch-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: var(--accent);
  color: #1a100a;
  padding: 10px 12px;
  border-radius: 4px;
}
.launch p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
/* 03. STORE LABELS — visual placeholders, not download links yet. */
.store-row {
  display: flex;
  gap: 12px;
}
.store {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  padding: 12px 18px;
  border-radius: 9px;
  background: #111312;
}
.store small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}
.store strong {
  font-size: 17px;
}
.store-symbol {
  font-size: 29px;
  font-weight: 300;
}
.existing {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 24px;
}
.existing a {
  color: var(--text);
}
/* 04. DECORATIVE ART — track placement, background glow, and captions.
 * Track paths and gradient colors are in the HTML SVG. */
.hero-art {
  position: absolute;
  right: -45px;
  top: 22px;
  width: 54%;
  height: 740px;
  background: radial-gradient(ellipse at 65% 40%, #c7713c1c, transparent 65%);
}
.track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px #ffac8210);
}
.orbit {
  position: absolute;
  border: 1px solid #ffffff0b;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  left: 10%;
  top: 7%;
}
.orbit-two {
  width: 380px;
  height: 380px;
  left: 25%;
  top: 19%;
}
.art-label {
  position: absolute;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 2px;
  color: #b7a89c;
}
.art-label-top {
  right: 24%;
  top: 65px;
}
.art-label-bottom {
  left: 23%;
  bottom: 30px;
  color: var(--accent);
}
.art-label-bottom span {
  font-size: 8px;
  color: #81756d;
}
/* 05. SLOGAN STRIP — clipped horizontally to avoid page overflow. */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: #111211;
}
.ticker > div {
  white-space: nowrap;
  padding: 23px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
}
.ticker span {
  color: var(--accent);
  padding: 0 40px;
}
/* 06. INVITATION — closing headline and account message. */
.invitation {
  padding-top: 110px;
  padding-bottom: 95px;
}
.invitation .eyebrow {
  color: var(--accent);
}
h2 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -2.5px;
  line-height: 1.1;
  margin: 0 0 25px;
}
.invitation > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 480px;
}
.invitation-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 65px;
  padding-top: 28px;
}
.invitation-bottom > span {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.invitation-bottom p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
/* 07. FOOTER — brand, tagline, and sign-in link. */
footer {
  border-top: 1px solid var(--line);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
}
footer p {
  color: var(--muted);
}
footer a {
  text-decoration: none;
}
.footer-name {
  font-weight: 800;
  letter-spacing: 1px;
}
/* WIDE SCREENS (1600px+) — give the hero extra breathing room. */
@media (min-width: 1600px) {
  .hero {
    min-height: 850px;
  }
  .hero-art {
    top: 70px;
  }
}
/* PHONE / SMALL TABLET (760px and below).
 * These override the desktop rules above; edit here for mobile-only changes. */
@media (max-width: 760px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
  .site-header {
    height: 84px;
  }
  .brand {
    width: 160px;
    height: 36px;
  }
  .brand img {
    width: 160px;
    transform: translateY(-10px);
  }
  .sign-in {
    padding: 10px 15px;
    gap: 12px;
  }
  .hero {
    display: block;
    min-height: 0;
    padding-top: 58px;
    padding-bottom: 60px;
  }
  .hero-copy {
    position: relative;
  }
  h1 {
    font-size: 70px;
    letter-spacing: -4px;
  }
  .hero-art {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 360px;
    margin-top: 10px;
    opacity: 0.85;
  }
  .track {
    height: 480px;
    top: -45px;
  }
  .orbit {
    width: 300px;
    height: 300px;
  }
  .orbit-two {
    width: 200px;
    height: 200px;
  }
  .art-label-top {
    top: 25px;
    right: 5%;
  }
  .art-label-bottom {
    bottom: 0;
    left: 8%;
  }
  .intro {
    font-size: 16px;
  }
  .store {
    padding: 10px 12px;
  }
  .store strong {
    font-size: 15px;
  }
  .store-row {
    gap: 8px;
  }
  .existing {
    font-size: 11px;
  }
  .invitation {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .invitation-bottom {
    display: block;
    margin-top: 40px;
  }
  .invitation-bottom p {
    margin-top: 18px;
  }
  footer {
    flex-wrap: wrap;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  footer p {
    order: 3;
    width: 100%;
    margin: 0;
  }
  .ticker > div {
    font-size: 10px;
    padding: 20px 0;
  }
}
/* ACCESSIBILITY — respect the visitor’s reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}