/* ── THE CODE WALL ───────────────────────────────────────────────────────────
   src/views/code-wall.js + public/js/code-wall.js. Every Code's card on a
   wall, four rows of them, the top two sliding left and the bottom two right;
   the Codes' words in the middle. The cards stand straight and flat (Arian:
   "Make the wall pics just straight no warp"). The script places and slides
   them; without it, and for anyone who asked for less motion, the rows stand
   still.

   A card is 4:5, like every Code card on this page, and as tall as four rows
   and their gaps allow. The wall is darkened — most in the middle, where the
   words stand — so the words read; the cards themselves are as they are. */
.cwall {
  --cw-h: min(20svh, 210px);
  --cw-w: calc(var(--cw-h) * .8);
  --cw-gap: calc(var(--cw-h) * .1);
  position: relative; isolation: isolate;
  height: 100svh; min-height: 34rem;
  overflow: clip;
  background: var(--black); color: #f2f4f7;
}
@media (max-width: 760px) { .cwall { --cw-h: min(16svh, 150px); } }
@media (max-height: 520px) { .cwall { min-height: 0; --cw-h: 24svh; } }

.cwall__stage { position: absolute; inset: 0; z-index: 0; }
.cwall__row {
  position: absolute; left: 50%;
  top: calc(50% + (var(--r, 0) - 1.5) * (var(--cw-h) + var(--cw-gap)) - var(--cw-h) / 2);
  height: var(--cw-h);
}
.cwall__card {
  flex: none; overflow: hidden;
  width: var(--cw-w); height: var(--cw-h);
  border-radius: calc(var(--cw-w) * .075);
  background: #0b0c10;
}
.cwall__card picture, .cwall__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Standing in a plain row until the script places them. */
.cwall:not(.is-live) .cwall__row { display: flex; gap: var(--cw-gap); transform: translateX(calc(-50% + (var(--odd, 0) - .5) * var(--cw-w))); }
.cwall.is-live .cwall__card { position: absolute; left: 0; top: 0; margin-left: calc(var(--cw-w) / -2); will-change: transform; }

/* Darker in the middle, where the words stand, and into the page's ground
   at the top and the bottom. */
.cwall__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 36% at 50% 50%, rgba(4, 5, 7, .82), rgba(4, 5, 7, 0) 100%),
    linear-gradient(180deg, var(--black) 0%, rgba(4, 5, 7, .3) 20%, rgba(4, 5, 7, .3) 80%, var(--black) 100%),
    rgba(4, 5, 7, .38);
}

/* ── The words ──────────────────────────────────────────────────────────── */
.cwall__inner {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: clamp(1rem, 2.4svh, 1.6rem);
  padding: var(--nav-h) var(--gutter) 0; text-align: center;
}
.cwall .cwall__inner .cwall__eyebrow {
  margin: 0; font-family: var(--font-ui); font-size: clamp(.62rem, .75vw, .72rem); line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 244, 247, .74);
}
.cwall__eyebrow span { color: rgba(242, 244, 247, .38); letter-spacing: .1em; }
/* rhythm.css sizes every h2 (and loads last), so this is written stronger. */
.cwall.env .cwall__inner .cwall__title {
  margin: 0; max-width: 18ch;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.8rem, 4.4vw, 3.9rem); line-height: 1.04; letter-spacing: .04em;
  color: #f2f4f7;
}
/* The way in: a control, so it is glass. */
.cwall__cta {
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 50px; padding: 0 1.6rem; margin-top: .4rem;
  border: 1px solid var(--btn-line); border-radius: 999px;
  background: var(--btn-skin); color: #f2f4f7;
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cwall__cta:hover { background: var(--btn-skin-hi); border-color: var(--btn-line-hi); }
.cwall__cta:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
/* A Code not open on this site, grey as it is everywhere (routes/home.js). */
.cwall__card--grey img { filter: grayscale(1) brightness(.85); }