/* ============================================================
   Space Vision — thespacevision.com
   Single dark theme by design: the site is a window into space.
   No frameworks, no external fonts, no build step.
   ============================================================ */

:root {
  --bg: #050507;
  --bg-raised: #0b0b10;
  --text: #f4f4f5;
  --text-dim: rgba(244, 244, 245, 0.62);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #f9af38;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  /* The rem floor is what a zoomed-in phone chokes on: at 200% it reserves 96px
     of a 375px screen. The outer min() bounds the gutter to a share of the
     screen instead, and never engages at default sizes. */
  --pad-x: min(clamp(1.5rem, 6vw, 6rem), 8vw);
  --radius: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor targets must clear the fixed nav, whatever their own padding is. */
section[id] { scroll-margin-top: 5.5rem; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

/* At large text sizes a single long word (a heading, an email address) can be
   wider than a phone screen and drag the whole page sideways. Let words break
   rather than push. This never fires at normal sizes. */
h1, h2, h3, p, a, li { overflow-wrap: break-word; }

a { color: inherit; }

/* ---------- accessibility helpers ---------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--text);
  color: #000;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- type primitives ---------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-size: min(clamp(1.8rem, 4vw, 2.8rem), 9vw);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 0.9rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  /* Horizontal padding is bounded so a zoomed-up label keeps its own size
     (readability) without the button growing wider than the screen. */
  padding: 1em min(2.2em, 8vw);
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-solid { background: var(--text); color: #000; }
.btn-ghost { background: transparent; color: var(--text); }

/* Hover-capable pointers only. */
@media (hover: hover) {
  .btn-solid:hover { background: transparent; color: var(--text); }
  .btn-ghost:hover { background: var(--text); color: #000; }
}

.btn-small { padding: 0.7em 1.6em; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding: 0.9rem var(--pad-x);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(5, 5, 7, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  min-width: 0; /* let the wordmark yield instead of widening the page */
}

.brand-mark { width: 28px; height: 28px; }

.brand-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.8rem);
}

.nav-links a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .nav-links a:hover {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
}

.nav-right { display: flex; align-items: center; gap: 1rem; }

/* hamburger — mobile only */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text);
  transition: transform 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 5, 7, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: 7rem var(--pad-x) 0;
}

.mobile-menu a {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* No toggle exists above this breakpoint, so the overlay never shows. */
@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh; /* fallback for browsers without svh */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* The copy is bottom-aligned, so at large text sizes it grows upward — and the
     nav is fixed, so it would slide underneath it. Reserving the nav's height in
     rem (which the nav itself scales in) keeps them apart at any zoom level, and
     costs nothing at the default size because the copy sits lower than this. */
  padding-top: 6rem;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 5, 7, 0.92) 0%, rgba(5, 5, 7, 0.35) 34%, rgba(5, 5, 7, 0) 60%),
    linear-gradient(to bottom, rgba(5, 5, 7, 0.55) 0%, rgba(5, 5, 7, 0) 22%);
}

.hero-content {
  position: relative;
  max-width: 780px;
  padding: 0 var(--pad-x) clamp(5rem, 14vh, 9rem);
  animation: hero-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  /* Sized for the full sentence headline rather than a two-word stack.
     The outer min() bounds the display size against screen WIDTH, so page zoom
     on a phone can't blow the headline up to where it eats the whole viewport.
     It only engages on narrow screens at high zoom; at every default size the
     clamp still wins, so the design is unchanged. */
  max-width: 24ch;
  font-size: min(clamp(2rem, 4.6vw, 3.7rem), 13vw);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.03;
  text-transform: uppercase;
  margin-top: 1rem;
}

.hero-sub {
  max-width: 34rem;
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-dim);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
}


.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  color: var(--text-dim);
  animation: cue-bob 2.4s ease-in-out infinite;
}

.video-toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 1.6rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(5, 5, 7, 0.5);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

@media (hover: hover) {
  .video-toggle:hover { border-color: var(--text); }
}

/* The two glyphs swap on the button's .paused class (set in main.js). */
.video-toggle .icon-play { display: none; }
.video-toggle.paused .icon-pause { display: none; }
.video-toggle.paused .icon-play { display: block; }

@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- statement ---------- */

.statement {
  padding: clamp(6rem, 14vw, 11rem) var(--pad-x);
  display: flex;
  justify-content: center;
}

.statement-text {
  max-width: 56rem;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-dim);
  text-align: center;
  text-wrap: balance;
}

.statement-text strong { color: var(--text); font-weight: 600; }

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: 0 var(--pad-x) clamp(6rem, 12vw, 10rem);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .features { grid-template-columns: 1fr; } }

.feature {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

.feature-index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--accent);
}

.feature h2 {
  margin-top: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature p {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* ---------- content bands (capture + short claim) ---------- */

.band {
  padding: 0 var(--pad-x) clamp(6rem, 12vw, 10rem);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.band-copy {
  max-width: 44rem;
  margin: 1.2rem auto 0;
  color: var(--text-dim);
}

.band-media {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}

.band-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* three-up world gallery */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 0 var(--pad-x) clamp(6rem, 12vw, 10rem);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 720px) { .trio { grid-template-columns: 1fr; } }

.trio figure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}

.trio img {
  width: 100%;
  height: auto;
  display: block;
}

.trio figcaption {
  padding: 0.8rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- trailer ---------- */

.trailer {
  /* Carries its own top padding. */
  padding: clamp(5rem, 10vw, 8rem) var(--pad-x) clamp(6rem, 12vw, 10rem);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.trailer-frame {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}

.trailer-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- contact ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 6vw, 6rem);
  padding: clamp(5rem, 10vw, 8rem) var(--pad-x);
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.contact-email {
  margin-top: 2.2rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.contact-email a {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.05rem;
  overflow-wrap: anywhere; /* a long address must not widen the layout */
}

@media (hover: hover) {
  .contact-email a:hover { text-decoration: underline; }
}

.contact-form { display: grid; gap: 1.8rem; align-content: start; }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  transition: border-color 0.25s ease;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.contact-form .btn { justify-self: start; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem var(--pad-x) 3rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-left { display: flex; align-items: center; gap: 1rem; }

.footer-logo { height: 22px; width: auto; opacity: 0.8; }

.footer-copy { font-size: 0.8rem; color: var(--text-dim); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.footer-links a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .footer-links a:hover { color: var(--text); }
}

/* "App Store" must keep its own casing wherever a rule would uppercase it. */
.no-caps { text-transform: none !important; }

.footer-legal {
  max-width: 1400px;
  margin: 2rem auto 0;
  font-size: 0.68rem;
  line-height: 1.6;
  color: rgba(244, 244, 245, 0.38);
}

/* ---------- standalone pages (success / 404) ---------- */

.page-solo {
  min-height: 100vh; /* fallback for browsers without svh */
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--pad-x);
}

.page-solo h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.page-solo p {
  margin: 1.2rem auto 2.4rem;
  max-width: 30rem;
  color: var(--text-dim);
}

/* ---------- scroll reveals ----------
   Gated on the `js` class, which main.js sets. visibility:hidden also keeps
   unrevealed controls out of the tab order. */

.js .reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.in {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content { animation: none; }
  .hero-scroll-cue { animation: none; }
  .js .reveal { opacity: 1; visibility: visible; transform: none; transition: none; }
}