/* Mostrava coming-soon page. Approved layouts: 1a (light desktop) and 1c (light mobile), see ../HANDOFF.md. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");
}

:root {
  --navy: #0B1431;
  --indigo-deep: #3213C3;
  --indigo: #4E22F5;
  --blue: #0054FC;
  --sky: #01AEFC;
  --cyan: #04D7FB;
  --paper: #F6F7FB;
  --slate: #3A4262;
  --muted: #4A5372;
  --chip: #E4E7F2;
  --chip-line: #D3D8E8;
  --rule: #D9DDEA;
  --pill-line: #CDD2E3;
  --gradient: linear-gradient(100deg, #4E22F5 5%, #0054FC 55%, #01AEFC);
  --block-gradient: linear-gradient(110deg, #4E22F5, #0054FC 60%, #01AEFC);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 21px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p { margin: 0; }
img { display: block; }

.page {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 48px 88px 40px;
}

/* One soft radial glow, top right, partly off-canvas. */
.glow {
  position: absolute;
  right: -180px;
  top: -220px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(78, 34, 245, .10), rgba(1, 174, 252, .06) 55%, transparent);
  pointer-events: none;
}

/* Header */
.top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.lockup { display: flex; align-items: center; gap: 14px; }
.lockup .mark { width: 48px; height: 42px; }
.lockup .word { width: 158px; height: 28px; }

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--pill-line);
  border-radius: 99px;
  background: #fff;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(4, 215, 251, .25);
}

/* Hero */
.hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 40px 0;
}
.eyebrow {
  font: 500 13px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(80px, 38.17px + 10.73vw, 148px);
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--navy);
  font-optical-sizing: auto;
}
.grad {
  color: var(--indigo);              /* fallback where background-clip:text is unsupported */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.lede {
  max-width: 640px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--slate);
}

/* Bottom: decorative timeline, then the footer */
.bottom { position: relative; display: flex; flex-direction: column; gap: 22px; }

.timeline {
  position: relative;
  height: 74px;
  display: flex;
  gap: 10px;
  overflow-x: clip;                  /* the moving rail never widens the page */
}
.block {
  height: 100%;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--chip-line);
  border-radius: 10px;
  background: var(--chip);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.block:nth-child(1) { flex: 15; }
.block:nth-child(2) { flex: 22; }
.block:nth-child(3) { flex: 17; }
.block:nth-child(4) { flex: 24; }
.block:nth-child(5) { flex: 13; }
.block.live { border-color: transparent; background: var(--block-gradient); color: #fff; }

/* The playhead rides on a rail spanning 6%-94% of the timeline. The rail moves by its own width (transform only, so
   the animation stays on the compositor); the playhead sits on the rail's left edge. */
.rail {
  position: absolute;
  top: -14px;
  bottom: -8px;
  left: 6%;
  width: 88%;
  pointer-events: none;
  animation: play 9s ease-in-out infinite alternate;
}
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--cyan);
}
.playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--navy);
}
@keyframes play {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { animation: none; transform: translateX(36.36%); }    /* rests at ~38% of the timeline */
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.contact { font-size: 16px; line-height: 1.5; color: var(--slate); }
.contact a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 2px;
}
.contact a:hover { color: var(--indigo); }
.contact a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.legal {
  margin-left: auto;                 /* right-aligned on desktop, with or without the contact line */
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.narrow { display: none; }

/* Mobile (1c) */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .page { padding: 36px 24px 28px; }
  .glow {
    right: -200px;
    top: -160px;
    width: 460px;
    height: 460px;
    background: radial-gradient(closest-side, rgba(78, 34, 245, .12), rgba(1, 174, 252, .06) 55%, transparent);
  }
  .lockup { gap: 10px; }
  .lockup .mark { width: 38px; height: 33px; }
  .lockup .word { width: 118px; height: 21px; }
  .status { gap: 7px; padding: 7px 10px; font-size: 10px; letter-spacing: .1em; }
  .status .dot { width: 6px; height: 6px; box-shadow: none; }

  .wide { display: none; }
  .narrow { display: inline; }

  .hero { gap: 22px; padding: 32px 0; }
  .eyebrow { font-size: 12px; }
  h1 { line-height: .95; }
  .lede { font-size: 17px; }

  .bottom { gap: 18px; }
  .timeline { height: 46px; gap: 6px; }
  .block { padding: 0; border-radius: 7px; }
  .block span { display: none; }
  .rail { top: -10px; bottom: -6px; }
  .playhead::before { left: -5px; width: 12px; height: 12px; border-radius: 3px; }

  .foot { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; }
  .contact { font-size: 15px; }
  .contact a { text-underline-offset: 3px; }
  .legal { margin-left: 0; font-size: 10.5px; letter-spacing: .05em; }
}