/* Scroll-driven teardown page. Without WebGL the steps stay a plain list. */
body:has(.td) { overflow-x: clip; }

.main > .td {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.td-stage canvas, .td-over, .td-disc, .td-bar { display: none; }
.td-title, .td-steps, .td-end { max-width: var(--main-width); margin-inline: auto; padding-inline: var(--gap); }
.td-title h1 { font: 700 clamp(56px, 13vw, 168px)/.9 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.td-title p { margin: 12px 0 0; color: var(--ink-muted); font-size: var(--t-xs); }
.td-steps { list-style: none; margin-block: 40px; }
.td-steps h2 { font: 600 var(--t-l)/1.1 var(--font-display); color: var(--ink); margin: 0 0 4px; }
.td-steps p { margin: 0 0 24px; color: var(--ink-soft); }
.td-end { padding-block: 56px 0; color: var(--ink-soft); }

.td-on .td-scroll { height: 1100vh; position: relative; }
.td-on .td-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.td-on canvas, .td-on .td-over { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.td-on .td-over { pointer-events: none; overflow: visible; }
.td-on .td-over text { font: 500 13px var(--font-mono); fill: var(--ink); }
.td-on .td-over .leader { stroke: var(--ink); stroke-width: 1; }
.td-on .td-disc {
    display: block; position: absolute; left: 50%; top: 50%;
    width: min(74vh, 92vw); aspect-ratio: 1; margin: calc(min(74vh, 92vw) / -2) 0 0 calc(min(74vh, 92vw) / -2);
    border-radius: 50%; background: var(--accent); will-change: transform;
}

.td-on .td-title {
    position: absolute; left: clamp(16px, 5vw, 72px); top: clamp(24px, 6vh, 64px);
    max-width: none; margin: 0; padding: 0; pointer-events: none; mix-blend-mode: normal;
}

.td-on .td-steps { position: absolute; left: clamp(16px, 5vw, 72px); bottom: clamp(32px, 9vh, 88px); right: 16px; max-width: 420px; margin: 0; padding: 0; pointer-events: none; }
.td-on .td-steps li { position: absolute; bottom: 0; left: 0; right: 0; width: fit-content; padding: 12px 16px 12px 0; background: var(--theme); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
.td-on .td-steps li.on { opacity: 1; transform: none; }
.td-on .td-steps li:last-child { background: none; }
.td-on .td-steps h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1; }
.td-on .td-steps h2::before { content: ""; display: block; width: 48px; height: 6px; background: var(--accent); margin-bottom: 14px; }
.td-on .td-steps p { margin: 8px 0 0; font-size: var(--t-m); }
.td-on .td-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.td-on .td-end { padding-top: 40px; }

@media (max-width: 640px) {
    .td-on .td-steps p { font-size: var(--t-s); }
}

@media (prefers-reduced-motion: reduce) {
    .td-on .td-steps li { transition: none; transform: none; }
}