/* Tall colour sections ("halls"), feature tiles with looping visuals, connector lines, and the
   navbar that takes on the colour of the section beneath it. Loop keyframes live in motion.css. */

/* ------------------------------------------------------------------ navbar themes */

/* landing.js sets data-theme on the header from the section's data-nav. */
.site-header {
  --nav-ink: var(--color-ink);
  --nav-muted: var(--color-ink-muted);

  color: var(--nav-ink);
  transition:
    background-color 360ms var(--ease-out),
    border-color 360ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    color 360ms var(--ease-out);
}

.site-header .site-nav__links {
  color: var(--nav-muted);
}

.site-header .nav-link:hover {
  color: var(--nav-ink);
}

.site-header[data-theme="navy"],
.site-header[data-theme="violet"],
.site-header[data-theme="blue"],
.site-header[data-theme="black"] {
  --nav-ink: #fff;
  --nav-muted: rgba(255, 255, 255, 0.72);

  box-shadow: none;
}

.site-header[data-theme="navy"] {
  border-bottom-color: var(--color-navy-line);
  background: rgba(4, 6, 46, 0.88);
}

.site-header[data-theme="violet"] {
  border-bottom-color: var(--color-violet-line);
  background: rgba(31, 10, 77, 0.88);
}

.site-header[data-theme="blue"] {
  border-bottom-color: var(--color-blue-line);
  background: rgba(23, 61, 245, 0.9);
}

.site-header[data-theme="black"] {
  border-bottom-color: var(--color-black-line);
  background: rgba(11, 11, 14, 0.88);
}

/* On blue, the primary button would vanish: flip it to white. */
.site-header[data-theme="blue"] .button--primary {
  background: #fff;
  color: var(--color-blue-600);
}

/* ------------------------------------------------------------------ hall */

.hall {
  padding-top: 160px;
  padding-bottom: 160px;
}

.hall__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
  text-align: center;
}

.hall__title {
  max-width: 16ch;
}

.hall__lede {
  max-width: 38rem;
}

.hall__feature {
  margin-bottom: var(--space-8);
}

/* Bordered list of features with a small icon, like readme's feature rows. */
.feature-list {
  width: 100%;
  border-top: 1px solid var(--list-line, var(--color-line));
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--list-line, var(--color-line));
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
}

.feature-list__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--list-line, var(--color-line));
  border-radius: 6px;
  color: var(--list-icon, var(--color-blue-400));
  font-size: 13px;
}

.feature-list--violet {
  --list-line: var(--color-violet-line);
  --list-icon: var(--color-violet-300);
}

.feature-list--blue {
  --list-line: var(--color-blue-line);
  --list-icon: #fff;
}

/* ------------------------------------------------------------------ connectors */

/* Coloured stair-step lines between blocks (readme's circuit lines). Drawn on reveal. */
.connectors {
  display: none;
  width: 100%;
  height: 140px;
  margin: calc(var(--space-6) * -1) 0 0;
  overflow: visible;
}

.connectors--short {
  height: 100px;
  margin: var(--space-6) 0 var(--space-6);
}

@media (min-width: 900px) {
  .connectors {
    display: block;
  }
}

/* Paths carry pathLength="1", so a dash of 1 covers the whole line whatever its real length. */
.connectors__line {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--ease-out);
}

.connectors.is-visible .connectors__line {
  stroke-dashoffset: 0;
}

.connectors__line--sky {
  stroke: #33b6ff;
}

.connectors__line--pink {
  stroke: #ff5ccf;
}

.connectors__line--green {
  stroke: #31e07b;
}

/* ------------------------------------------------------------------ tiles */

.tiles {
  --tile-line: rgba(255, 255, 255, 0.12);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--tile-line);
  border-radius: var(--radius-lg);
}

.panel--violet .tiles {
  --tile-line: var(--color-violet-line);
}

.panel--blue .tiles {
  --tile-line: var(--color-blue-line);
}

.panel--black .tiles {
  --tile-line: var(--color-black-line);
}

@media (min-width: 900px) {
  .tiles--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--tile-line);
}

.tile:last-child {
  border-bottom: 0;
}

@media (min-width: 900px) {
  .tile {
    border-right: 1px solid var(--tile-line);
    border-bottom: 0;
  }

  .tile:last-child {
    border-right: 0;
  }
}

/* Small nodes on the grid lines at the tile corners. */
.tile::before {
  --node: radial-gradient(circle, transparent 2.5px, var(--tile-line) 2.5px, var(--tile-line) 3.5px, transparent 4px);

  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--node);
  content: "";
}

.tiles--centered .tile {
  align-items: center;
  text-align: center;
}

.tile__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--tile-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.tiles--centered .tile__visual {
  width: 100%;
}

.tile__tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.tile__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.tile__title--big {
  font-size: var(--text-3xl);
}

.tile__title em {
  font-style: italic;
}

.muted-italic {
  color: rgba(255, 255, 255, 0.55);
}

.tile__body {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------------ visual: research path */

.path-graph {
  width: 100%;
  max-width: 420px;
  overflow: visible;
}

.path-graph__edge {
  fill: none;
  stroke: rgba(195, 164, 255, 0.28);
  stroke-width: 1.5;
}

/* A dashed copy of the route with dashes travelling along it. */
.path-graph__edge--flow {
  stroke: var(--color-violet-300);
  stroke-dasharray: 4 10;
  stroke-linecap: round;
}

.path-graph__node circle {
  fill: var(--color-violet-950);
  stroke: var(--color-violet-300);
  stroke-width: 1.5;
}

.path-graph__node--end circle {
  fill: var(--color-violet-500);
}

.path-graph__node text {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 11px;
}

.path-graph__pulse {
  fill: #fff;
  filter: drop-shadow(0 0 4px var(--color-violet-300));
}

.path-graph__pulse--alt {
  fill: #ff9de6;
}

/* ------------------------------------------------------------------ visual: page scan */

.scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.scan__page {
  position: relative;
  display: grid;
  gap: 8px;
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-violet-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
}

.scan__url {
  margin-bottom: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan__page i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.scan__beam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(195, 164, 255, 0.35), transparent);
  border-bottom: 1px solid var(--color-violet-300);
}

.scan__notes {
  display: grid;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.scan__notes li {
  padding: 6px 8px;
  border: 1px solid var(--color-violet-line);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.85);
}

.scan__notes .scan__ok {
  border-color: rgba(95, 224, 185, 0.4);
  color: #5fe0b9;
}

/* ------------------------------------------------------------------ visual: threshold chart */

.cross-chart {
  width: 100%;
  overflow: visible;
}

.cross-chart__threshold {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-dasharray: 5 5;
  stroke-width: 1;
}

.cross-chart__label {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
}

.cross-chart__line {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.cross-chart__dot {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

.wake-chip {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 8px 20px -8px rgba(4, 6, 46, 0.5);
  color: var(--color-blue-600);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.wake-chip img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* ------------------------------------------------------------------ visual: tick list */

.tick-list {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 280px;
}

.tick-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--color-blue-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
}

.tick-list__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
}

/* The tick mark inside the box. */
.tick-list__box::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-blue-600);
  border-bottom: 2px solid var(--color-blue-600);
  content: "";
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
}

.free-meter {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.free-meter b {
  margin-left: 6px;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 500;
}

/* ------------------------------------------------------------------ visual: metric cloud */

.metric-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 300px;
}

.metric-cloud li {
  padding: 8px 14px;
  border: 1px solid var(--color-blue-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
}

/* ------------------------------------------------------------------ visual: struck advice */

.strike-chip {
  position: relative;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: var(--color-black-800);
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  white-space: nowrap;
}

.strike-chip i {
  position: absolute;
  top: 52%;
  left: 14px;
  right: 14px;
  height: 2px;
  background: #ffb547;
  transform-origin: left;
}

.strike-chip__verdict {
  margin-top: var(--space-3);
  color: #ffb547;
  font-size: 12px;
}

/* ------------------------------------------------------------------ visual: permissions */

.perm-list {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 260px;
  text-align: left;
}

.perm-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--color-black-line);
  border-radius: var(--radius-md);
  background: var(--color-black-800);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.perm-list .is-allowed span {
  color: #5fe0b9;
}

.perm-list .is-denied {
  color: rgba(255, 255, 255, 0.5);
}

.perm-list .is-denied span {
  color: #ffb547;
}

/* ------------------------------------------------------------------ visual: budget cap */

.budget {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 280px;
  text-align: left;
}

.budget__label {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.budget__label span {
  color: #ffb547;
}

.budget__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
}

.budget__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue-400), #ffb547);
}

.budget__cap {
  position: absolute;
  top: -5px;
  left: 82%;
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: #ffb547;
}

.budget__stop {
  color: #ffb547;
  font-size: 12px;
}

/* ------------------------------------------------------------------ rules under the tiles */

.panel--black .rules-layout {
  margin-top: 0;
}

@media (max-width: 899px) {
  .hall {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .tile {
    padding: var(--space-5);
  }

  .tile__visual {
    min-height: 200px;
  }
}