/* Scroll That Builds (2026-10-24, after the Scrolltide library Omir shared):
   three MAGE-drawn scroll pieces for the home page.
     String Line     a dry line draws down the five steps (Win it to Close it)
                     with the green dot at its tip, like the round 3 films.
     Plan Set Fan    the A, S, M, E and P sheets of a set fan open (#set).
     Building Rises  the example job's schedule phases stack up as floors,
                     from Demo to Closeout, today on Finishes (#rise).
     Open Row        an index of tools; the chosen row fills with ink and its
                     real app screen slides in beside it (#tools-index).
   SWITCH. Every piece ships with the HTML `hidden` attribute, so the live
   page is unchanged. ?build=1 previews them. To turn them on, delete `hidden`
   from the four places marked BUILD-SWITCH in index.html. Nothing else.
   Every rule here draws the END state. The start state only applies while
   /next/build.js has armed a piece (.bl-armed) and set --p from the scroll,
   so with JavaScript off, with Reduce Motion on or in a screenshot view the
   pieces read as finished drawings. Only transform and opacity move. */

.steps { position: relative; }

/* ---------- String Line ---------- */
.bl-line { position: absolute; left: calc(var(--gut) * .4); top: 0; bottom: 0; width: 2px; pointer-events: none; }
.bl-line i { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--ink) 0 6px, transparent 6px 11px); transform-origin: center top; }
.bl-dot, .bl-cap { position: absolute; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-t), 0 0 22px 6px rgba(47, 107, 58, .35); }
.bl-dot { bottom: -7px; }
.bl-armed .bl-line i { transform: scaleY(var(--p, 1)); }
.bl-armed .bl-dot { top: 0; bottom: auto; transform: translateY(calc(var(--p, 1) * var(--h, 0px) - 7px)); }

/* ---------- shared band head ---------- */
.bl-head { display: grid; gap: 14px; max-width: 46em; margin-bottom: clamp(24px, 3.4vw, 40px); }
.bl-lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.45; color: var(--ink2); }
.bl-lead .tier { vertical-align: 2px; margin-left: 4px; }
.bl-sheet { position: relative; border: 1px solid var(--ink); background: var(--sheet); }
.bl-sheet-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px clamp(14px, 2vw, 24px) 10px; border-bottom: 1px solid var(--hair); font: 600 12px/1.2 var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.bl-sheet-head .ex { color: var(--mute); white-space: nowrap; }
.bl-illus { padding: 9px clamp(14px, 2vw, 24px); border-top: 1px solid var(--hair); font: 600 11px/1.2 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ---------- Plan Set Fan ---------- */
.fan-stage { position: relative; height: clamp(320px, 38vw, 440px); overflow: hidden; background: var(--paper); }
.fan { position: absolute; left: 50%; bottom: 12%; width: 0; height: 0; }
.fan-sh { --w: clamp(150px, 17vw, 210px); position: absolute; left: calc(var(--w) / -2); bottom: 0; width: var(--w); aspect-ratio: 19 / 25; background: var(--sheet); border: 1px solid var(--ink); transform-origin: 50% 120%; transform: rotate(var(--a)); box-shadow: 0 10px 18px -14px rgba(22, 27, 30, .45); }
.fan-sh svg { position: absolute; left: 8%; right: 8%; top: 6%; width: 84%; height: 66%; }
.fan-sh svg * { fill: none; stroke: var(--ink2); stroke-width: 1.2; }
.fan-tb { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 36%; }
.fan-tb span { padding: 6px 8px; font: 600 10px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); overflow: hidden; }
.fan-tb b { border-left: 1px solid var(--ink); display: grid; place-items: center; font: 700 clamp(13px, 1.3vw, 17px)/1 var(--disp); letter-spacing: .04em; }
.fan-sh.top-sh .fan-tb b { color: var(--green); }
.bl-armed .fan-sh { transform: rotate(calc(var(--a) * var(--p, 1))) translateY(calc(var(--p, 1) * -6px)); }

/* ---------- Building Rises ---------- */
.rise-stage { position: relative; height: clamp(380px, 40vw, 460px); overflow: hidden; background: var(--paper); }
.rise-grade { position: absolute; left: 8%; right: 8%; bottom: 40px; border-top: 2px solid var(--ink); }
.rise-grade::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 8px; background: repeating-linear-gradient(135deg, var(--hair2) 0 2px, transparent 2px 7px); }
.rise { position: absolute; left: 50%; bottom: 42px; width: min(380px, 78%); transform: translateX(-50%); display: flex; flex-direction: column-reverse; }
.fl { height: 46px; border: 1.5px solid var(--ink); border-bottom-width: 0; background: var(--sheet); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; }
.fl:first-child { border-bottom-width: 1.5px; }
.fl b { font: 700 15px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; }
.fl span { font: 600 11px/1 var(--disp); letter-spacing: .12em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.fl { background-image: repeating-linear-gradient(to right, transparent 0 15px, var(--hair) 15px 16px); }
.fl.now { background-color: var(--green-t); }
.fl.now b, .fl.now span { color: var(--green); }
.fl.next { border-style: dashed; background: transparent; }
.fl b, .fl span { background-color: var(--sheet); padding: 2px 4px; }
.fl.now b, .fl.now span { background-color: var(--green-t); }
.fl.next b, .fl.next span { background-color: var(--paper); }
.rise .bl-cap { left: 50%; margin-left: -7px; bottom: calc(5 * 46px + 9px); }
.bl-armed .fl { opacity: var(--k, 1); transform: translateY(calc((1 - var(--k, 1)) * -36px)); }
.bl-armed .rise .bl-cap { transform: translateY(calc((5 - var(--f, 5)) * 46px)); }

@media (max-width: 699px) {
  .fan-sh { --w: 38vw; }
  .fl b { font-size: 13px; }
}

/* ---------- Open Row ---------- */
.or-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.or-list { border-top: 1px solid var(--ink); }
.or-list li { border-bottom: 1px solid var(--hair); }
.or-list button { position: relative; isolation: isolate; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 12px 15px; text-align: left; font: 600 clamp(20px, 2.2vw, 28px)/1.05 var(--disp); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); overflow: hidden; transition: color .2s linear; }
.or-list button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: center bottom; transition: transform .22s var(--e); }
.or-list b { font-size: 13px; letter-spacing: .14em; color: var(--green); }
.or-list .tier { margin-left: auto; align-self: center; }
.or-list .on button { color: var(--sheet); }
.or-list .on button::before { transform: scaleY(1); }
.or-list .on .tier { color: var(--sheet); border-color: var(--sheet); background: transparent; }
.or-phone .phone { --w: 260px; }
.or-phone figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); text-align: center; }
.or-scr { opacity: 0; transform: translateX(18px); transition: opacity .2s linear, transform .22s var(--e); }
.or-scr.on { opacity: 1; transform: none; }
@media (max-width: 699px) {
  .or-wrap { grid-template-columns: 1fr; }
  .or-phone { justify-self: center; }
  .or-phone .phone { --w: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .or-list button, .or-list button::before, .or-scr { transition: none; }
}