/* ═══════════════════════════════════════════════════════════
   PIPER, fx-surfaces.css
   Owns: edges, hairlines, elevation, shadow logic, and the
   per-section rhythm that stops the page reading as nine
   identical dark rounded rectangles.

   Loads after styles.css and overrides border, border-radius
   and box-shadow declarations only. It does not touch color
   tokens, typography, spacing scale or grid structure, so it
   can be dropped in or pulled back out without moving anything
   on the page.

   Reuses the radius system already declared in styles.css
   (--r-surface, --r-inner, --r-micro, --r-pill) plus a fourth
   state this file introduces: zero radius, meaning "instrument,
   not surface." No new pixel radius is invented anywhere below.

   Every shadow here is neutral black at varying alpha. The
   brief reserves the single accent for specific existing uses
   elsewhere on the page, so elevation never borrows it: depth
   comes from real layered darkness, not from a colored glow.
   ═══════════════════════════════════════════════════════════ */

/* ── ELEVATION TOKENS ─────────────────────────────────────────
   Three tiers, named for what they mean rather than what they
   look like, so a future edit changes intent in one place. */
:root {
  --fx-e-flat:      none;
  --fx-e-lifted:    0 10px 24px rgb(0 0 0 / .4);
  --fx-e-object:    0 18px 40px rgb(0 0 0 / .45), 0 4px 10px rgb(0 0 0 / .3);
  --fx-e-artifact:  0 24px 60px rgb(0 0 0 / .5), 0 4px 12px rgb(0 0 0 / .35);
  --fx-e-card:      0 1px 0 rgb(255 255 255 / .04) inset, 0 22px 52px rgb(0 0 0 / .5), 0 4px 14px rgb(0 0 0 / .4);
  --fx-hair:        var(--line);
  --fx-hair-strong: var(--line-strong);
}

/* ── TICKER ───────────────────────────────────────────────────
   The strip already reads as printed marginalia (no radius, one
   hairline). Bounding it top and bottom finishes the idea: a
   ruled band sitting on the page edge, not a UI bar. */
.ticker {
  border-top: 1px solid var(--fx-hair);
}

/* ── HERO ─────────────────────────────────────────────────────
   The cover asset is the only photograph on the page that gets
   full surface treatment, so it needs to actually lift off the
   ground instead of sitting flush like every bordered box below
   it. The break-out cutout gets a two-layer cast shadow instead
   of the single flat one: near contact shadow plus a longer
   throw, which is what makes an object read as floating above a
   page rather than printed on it. Kept to two layers, not three,
   because a PNG alpha channel run through a third wide-blur
   drop-shadow is a repeated full-mask blur for a gain the eye
   cannot separate from what two layers already deliver. */
.hero__asset {
  box-shadow: var(--fx-e-artifact);
  border-color: var(--fx-hair-strong);
}

.hero__break {
  filter:
    drop-shadow(0 10px 18px rgb(0 0 0 / .55))
    drop-shadow(0 34px 64px rgb(0 0 0 / .5));
}

.quote-tile {
  box-shadow: var(--fx-e-lifted);
}

/* ── MARKET RAIL ──────────────────────────────────────────────
   Chart, swap-pressure and the transfer tape are three separate
   grid cells but one instrument. A card has a radius because it
   is an object sitting on a shelf; an instrument panel is bolted
   flush to the page, so all three drop to zero radius and lose
   their shadow, reading cold and precise next to the rounded,
   shadowed objects around them. */
.chart,
.pressure,
.tape {
  border-radius: 0;
  box-shadow: var(--fx-e-flat);
}

/* ── LOG (receipt + keeper quote) ────────────────────────────
   The quote stays exactly as it already is: no border, no
   background, because a human voice is not a container. The
   receipt is the one artifact in this pairing, so it is the one
   that gets to cast a real shadow, on top of the perforation it
   already has. */
.receipt {
  box-shadow: var(--fx-e-artifact);
  border-color: var(--fx-hair);
}

/* ── THE FILE (bento) ─────────────────────────────────────────
   Five cells, three edge languages instead of one repeated
   recipe. The photo cell is a viewport onto something real, so
   it gets an inset ring plus a cast shadow, the only cell that
   behaves like glass over a picture rather than paper around
   text. The spec cell already reads as ledger paper via its
   rule pattern in styles.css; a dashed edge finishes that read
   as a field-notebook page rather than a card that happens to
   have lines in it. The lead quote cell keeps the full surface
   radius since it carries the most weight in the grid; the two
   supporting cells step down to the inner radius so the grid has
   a visible hierarchy instead of five equal boxes. */
.cell--name {
  border-radius: var(--r-surface);
}

.cell--parents,
.cell--sister {
  border-radius: var(--r-inner);
}

.cell--spec {
  border-radius: var(--r-inner);
  border-style: dashed;
  border-color: var(--fx-hair-strong);
}

.cell--photo {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), var(--fx-e-lifted);
}

@media (prefers-reduced-motion: no-preference) {
  .cell--photo {
    transition: box-shadow .25s var(--ease);
  }
  .cell--photo:hover {
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6), var(--fx-e-object);
  }
}

/* ── CAREERS DECK ─────────────────────────────────────────────
   Thirteen identical cards in a row read as a carousel, not a
   contact sheet. Dropping the radius one step and staggering the
   shadow depth by position (nearer cards read heavier, the way
   a loose stack of prints actually falls) breaks the uniformity
   without touching layout, motion or the fan itself. */
.careers .card {
  border-radius: var(--r-inner);
  box-shadow: 0 16px 32px rgb(0 0 0 / .36);
}
.careers .card:nth-child(3n+2) { box-shadow: 0 22px 44px rgb(0 0 0 / .42); }
.careers .card:nth-child(3n+3) { box-shadow: 0 12px 26px rgb(0 0 0 / .32); }

/* ── MOON BAND ────────────────────────────────────────────────
   Full-bleed photography needs no border at all, but the page
   still changes register at this seam. An inset hairline top and
   bottom marks the threshold without drawing a frame around the
   image, which would fight the full-bleed point of the section. */
.band {
  box-shadow: inset 0 1px 0 var(--fx-hair-strong), inset 0 -1px 0 var(--fx-hair-strong);
}

/* ── GAME ─────────────────────────────────────────────────────
   The arcade is the one section that is explicitly an instrument
   reading, not a photograph or a document, so it gets a tighter
   radius and a pair of corner ticks instead of a shadow. Ticks
   read as a diagram's registration marks: the panel is being
   measured, not floated. Positioned at the inset edge rather than
   outside it so they never collide with the panel's own
   overflow: hidden. */
.arcade {
  position: relative;
  border-radius: var(--r-inner);
  box-shadow: var(--fx-e-flat);
}
.arcade::before,
.arcade::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 1px solid var(--fx-hair-strong);
  pointer-events: none;
}
.arcade::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.arcade::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ── MEMES (sticky stack) ─────────────────────────────────────
   The fan rotation already lives in styles.css. What it lacks is
   weight: every card in the stack casts the same shadow, so the
   deal reads flat even though the cards are angled. Growing the
   shadow with position in the stack gives the pile actual depth,
   the way real prints thrown down one after another would. */
.meme:nth-child(1) .meme__btn { box-shadow: 0 14px 32px rgb(0 0 0 / .4); }
.meme:nth-child(2) .meme__btn { box-shadow: 0 18px 38px rgb(0 0 0 / .42); }
.meme:nth-child(3) .meme__btn { box-shadow: 0 22px 46px rgb(0 0 0 / .45); }
.meme:nth-child(4) .meme__btn { box-shadow: 0 26px 54px rgb(0 0 0 / .48); }
.meme:nth-child(5) .meme__btn { box-shadow: 0 30px 62px rgb(0 0 0 / .5); }
.meme:nth-child(6) .meme__btn { box-shadow: 0 34px 70px rgb(0 0 0 / .52); }

/* ── VERIFY ───────────────────────────────────────────────────
   Already a ruled list rather than cards, correctly. A dashed
   rule instead of a solid one is the difference between a table
   and a bibliography: it says "each line is a separate citation"
   instead of "these are rows of the same record." The note stays
   a shelf object, but a step down in radius keeps it reading as
   a footnote to the list rather than a sixth item competing with
   the cards used everywhere else on the page. */
.vrow {
  border-bottom-style: dashed;
  border-bottom-color: var(--fx-hair-strong);
}
.verify__list {
  border-top-style: dashed;
  border-top-color: var(--fx-hair-strong);
}
.verify__note {
  border-radius: var(--r-inner);
  box-shadow: var(--fx-e-flat);
}

/* ── TERMS ────────────────────────────────────────────────────
   Four bordered cards for four paragraphs of legal text is the
   exact pattern this page needs fewer of: reference material read
   better as a ruled table than as a shelf of boxes. The contract
   block is the one genuinely data-shaped object in the group, so
   it alone keeps a filled, flush-edged instrument treatment while
   its siblings lose their card entirely. */
.term {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: var(--fx-e-flat);
}
.term:nth-child(2n) {
  border-left: 1px solid var(--fx-hair);
  padding-left: clamp(1.5rem, 2.6vw, 2.25rem);
}
.term:nth-child(n+3) {
  border-top: 1px solid var(--fx-hair);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.ca {
  border-radius: 0;
  border-color: var(--fx-hair-strong);
  box-shadow: var(--fx-e-flat);
}

@media (max-width: 860px) {
  /* The grid collapses to one column at this breakpoint in
     styles.css. A left rule on even items would float in mid-air
     with nothing to its left, so the column rule is dropped for a
     single consistent top rule between every stacked paragraph. */
  .term:nth-child(2n) {
    border-left: 0;
    padding-left: 0;
  }
  .term:nth-child(n+2) {
    border-top: 1px solid var(--fx-hair);
    padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
    margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  }
  .term:nth-child(n+3) {
    margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  }
}

/* ── BUY (swap) ───────────────────────────────────────────────
   This is the one place on the page a visitor is operating a
   machine rather than reading a document, so it is the one place
   allowed to look like software: the deepest elevation on the
   page, a border that actually reads as a border, and the full
   surface radius. Every other panel in this file gave up some or
   all of that so this card would be the only one that means it. */
.swap {
  box-shadow: var(--fx-e-card);
  border-color: var(--fx-hair-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .swap {
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .swap:focus-within {
    border-color: var(--fx-hair-strong);
    box-shadow: var(--fx-e-card), 0 0 0 1px rgb(255 255 255 / .06);
  }
}