/* ============================================================
   ABM "The Asset" — M4 SCROLL interaction (.sc-*).
   One column of big input cards the user scrolls through; the
   page collage scrolls the opposite way; the focal page lights
   up color-coded highlights for the active card's data.
   ============================================================ */
.sc-page { background: var(--ad-bg); color: var(--ad-ink); font-family: var(--abm-sans); }
.sc-intro { max-width: 760px; margin: 0 auto; padding: 90px 40px 30px; }
.sc-intro h1 { font-family: var(--ad-display); font-weight: 400; font-size: 40px; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.sc-intro h1 .em { color: var(--c-cyan); }
.sc-intro p { font-size: 17px; line-height: 1.5; color: var(--ad-dim); margin: 14px 0 0; }

.sc-pin { position: relative; }
.sc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.sc-vlabel { position: absolute; left: 28px; top: 24px; z-index: 30; display: flex; align-items: center; gap: 10px; }
.sc-vlabel .bar { width: 22px; height: 1px; background: var(--c-grn); }
.sc-vlabel .t { font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ad-dim); }

/* background wall of pages */
.sc-wall { position: absolute; inset: -10% 0; z-index: 1; will-change: transform; }
.sc-wall img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.sc-wallvig { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* stage grid */
.sc-stage { position: relative; z-index: 5; flex: 1; min-height: 0; display: grid; align-items: center; gap: 40px; padding: 0 56px; }
.sc-stage.lyt-cards { grid-template-columns: 1fr 408px; }
.sc-stage.lyt-page { grid-template-columns: 360px 1fr; }
.sc-stage.lyt-split { grid-template-columns: 1fr 1fr; }

/* focal page (cropped real page) + highlights */
.sc-focalwin { position: relative; justify-self: center; }
.sc-focal { position: relative; background-repeat: no-repeat; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.07); will-change: transform; }
.sc-hl { position: absolute; border-radius: 6px; border: 1.5px solid; transition: opacity .45s ease, background-color .45s ease, box-shadow .45s ease; }
.sc-htag { position: absolute; top: -9px; left: 8px; font-family: var(--ad-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: #fff; opacity: 0; transition: opacity .4s ease; white-space: nowrap; }

/* card column */
.sc-cards { position: relative; }
.sc-cardtrack { display: flex; flex-direction: column; gap: 18px; will-change: transform; }
.sc-card { border-radius: 16px; border: 1px solid var(--ad-line2); background: rgba(9,19,27,0.92); padding: 20px 22px; transition: opacity .4s ease, transform .4s ease, border-color .4s ease; }
.sc-card.on { border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 30px 60px -28px rgba(0,0,0,0.8); }
.sc-card .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sc-card .ch .d { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.sc-card .ch .c { font-family: var(--ad-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.sc-card .ch .n { margin-left: auto; font-family: var(--ad-mono); font-size: 10px; color: var(--ad-faint); }
.sc-card .nm { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 2px; }
.sc-card .role { font-size: 12.5px; color: var(--ad-dim); }
.sc-card .rows { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.sc-card .row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--ad-dim); }
.sc-card .row .ar { flex: 0 0 auto; font-family: var(--ad-mono); }
.sc-card .row b { color: var(--ad-ink); font-weight: 600; }

/* progress dots */
.sc-dots { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 12px; }
.sc-dots i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.18); transition: background .3s, transform .3s; }
.sc-dots i.on { transform: scale(1.3); }

.sc-scrollcue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 9px; color: var(--ad-faint); font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.sc-scrollcue .dot { width: 7px; height: 7px; background: var(--c-grn); animation: sd-bob 1.4s ease-in-out infinite; }