/* ============================================================
   Theatre Command — the landing page only.

   Built to the geometry of a 1440 x 900 reference frame: 60px gutters, the
   feature card at x=1120..1380, the stat rail top at y=737. Everything is
   stated in those pixels and holds its proportions on the way down.

   Loaded from web/pages/index.html alone, which is why it is free to restyle
   the shared header and override the site's palette tokens.
   ============================================================ */

:root {
  --bg: #121317;
  --ink: #FFFFFF;
  --body: #B9BDC2;
  --muted: #8C9198;
  --acid: #B8FF4F;

  --glass: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .14);
  --r-card: 18px;
  --r-pill: 999px;
  --gutter: 60px;

  --f: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* site.css puts padding:76px 0 and a rule on every <section>; this page lays
   its own sections out, so that is cleared first */
section { padding: 0; border-bottom: none; }

html, body { background: var(--bg); }
body {
  background-image: none;
  color: var(--ink);
  font-family: var(--f);
}

/* This hero is a dark photograph in either theme, so the page keeps its own
   colours when the site is switched to light — site.css defines those tokens
   at [data-theme="light"], which outranks a bare :root, so they are restated
   here rather than merely set above. The toggle still works everywhere else. */
:root[data-theme="light"] {
  --void: #121317;
  --ink: #FFFFFF;
  --dim: #B9BDC2;
  --faint: #8C9198;
  --edge: rgba(255, 255, 255, .14);
}
:root[data-theme="light"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="light"] .brand b,
:root[data-theme="light"] .copy h1,
:root[data-theme="light"] .feature h2,
:root[data-theme="light"] .rail .v,
:root[data-theme="light"] .feature .foot,
:root[data-theme="light"] .sec h2,
:root[data-theme="light"] .tile h3,
:root[data-theme="light"] .close h2 { color: #FFFFFF; }
:root[data-theme="light"] .copy .sub,
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .rail .k,
:root[data-theme="light"] .sec .lede,
:root[data-theme="light"] .tile p { color: var(--body); }
:root[data-theme="light"] nav.main a { color: #D3D6DA; }

.wrapx { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------- header
   Absolute over the stage, and pinned to both edges — left alone it shrinks
   to its own content and the nav collapses onto the wordmark. */
header.site {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}
header.site .bar {
  position: relative;
  max-width: 1440px;
  padding: 0 var(--gutter);
  height: 80px;
  gap: 0;
}
.brand { gap: 8px; }
.brand svg { display: none; }
.brand b {
  font-family: var(--f);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .055em;
  color: var(--ink);
}
.brand::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

/* the links take the slack on both sides so they centre between the wordmark
   and the actions; there is no wrapper element to centre, and the auth slot
   is injected into this same nav at runtime */
nav.main { margin-left: 0; flex: 1 1 auto; gap: 34px; }
nav.main a {
  font-family: var(--f);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #D3D6DA;
  white-space: nowrap;
}
nav.main a:first-of-type { margin-left: auto; }
nav.main a:last-of-type { margin-right: auto; }
nav.main a:hover, nav.main a.on { color: var(--ink); }

nav.main .btn, nav.main .btn.pri {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--acid);
  border-radius: var(--r-pill);
  background: none;
  color: var(--acid);
  font-family: var(--f);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 9px 20px;
}
nav.main .btn::after { content: "→"; font-size: 14px; }
nav.main .btn:hover, nav.main .btn.pri:hover { background: var(--acid); color: #101216; }
.themeBtn { border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); margin-left: 14px; }
.themeBtn:hover { color: var(--acid); border-color: var(--acid); }

/* ---------------------------------------------------------- the stage */
.stage {
  position: relative;
  height: 900px;
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
}

/* the photograph, held to greyscale and pushed down so the light sits behind
   the airframe rather than on it */
.stage .shot {
  position: absolute; inset: 0;
  /* the photo and the stage share an aspect ratio, so 'cover' cannot move the
     airframe — it is scaled past the frame and pulled up instead */
  background: url('/assets/jet.jpg') no-repeat 50% 100% / auto 150%;
  filter: grayscale(1) contrast(1.02) brightness(.92);
  z-index: -2;
}
/* the light behind the subject, then the fall-off to the page colour */
.stage::before,
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.stage::before {
  background:
    radial-gradient(46% 44% at 52% 40%, rgba(214, 222, 230, .30), transparent 70%),
    radial-gradient(80% 66% at 52% 44%, rgba(150, 162, 174, .16), transparent 72%);
}
.stage::after {
  background:
    linear-gradient(180deg, rgba(18,19,23,.92) 0%, rgba(18,19,23,.30) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 2%, rgba(18,19,23,.55) 16%, transparent 40%),
    radial-gradient(80% 80% at 50% 48%, transparent 44%, rgba(18,19,23,.70));
}

.stage .frame {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------- hero copy
   Positions read off the reference: eyebrow baseline 198, headline 225,
   sub 500, button 605. */
.copy { position: absolute; left: var(--gutter); top: 191px; width: 560px; }
.eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--acid);
  margin: 0 0 14px;
}
.copy h1 {
  font-family: var(--f);
  font-size: 82px;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--ink);
  margin: 0;
}
.copy .sub {
  position: absolute; top: 318px; left: 0;
  width: 268px;
  font-size: 16px; line-height: 1.5;
  color: var(--body);
  margin: 0;
}
.copy .cta { position: absolute; top: 424px; left: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 16px;
  height: 46px; padding: 0 6px 0 26px;
  border-radius: var(--r-pill);
  background: #101216;
  color: #FFFFFF;
  font-family: var(--f); font-size: 15px; font-weight: 500;
  transition: .16s;
}
.pill:hover { background: var(--acid); color: #101216; text-decoration: none; }
.pill .arrow {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; background: var(--acid); color: #101216;
  display: grid; place-items: center; font-size: 15px;
}
.pill:hover .arrow { background: #101216; color: var(--acid); }

/* ---------------------------------------------------------- feature card
   x = 1120..1380 in the reference, so 260 wide against the 60px gutter. */
.feature {
  position: absolute; right: var(--gutter); top: 188px;
  width: 260px;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  padding: 20px;
}
.feature .eyebrow { font-size: 11px; margin-bottom: 10px; }
.feature h2 {
  font-family: var(--f); font-size: 19px; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); margin: 0 0 9px;
}
.feature p { font-size: 14px; line-height: 1.45; color: var(--body); margin: 0 0 16px; }
.feature .thumb { display: block; border-radius: 11px; overflow: hidden; }
.feature .thumb img { width: 100%; height: 224px; object-fit: cover; object-position: 30% 40%; display: block; }
.feature .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.feature .foot:hover { text-decoration: none; }
.feature .foot em { font-style: normal; color: var(--acid); font-size: 16px; }

/* ---------------------------------------------------------- stat rail
   Top edge at y=737 in the reference, spanning gutter to gutter. */
.rail {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 737px;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rail .cell { display: flex; align-items: center; gap: 18px; padding: 32px 30px; }
.rail .cell + .cell { border-left: 1px solid var(--line); }
.rail .ring {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--acid); border-radius: 50%;
  display: grid; place-items: center;
}
.rail .ring svg { width: 20px; height: 20px; stroke: var(--acid); fill: none;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail .v { font-size: 26px; font-weight: 700; letter-spacing: -.022em;
  color: var(--ink); line-height: 1.15; display: block; }
.rail .k { font-size: 13px; color: var(--body); display: block; }

/* ---------------------------------------------------------- below the fold
   The reference stops at the fold; the rest keeps to its vocabulary. */
.sec { max-width: 1440px; margin: 0 auto; padding: 120px var(--gutter) 0; }
.sec h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink); margin: 0 0 14px; max-width: 18ch;
}
.sec .lede { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0 0 44px; max-width: 52ch; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile {
  border-radius: var(--r-card);
  background: var(--glass); border: 1px solid var(--line);
  padding: 24px; display: flex; flex-direction: column;
}
.tile h3 { font-size: 18px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); margin: 0 0 9px; }
.tile p { font-size: 14px; line-height: 1.5; color: var(--body); margin: 0 0 20px; }
.tile svg.fig { width: 100%; height: auto; display: block; margin-top: auto; }
.tile svg.fig text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; }

.plate { max-width: 1440px; margin: 0 auto; padding: 120px var(--gutter) 0; }
.plate figure { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; }

.close { text-align: center; padding: 130px var(--gutter) 150px; }
.close h2 { font-size: 52px; font-weight: 700; letter-spacing: -.032em;
  line-height: 1.04; color: var(--ink); margin: 0 0 28px; }

footer.site { border-top: 1px solid var(--line); margin-top: 0; }
footer.site nav a { font-family: var(--f); text-transform: none; letter-spacing: 0; font-size: 14px; }
.credit { font-size: 12px; color: #6B7076; margin-top: 14px; }

/* ---------------------------------------------------------- scaling down
   The hero is positioned to a 1440 frame, so below that it becomes flow. */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .stage { height: auto; min-height: 0; padding: 128px 0 34px; }
  .stage .frame { height: auto; }
  .copy { position: static; width: auto; max-width: 620px; }
  .copy h1 { font-size: clamp(44px, 7vw, 82px); }
  .copy .sub { position: static; width: auto; max-width: 44ch; margin: 26px 0 0; }
  .copy .cta { position: static; display: inline-flex; margin-top: 26px; }
  .feature { position: static; width: auto; max-width: 420px; margin: 40px 0 0; }
  .rail { position: static; margin-top: 40px; grid-template-columns: repeat(2, 1fr); }
  .rail .cell:nth-child(3) { border-left: none; }
  .rail .cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec h2, .close h2 { font-size: clamp(28px, 4.4vw, 44px); }
  .trio { grid-template-columns: 1fr; }
  .sec, .plate { padding-top: 80px; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  header.site .bar { height: 68px; }
  nav.main { position: static; }
  .rail { grid-template-columns: 1fr; }
  .rail .cell + .cell { border-left: none; border-top: 1px solid var(--line); }
  .close { padding: 90px 20px 110px; }
}

/* .tile p and .eyebrow are both class-level, but `.tile p` also matches the
   element, so it outranks the accent colour — restated for the tiles. */
.tile .eyebrow { color: var(--acid); font-size: 11px; margin-bottom: 12px; }

/* ============================================================
   MOTION

   One orchestrated arrival, then the page settles. The only thing
   that keeps moving afterwards is the photograph, drifting slowly
   enough that you notice the frame is alive without it asking for
   attention. Every animation ends on an identity transform, so the
   measured layout is unchanged once it has played.
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseWide {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(30px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* a slow parallax breath on the photograph — 150% background height
   leaves room to travel without ever exposing an edge */
@keyframes drift {
  from { background-position: 50% 100%; background-size: auto 150%; }
  to   { background-position: 50% 92%;  background-size: auto 158%; }
}
/* the studio light strengthens as the frame settles, then holds */
@keyframes lamp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stage .shot {
  animation: lamp 1400ms ease-out both,
             drift 26s ease-in-out 1200ms infinite alternate;
}
.stage::before { animation: lamp 1800ms ease-out 200ms both; }

.copy .eyebrow      { animation: rise 620ms cubic-bezier(.22,.7,.3,1) 260ms both; }
.copy h1 span       { display: block; animation: riseWide 780ms cubic-bezier(.22,.7,.3,1) both; }
.copy h1 span:nth-child(1) { animation-delay: 340ms; }
.copy h1 span:nth-child(2) { animation-delay: 440ms; }
.copy .sub          { animation: rise 700ms cubic-bezier(.22,.7,.3,1) 620ms both; }
.copy .cta          { animation: rise 700ms cubic-bezier(.22,.7,.3,1) 720ms both; }
.feature            { animation: lift 860ms cubic-bezier(.22,.7,.3,1) 560ms both; }
.rail               { animation: lift 860ms cubic-bezier(.22,.7,.3,1) 780ms both; }

/* the CTA's arrow leans into a hover rather than just recolouring */
.pill .arrow { transition: background .16s, color .16s, transform .22s cubic-bezier(.22,.7,.3,1); }
.pill:hover .arrow { transform: translateX(3px); }
.feature .foot em { transition: transform .22s cubic-bezier(.22,.7,.3,1); display: inline-block; }
.feature .foot:hover em { transform: translateX(4px); }

/* the tiles' diagrams draw themselves once, when they are first seen —
   the stroke is the mechanism, so watching it drawn is the explanation.
   .is-drawn is set by the observer in the page script. */
.tile .fig [data-draw] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.tile.is-drawn .fig [data-draw] {
  animation: draw 1100ms cubic-bezier(.4,.5,.2,1) both;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* a route that is dashed by design keeps its dash pattern and travels
   instead — the dashes run the length of the leg like a track being flown */
.tile .fig [data-march] { stroke-dashoffset: var(--len); }
.tile.is-drawn .fig [data-march] { animation: draw 1300ms linear both; }

.tile .fig [data-fade] { opacity: 0; }
.tile.is-drawn .fig [data-fade] { animation: lamp 700ms ease-out 760ms both; }

@media (prefers-reduced-motion: reduce) {
  .stage .shot, .stage::before,
  .copy .eyebrow, .copy h1 span, .copy .sub, .copy .cta,
  .feature, .rail { animation: none; opacity: 1; transform: none; }
  .stage .shot { background-position: 50% 100%; background-size: auto 150%; }
  .tile .fig [data-draw], .tile .fig [data-march] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .tile .fig [data-fade] { opacity: 1; }
  .pill:hover .arrow, .feature .foot:hover em { transform: none; }
}

/* the copy layer sits above the traffic */
.stage .frame { z-index: 2; }


/* ============================================================
   AESTHETIC PASS

   The page was grey-on-grey: a desaturated photograph on a neutral
   charcoal ground, with the accent appearing in five small places and
   nothing anywhere with any depth. Greyscale was the mistake — the
   photograph is a night ramp shot, and stripped of colour it reads as
   mud rather than atmosphere.

   So: the photograph is duotoned into deep navy and cold cyan rather
   than grey, the ground goes blue-black to match, light is layered
   instead of flat, the panels get real glass, and the display face
   becomes the squared technical one the simulator already uses.
   ============================================================ */

:root {
  --bg: #070A12;                 /* blue-black, not neutral charcoal */
  --ink: #F2F6FA;
  --body: #9FB0C4;
  --muted: #6B7C92;
  --acid: #C8FF4D;
  --ice:  #6FE3F5;               /* the cold second accent the photo is lit with */

  --glass: linear-gradient(180deg, rgba(140, 190, 220, .085), rgba(120, 170, 210, .028));
  --line: rgba(160, 205, 230, .16);
  --f-disp: 'Chakra Petch', var(--f);
}
:root[data-theme="light"] { --bg: #070A12; --ink: #F2F6FA; --body: #9FB0C4; }

body { background: var(--bg); }

/* ---------------------------------------------------------- the photograph
   Greyscale first so the duotone has a clean ramp to map onto, then a colour
   layer blended over it: shadows to deep navy, highlights to cold cyan. The
   blend is contained by the filter's own stacking context. */
.stage .shot {
  filter: grayscale(1) contrast(1.30) brightness(.74);
}
.stage .shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(158deg, #0A1730 0%, #10344B 46%, #1C6070 78%, #2E8497 100%);
  mix-blend-mode: color;
  opacity: .92;
}
/* a cold rim of light behind the airframe, and a warm one low and left so the
   frame is lit from two sides instead of evenly washed */
.stage::before {
  background:
    radial-gradient(38% 36% at 53% 34%, rgba(150, 225, 245, .30), transparent 72%),
    radial-gradient(62% 54% at 53% 42%, rgba(70, 150, 190, .20), transparent 74%),
    radial-gradient(40% 40% at 16% 82%, rgba(200, 255, 77, .07), transparent 70%);
}
.stage::after {
  background:
    linear-gradient(180deg, rgba(7,10,18,.94) 0%, rgba(7,10,18,.32) 24%, transparent 44%),
    linear-gradient(0deg, var(--bg) 1%, rgba(7,10,18,.62) 18%, transparent 44%),
    radial-gradient(82% 82% at 50% 46%, transparent 40%, rgba(7,10,18,.86));
}

/* ---------------------------------------------------------- grain
   A single fixed film grain over everything. Flat dark pages band and look
   plastic; a little noise gives the gradients somewhere to hide. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- type
   Chakra Petch is already loaded for the simulator: squared, technical, and
   actually characterful where Plex Sans was only competent. */
.copy h1, .sec h2, .close h2 {
  font-family: var(--f-disp);
  font-weight: 700;
  letter-spacing: -.005em;
}
.copy h1 { font-size: 86px; line-height: .95; }
.copy h1 span:nth-child(2) { color: var(--ice); }
.feature h2, .tile h3, .rail .v { font-family: var(--f-disp); letter-spacing: 0; }
.eyebrow { font-family: var(--f-disp); letter-spacing: .16em; }

/* ---------------------------------------------------------- glass
   A lit top edge and a real drop shadow, so the panels sit above the
   photograph instead of being holes cut in it. */
.feature, .rail, .tile, .plate figure {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(190, 235, 255, .14),
              0 30px 70px -34px rgba(0, 0, 0, .95);
}
.feature, .rail { backdrop-filter: blur(20px) saturate(1.25); }
.feature .thumb img, .plate img { filter: saturate(1.1) contrast(1.04); }

/* the accent earns its place: the rings and the CTA arrow actually emit */
.rail .ring { box-shadow: 0 0 22px -6px var(--acid), inset 0 0 12px -8px var(--acid); }
.pill .arrow { box-shadow: 0 0 18px -4px var(--acid); }
.pill { border: 1px solid rgba(200, 255, 77, .22); background: rgba(10, 16, 26, .82); }
.eyebrow { text-shadow: 0 0 18px rgba(200, 255, 77, .35); }

/* ---------------------------------------------------------- traffic
   Smaller, colder, fewer of them — they were reading as clip art at that size. */

/* ------------------------------------------------------- aesthetic pass, 2
   The first pass got three things wrong and they are worth naming: the
   duotone washed out because the blend was not isolated to the photograph,
   the display face is wider than Plex so the headline broke to three lines,
   and a cyan headline line plus a lime accent meant two accents competing
   for the same job. */

/* the photograph is its own stacking context, so the colour layer blends
   with the image and nothing behind it */
.stage .shot {
  isolation: isolate;
  background-position: 50% 42%;
  background-size: auto 128%;
  filter: grayscale(1) contrast(1.42) brightness(.66);
}
.stage .shot::after {
  background: linear-gradient(152deg, #0A1226 0%, #0E2E4B 40%, #17607A 74%, #35A0B4 100%);
  mix-blend-mode: color;
  opacity: 1;
}
/* a second, lighter pass on the highlights only, so the rim reads as cold
   light rather than a flat tint */
.stage .shot::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(52% 46% at 50% 34%, rgba(120, 220, 250, .28), transparent 70%);
  mix-blend-mode: screen;
  z-index: 1;
}
@keyframes drift {
  from { background-position: 50% 42%; background-size: auto 128%; }
  to   { background-position: 50% 36%; background-size: auto 136%; }
}

/* one accent, not two: the headline is white and the lime does the pointing */
.copy h1 { font-size: 74px; line-height: .96; }
.copy h1 span:nth-child(2) { color: var(--ink); }
.copy { width: 640px; }

/* Those two sizes are for the 1440 frame, and sitting after the scaling-down
   rules above they won on every screen: a 640px copy block and a 74px
   headline on a 390px phone cut "the whole war" and the line under it off
   at the right edge. Below the frame the copy flows again, and the headline
   scales with the screen. */
@media (max-width: 1180px) {
  .copy { width: auto; max-width: 620px; }
  .copy h1 { font-size: clamp(36px, 10.4vw, 74px); line-height: .98; }
}


/* ------------------------------------------------------- aesthetic pass, 3
   The airframe was cropped so tight it read as an abstract metal shape, and
   its lower half was a pale mass the copy had to sit on top of. Pull back to
   show the whole aircraft, crush the exposure so it reads as a dark object
   under a cold light, and bed the copy on a real gradient rather than on
   whatever the photograph happened to be doing there. */

.stage .shot {
  background-position: 50% 44%;
  background-size: auto 106%;
  filter: grayscale(1) contrast(1.55) brightness(.44);
}
.stage .shot::after {
  background: linear-gradient(150deg, #050B18 0%, #0A2337 42%, #10485E 76%, #1E7B90 100%);
}
.stage .shot::before {
  background: radial-gradient(46% 40% at 50% 30%, rgba(130, 225, 255, .34), transparent 72%);
}
@keyframes drift {
  from { background-position: 50% 44%; background-size: auto 106%; }
  to   { background-position: 50% 39%; background-size: auto 113%; }
}

/* a bed for the copy: dark on the left, falling away to nothing by centre */
.stage::after {
  background:
    linear-gradient(90deg, rgba(5,8,16,.90) 0%, rgba(5,8,16,.62) 24%, transparent 52%),
    linear-gradient(180deg, rgba(5,8,16,.92) 0%, rgba(5,8,16,.26) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 1%, rgba(5,8,16,.66) 17%, transparent 42%),
    radial-gradient(84% 84% at 52% 44%, transparent 42%, rgba(5,8,16,.88));
}


/* below the fold inherits the hero's light, so the sections are not flat */
.sec, .plate, .close { position: relative; }
.sec::before {
  content: "";
  position: absolute; inset: -80px 0 auto;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(52% 100% at 22% 0%, rgba(60, 150, 190, .10), transparent 72%);
}
.tile:hover { border-color: rgba(200, 255, 77, .28); }
.tile { transition: border-color .2s; }