/* pi.css — page 7, pi extensions (js/sections/pi.js). */

.pi {
  height: 280vh;
}

.pi__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the icon field dissolves at the top and bottom instead of ending on an edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

.pi__rects {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* the 16×16 implicit grid, centred */
/* invisible: the 16×16 grid box the rectangles assemble on (measured by pi.js) */
.pi__mark {
  --box: min(84vh, 84vw, 980px);
  position: absolute;
  left: calc(50% - var(--box) / 2);
  top: calc(50% - var(--box) / 2);
  width: var(--box);
  height: var(--box);
  pointer-events: none;
}

/* unit square scaled by JS (transform-origin 0 0), colour blends grey → ink */
.pi__rect {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  background: color-mix(in srgb, var(--fg) calc(var(--white, 0) * 100%), #8a8a8f);
  will-change: transform, opacity;
}

.pi__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(36px, 10vh, 110px);
  pointer-events: none;
}

/* keeps the copy legible over the drifting icons */
.pi__copy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 55% at 0% 100%, var(--bg) 25%, transparent 75%);
}

.pi__title {
  font-size: clamp(38px, 5.6vw, 96px);
  text-shadow: 0 4px 40px var(--bg);
}

.pi__body {
  max-width: 54ch;
  margin-top: 18px;
  color: var(--fg-muted);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.6;
  opacity: var(--assembled, 0);
  transform: translateY(calc((1 - var(--assembled, 0)) * 16px));
}

.pi__link {
  margin-top: 14px;
  align-self: flex-start;
  pointer-events: auto;
  color: var(--fg);
  font-size: 14px;
  text-underline-offset: 4px;
  opacity: var(--assembled, 0);
}

html:not(.js) .pi {
  height: auto;
}

html:not(.js) .pi .pin__stage {
  position: static;
  height: auto;
  padding: 120px 0;
}

html:not(.js) .pi__copy {
  position: static;
}