/* S2 · Before / After (SITE-22). Corgi's "Our Unique Advantage" × Foreplay's before/after cards, from the v2 system.
   Two cards flush to the rails; each is a media panel (top) over its copy (Corgi). */

/* No section numeral (founder, 2026-10-31: "I do not like the 01 02 03"): a pixel eyebrow label over a one-column
   heading. Remove once SITE-20's .sec-head makes the numeral column opt-in. */
.ba .sec-head:not(:has(.sec-head__num)) { grid-template-columns: minmax(0, 1fr); }
.ba .sec-head:not(:has(.sec-head__num)) > * { grid-column: 1; }
.ba .sec-head__eyebrow { margin-bottom: 18px; }


.ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 24px + 3vw, 64px); }
.ba__card { padding: 0; display: flex; flex-direction: column; }
.ba__media { position: relative; isolation: isolate; overflow: hidden; height: clamp(320px, 220px + 10vw, 380px); flex: none; border-bottom: 1px solid var(--hairline); }
.ba__copy { padding: var(--card-pad); padding-top: clamp(20px, 16px + .8vw, 28px); }
.ba__label { display: flex; align-items: center; gap: 8px; font: 400 var(--t-pixel)/1 var(--font-pixel-ui); text-transform: uppercase; color: var(--ink-64); }
.ba__mark { width: 6px; height: 6px; flex: none; }
.ba__mark--before { background: var(--ink-32); box-shadow: 6px 0 0 rgb(21 19 15 / .12); margin-right: 6px; }
.ba__mark--after { background: var(--orange); box-shadow: 6px 0 0 var(--orange-soft); margin-right: 6px; }
.ba__title { margin-top: 14px; }
.ba__body { margin-top: 10px; max-width: 34em; }
.ba__card--before .accent { color: var(--ink-58); }

/* ── Before: the paper panel, Corgi's marquee and Foreplay's heap ── */
.ba__media--before { background: var(--paper); }
.ba__dots { position: absolute; inset: 0; z-index: -1; }
.ba-marquee { position: absolute; left: 0; right: 0; top: clamp(24px, 16px + 1vw, 32px); overflow: hidden; padding-block: 6px;
}
/* The pills fade out completely 24px (16px at 390) before the rails, so no text meets a rail (R1). */
.ba-marquee { --fade-in: var(--inset); -webkit-mask-image: linear-gradient(90deg, transparent var(--fade-in), #000 calc(var(--fade-in) + 64px), #000 calc(100% - var(--fade-in) - 64px), transparent calc(100% - var(--fade-in))); mask-image: linear-gradient(90deg, transparent var(--fade-in), #000 calc(var(--fade-in) + 64px), #000 calc(100% - var(--fade-in) - 64px), transparent calc(100% - var(--fade-in))); }
.ba-marquee__track { display: flex; width: max-content; will-change: transform; }
.ba-chain { display: flex; align-items: center; flex: none; }
/* Corgi's legacy pill (text and border in one hot accent, a pale fill, a soft outer ring), in our orange. */
.ba-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; flex: none; white-space: nowrap; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--orange-soft) 45%, #fff); border: 1.5px solid color-mix(in oklab, var(--orange) 55%, #fff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--orange-soft) 55%, transparent);
  font: 500 var(--t-small)/1 var(--font-body); letter-spacing: -.01em; color: var(--orange-ink); }
.ba-pill .pix-avatar { background: #fff; }
.ba-dash { width: 18px; height: 1.5px; flex: none; margin-inline: 6px; background: color-mix(in oklab, var(--orange) 50%, #fff); }

.ba-heap { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; }
.ba-heap__item { position: absolute; left: var(--x); bottom: var(--b); transform: rotate(var(--r)); transform-origin: 50% 100%; }
.ba-heap__item.is-keep { z-index: 2; }
/* A 44 px hit area on every piece (M4, SITE-25): the chips are 32–36 px tall; the extra is invisible. */
.ba-heap__item::before { content: ""; position: absolute; inset: -6px -2px; }
.ba-heap .chip { box-shadow: var(--shadow-sm); }
.ba-heap .chip:has(> .pix-avatar:first-child) { height: 36px; padding-left: 4px; }
.ba-heap .chip > .pix-avatar { width: 28px; height: 28px; }
.ba-tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-sm); }
.ba-tile .pix-avatar { width: 32px; height: 32px; }
.ba-tile .app-icon { width: 26px; height: 26px; border-radius: 7px; }
/* A dead "live" dot: posted, and nothing came back. */
.ba-void { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1.5px solid var(--ink-32); }
/* Foreplay: the heap fades back once it has landed (the JS fades it; this is the reduced-motion still); the two that
   carry the point stay. */
.ba-heap.is-settled .ba-heap__item:not(.is-keep) { opacity: .5; }

/* ── After: one calm loop on the textured gradient (the horizon runs through the core) ── */
/* No bottom border: .tex's veil would repeat into the 1px border strip as a dark line. */
.ba__media--after { padding: 0; border-radius: 0; border-bottom: 0; }
.ba__media--after > .ba-orbit { position: absolute; left: 50%; top: 50%; width: var(--ring); aspect-ratio: 1; translate: -50% -50%; --ring: min(72%, 270px); }
.ba-orbit__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ba-orbit__ring circle { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ba-orbit__spin { position: absolute; inset: 0; }
/* Each stage sits on the ring at a quarter turn from the last (top, right, bottom, left); the JS turns the ring by
   moving these, so the chips stay upright. */
.ba-orbit__slot { position: absolute; width: 0; height: 0; }
.ba-orbit__slot:nth-child(1) { left: 50%; top: 0; } .ba-orbit__slot:nth-child(2) { left: 100%; top: 50%; }
.ba-orbit__slot:nth-child(3) { left: 50%; top: 100%; } .ba-orbit__slot:nth-child(4) { left: 0; top: 50%; }
.ba-orbit.is-turning .ba-orbit__slot { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ba-orbit.is-turning .ba-stage { left: 50%; top: 50%; pointer-events: auto; }
.ba-stage { position: absolute; translate: -50% -50%; box-shadow: 0 0 0 1px rgb(37 37 39 / .08), 0 6px 16px -6px rgb(20 24 60 / .35); border-color: transparent; }
.ba-stage.is-lead { box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 0 0 4px rgb(255 255 255 / .22), 0 8px 20px -6px rgb(20 24 60 / .45); }

.ba-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--core); height: var(--core); display: grid; place-items: center; --core: 88px; }
/* The glow: warm light at the core, breathing in place (Jurni's fan glow, at the core's scale). */
.ba-core__glow { position: absolute; inset: -48px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 248 240 / .95) 0%, rgb(255 190 150 / .55) 30%, rgb(255 102 0 / .18) 58%, rgb(255 102 0 / 0) 100%); }
/* Corgi's mascot disc: white, with a three-ring halo, holding the logo's mark (SITE-30's sky-mark, "Through the sky";
   48px with its 16px clear space on desktop, 24px at ≤ 480). */
.ba-core__disc { position: relative; display: grid; place-items: center; width: var(--core); height: var(--core); border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 10px rgb(255 255 255 / .2), 0 0 0 22px rgb(255 255 255 / .09), 0 10px 30px -8px rgb(20 24 60 / .45); }
.ba-core__mark { display: grid; place-items: center; line-height: 0; }

.ba__media--after > .ba-frags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ba-frag { position: absolute; left: 0; top: 0; opacity: 0; box-shadow: var(--shadow-sm); background: color-mix(in oklab, var(--orange-soft) 45%, #fff); border-color: color-mix(in oklab, var(--orange) 45%, #fff); color: var(--orange-ink); }

/* ── 768 and down: the cards stack, each a designed layout ── */
@media (max-width: 860px) {
  .ba__grid { grid-template-columns: 1fr; }
  .ba__media { height: clamp(300px, 52vw + 120px, 400px); }
}
@media (max-width: 480px) {
  .ba-pill { height: 36px; font-size: 13px; padding-right: 12px; }
  .ba-pill .pix-avatar { width: 24px; height: 24px; }
  .ba-heap { height: 70%; }
  .ba-heap .chip { font-size: 13px; }
  .ba-heap__item { left: var(--xm, var(--x)); bottom: var(--bm, var(--b)); }
  .ba-tile { width: 44px; height: 44px; border-radius: 10px; }
  .ba-tile .pix-avatar { width: 28px; height: 28px; }
  .ba__media--after > .ba-orbit { --ring: min(54%, 200px); }
  .ba-core { --core: 64px; }
  .ba-heap .is-wide-only { display: none; }
  .ba-stage { font-size: 13px; }
}

/* ── The playable heap (before-after/heap.js) ── */
/* Once the physics owns the pieces it moves them by transform only, from their CSS place (no layout shift). */
.ba-heap.is-physics .ba-heap__item { transform-origin: 50% 50%; }
.ba-heap__item { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ba-heap__item.is-dragging { cursor: grabbing; z-index: 4; }
.ba-heap__item:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ba-heap__item img, .ba-heap__item svg { pointer-events: none; }
/* A piece carried across to the loop, and the pixel puff when the loop takes it. */
.ba-ghost { z-index: 60; pointer-events: none; box-shadow: var(--shadow-md); }
.ba-puff { position: fixed; z-index: 61; width: 4px; height: 4px; pointer-events: none; }