/* Contract + notes: brand/COMPONENTS.md §6 "Scroll scenes". Pin gate min-height:600px is also in scenes.js, home.css, proof.css and index.html (#top's .ia); #top as a whole has its own (home.css 1) */
[data-scene]{--p:1;--step:0;--m:1;position:relative}
.scene__steps{display:grid;gap:clamp(24px,4vw,40px)}
.scene__tabs{display:none}
html:not(.js) .scene__fx,.scene--static .scene__fx{display:none}
@media not screen and (prefers-reduced-motion:no-preference) and (min-height:600px){.scene__fx{display:none}}
@media(max-width:719px){[data-scene]{--m:.6}}
:where(.bp-grid){position:relative}
.bp-grid{isolation:isolate}
.bp-grid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;--g1:color-mix(in srgb,var(--fg) 9%,transparent);--g2:color-mix(in srgb,var(--fg) 4.5%,transparent);background-image:linear-gradient(var(--g1) 1px,transparent 1px),linear-gradient(90deg,var(--g1) 1px,transparent 1px),linear-gradient(var(--g2) 1px,transparent 1px),linear-gradient(90deg,var(--g2) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center}
.bp-grid--fade::after{-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.callout{--len:40px;display:inline-flex;align-items:center;color:var(--fg)}
.callout::before{content:"";flex:none;width:calc(var(--len) * var(--m,1));height:9px;background:linear-gradient(currentColor,currentColor) left center/1px 9px no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.callout--r{flex-direction:row-reverse}
.callout--r::before{background-position:right center,center}
.callout--up,.callout--down{flex-direction:column;align-items:flex-start}
.callout--down{flex-direction:column-reverse}
.callout--up::before,.callout--down::before{width:9px;height:calc(var(--len) * var(--m,1));margin-left:12px;background:linear-gradient(currentColor,currentColor) center top/9px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.callout--down::before{background-position:center bottom,center}
.callout__tag{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:5px 9px;background:var(--raised);border:1px solid var(--frame);font-stretch:75%;font-weight:500;font-size:14px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.callout__note{flex-basis:100%;font-family:var(--th-font-mono);font-stretch:100%;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
@media(max-width:479px){.callout__tag{padding:4px 7px;font-size:13px}.callout__note{font-size:13px;letter-spacing:.06em}}/* 13px is BRAND's mono floor: the honesty stamps are never the smallest text */
.callout--decide .callout__tag{text-transform:none;font-stretch:100%;letter-spacing:-.01em}
.callout--decide .callout__tag::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--red)}
.callout--decide[data-state=decided] .callout__tag::before{background:var(--red)}
.callout--decide,.callout--decide *{transform:none!important;transition:none!important;animation:none!important}
.scene__tabs li{display:flex;min-width:0}
.scene__tabs li+li{border-left:1px solid var(--frame)}
.scene__tabs button{flex:1;min-width:0;min-height:48px;padding:0 8px;border:0;border-radius:0;background:none;color:var(--fg);font-stretch:75%;font-weight:500;font-size:14px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
@media(hover:hover){.scene__tabs button:hover{text-decoration:underline;text-underline-offset:3px}}/* a tapped tab never keeps a stuck underline after aria-current moves on */
.scene__tabs [aria-current]{background:var(--fg);color:var(--bg)}
.scene__tabs::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-5px;height:2px;background:var(--fg);transform:scaleX(var(--p));transform-origin:0 50%}
@media(max-width:479px){.scene__tabs button{padding:0 4px;font-size:13px}}
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px){
.js [data-scene]:not(.scene--static){height:calc(var(--scene-len,3) * 100vh);height:calc(var(--scene-len,3) * 100svh);padding-block:0}
.js [data-scene]:not(.scene--static) .scene__stage{position:sticky;top:0;display:grid;align-content:center;height:100vh;height:100svh;padding-top:var(--th-header);overflow:hidden;overflow:clip}
.js [data-scene]:not(.scene--static) .scene__still{display:none}
.js [data-scene]:not(.scene--static) .scene__tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:min(100%,720px);margin-inline:auto;border:1px solid var(--frame);background:var(--raised)}
.js [data-scene]:not(.scene--static) .scene__steps{gap:0}
.js [data-scene]:not(.scene--static) .scene__step{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity var(--th-t-panel) var(--th-ease)}
.js [data-scene]:not(.scene--static) .scene__step.is-current,.js [data-scene]:not(.scene--static):not([data-scene-step]) .scene__step:last-child{opacity:1;pointer-events:auto}
.js [data-scene]:not(.scene--static) .fx{--a:0;--b:1;--c:2;--d:3;--x:0px;--y:0px;--s:1;--z:1;--r:0deg;--o:1;
--t:clamp(0,(var(--p) - var(--a)) / (var(--b) - var(--a)),1);--u:clamp(0,(var(--p) - var(--c)) / (var(--d) - var(--c)),1);--k:calc(1 - var(--t));
opacity:calc((1 + (var(--o) - 1) * var(--k)) * (1 - var(--u)));
transform:translate3d(calc(var(--x) * var(--k) * var(--m)),calc(var(--y) * var(--k) * var(--m)),0) scale(calc((1 + (var(--s) - 1) * var(--k)) * (1 + (var(--z) - 1) * var(--u)))) rotate(calc(var(--r) * var(--k)))}
.js [data-scene]:not(.scene--static) .fx--to{--k:var(--t)}
.js [data-scene].is-near:not(.scene--static) .fx{will-change:transform,opacity}
.js [data-scene]:not(.scene--static) .fx--cut,.js [data-scene]:not(.scene--static) .callout--decide{opacity:calc(clamp(0,(var(--p) - var(--a,0)) * 10000,1) * (1 - clamp(0,(var(--p) - var(--c,2)) * 10000,1)))}
.js [data-scene]:not(.scene--static) .fx--cut{transform:none}
}
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-width:719px){
.js [data-scene]:not(.scene--static){height:calc(var(--scene-len-sm,1.8) * 100vh);height:calc(var(--scene-len-sm,1.8) * 100svh)}
.js [data-scene]:not(.scene--static) .fx--wide{opacity:1;transform:none}
}