/* ── m3 04 Proof of work — maarch-3/sections/04-proof-of-work/brief.md ──
   Figma 1:1488 title 80/1.1 top 1467 · slides 1:1520/1:1526/1:1532 (956h full-bleed, gradient) ·
   caption @ x95: name 80 bold, coral rule 62×8, status 42 · 1:1559 "< >" 22px below right (x 1854–1900) ·
   motion: fade + slide from +200px, ease-out ≈ .9s */

.m3-proof {
    background: var(--skin-canvas);
    padding: calc(67 * var(--u)) 0 calc(55 * var(--u));
}
.m3-proof__title { text-align: center; line-height: 1.1; }

.m3-proof__slides {
    position: relative;
    height: calc(956 * var(--u));
    margin-top: calc(83 * var(--u));
    overflow: hidden;
    background: #cfcfcf;
}
.m3-proof__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; z-index: 0; }
.m3-proof__slide.is-active  { opacity: 1; visibility: visible; z-index: 2; }
.m3-proof__slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; }
.m3-proof__slide.is-entering { animation: m3-slide-in .9s ease-out both; }
@keyframes m3-slide-in {
    from { opacity: 0; translate: calc(200 * var(--u)) 0; }
    to   { opacity: 1; translate: 0 0; }
}
.m3-proof__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 53.846%, rgba(0, 0, 0, .51) 86.533%);
    pointer-events: none;
}
.m3-proof__slide--soft::after { opacity: .48; }

.m3-proof__caption {
    position: absolute;
    z-index: 2;
    left: calc(95 * var(--u));
    top: calc(744.5 * var(--u));
    color: var(--skin-white);
}
.m3-proof__caption h3 { font-size: var(--fs-display); font-weight: 700; line-height: 1; }
.m3-proof__rule {
    display: block;
    width: calc(62 * var(--u));
    height: max(4px, calc(8 * var(--u)));
    margin: calc(12.5 * var(--u)) 0 0 calc(11 * var(--u));
    background: var(--skin-coral);
}
.m3-proof__caption p { margin-top: calc(13.5 * var(--u)); font-size: var(--fs-sub); line-height: 1; }

.m3-proof__controls {
    display: flex;
    justify-content: flex-end;
    gap: calc(12 * var(--u));
    margin-top: calc(10 * var(--u));
    padding-right: calc(20 * var(--u));
}
.m3-proof__controls button {
    padding: 0 2px;
    font: inherit;
    font-size: var(--fs-22);
    line-height: .947;
    color: var(--skin-black);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}
.m3-proof__controls button:hover { color: var(--skin-coral); }

@media (max-width: 991.98px) {
    .m3-proof { padding: 56px 0 40px; }
    .m3-proof__slides { height: max(360px, 56vw); margin-top: 32px; }
    .m3-proof__caption { left: 24px; top: auto; bottom: 28px; }
    .m3-proof__caption h3 { font-size: 40px; }
    .m3-proof__rule { width: 48px; margin: 10px 0 0 4px; }
    .m3-proof__caption p { margin-top: 8px; font-size: 24px; }
    .m3-proof__controls { gap: 16px; padding-right: var(--skin-edge); }
}
@media (max-width: 575.98px) {
    .m3-proof__caption h3 { font-size: 30px; }
    .m3-proof__caption p { font-size: 20px; }
}