/* =====================================================================================================
   Blockchain page (SPEC 5.5) — every rule scoped under .page-blockchain.
   1. Hero ........ hex-decoded headline · the verbatim copy with its own SHA-256 · blockchain.jpg as a
                    duotone plate that lights its surroundings: a pointer glint, a tilt, and a signal
                    running along the photo's own dashed links (blocks and link ends light as it
                    arrives) · a wall of real hashes behind, one row re-mined every few seconds
   2. Circuit ..... the photo's last link continues off the plate as a dashed trace and runs down into the
                    chain lab's live dot (drawn by js/page-blockchain.js; on 21:9+ it also runs on to the
                    screen edge)
   3. Pillars ..... Secure / Transparent / Efficient, printed as blocks 2–4 of the chain (their real
                    pre-mined hashes) on one Trace Router bus; on 21:9+ the bus runs edge to edge
   4. Next link
   The chain lab between hero and pillars is the chain module (css/parts/chain.css); this file only
   sets its top padding and anchor offset on this page.
   Composition: portrait / square / narrow → stacked (headline · plate · copy); landscape ≥ 600px wide →
   copy | plate, the plate sized to fit the screen height and its column sized to the plate; short
   landscape phones → copy | plate with the fingerprint under the plate.
   Performance: the plate's photo is painted from the first frame (it is the LCP image); its entrance is
   a cover that opens over it. The signal's animations are one-shot and the script starts each cycle
   only while the plate is watched; the link glows are blurred once and only their opacity animates.
   ===================================================================================================== */

/* plate light: glint position (relative to the frame) and tilt; set by js/page-blockchain.js.
   At rest the glint sits on the frame's top-left edge, where it reads as rim light. */
@property --bc-gx { syntax: '<percentage>'; inherits: true; initial-value: 4%; }
@property --bc-gy { syntax: '<percentage>'; inherits: true; initial-value: 2%; }
@property --bc-rx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --bc-ry { syntax: '<angle>'; inherits: true; initial-value: 0deg; }


/* ---------------------------------------------------------------------------------------- 1. Hero */

/* the circuit layer (section 2) is positioned against main, so it can run from the hero into the lab */
.page-blockchain main {
    position: relative;
}

.page-blockchain .bc-hero {
    --bc-pad-t: calc(var(--header-offset) + clamp(1.25rem, 4.5vmin, 4.5rem));
    --bc-pad-b: clamp(2rem, 6vmin, 6rem);
    /* light and hex-wall centre; the script moves it onto the plate's centre */
    --bc-glow-x: 50%;
    --bc-glow-y: 46%;
    /* stacked: the plate takes at most this much height */
    --bc-plate-h: min(58svh, 52rem);
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    padding-block: var(--bc-pad-t) var(--bc-pad-b);
    overflow-x: clip;   /* glows and the no-JS link extension stop at the screen edge */
}

/* ledger-blue light behind the plate, a little violet bloom above it */
.page-blockchain .bc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 46% at var(--bc-glow-x) var(--bc-glow-y), rgba(var(--accent-rgb), .2), transparent 72%),
        radial-gradient(26% 34% at calc(var(--bc-glow-x) + 10%) calc(var(--bc-glow-y) - 16%), rgba(154, 107, 255, .09), transparent 70%);
}

.page-blockchain .bc-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- wall of hashes (filled by the script; nothing without JS). It fades out under the header, so no
       digit ever sits between the nav's labels. --- */
.page-blockchain .bc-hexwall {
    --bc-under-header: linear-gradient(transparent calc(var(--header-offset) - .25rem), #000 calc(var(--header-offset) + 2.5rem));
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    font: 400 clamp(.6875rem, .4rem + .8vmin, 1.375rem)/2.1 var(--font-mono);
    letter-spacing: .42em;
    white-space: pre;
    color: rgba(127, 227, 255, .07);
    -webkit-user-select: none;
    user-select: none;
    -webkit-mask-image: var(--bc-under-header), radial-gradient(64% 78% at var(--bc-glow-x) var(--bc-glow-y), #000 8%, rgba(0, 0, 0, .4) 50%, transparent 82%);
    -webkit-mask-composite: source-in;
    mask-image: var(--bc-under-header), radial-gradient(64% 78% at var(--bc-glow-x) var(--bc-glow-y), #000 8%, rgba(0, 0, 0, .4) 50%, transparent 82%);
    mask-composite: intersect;
}

/* 21:9 and wider: the wall becomes a full-bleed layer that fades below the header and at the bottom, and
   clears behind the copy column (--bc-qx0/--bc-qx1: its edges, set by the script) */
@media (min-aspect-ratio: 21/9) {
    .page-blockchain .bc-hexwall {
        --bc-clear: linear-gradient(90deg, #000 calc(var(--bc-qx0, 0%) - 5%), rgba(0, 0, 0, .12) var(--bc-qx0, 0%), rgba(0, 0, 0, .12) var(--bc-qx1, 0%), #000 calc(var(--bc-qx1, 0%) + 5%));
        color: rgba(127, 227, 255, .1);
        -webkit-mask-image: linear-gradient(transparent var(--header-offset), #000 calc(var(--header-offset) + 10%), #000 85%, transparent), var(--bc-clear);
        mask-image: linear-gradient(transparent var(--header-offset), #000 calc(var(--header-offset) + 10%), #000 85%, transparent), var(--bc-clear);
    }
}

.page-blockchain .bc-hex-rows {
    margin: -1em -2em;
}

/* glowing digits, never behind text: there the script hushes the wall instead */
.page-blockchain .bc-hexwall .is-lit {
    color: rgba(127, 227, 255, .46);
    text-shadow: 0 0 .7em rgba(77, 141, 255, .9);
}

.page-blockchain .bc-hexwall .is-mid {
    color: rgba(141, 182, 255, .2);
}

.page-blockchain .bc-hexwall .is-hush {
    color: rgba(127, 227, 255, .025);
}

/* --- grid: stacked by default (headline · plate · copy) --- */
.page-blockchain .bc-hero-grid {
    display: grid;
    grid-template-areas: "head" "plate" "body";
    gap: clamp(1.5rem, 4.5vmin, 3.25rem);
    align-items: center;
}

.page-blockchain .bc-hero-head,
.page-blockchain .bc-hero-body {
    min-width: 0;
    container-type: inline-size;
}

.page-blockchain .bc-hero-head { grid-area: head; }
.page-blockchain .bc-hero-body { grid-area: body; }

.page-blockchain .bc-eyebrow {
    margin-bottom: clamp(.75rem, 2.2vmin, 1.75rem);
}

/* narrow columns keep just "Decentralized systems" rather than wrapping on the separator */
@container (max-width: 20.99rem) {
    .page-blockchain .bc-eyebrow-lead { display: none; }
}

/* "Blockchain": fills its column — wide (125%) where there is room, normal width in narrow columns.
   The cqi factor comes from the word's measured advance (≈ 6.3em at 125%, 4.65em at 100%). */
.page-blockchain .bc-title {
    font-size: min(clamp(2.75rem, 1rem + 9vmin, 12rem), 20.5cqi);
    font-stretch: 100%;
    line-height: .95;
    letter-spacing: -.02em;
    white-space: nowrap;
}

@container (min-width: 36rem) {
    .page-blockchain .bc-title {
        font-size: min(clamp(2.75rem, 1rem + 9vmin, 12rem), 15cqi);
        font-stretch: 125%;
    }
}

.page-blockchain .bc-lede {
    max-width: 44ch;
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--text-2);
}

/* the paragraph's own SHA-256, printed like a ledger entry */
.page-blockchain .bc-fingerprint {
    display: grid;
    gap: .45rem;
    margin-top: clamp(1.25rem, 3.5vmin, 2.25rem);
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--accent-rgb), .5);
    container-type: inline-size;
}

.page-blockchain .bc-fp-label {
    font: 500 var(--t-mono)/1.4 var(--font-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* the long label needs ≈ 30 mono characters; narrower columns say "SHA-256 of this text" */
.page-blockchain .bc-fp-short { display: none; }

@container (max-width: 17.99rem) {
    .page-blockchain .bc-fp-long { display: none; }
    .page-blockchain .bc-fp-short { display: inline; }
}

/* Two rows of 32 digits. A digit advances .6em + .08em of spacing, so 32 need 21.76em; the box allows
   32.5 digits so the decode overlay (split into many runs, each rounded) still breaks at 32. The font
   follows the column, never below .6875rem: columns too narrow for that print three rows of 22. */
.page-blockchain .bc-fp-hash {
    display: block;
    width: min(100%, calc(32.5ch + 32 * .08em));
    font-size: clamp(.6875rem, 100cqi / 22.4, .8125rem);
    line-height: 1.65;
    letter-spacing: .08em;
    color: var(--accent-2);
    word-break: break-all;
}

@container (max-width: 15.25rem) {
    .page-blockchain .bc-fp-hash {
        width: calc(22.5ch + 22 * .08em);
        font-size: clamp(.6875rem, 100cqi / 15.3, .8125rem);
    }
}

.page-blockchain .bc-actions {
    margin-top: clamp(1.5rem, 4.5vmin, 2.75rem);
}

/* no JS: the lab below is a static (but real) chain, so the CTA says so and drops its live dot */
.page-blockchain .bc-cta-static,
:root:not(.js) .page-blockchain .bc-cta-live,
:root:not(.js) .page-blockchain .bc-cta .live-dot {
    display: none;
}

:root:not(.js) .page-blockchain .bc-cta-static {
    display: inline;
}

/* --- plate: never above 1.25× the 1024px source, never taller than its slot --- */
.page-blockchain .bc-plate {
    grid-area: plate;
    justify-self: center;
    width: min(100% - 2 * var(--tick-gap), 1280px, max(11rem, var(--bc-plate-h)) * 1.4993);
    max-width: none;
    transition: --bc-gx 900ms var(--ease-out), --bc-gy 900ms var(--ease-out), --bc-rx 900ms var(--ease-out), --bc-ry 900ms var(--ease-out);
}

.page-blockchain .bc-plate.is-tracking {
    transition-duration: 160ms;
}

.page-blockchain .bc-plate-frame {
    --bc-edge: rgba(127, 227, 255, .85);
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px -40px rgba(var(--accent-rgb), .55);
}

/* the frame's edge catches the light nearest the glint */
.page-blockchain .bc-plate-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(45% 65% at var(--bc-gx) var(--bc-gy), var(--bc-edge), transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.page-blockchain .bc-plate-media {
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}

.page-blockchain .bc-plate-media img {
    width: 100%;
    max-height: none;
    filter: url(#bc-duotone);
}

/* The picture lights its surroundings: a blurred copy behind the frame, like a screen in a dark room.
   The copy is a 48px thumbnail (414 bytes, inline), and its box is a little smaller than the photo's, so
   it never competes with the photo as the page's largest paint. */
.page-blockchain .bc-ambient {
    position: absolute;
    inset: 7% 2% -3%;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/webp;base64,UklGRpYBAABXRUJQVlA4IIoBAAAwCACdASowACAAPtFYpk4oJKOiMBVYAQAaCWoAnTLFvs7LIOgzelHVRajZRYknn1IAYT4fxDyZ8j4LGs4DLeMRy4xeS2X18it1QAD+/Zuj+gE+SfhEXGAN6RNQ/scu0pgecBgP4kY7WoEUpkit+giynL1KSW5jPYrbuzfrrS40t3Mw0qOOfpgkJSPCvbs84n46Cc/IhXencXDY3ukqEqNHI5lFig1zdhITicuLIuSsdkES0sfVAojn2OADz0Kql9D7gbtMU0gbKHfq3WtMWOmzc4JDmiUvBwHBMm49bPi3VI4ukcRHZ4wYny6ExbHS19xwTzCEPqYBHZ3QFQCRWM8o8NGqLmqIecuf7RmEl5iwdUb7m4SXV1hySxndlF+dFh9VBn5PEw9qNObJebbZW4vxdCUwuLlwwu6JrgarpcKHBOHUCeSHEBV/kVjbwD2sydtLxdfyZt2qzraEySwA1AzOYZ2/uyJYXChbIHZKQfo3dIUHqJvhhkuFAqCttiImJtQvZn8eXrFWAAAA") 50% / cover no-repeat;
    opacity: .5;
    filter: blur(clamp(24px, 3.5vw, 72px)) saturate(1.3);
}

/* faint display rows over the image */
.page-blockchain .bc-plate-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(3, 4, 10, .28) 0 1px, transparent 1px 3px);
    opacity: .55;
}

/* pointer glint: a Hash Cyan specular spot plus a glassy streak, both following --bc-gx/--bc-gy.
   Shown while it moves (motion allowed) or tracks the pointer; otherwise only the rim light remains. */
.page-blockchain .bc-glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity var(--dur-3);
    background:
        radial-gradient(24% 36% at var(--bc-gx) var(--bc-gy), rgba(127, 227, 255, .22), rgba(77, 141, 255, .08) 45%, transparent 78%),
        linear-gradient(112deg, transparent calc(var(--bc-gx) - 28%), rgba(127, 227, 255, .06) calc(var(--bc-gx) - 6%), transparent calc(var(--bc-gx) + 9%));
}

.page-blockchain .bc-plate.is-tracking .bc-glint {
    opacity: 1;
}

/* blocks light up as the signal reaches them */
.page-blockchain .bc-pulse {
    position: absolute;
    aspect-ratio: 1 / 1.1;
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side, rgba(127, 227, 255, .5), rgba(77, 141, 255, .18) 55%, transparent);
    opacity: 0;
}

.page-blockchain .bc-pulse--b { left: 45%; top: 54%; width: 40%; }
.page-blockchain .bc-pulse--c { left: 80%; top: 43%; width: 27%; }
.page-blockchain .bc-pulse--d { left: 99%; top: 36%; width: 13%; }

/* the signal along the photo's dashed links (paths traced on the 1024×683 source, pathLength 100): each
   link glows (its own layer, so the blur is drawn once), and a packet with a short trail runs it */
.page-blockchain :is(.bc-lit, .bc-links) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.page-blockchain .bc-lit {
    opacity: 0;
}

.page-blockchain .bc-lit use {
    fill: none;
    stroke: rgba(127, 227, 255, .55);
    stroke-width: 7;
    stroke-linecap: round;
    filter: blur(4px);
}

.page-blockchain .bc-links use {
    fill: none;
    stroke-linecap: round;
    opacity: 0;
}

.page-blockchain .bc-packet-glow {
    stroke: rgba(127, 227, 255, .3);
    stroke-width: 20;
    stroke-dasharray: 18 200;
    --bc-dash: 18px;
}

.page-blockchain .bc-packet-trail {
    stroke: rgba(127, 227, 255, .6);
    stroke-width: 5;
    stroke-dasharray: 28 200;
    --bc-dash: 28px;
}

.page-blockchain .bc-packet {
    stroke: var(--plasma);
    stroke-width: 7;
    stroke-dasharray: 9 200;
    --bc-dash: 9px;
}

/* each layer starts just before the link and ends just past it, its head level with the core's (lengths,
   not numbers, so the offsets interpolate; pathLength scales them like the dashes) */
.page-blockchain :is(.bc-packet, .bc-packet-trail, .bc-packet-glow) {
    --bc-from: var(--bc-dash);
    --bc-to: calc(var(--bc-dash) - 109px);
    stroke-dashoffset: var(--bc-from);
}

/* the ring at the end of each link flares as the packet lands */
.page-blockchain .bc-node {
    fill: rgba(127, 227, 255, .12);
    stroke: var(--plasma);
    stroke-width: 2.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* --- square (4:5 – 5:4): a shorter plate, so the copy and CTAs fit the first screen --- */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
    .page-blockchain .bc-hero {
        --bc-plate-h: min(44svh, 52rem);
    }
}

/* --- portrait phones: a tighter stack and (from 360px) a one-line caption, so both CTAs clear the first
       screen --- */
@media (max-aspect-ratio: 4/5) and (max-width: 479.98px) {
    .page-blockchain .bc-hero-grid { gap: clamp(1rem, 4.5vmin, 1.5rem); }
    .page-blockchain .bc-eyebrow { margin-bottom: .6rem; }
    .page-blockchain .bc-fingerprint { margin-top: 1.1rem; }
    .page-blockchain .bc-actions { margin-top: 1.25rem; }
}

@media (max-aspect-ratio: 4/5) and (min-width: 360px) and (max-width: 479.98px) {
    .page-blockchain .bc-plate .plate-caption {
        flex-wrap: nowrap;
        gap: .7em;
        letter-spacing: .06em;
        white-space: nowrap;
    }
}

/* --- landscape (≥ 600px wide): copy | plate; the plate fits the screen height --- */
@media (min-aspect-ratio: 5/4) and (min-width: 600px) {
    .page-blockchain .bc-hero {
        --bc-glow-x: 68%;
        --bc-glow-y: 52%;
        /* screen height minus hero padding and the caption/frame/ticks around the image */
        --bc-plate-h: calc(100svh - var(--bc-pad-t) - var(--bc-pad-b) - 4.25rem);
        /* a full screen, except where the plate has hit its 1280px cap (857px tall with its frame):
           there the hero ends with its content and the chain lab rises into the first screen */
        min-height: 100vh;
        min-height: min(100svh, var(--bc-pad-t) + 857px + 4.25rem + var(--bc-pad-b));
    }

    /* the plate column is exactly as wide as the plate can be (+ its ticks), so a height-bound plate
       hands its spare width to the copy */
    .page-blockchain .bc-hero-grid {
        --bc-plate-col: 58%;
        grid-template-columns: minmax(0, 1fr) min(var(--bc-plate-col), min(1280px, max(11rem, var(--bc-plate-h)) * 1.4993) + 14px);
        grid-template-rows: auto auto;
        grid-template-areas: "head plate" "body plate";
        column-gap: clamp(2rem, 5vw, 8rem);
        row-gap: clamp(1rem, 3vmin, 2.25rem);
    }

    .page-blockchain .bc-hero-head { align-self: end; }
    .page-blockchain .bc-hero-body { align-self: start; }
    .page-blockchain .bc-plate { justify-self: end; }
}

/* small laptops and landscape tablets: the copy column keeps a readable measure beside the plate */
@media (min-aspect-ratio: 5/4) and (min-width: 760px) and (max-width: 1199.98px) {
    .page-blockchain .bc-hero-grid { --bc-plate-col: 52%; }
    .page-blockchain .bc-lede { font-size: 1.125rem; }
}

/* short landscape: tighter padding and a body-size lede so the copy fits beside the plate */
@media (min-aspect-ratio: 5/4) and (min-width: 600px) and (max-height: 600px) {
    .page-blockchain .bc-hero {
        --bc-pad-t: calc(var(--header-offset) + clamp(.75rem, 3vmin, 1.5rem));
        --bc-pad-b: clamp(1rem, 4vmin, 2rem);
    }

    .page-blockchain .bc-eyebrow { margin-bottom: .6rem; }
    .page-blockchain .bc-lede { font-size: 1rem; }
    .page-blockchain .bc-fingerprint { margin-top: .8rem; }
    .page-blockchain .bc-actions { margin-top: .9rem; }
}

/* small landscape phones: share the width evenly so the copy keeps a readable column */
@media (min-aspect-ratio: 5/4) and (min-width: 600px) and (max-width: 759.98px) {
    .page-blockchain .bc-hero-grid { --bc-plate-col: 50%; }
}

/* landscape phones (≤ 420px tall): the copy column tightens so all of it, CTAs included, fits one
   screen beside a top-aligned plate (≤ 44% of the width) */
@media (min-aspect-ratio: 5/4) and (min-width: 600px) and (max-height: 420px) {
    .page-blockchain .bc-hero-grid {
        --bc-plate-col: 44%;
        row-gap: .7rem;
    }

    .page-blockchain .bc-hero-head { align-self: start; }
    .page-blockchain .bc-plate { align-self: start; }
    .page-blockchain .bc-title { font-size: clamp(2.25rem, 12vh, 3rem); }
    .page-blockchain .bc-lede { font-size: .9375rem; line-height: 1.45; }
    .page-blockchain .bc-fingerprint { margin-top: .7rem; }

    .page-blockchain .bc-actions {
        flex-wrap: nowrap;
        gap: .5rem;
        margin-top: .75rem;
    }

    .page-blockchain .bc-actions .btn {
        padding-inline: .95em;
        font-size: .8125rem;
    }
}

/* narrow plates: a tighter caption keeps "Blocks, linked by their hashes" on one line */
@media (max-width: 359.98px) {
    .page-blockchain .bc-plate .plate-caption { letter-spacing: .06em; }
}

/* stacked and wide enough (tablets, portrait monitors): copy | fingerprint + actions. The buttons share
   the proof column: side by side when they fit, otherwise one per row at its full width. */
@media (max-aspect-ratio: 5/4), (max-width: 599.98px) {
    @container (min-width: 44rem) {
        .page-blockchain .bc-hero-body {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
            gap: 0 clamp(2rem, 5cqi, 5rem);
            align-items: start;
        }

        .page-blockchain .bc-proof > .bc-fingerprint { margin-top: .35rem; }
        .page-blockchain .bc-actions .btn { flex: 1 1 auto; }
    }
}


/* ------------------------------------------------------------------------------------- 2. Circuit */

/* the lab rises closer to the hero (the circuit's bus runs in the gap), and the "Try the live chain"
   jump skips that padding so the lab's title lands under the header */
.page-blockchain .chain-lab {
    padding-top: calc(var(--section) * .6);
    scroll-margin-top: calc(var(--section) * -.6 + .25rem);
}

/* without JS on 21:9+: the photo's last link runs on, dashed, to the screen edge (the hero clips it) */
@media (min-aspect-ratio: 21/9) and (min-width: 600px) {
    :root:not(.js) .page-blockchain .bc-plate::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        /* margin % resolves against the plate's width: frame padding + the link's exit height (52.6%) */
        margin-top: calc(5px + (100% - 10px) / 1.4993 * .526 - 1px);
        width: 100vw;
        height: 2px;
        pointer-events: none;
        background: repeating-linear-gradient(90deg, rgba(127, 227, 255, .5) 0 4px, transparent 4px 10px);
    }
}

/* drawn by the script into main: a dashed trace from the plate's last link to the lab's live dot */
.page-blockchain .bc-circuit {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.page-blockchain .bc-circuit :is(path, circle) {
    fill: none;
}

.page-blockchain .bc-trace {
    stroke: rgba(127, 227, 255, .4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3 7;
}

.page-blockchain .bc-port {
    fill: var(--ground, #03040A);
    stroke: rgba(127, 227, 255, .75);
    stroke-width: 1.5;
}

.page-blockchain .bc-run,
.page-blockchain .bc-run-glow,
.page-blockchain .bc-dot-ring {
    opacity: 0;
}

.page-blockchain .bc-run {
    stroke: var(--plasma);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 44px var(--bc-len);
    --bc-from: 44px;
    --bc-to: calc(-1 * var(--bc-len));
}

.page-blockchain .bc-run-glow {
    stroke: rgba(127, 227, 255, .22);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 96px var(--bc-len);
    --bc-from: 96px;
    --bc-to: calc(52px - var(--bc-len));
}

.page-blockchain .bc-dot-ring {
    stroke: var(--accent-2);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
}


/* ------------------------------------------------------------------------------------- 3. Pillars */

.page-blockchain .bc-pillars {
    --trace-color: rgba(127, 227, 255, .34);
    position: relative;
    isolation: isolate;
    overflow-x: clip;   /* the 21:9 bus runs to the screen edges and stops there */
    padding-top: calc(var(--section) * .5);   /* the chain lab above already ends on a full section pad */
}

.page-blockchain .bc-pillars > .wrap {
    container-name: bc-pillars;
}

.page-blockchain .bc-pillars-grid {
    display: grid;
    gap: clamp(2rem, 5vmin, 4rem) clamp(2rem, 4vw, 6rem);
}

.page-blockchain .bc-pillars-head {
    position: relative;
    margin-bottom: 0;
}

/* the bus leaves the heading at this (invisible) port: just under it, in line with the first card's
   spine — or, beside a side-column heading, at the column's edge */
.page-blockchain .bc-bus-port {
    position: absolute;
    top: 100%;
    left: calc(.7rem + 1px - 8px);
    width: 16px;
    height: 4px;
    pointer-events: none;
}

.page-blockchain .bc-pillar-list {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 4cqi, 4.5rem);
    min-width: 0;
}

/* three in a row once the wrap gives each card ≈ 15rem */
@container bc-pillars (min-width: 50rem) {
    .page-blockchain .bc-pillar-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* very wide wraps (≈ 1920px+ at 17px root): the heading becomes a side column, set like the chain
   lab's title (full h2 size, 125% wide), and the bus runs straight from it through the cards */
@container bc-pillars (min-width: 120rem) {
    .page-blockchain .bc-pillars-grid {
        grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
        align-items: center;
    }

    .page-blockchain .bc-pillars-head {
        padding-right: clamp(2rem, 3vw, 4rem);
    }

    .page-blockchain .bc-pillars-head .section-title {
        font-size: var(--t-h2);
        font-stretch: 125%;
    }

    .page-blockchain .bc-bus-port {
        top: 50%;
        right: 0;
        left: auto;
        width: 4px;
        height: 16px;
        margin-top: -8px;
    }
}

/* each card is a block of the chain above: the lab's glowing spine, the word, what it means, and the
   block's real hash */
.page-blockchain .bc-pillar {
    --card-pad: clamp(1.5rem, 1rem + 1.8vmin, 2.75rem);
    gap: clamp(.9rem, .6rem + 1vmin, 1.4rem);
    padding-left: calc(var(--card-pad) + .5rem);
}

.page-blockchain .bc-pillar::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 1.1rem;
    left: .7rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--ok), var(--accent-2));
    box-shadow: 0 0 10px rgba(92, 242, 176, .4);
    pointer-events: none;
}

.page-blockchain .bc-pillar:hover::after {
    opacity: 1;
}

.page-blockchain .bc-pillar-top {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 4cqi, 1.35rem);
}

.page-blockchain .bc-glyph {
    flex: none;
    width: clamp(2.5rem, 2rem + 1.6vmin, 3.75rem);
    height: auto;
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.page-blockchain .bc-glyph .bc-glyph-hot {
    stroke: var(--accent-2);
    transition: filter var(--dur-2);
}

.page-blockchain .bc-pillar:hover .bc-glyph-hot {
    filter: drop-shadow(0 0 4px rgba(127, 227, 255, .8));
}

/* the names stay a clear step below the section's h2 at every size */
.page-blockchain .bc-pillar-name {
    min-width: 0;
    font-size: min(clamp(1.375rem, 1rem + 1.3vmin, 2.25rem), var(--t-h2) * .72, 9.5cqi);
    font-weight: 300;
    line-height: 1.05;
}

/* the names are single words: normal width as soon as the card has room for it */
@container (min-width: 15rem) {
    .page-blockchain .bc-pillar-name { font-stretch: 100%; }
}

.page-blockchain .bc-pillar p {
    max-width: 42ch;
    color: var(--text-2);
}

.page-blockchain .bc-pillar .bc-pillar-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .9rem;
    max-width: none;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font: 500 var(--t-mono)/1.5 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.page-blockchain .bc-pillar-hash {
    font: 400 .8125rem/1.5 var(--font-mono);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-2);
}

.page-blockchain .bc-pillar-zeros {
    color: var(--accent-2);
    text-shadow: 0 0 12px rgba(127, 227, 255, .55);
}

/* one wide card per row (tablets, landscape phones): the block's hash moves beside the explanation */
@container bc-pillars (36rem <= width < 50rem) {
    .page-blockchain .bc-pillar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: clamp(1.5rem, 4cqi, 3rem);
    }

    .page-blockchain .bc-pillar-top {
        grid-column: 1 / -1;
    }

    .page-blockchain .bc-pillar .bc-pillar-block {
        flex-direction: column;
        align-items: flex-start;
        padding: .15rem 0 .15rem 1.25rem;
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

/* 21:9 and wider: the bus enters from the screen's left edge at the eyebrow and leaves the last card
   for the right edge, over a blueprint grid that runs the full width and carries on from the lab's
   (chain.css runs that one edge to edge at 21:9+ too). No traces without JS. */
@media (min-aspect-ratio: 21/9) {
    .page-blockchain .bc-pillars::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            repeating-linear-gradient(0deg, rgba(127, 227, 255, .045) 0 1px, transparent 1px 2.5rem),
            repeating-linear-gradient(90deg, rgba(127, 227, 255, .045) 0 1px, transparent 1px 2.5rem);
        -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 48%, transparent 88%);
        mask-image: linear-gradient(transparent, #000 22%, #000 48%, transparent 88%);
    }

    .page-blockchain .bc-pillars-head .eyebrow {
        position: relative;
    }

    :root.js:not(.motion-off) .page-blockchain .bc-pillars-head .eyebrow::before,
    :root.js:not(.motion-off) .page-blockchain .bc-pillar-list::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 50vw;
        height: 8px;
        margin-top: -4px;
        pointer-events: none;
        transform-origin: left;
    }

    /* signal in: a line from the edge, ending on a pad just before the eyebrow */
    :root.js .page-blockchain .bc-pillars-head .eyebrow::before {
        right: calc(100% + .9rem);
        background:
            radial-gradient(circle at calc(100% - 4px) 50%, var(--ground) 1.75px, var(--trace-color) 2.25px 3.25px, transparent 3.75px),
            linear-gradient(var(--trace-color), var(--trace-color)) 0 50% / calc(100% - 7.5px) 1px no-repeat;
    }

    /* signal out: from a pad on the last card's edge to the screen edge */
    :root.js:not(.motion-off) .page-blockchain .bc-pillar-list::after {
        left: 100%;
        margin-left: -4px;
        background:
            radial-gradient(circle at 4px 50%, var(--ground) 1.75px, var(--trace-color) 2.25px 3.25px, transparent 3.75px),
            linear-gradient(var(--trace-color), var(--trace-color)) 7.5px 50% / 100% 1px no-repeat;
    }
}


/* ---------------------------------------------------------------------------------- 4. Next link */

.page-blockchain .bc-next {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(4rem, 11vmin, 10rem);
    padding-top: clamp(2rem, 5vmin, 4rem);
    border-top: 1px solid var(--line);
}

@media (max-width: 479.98px) {
    .page-blockchain .bc-next { justify-content: flex-start; }
}


/* ------------------------------------------------------------------------------------------ Motion */

/* hero entrance, independent of scroll observers: eyebrow, plate, copy. The plate's photo is painted
   from the first frame; a ground-coloured cover over it opens from a centre scanline. */
:root.js:not(.motion-off) .page-blockchain .bc-eyebrow {
    animation: reveal-rise var(--dur-3) var(--ease-out) 80ms backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-plate-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: var(--ground, #03040A);
    opacity: 0;
    animation: bc-scan-open 1100ms var(--ease-out) 160ms backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-ambient {
    animation: bc-fade 1400ms ease-out 420ms backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-plate .plate-caption {
    animation: reveal-rise var(--dur-3) var(--ease-out) 760ms backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-hero-body {
    animation: reveal-rise var(--dur-3) var(--ease-out) 360ms backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-hexwall {
    animation: bc-fade 1.8s ease-out .5s backwards;
}

/* the script sets `translate` on the rows directly (pointer drift) */
:root.js:not(.motion-off) .page-blockchain .bc-hex-rows {
    transition: translate 1.4s var(--ease-out);
}

:root.js:not(.motion-off) .page-blockchain .bc-plate-frame {
    transform: perspective(1800px) rotateX(var(--bc-rx)) rotateY(var(--bc-ry));
}

:root.js:not(.motion-off) .page-blockchain .bc-glint {
    opacity: 1;
}

/* a re-mined row of the wall: it brightens for a moment and its zeros flash as the front passes */
:root.js:not(.motion-off) .page-blockchain .bc-hex-rows > .is-mining {
    animation: bc-row 1.8s var(--ease-out);
}

:root.js:not(.motion-off) .page-blockchain .bc-hex-rows > .is-mining .is-zero {
    animation: bc-zero 1.2s var(--ease-out) var(--bc-d, 0ms) backwards;
}

/* One signal per cycle (the script adds .is-cycling to the plate and the circuit every 6s while they
   are watched): link a → block lights → link b → … → off the plate and down the circuit to the lab's
   live dot. Every animation is one-shot, so nothing runs between cycles. */
:root.js:not(.motion-off) .page-blockchain .is-cycling :is(.bc-packet, .bc-packet-trail, .bc-packet-glow) {
    animation: bc-run 770ms linear var(--bc-at) backwards;
}

:root.js:not(.motion-off) .page-blockchain .is-cycling .bc-lit {
    animation: bc-lit 1340ms ease-out var(--bc-at) backwards;
}

:root.js:not(.motion-off) .page-blockchain .is-cycling .bc-pulse {
    animation: bc-pulse 960ms var(--ease-out) var(--bc-at) backwards;
}

:root.js:not(.motion-off) .page-blockchain .is-cycling :is(.bc-node, .bc-dot-ring) {
    animation: bc-node 770ms var(--ease-out) var(--bc-at) backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-circuit.is-cycling .bc-feed :is(.bc-run, .bc-run-glow) {
    animation: bc-run-long 1440ms linear var(--bc-at) backwards;
}

:root.js:not(.motion-off) .page-blockchain .bc-circuit.is-cycling .bc-ext :is(.bc-run, .bc-run-glow) {
    animation: bc-run 770ms linear var(--bc-at) backwards;
}

/* timing: a packet takes .77s per photo link and 1.44s down the circuit */
.page-blockchain .bc-link--a { --bc-at: .1s; }
.page-blockchain :is(.bc-pulse--b, .bc-node--b) { --bc-at: .82s; }
.page-blockchain .bc-link--b { --bc-at: .9s; }
.page-blockchain :is(.bc-pulse--c, .bc-node--c) { --bc-at: 1.62s; }
.page-blockchain .bc-link--c { --bc-at: 1.7s; }
.page-blockchain .bc-pulse--d { --bc-at: 2.42s; }
.page-blockchain :is(.bc-feed, .bc-ext) { --bc-at: 2.45s; }
.page-blockchain .bc-dot-ring { --bc-at: 3.85s; }

/* pillars on 21:9+: the edge lines draw with the bus */
:root.js:not(.motion-off) .page-blockchain .bc-pillars-head .eyebrow::before,
:root.js:not(.motion-off) .page-blockchain .bc-pillar-list::after {
    transition: scale 1.2s var(--ease-io) .3s;
}

:root.js:not(.motion-off) .page-blockchain .bc-pillars-grid:not(.is-in) .bc-pillars-head .eyebrow::before,
:root.js:not(.motion-off) .page-blockchain .bc-pillars-grid:not(.is-in) .bc-pillar-list::after {
    scale: 0 1;
}

/* fine pointers: the glint sweeps once to its resting place on the frame's edge */
@media (hover: hover) and (pointer: fine) {
    :root.js:not(.motion-off) .page-blockchain .bc-plate {
        animation: bc-glint-sweep 1800ms var(--ease-io) 1000ms backwards;
    }
}

/* touch: the glint slides across the plate as it scrolls past */
@supports (animation-timeline: view()) {
    @media (hover: none) {
        :root.js:not(.motion-off) .page-blockchain .bc-plate {
            animation: bc-glint-scroll linear both;
            animation-timeline: view();
            animation-range: cover 20% cover 100%;
        }
    }
}

/* the cover's hole: a point, then a scanline across the full width, then the whole plate */
@keyframes bc-scan-open {
    0% {
        opacity: 1;
        clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 49.6%, 50% 49.6%, 50% 50.4%, 50% 50.4%, 50% 49.6%);
    }
    35% {
        opacity: 1;
        clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 49.6%, 100% 49.6%, 100% 50.4%, 0 50.4%, 0 49.6%);
    }
    100% {
        opacity: 1;
        clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@keyframes bc-fade {
    from { opacity: 0; }
}

@keyframes bc-run {
    0% { stroke-dashoffset: var(--bc-from); opacity: 0; }
    9%, 94% { opacity: 1; }
    100% { stroke-dashoffset: var(--bc-to); opacity: 0; }
}

@keyframes bc-run-long {
    0% { stroke-dashoffset: var(--bc-from); opacity: 0; }
    3%, 97% { opacity: 1; }
    100% { stroke-dashoffset: var(--bc-to); opacity: 0; }
}

@keyframes bc-lit {
    0% { opacity: 0; }
    18% { opacity: .9; }
    54% { opacity: .6; }
    100% { opacity: 0; }
}

@keyframes bc-pulse {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes bc-node {
    0% { opacity: 0; scale: 2.4; }
    12% { opacity: 1; }
    100% { opacity: 0; scale: 1; }
}

@keyframes bc-glint-sweep {
    from { --bc-gx: -30%; --bc-gy: 90%; }
}

@keyframes bc-glint-scroll {
    from { --bc-gx: 12%; --bc-gy: 6%; }
    to { --bc-gx: 88%; --bc-gy: 96%; }
}

@keyframes bc-row {
    12% { color: rgba(127, 227, 255, .2); }
}

@keyframes bc-zero {
    from { color: rgba(127, 227, 255, .95); text-shadow: 0 0 .5em rgba(127, 227, 255, .95), 0 0 1.2em rgba(77, 141, 255, .7); }
}


/* ------------------------------------------------------------------------------------------ Modes */

@media (forced-colors: active) {
    .page-blockchain :is(.bc-hexwall, .bc-glint, .bc-pulse, .bc-lit, .bc-links, .bc-ambient, .bc-circuit),
    .page-blockchain .bc-plate::after,
    .page-blockchain .bc-plate-media::before,
    .page-blockchain .bc-plate-media::after,
    .page-blockchain .bc-plate-frame::after,
    .page-blockchain .bc-pillars::before,
    .page-blockchain .bc-pillar-list::after,
    .page-blockchain .bc-pillars-head .eyebrow::before {
        display: none;
    }

    .page-blockchain .bc-plate .plate-frame img { filter: none; }
    .page-blockchain .bc-glyph,
    .page-blockchain .bc-glyph .bc-glyph-hot { stroke: CanvasText; filter: none; }
    .page-blockchain .bc-fingerprint { border-left-color: CanvasText; }
    .page-blockchain .bc-pillar::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* more contrast: no glow, no blur, no wall; the frame keeps a plain 40% hairline */
@media (prefers-contrast: more) {
    .page-blockchain :is(.bc-hexwall, .bc-ambient, .bc-glint, .bc-pulse, .bc-lit, .bc-packet-glow, .bc-run-glow),
    .page-blockchain .bc-hero::before,
    .page-blockchain .bc-pillars::before {
        display: none;
    }

    .page-blockchain .bc-plate-frame { box-shadow: inset 0 0 0 1px rgba(142, 155, 255, .4); }
    .page-blockchain .bc-pillar:hover .bc-glyph-hot { filter: none; }
    .page-blockchain :is(.bc-fp-hash, .bc-pillar-zeros) { color: var(--plasma); text-shadow: none; }
    .page-blockchain .bc-pillar::before { box-shadow: none; }
}