/* Scroll layer: manual process -> structured system.
   Page-local choreography. Brand tokens come from site.css; the scroll-craft
   engine is intentionally not used (see BRIEF.md). Initial/hidden states only
   apply under .sc-on, so no-JS and reduced-motion visitors get the finished page. */

/* ── HERO: typography resolves onto the grid ── */
/* ── PINNED STAGES (desktop only) ── */
.sc-pin{position:relative}
@media(min-width:900px) and (min-height:640px){
  .sc-on .sc-pin{height:var(--span,260vh)}
  .sc-on .sc-sticky{position:sticky;top:var(--header);height:calc(100vh - var(--header));display:flex;flex-direction:column;justify-content:center}
}

/* ── PROBLEMS: manual work accumulates ── */
@media(min-width:900px) and (min-height:640px){
  .sc-on #problems .sc-sticky{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-5);align-content:center;align-items:center}
  .sc-on #problems .section-head{margin-bottom:0}
  .sc-on #problems .problems{grid-template-columns:1fr;gap:0}
  .sc-on #problems .problems li{padding:.9rem 0;font-size:var(--step-1);
    opacity:calc(0.12 + clamp(0, (var(--p) * 11 - var(--i)) , 1) * .88);
    transform:translate3d(0,calc((1 - clamp(0, (var(--p) * 11 - var(--i)), 1)) * 14px),0)}
}

/* ── PROOF: the peak. Duration compresses into a working system ── */
.proof-bar{position:relative;height:14px;margin-top:var(--s-2);--k:1}
.proof-bar .ghost{position:absolute;inset:0;border:1px solid var(--line);border-radius:2px}
.proof-bar .track{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--k))}
.proof-bar .frag-bar{position:absolute;inset:0;opacity:calc(1 - var(--a,0));
  background:linear-gradient(90deg,
    var(--text) 0 7%,transparent 7% 9%,var(--text) 9% 12%,transparent 12% 17%,var(--text) 17% 26%,transparent 26% 28%,
    var(--text) 28% 31%,transparent 31% 38%,var(--text) 38% 41%,transparent 41% 43%,var(--text) 43% 55%,transparent 55% 60%,
    var(--text) 60% 63%,transparent 63% 66%,var(--text) 66% 74%,transparent 74% 80%,var(--text) 80% 83%,transparent 83% 86%,var(--text) 86% 100%)}
.proof-bar .solid{position:absolute;inset:0;background:var(--text);border-radius:2px;opacity:var(--a,0)}
.proof-bar{--a:1;--k:.07}
.proof-item:nth-child(2) .proof-bar{--k:.12}
.proof-item:nth-child(3) .proof-bar{display:none}
#proof{--a1:0;--a2:0}

.sc-on .proof-bar{--a:0;--k:1}
.sc-on .proof-item.in .proof-bar{--a:1;--k:.07}
.sc-on .proof-item:nth-child(2).in .proof-bar{--k:.12}
.sc-on .proof-item .track{transition:transform 1.4s var(--ease)}
.sc-on .proof-item .frag-bar,.sc-on .proof-item .solid{transition:opacity 1.1s var(--ease)}
@media(min-width:900px) and (min-height:640px){
  .sc-on #proof{--span:340vh}
  .sc-on #proof .sc-sticky{gap:var(--s-3)}
  .sc-on #proof .section-head{margin-bottom:var(--s-2)}
  .sc-on #proof .proof{grid-template-columns:1fr;gap:var(--s-3)}
  .sc-on #proof .proof-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 var(--s-4);align-items:end}
  .sc-on #proof .proof-item .eyebrow{grid-column:1}
  .sc-on #proof .proof-item .proof-fig{grid-column:1;margin:.4rem 0 .2rem}
  .sc-on #proof .proof-item .proof-src{grid-column:1}
  .sc-on #proof .proof-item .proof-bar{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0;height:22px}
  /* pinned: bar driven by scroll value, no time transition */
  .sc-on #proof .proof-bar,.sc-on #proof .proof-item.in .proof-bar{--a:var(--a1);--k:calc(1 - var(--a1) * .93)}
  .sc-on #proof .proof-item:nth-child(2) .proof-bar,.sc-on #proof .proof-item:nth-child(2).in .proof-bar{--a:var(--a2);--k:calc(1 - var(--a2) * .88)}
  .sc-on #proof .track,.sc-on #proof .frag-bar,.sc-on #proof .solid{transition:none}
}

/* ── WORK: systems in use, with a real preview ── */
.work-preview{display:none}
@media(min-width:1100px){
  .work-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-5);align-items:start}
  .work-split .work-row{grid-template-columns:3rem minmax(0,1fr) 1.5rem}
  .work-split .work-tags{display:none}
  .work-preview{display:block;position:sticky;top:calc(var(--header) + 2rem);height:clamp(300px,52vh,460px)}
  .work-preview figure{position:absolute;inset:0;margin:0;opacity:0;transform:translate3d(0,10px,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .work-split[data-active="1"] .pv1,.work-split[data-active="2"] .pv2,.work-split[data-active="3"] .pv3{opacity:1;transform:none}
  .work-split:not([data-active]) .pv1{opacity:1;transform:none}
  .work-preview .pv-frame{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden}
  .work-preview img{width:100%;height:auto;display:block}
  .work-preview figcaption{margin-top:.6rem;font:400 var(--step--2)/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
  .pv-svg{width:100%;height:auto;display:block;background:var(--surface);border-radius:4px}
  .pv-svg text{font-family:var(--sans);font-size:13px;fill:var(--text)}
  .pv-svg .t-sm{font-size:10.5px;fill:var(--text-2);font-family:var(--mono);letter-spacing:.04em}
  .pv-svg rect.n{fill:var(--bg);stroke:var(--text);stroke-width:1}
  .pv-svg rect.h{fill:var(--bg);stroke:var(--text);stroke-width:1.5}
  .pv-svg path{fill:none;stroke:var(--text-2);stroke-width:1}
}

/* ── ASSEMBLE: flows and process steps build as they enter ── */
.sc-on .flow li,.sc-on .steps li{opacity:.28;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sc-on .flow li.on,.sc-on .steps li.on{opacity:1;transform:none}
.sc-on .steps li{border-top-color:var(--line);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease)}
.sc-on .steps li.on{border-top-color:var(--text)}

/* reduced motion: finished, static page */
@media(prefers-reduced-motion:reduce){
  .frag{transform:none}
  .hero-flow path{stroke-dashoffset:0}
  .work-preview figure{transition:none}
}



/* ── FILM (TDi motion study) ── */
.film{width:100%}
.film svg{display:block;width:100%;height:auto}
.film-caption{margin-top:var(--s-3)}
.sc-film .film-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-flow.is-resolved path{animation:sc-pulse 3.2s var(--ease) infinite}
@keyframes sc-pulse{0%,60%{stroke-width:1.5}80%{stroke-width:2.6}100%{stroke-width:1.5}}
@media(min-width:900px) and (min-height:640px){
  .sc-on .film-stage{display:flex;flex-direction:column;gap:var(--s-2)}
  .sc-on .film-stage .section-head{margin-bottom:0;gap:.4rem}
  .sc-on .film-stage .section-head .h2{font-size:var(--step-2)}
  .sc-on .film{flex:1;min-height:0}
  .sc-on .film svg{height:100%}
}
.proof--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.proof--two{grid-template-columns:1fr}}
.proof-more{padding-top:0}
/* ── SCENES (Catena orchestration, ACCLAIMED handoff, above/below) ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene-pin{position:relative;margin:var(--s-4) 0}
.scene{width:100%}
.scene svg{display:block;width:100%;height:auto}
@media(min-width:900px) and (min-height:640px){
  .sc-on .scene-pin{height:var(--span,300vh)}
  .sc-on .scene-stage{position:sticky;top:calc(var(--header) + 1rem);height:calc(100vh - var(--header) - 2rem);display:flex;align-items:center}
}
/* work preview: crop -> full interface */
@media(min-width:1100px){.sc-on .work-preview .pv1 img{transform:scale(var(--z,1));transform-origin:18% 22%}}

/* ── HERO ── */
.hero{position:relative;overflow:clip;padding:clamp(5rem,11vw,9rem) 0 clamp(3rem,6vw,5rem)}
.hero>.wrap{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:var(--s-4);line-height:1.8}
.hero .eyebrow br{display:block}
.hero{--p:0;--e:0}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-cols{position:absolute;inset:0;margin:0 auto;max-width:var(--max);padding:0 var(--gutter)}
.hero-cols span{display:block;height:100%;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 12));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 0,#000 65%,transparent);
  opacity:calc(.12 + var(--e) * .88)}
.hero-notes{position:absolute;right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:clamp(7rem,14vw,11rem);display:none;flex-direction:column;gap:1.1rem;align-items:flex-end}
.hero-notes span{display:flex;align-items:center;gap:.7rem;font:500 var(--step--2)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  opacity:clamp(0, calc(var(--e) * 6 - var(--n)), 1)}
.hero-notes span::before{content:"";display:block;height:1px;background:var(--text-3);width:calc(var(--e) * 56px)}
@media(min-width:1100px){.hero-notes{display:flex}}
.hero h1.hero-title{font-family:var(--sans);font-weight:500;font-size:clamp(2rem,.7rem + 3.7vw,4rem);text-transform:none;line-height:1.04;letter-spacing:-.035em;max-width:16em;margin-bottom:var(--s-4)}
.hero-title .ln{display:block;color:var(--text-body)}
.hero-title .ln--b{color:color-mix(in srgb,var(--text) calc(70% + var(--e) * 30%),var(--text-body))}
.hero{padding:clamp(6rem,14vw,11rem) 0 clamp(4rem,8vw,6rem)}

/* TDi result: the one inversion on the homepage */
section.film-pin{--inv:0;border-color:transparent;background:color-mix(in srgb,var(--inverse-bg) calc(var(--inv) * 100%),var(--bg));color:color-mix(in srgb,var(--inverse-text) calc(var(--inv) * 100%),var(--text))}
section.film-pin .eyebrow{color:color-mix(in srgb,var(--inverse-muted) calc(var(--inv) * 100%),var(--text-2))}
section.film-pin .h2{color:inherit}