/* freeagents.dev, coming soon.

   Every colour is a token from the product's tokens.css, and the page wears
   the league look: the floodlight from above, the chalk lines far behind,
   Bricolage for the one display line. The scene inside .stage is drawn in
   design pixels and scaled to fit by soon.js. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/Bricolage-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --bg: #0B0A12;
  --bg-1: #13111D;
  --bg-2: #1B1829;
  --fg: #F5F3FB;
  --fg-2: #ABA6BF;
  --fg-3: #908BA6;
  --line: rgba(220, 210, 255, 0.10);
  --line-2: rgba(220, 210, 255, 0.20);
  --action: #2B8CFF;
  --action-hi: #4C9FFF;
  --action-base: #1A5FBF;
  --sky: #9CD6FF;
  --flood: rgba(156, 214, 255, 0.16);
  --chalk: rgba(243, 235, 221, 0.035);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}

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

html {
  background:
    radial-gradient(1100px 460px at 50% -170px, var(--flood), transparent 70%),
    var(--bg);
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100svh; overflow-x: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--chalk) calc(50% - 0.5px), var(--chalk) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    radial-gradient(circle at 50% 46%, transparent 179px, var(--chalk) 180px, var(--chalk) 181px, transparent 182px);
}

main {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  row-gap: clamp(6px, 1.4vh, 16px);
  padding:
    max(env(safe-area-inset-top), clamp(22px, 4.5vh, 48px))
    16px
    max(env(safe-area-inset-bottom), clamp(14px, 3vh, 30px));
}

.logo { width: clamp(210px, 30vw, 360px); line-height: 0; }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }

.tag {
  color: var(--fg-2);
  font-size: clamp(15px, 0.55vw + 12px, 18px);
  line-height: 1.45;
  text-align: center;
  max-width: 30ch;
  text-wrap: balance;
}

.stage { position: relative; width: 100%; height: 100%; align-self: stretch; }

.soon {
  font-family: "Bricolage", "Geist", sans-serif;
  font-weight: 800;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 1.2vw + 14px, 32px);
  line-height: 1;
  color: var(--fg);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .soon {
    background: linear-gradient(100deg, var(--fg) 0 42%, var(--sky) 50%, var(--fg) 58% 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--fg-2);
  font-size: 14px;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.links a:active { transform: scale(0.97); }
.links a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .links a:hover { color: var(--fg); background: rgba(220, 210, 255, 0.06); }
}

/* ------------------------------------------------------------ entrance
   Logo first, then the line under it, the scene, the display line, the
   links, fading up 110 to 400ms apart. Opt-in: enter.js adds .enter only
   when the page is on screen and motion is allowed, and .entered 2.4s later
   switches it off, so the text never depends on an animation to be seen.
   No blur in the keyframes: Safari can drop a background-clip:text element
   (the display line) when a filter animates on it. */
.enter .logo, .enter .tag, .enter .soon, .enter .links { animation: enter 900ms var(--ease-out) both; }
.enter .tag { animation-delay: 110ms; }
.enter .stage { animation: fade 700ms ease 180ms both; }
.enter .soon { animation-delay: 300ms; }
.enter .links { animation-delay: 400ms; }
.entered .logo, .entered .tag, .entered .soon, .entered .links, .entered .stage { animation: none; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

/* The logo's character blinks now and then, and glances down at the crew
   building below it. Its eyes are wrapped in .eye groups at build time. */
.logo .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.3s 1.6s infinite; }
.logo .eye + .eye { animation-delay: 1.64s; }
.logo .eyes { animation: glance 11s var(--ease-in-out) 3s infinite; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  95.6% { transform: scaleY(0.1); }
}
@keyframes glance {
  0%, 26% { transform: translate(0, 0); }
  31%, 52% { transform: translate(14px, 24px); }
  57%, 100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------- the scene */
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world > * { position: absolute; left: 0; top: 0; }

.frame {
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(27, 24, 41, 0.8), rgba(19, 17, 29, 0.8));
  border: 1px solid transparent;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 700ms var(--ease-out), border-color 700ms ease;
}
.framed .frame { opacity: 1; border-color: var(--line-2); }
.frame .grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(220, 210, 255, 0.13) 1px, transparent 1.3px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
}
.frame .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.frame .dots { display: flex; gap: 6px; }
.frame .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(220, 210, 255, 0.16); }
.tall .frame .dots { display: none; }

.url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  min-width: 150px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  white-space: nowrap;
}
.tall .url { min-width: 124px; height: 18px; font-size: 10.5px; }
.url .lock {
  width: 0;
  height: 10px;
  fill: var(--fg-3);
  opacity: 0;
  transition: opacity 300ms var(--ease-out), width 300ms var(--ease-out);
}
.url.live .lock { width: 9px; opacity: 1; }
.url .caret { width: 1px; height: 12px; background: var(--action-hi); animation: caret 1.05s steps(1) infinite; }
.url.typing .caret { animation: none; opacity: 1; }
.url.live .caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }

.slot {
  z-index: 1;
  border: 1.5px dashed rgba(220, 210, 255, 0.22);
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.framed .slot { opacity: 1; }
.framed .slot.off { opacity: 0; transition-delay: 0ms; }

.block { z-index: 2; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.block.lift { z-index: 3; }

.b-nav {
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}
.b-nav i { display: block; flex: none; }
.b-nav .mark { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--sky), var(--action) 55%, #1450D6); }
.b-nav .bar { height: 6px; border-radius: 3px; background: rgba(171, 166, 191, 0.55); }
.b-nav .w1 { width: 58px; background: rgba(245, 243, 251, 0.78); }
.b-nav .w2 { width: 26px; }
.b-nav .sp { flex: 1; }
.b-nav .pill { width: 42px; height: 16px; border-radius: 8px; background: var(--action); margin-left: 4px; }
.b-nav .burger { display: none; width: 14px; height: 2px; border-radius: 1px; background: rgba(171, 166, 191, 0.7); box-shadow: 0 -4px 0 rgba(171, 166, 191, 0.7), 0 4px 0 rgba(171, 166, 191, 0.7); }
.tall .b-nav .w1 { width: 44px; }
.tall .b-nav .w2, .tall .b-nav .pill { display: none; }
.tall .b-nav .burger { display: block; }

.b-line { background: linear-gradient(90deg, #F5F3FB, #D8D2EA); }

.b-btn {
  background: linear-gradient(180deg, var(--action-hi), var(--action));
  box-shadow: 0 3px 0 #1A5FBF, inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-btn .lab { display: block; width: 46%; height: 7px; border-radius: 4px; background: rgba(11, 10, 18, 0.55); }

.b-art {
  background:
    radial-gradient(110% 90% at 28% 18%, rgba(156, 214, 255, 0.2), transparent 62%),
    linear-gradient(160deg, #221E35, #16131F);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.b-art > * { grid-area: 1 / 1; }
.b-art .halo {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 180%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, #58B0E8), transparent);
  opacity: 0.32;
}
.b-art img { position: relative; }

.b-card {
  background: linear-gradient(180deg, #17142A, var(--bg-1));
  border: 1px solid var(--line-2);
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 7px;
  align-content: start;
}
.b-card i { display: block; }
.b-card .av { border-radius: 50%; background: rgba(255, 255, 255, 0.04); }
.b-card .l1 { width: 72%; height: 7px; border-radius: 4px; background: rgba(245, 243, 251, 0.78); }
.b-card .l2 { width: 48%; height: 6px; border-radius: 3px; background: rgba(171, 166, 191, 0.5); }
.b-card .hire { align-self: end; width: 52px; height: 18px; border-radius: 9px; background: var(--action); }
.tall .b-card { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-content: center; }
.tall .b-card .av { grid-row: 1 / span 2; }
.tall .b-card .l1 { width: 90%; align-self: end; }
.tall .b-card .l2 { width: 60%; align-self: start; grid-column: 2; }
.tall .b-card .hire { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 42px; }

/* A piece's contents land after the piece does, 70ms apart, with a spring. */
.block .pop {
  opacity: 0;
  transform: translateY(5px) scale(0.9);
  transition: opacity 350ms var(--ease-out), transform 520ms var(--spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.block.on .pop { opacity: 1; transform: none; }

.front {
  z-index: 3;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--c, #fff) 22%, var(--c, #fff) 78%, transparent);
  box-shadow: 0 0 8px var(--c, #fff), 0 0 20px var(--c, #fff);
  opacity: 0;
  transition: opacity 180ms ease;
}

.shine-clip { z-index: 4; overflow: hidden; pointer-events: none; }
.shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(200, 230, 255, 0) 22%, rgba(200, 230, 255, 0.16) 50%, rgba(200, 230, 255, 0) 78%, transparent 100%);
  transform: translateX(-110%);
}

.trace { z-index: 4; overflow: visible; pointer-events: none; }
.trace rect { fill: none; }
.trace .draw { stroke: var(--sky); stroke-width: 1.5; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0; transition: opacity 800ms ease; }
.drawing .trace .draw { opacity: 0.9; }
.framed .trace .draw { opacity: 0; }
.trace .beam { stroke: var(--action-hi); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90 910; opacity: 0; transition: opacity 300ms ease; }
.trace .beam.soft { stroke-width: 7; filter: url(#fa-glow); }
.beaming .trace .beam { opacity: 1; }
.beaming .trace .beam.soft { opacity: 0.8; }

.bot { z-index: 5; pointer-events: none; }
.bot canvas { display: block; }
.fx { pointer-events: none; }
.fx.back { z-index: 4; }
.fx.front { z-index: 7; }

.b-card .av { position: relative; }
.b-card .av canvas { position: absolute; }
.b-card { transition: border-color 280ms ease, box-shadow 280ms ease; }
.b-card.hired {
  border-color: rgba(76, 159, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(76, 159, 255, 0.3), 0 0 34px rgba(43, 140, 255, 0.3);
}
.b-card .hire { transition: background-color 200ms ease; }
.b-card.hired .hire { background: var(--action-hi); }

/* ------------------------------------------------------- reduced motion
   The finished site, the crew at rest, and nothing that moves. */
@media (prefers-reduced-motion: reduce) {
  .soon { -webkit-text-fill-color: currentColor; background: none; }
  .logo .eye, .logo .eyes { animation: none; }
  .url .caret { animation: none; }
  .block .pop, .slot, .frame { transition: none; }
}