/* The Immortals: the team's apps. The same look as PR Roulette - FARO navy
   across the top, royal blue for what you can click, a spark of orange, cool
   greys - so going from here into an app feels like one place. */

:root {
  --font: -apple-system, BlinkMacSystemFont, Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --r-lg: 8px;
  --r-sm: 4px;

  color-scheme: light;
  --bg: #f1f4f6;
  --band: linear-gradient(120deg, #01426a 0%, #003353 55%, #081e2e 100%);
  --surface: #ffffff;
  --border: #d9e0e5;
  --divider: #e6ebef;
  --text: #2f3234;
  --text-2: #52595d;
  --text-3: #7d868b;
  --heading: #01426a;
  --primary: #3455db;
  --primary-ink: #2945c2;
  --shadow: 0 1px 2px rgba(8, 30, 46, .12), 0 2px 6px rgba(8, 30, 46, .08);
  --shadow-lift: 0 4px 10px rgba(8, 30, 46, .12), 0 12px 28px rgba(8, 30, 46, .14);
  --beam: rgba(255, 255, 255, .09);

  --art: linear-gradient(150deg, #01426a 0%, #003353 60%, #081e2e 100%);
  --slice-a: #ffffff;
  --slice-b: #f1f4f6;
  --peg: #9aa8b2;
  --soon: #f8fafb;
  --note: #ffffff;
  --note-line: #e1e7ec;
  --note-ink: #8c979e;
  --note-title: #01426a;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081e2e;
  --surface: #0d2738;
  --border: #1d4059;
  --divider: #183850;
  --text: #e8eef3;
  --text-2: #a3b5c2;
  --text-3: #7d91a0;
  --heading: #ffffff;
  --primary-ink: #9db0ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35);
  --beam: rgba(255, 255, 255, .06);

  --art: linear-gradient(150deg, #003353 0%, #06263b 60%, #04131e 100%);
  --slice-a: #113047;
  --slice-b: #0d2738;
  --peg: #4f6b80;
  --soon: #0b2232;
  --note: #113047;
  --note-line: #1f4561;
  --note-ink: #5f7d92;
  --note-title: #a3b5c2;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .2s;
}

button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------ backdrop */

/* FARO navy across the top, with the cards resting on its lower edge. */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 352px;
  background: var(--band);
}

/* Faint spotlights sweeping from above, as in PR Roulette. */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.beam {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: 100vmax;
  height: 145vh;
  margin-left: -50vmax;
  transform-origin: 50% 0;
  background: conic-gradient(from 167deg at 50% 0%, transparent 0deg, var(--beam) 10deg, var(--beam) 16deg, transparent 26deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .5) 45%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .5) 45%, transparent 85%);
  animation: sweep var(--t) ease-in-out var(--d) infinite alternate;
  will-change: transform;
}

@keyframes sweep {
  from { transform: rotate(var(--a)); }
  to { transform: rotate(var(--b)); }
}

.b1 { --x: 8%; --a: 4deg; --b: -42deg; --t: 17s; --d: -3s; }
.b2 { --x: 36%; --a: 28deg; --b: -22deg; --t: 21s; --d: -9s; }
.b3 { --x: 66%; --a: -26deg; --b: 22deg; --t: 19s; --d: -5s; }
.b4 { --x: 94%; --a: -4deg; --b: 44deg; --t: 23s; --d: -12s; }

.shell {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px clamp(16px, 3vw, 32px) 40px;
}

/* ------------------------------------------------------------ top bar */

.topbar { display: flex; justify-content: flex-end; min-height: 44px; }

.toolbar { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.icon-btn .i { width: 20px; height: 20px; }

/* ------------------------------------------------------------ apps */

/* The name, large, in the middle of the band. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0 40px;
  color: #fff;
  text-align: center;
}

.logo {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .25);
}

.logo svg { width: 44px; height: 44px; }

.hero h1 { margin: 0; font-size: clamp(28px, 5vw, 38px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hero p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .74); }

.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 344px));
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apps > li { display: flex; min-width: 0; }

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}

a.app:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
a.app:active { transform: translateY(-1px); }
a.app:focus-visible { outline-offset: 3px; }

/* The app's picture: its own look in miniature, on FARO navy. */
.art {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  overflow: hidden;
  background: var(--art);
}

.art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 75% at 50% 58%, rgba(52, 85, 219, .32), transparent 70%);
}

.wheel { position: relative; width: 172px; height: 172px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.wheel .rim { fill: #01426a; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
:root[data-theme="dark"] .wheel .rim { fill: #003353; }
.wheel .dots circle { fill: rgba(255, 255, 255, .32); }
.wheel .dots .on { fill: #fff; }
.wheel .sl.s0 { fill: var(--slice-a); }
.wheel .sl.s1 { fill: var(--slice-b); }
.wheel .arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.wheel .peg { fill: var(--peg); }
.wheel .hub { fill: #3455db; stroke: #fff; stroke-width: 4; }
.wheel .hub-text { fill: #fff; font: 800 10.5px/1 var(--font); letter-spacing: .1em; text-anchor: middle; dominant-baseline: central; }
.wheel .pin { fill: #ff4500; }

.wheel .turn {
  transform-origin: 100px 100px;
  transition: transform 1.1s cubic-bezier(.2, .9, .25, 1);
}

a.app:hover .wheel .turn, a.app:focus-visible .wheel .turn { transform: rotate(150deg); }

/* Unfiltered's picture: two posts, one signed, one not, which fan out under the pointer. */
.notes { position: relative; width: 300px; max-width: 100%; height: 200px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); overflow: visible; }
.notes .note { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.2, .9, .25, 1); }
.notes .back { transform: rotate(-7deg); }
.notes .front { transform: rotate(4deg); }
.notes .note > rect:first-child { fill: var(--note); stroke: rgba(0, 0, 0, .06); }
.notes .bar { fill: var(--note-line); }
.notes .bar.strong { fill: var(--note-ink); }
.notes .bar.title { fill: var(--note-title); }
.notes .face.anon { fill: #52595d; }
.notes .mask { fill: #fff; }
.notes .initial { fill: #fff; font: 700 11px/1 var(--font); text-anchor: middle; dominant-baseline: central; }
.notes .spark { fill: #ff4500; stroke: var(--note); stroke-width: 2.5; transition: transform .6s cubic-bezier(.2, .9, .25, 1); transform-box: fill-box; transform-origin: 50% 50%; }
a.app:hover .notes .back, a.app:focus-visible .notes .back { transform: translate(-14px, 2px) rotate(-12deg); }
a.app:hover .notes .front, a.app:focus-visible .notes .front { transform: translate(10px, -4px) rotate(7deg); }
a.app:hover .notes .spark, a.app:focus-visible .notes .spark { transform: translate(10px, -6px) scale(1.15); }

.body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 16px; }

.title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--heading); }

.about { color: var(--text-2); font-size: 13.5px; }

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.body .about { margin-bottom: 8px; }

.path { font: 12.5px/1 var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary-ink); }
.open .i { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
a.app:hover .open .i { transform: translateX(3px); }

/* Room for the next app. */
.app.soon {
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 320px;
  padding: 24px;
  border: 1.5px dashed color-mix(in srgb, var(--text-3) 45%, var(--border));
  background: var(--soon);
  box-shadow: none;
  text-align: center;
}

.soon .title { color: var(--text-2); font-size: 15px; }
.soon .about { max-width: 26ch; color: var(--text-3); font-size: 13px; }

.soon-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-3);
}

.soon-icon .i { width: 20px; height: 20px; }

@media (max-width: 520px) {
  body::before { height: 300px; }
  .hero { margin-bottom: 28px; }
  .logo { width: 56px; height: 56px; }
  .logo svg { width: 38px; height: 38px; }
  .art { height: 176px; }
  .wheel { width: 148px; height: 148px; }
  .app.soon { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .beam { animation: none; }
  .app, .wheel .turn, .open .i { transition: none; }
  a.app:hover, a.app:active { transform: none; }
  a.app:hover .wheel .turn, a.app:focus-visible .wheel .turn { transform: none; }
  .notes .note, .notes .spark { transition: none; }
  a.app:hover .notes .back, a.app:focus-visible .notes .back { transform: rotate(-7deg); }
  a.app:hover .notes .front, a.app:focus-visible .notes .front { transform: rotate(4deg); }
  a.app:hover .notes .spark, a.app:focus-visible .notes .spark { transform: none; }
}