/* ============================================================================
   GigVite Blue · worldflight "One Night, Run Right"
   Midnight-blue Nashville. Engine selectors untouched.
   ========================================================================== */

:root {
  --sc-canvas:      #020c17;
  --sc-surface:     #0c1622;
  --sc-ink:         #eef2f6;
  --sc-ink-soft:    #9db0c4;
  --sc-accent:      #0f8bfd;
  --sc-accent-ink:  #02101f;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --sc-shadow-color: 212 70% 3%;
  --gv-hand: "Caveat", cursive;         /* THE LIST's diegetic handwriting */
  --gv-paper: #f4f0e4;                  /* the list's paper */
  --gv-pen:   #232d3a;
}

/* ------------------------------------------------------------- top chrome -- */
.chrome-top {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem var(--sc-gutter);
  pointer-events: none;
}
.chrome-top > * { pointer-events: auto; }
.skip-link {
  position: fixed; left: var(--sc-gutter); top: 0.7rem; z-index: calc(var(--sc-z-chrome) + 1);
  transform: translateY(-160%);
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 0.6rem 0.85rem; border-radius: 999px;
  font-weight: 800; text-decoration: none;
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }
.mark {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--sc-font-display);
  font-weight: 500; font-stretch: 112%;
  font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--sc-ink); text-decoration: none;
}
.mark b { font-weight: 900; }
.mark__logo { width: 1.7rem; height: auto; }
.finale-mark {
  width: clamp(2.8rem, 6vw, 4rem); height: auto;
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 4px 14px hsl(var(--sc-shadow-color) / 0.5));
}

.cta {
  display: inline-block;
  font-family: var(--sc-font-display);
  font-weight: 800; font-stretch: 110%;
  font-size: 1.05rem;
  background: var(--sc-accent); color: #fff;
  text-decoration: none;
  padding: 0.8em 1.6em; border-radius: 999px;
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { filter: brightness(1.1); transform: translateY(-2px); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible,
.mark:focus-visible,
.rail__leg:focus-visible,
.fineprint a:focus-visible {
  outline: 2px solid var(--sc-ink);
  outline-offset: 4px;
}
.cta--chip { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.85rem; padding: 0.6em 1.2em; box-shadow: var(--sc-e1); }

/* Header actions: quiet Sign in beside the loud Get started chip. The ghost
   link sits on moving footage, so it carries its own text shadow for
   legibility instead of relying on the band scrim. */
.chrome-actions { display: flex; align-items: center; gap: 1.1rem; }
.cta--ghost {
  min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--sc-font-display);
  font-weight: 700; font-stretch: 108%;
  font-size: 0.85rem;
  color: var(--sc-ink);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(2, 12, 23, 0.9), 0 0 2px rgba(2, 12, 23, 0.9);
}
.cta--ghost:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.cta--ghost:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }

/* ---------------------------------------------------------------- THE LIST -- */
.list {
  position: fixed; z-index: var(--sc-z-chrome);
  top: 4.6rem; left: var(--sc-gutter);
  width: min(15.5rem, 42vw);
  background: var(--gv-paper);
  color: var(--gv-pen);
  border-radius: 3px;
  padding: 0.9rem 1.1rem 1rem;
  box-shadow: var(--sc-e3);
  transform: rotate(-2deg);
  font-family: var(--gv-hand);
  will-change: transform, opacity;
}
.list::before { /* tape */
  content: ""; position: absolute; top: -0.55rem; left: 50%; translate: -50% 0;
  width: 3.4rem; height: 1.1rem; background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.06); transform: rotate(1.5deg);
}
.list__title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1.5px solid color-mix(in srgb, var(--gv-pen) 30%, transparent);
  padding-bottom: 0.2rem;
}
.list__items { list-style: none; margin: 0; padding: 0; }
.list__items li {
  position: relative;
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
  transition: opacity 500ms var(--sc-ease-out);
}
.list__items li::after { /* the strike, drawn left to right */
  content: ""; position: absolute; left: -2px; right: 100%; top: 58%;
  height: 2px; background: var(--gv-pen); opacity: 0.85;
  transform: rotate(-0.6deg);
  transition: right 420ms var(--sc-ease-out);
}
.list__items li.is-struck { opacity: 0.38; }
.list__items li.is-struck::after { right: -2px; }
.list__last {
  margin: 0.45rem 0 0;
  font-size: 1.7rem; font-weight: 700;
  color: var(--gv-pen);
  opacity: 0; transform: scale(0.95);
  transition: opacity 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out);
}
.list.is-done .list__last { opacity: 1; transform: none; }
.list.is-done .list__items { display: none; }
.list.is-done .list__title { text-decoration: none; }
.list.is-done { transform: rotate(-1deg) scale(1.02); }

/* ------------------------------------------------------------------- rail -- */
.rail {
  position: fixed; z-index: var(--sc-z-chrome);
  right: calc(var(--sc-gutter) * 0.5); top: 50%; translate: 0 -50%;
  display: grid; gap: 0.55rem; justify-items: end;
  padding: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--sc-canvas) 72%, transparent));
}
.rail__leg {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 105%;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
  padding: 0.3em 0.65em; border-radius: 999px;
  border: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.rail__leg:hover { color: var(--sc-ink); }
.rail__leg[aria-current="true"] {
  color: var(--sc-accent);
  border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
}

/* one scrim shape for the whole flight: a bottom band dense enough that body
   copy clears 4.5:1 over the brightest frame (the glowing load-out door) */
.gv-band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 28%,
    color-mix(in oklab, var(--sc-canvas) 42%, transparent) 48%,
    transparent 66%);
}

/* ------------------------------------------------------------------- copy -- */
.disp {
  font-family: var(--sc-font-display);
  font-weight: 900; font-stretch: 116%;
  line-height: 1.0;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0 0 0.4em;
  color: var(--sc-ink);
}
.disp--xl { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.disp--lg { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.disp em { font-style: italic; color: var(--sc-accent); }

/* windowed copy anchors low; the list owns the upper-left column */
.sc-copy--lead.fly, .sc-copy--trail.fly { bottom: clamp(2.4rem, 8vh, 7rem); }

.copy-sub { color: var(--sc-ink-soft); }
.copy-sub--center { margin-inline: auto; }
.eyebrow {
  margin: 0 0 0.55rem;
  color: color-mix(in oklab, var(--sc-accent) 82%, var(--sc-ink));
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-sm);
  font-weight: 900; font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 16px hsl(var(--sc-shadow-color) / 0.5);
}

.sc-copy--center-low {
  inset-inline: var(--sc-gutter);
  bottom: clamp(2.2rem, 8vh, 5.5rem);
  text-align: center;
  max-width: none;
}
.sc-copy--center-low .cta { margin-top: 1.2rem; }

.fineprint {
  margin: 0.85rem 0 0;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}
.fineprint a { color: inherit; text-underline-offset: 0.18em; }
.launch-note {
  margin: 1rem 0 0;
  color: var(--sc-ink);
  font-size: var(--sc-t-sm);
  font-weight: 800;
  letter-spacing: var(--sc-track-snug);
}
.no-js {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: var(--sc-gutter);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.no-js h2 { margin: 0; max-width: 12ch; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.98; }
.no-js p { max-width: 46ch; color: var(--sc-ink-soft); }

/* THE LIST vs the copy: on short desktop windows the two share a column, so
   the list compacts first and folds second. Pure media queries, no JS. */
@media (min-width: 861px) and (max-height: 780px) {
  .list { width: 12rem; padding: 0.6rem 0.8rem 0.7rem; }
  .list__title { font-size: 0.92rem; }
  .list__items li { font-size: 0.95rem; line-height: 1.28; }
  .list__last { font-size: 1.35rem; }
}
@media (min-width: 861px) and (max-height: 620px) {
  .list { width: 10.5rem; }
  .list__items li:nth-child(n+4) { display: none; }
  .list__items::after {
    content: "…and six more";
    display: block;
    font-size: 0.85rem; font-weight: 600;
    opacity: 0.55;
  }
  .sc-copy--lead.fly, .sc-copy--trail.fly { bottom: 1.6rem; }
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 860px) {
  /* copy rides the TOP of the screen on phones; THE LIST owns the bottom */
  .fly,
  .sc-copy--lead.fly, .sc-copy--trail.fly, .sc-copy--center-low.fly {
    top: clamp(4.4rem, 9vh, 6.5rem);
    bottom: auto;
  }
  /* the scrim flips with the copy: dense at the top, clear below */
  .gv-band {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 98%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 40%,
      color-mix(in oklab, var(--sc-canvas) 52%, transparent) 60%,
      transparent 78%);
  }
  .finale-mark { display: none; } /* the mark already lives in the chrome */
  .list {
    top: auto; bottom: 1rem; left: 1rem;
    width: min(12.5rem, 60vw);
    padding: 0.7rem 0.85rem 0.8rem;
  }
  .list__items li { font-size: 0.98rem; }
  .rail { display: none; }
  .disp--xl { font-size: clamp(2rem, 9vw, 2.9rem); }
  .cta--chip { min-height: 44px; font-size: 0.76rem; padding: 0.55em 0.9em; }
  .chrome-actions { gap: 0.75rem; }
  .cta--ghost { font-size: 0.78rem; }
  .mark { font-size: 1.1rem; }
  .fineprint {
    max-width: 24rem;
    margin-inline: auto;
    font-size: 0.76rem;
    line-height: 1.45;
    color: color-mix(in oklab, var(--sc-ink) 86%, transparent);
  }
}

/* ---------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .list__items li::after { transition: none; }
  .list__last { transition: none; }
}