/* Layout layer. Shell, sections, grid bricks, rail, reveal. */

.shell {
  position: relative;
  width: 100%;
  overflow-x: clip;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: var(--hair) solid var(--line);
  isolation: isolate;
}

.section:first-of-type {
  border-top: 0;
}

.section__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s7);
  padding-bottom: var(--s4);
  border-bottom: var(--hair) solid var(--line);
  flex-wrap: wrap;
}

/* Inside a revealing section the rule draws itself in, like a line being ruled
   across the page. Outside one it is simply the border above, so secondary
   pages are unaffected. */
.reveal .section__head {
  border-bottom-color: transparent;
}

.reveal .section__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--hair);
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 760ms var(--ease) 140ms;
}

.reveal.is-in .section__head::after {
  transform: none;
}

.section__index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.section__index::before {
  content: "";
  width: 24px;
  height: var(--hair);
  background: var(--line-strong);
}

.section__coord {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  color: var(--text-3);
  opacity: 0.75;
}

.section__title {
  font-size: var(--fs-2xl);
  max-width: 22ch;
}

.grid {
  display: grid;
  gap: var(--s6);
}

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

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

.grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* Grid bricks
   Offset lattice drawn with gradients on a pseudo element, masked so it fades
   out toward the section edges instead of stopping in a hard line. */

.bricks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--brick) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--brick) var(--hair), transparent var(--hair)),
    linear-gradient(to right, var(--brick) var(--hair), transparent var(--hair));
  background-size:
    var(--brick-col) calc(var(--brick-row) * 2),
    100% var(--brick-row),
    var(--brick-col) calc(var(--brick-row) * 2);
  background-position:
    0 0,
    0 0,
    calc(var(--brick-col) / 2) var(--brick-row);
  -webkit-mask-image: radial-gradient(
    120% 90% at 50% 40%,
    #000 25%,
    rgba(0, 0, 0, 0.55) 62%,
    transparent 100%
  );
  mask-image: radial-gradient(
    120% 90% at 50% 40%,
    #000 25%,
    rgba(0, 0, 0, 0.55) 62%,
    transparent 100%
  );
}

.bricks--fine::before {
  --brick-col: 32px;
  --brick-row: 16px;
}

.bricks--wide::before {
  --brick-col: 128px;
  --brick-row: 64px;
}

.bricks--dense::before {
  --brick: var(--brick-strong);
}

/* Footer field. Fades in from the top and holds full strength at the bottom,
   so the lattice builds up behind the wordmark rather than fading away from it. */
.bricks--footer::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000);
  mask-image: linear-gradient(to bottom, transparent, #000 38%, #000);
}

/* Live sweep travelling down the lattice */
.bricks--live::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 42%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--glow), transparent);
  animation: brick-sweep 14s linear infinite;
}

@keyframes brick-sweep {
  0% {
    transform: translateY(-60%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(240%);
    opacity: 0;
  }
}

/* Reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal--d1 {
  transition-delay: 70ms;
}
.reveal--d2 {
  transition-delay: 140ms;
}
.reveal--d3 {
  transition-delay: 210ms;
}

/* Rail. Fixed section legend with a scroll progress line. */

.rail {
  position: fixed;
  top: 50%;
  right: clamp(12px, 2vw, 28px);
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);

  /* Fixed width. Labels float outside the box, so the rail never resizes
     and the items never shift as the active section changes. */
  width: var(--rail-w);
  flex: none;
}

.rail__progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.rail__progress span {
  display: block;
  width: 100%;
  height: var(--scroll-progress, 0%);
  background: var(--text);
  transition: height var(--t-micro) linear;
}

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.rail__item:hover,
.rail__item:focus-visible {
  color: var(--text);
  background: var(--surface-2);
}

/* The label floats outside the rail box rather than sitting inside it.
   Nothing reflows when it appears, the rail keeps its compact resting width,
   and the name is always written out in full with no truncation. */
.rail__name {
  position: absolute;
  right: calc(100% - var(--s2));
  top: 50%;
  white-space: nowrap;
  padding: 5px var(--s3);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.rail__index {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.rail:hover .rail__name,
.rail__item:focus-visible .rail__name,
.rail__item.is-active .rail__name {
  opacity: 1;
  transform: translate(0, -50%);
}

.rail__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.rail__item.is-active {
  color: var(--text);
}

.rail__item.is-active .rail__dot {
  background: var(--text);
  transform: scale(1.5);
}

@media (min-width: 1120px) {
  .rail {
    display: flex;
  }
}

/* Responsive */

@media (max-width: 900px) {
  .grid--split,
  .grid--2,
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .section__title {
    max-width: none;
  }
}