@import url("scrollcraft.css") layer(scrollcraft);
/* Mother owns the floor. Scrollcraft supplies mechanism, never a replacement theme. */
:root{--sc-canvas:var(--md-bg);--sc-surface:var(--md-grey-light);--sc-ink:var(--md-text);--sc-ink-soft:var(--md-text-muted);--sc-accent:var(--md-text);--sc-accent-ink:var(--md-bg);--sc-font-text:var(--md-font-main);--sc-font-display:var(--md-font-main);--ft-rule:currentColor}
body{overflow-x:visible}
[data-ft-scene]{--ft-phone-y:0px;--ft-ground-y:0px;--ft-near-x:0px;--ft-wide-y:0px;--ft-portrait-y:0px;--ft-pointer-x:0px;--ft-pointer-y:0px;--ft-trace:1;--ft-clip:0%;--ft-row:0px}
.ft-depth-host{position:relative;isolation:isolate}
.ft-depth-ground{position:absolute;z-index:-1;inset:16px -12px -12px 12px;border:1px solid currentColor;opacity:.45;transform:translate3d(0,var(--ft-ground-y),0);pointer-events:none}
.ft-depth-corners{position:absolute;inset:8px;z-index:0;pointer-events:none;transform:translate3d(var(--ft-near-x),0,0);background:linear-gradient(currentColor,currentColor) left top/24px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/24px 1px no-repeat}
[data-ft-plane=phone]{transform:translate3d(calc(var(--ft-pointer-x)*.6),calc(var(--ft-phone-y) + var(--ft-pointer-y)*.6),0)}
.ft-film-depth [data-ft-plane=wide]{transform:translate3d(var(--ft-pointer-x),calc(var(--ft-wide-y) + var(--ft-pointer-y)),0)}
.ft-film-depth [data-ft-plane=portrait]{transform:translate3d(calc(var(--ft-pointer-x)*-.6),calc(var(--ft-portrait-y) - var(--ft-pointer-y)*.6),0)}
[data-ft-plane]{transition:none!important}
[data-ft-scene=storyboard] .wide-treatment img,[data-ft-scene=route-map] .route-visual img{clip-path:inset(0 var(--ft-clip) 0 0)}
[data-ft-scene=workflow] .mods{position:relative}
[data-ft-scene=workflow] .mods::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:currentColor;transform:scaleY(var(--ft-trace));transform-origin:top;pointer-events:none}
[data-ft-scene=workflow] .mod{padding-left:18px}
[data-ft-scene=workflow] .mod,[data-ft-scene=service-rows] .mod{transform:translate3d(0,var(--ft-row),0)}
[data-ft-scene=service-rows] .mod:nth-child(2){transform:translate3d(0,calc(var(--ft-row)*.65),0)}
[data-ft-scene=service-rows] .mod:nth-child(3){transform:translate3d(0,calc(var(--ft-row)*.3),0)}
.ft-contact-trace{position:relative;--ft-trace:1}
.ft-contact-trace::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:currentColor;transform:scaleX(var(--ft-trace));transform-origin:left;z-index:3;pointer-events:none}
.ft-contact-trace .touchpoint-tile{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.ft-contact-trace[data-ft-phase="0"] .discovery,.ft-contact-trace[data-ft-phase="1"] .understand,.ft-contact-trace[data-ft-phase="2"] .inquiry{outline:2px solid currentColor;outline-offset:-2px}
[data-ft-scene=scope-lines] .mod{position:relative}
[data-ft-scene=scope-lines] .mod::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;transform:scaleX(var(--ft-trace));transform-origin:left;pointer-events:none}
@media(hover:hover) and (pointer:fine){.ft-contact-trace .touchpoint-tile:hover{transform:translate3d(0,-4px,0)}}
@media(max-width:600px){.ft-depth-ground{inset:8px -5px -5px 5px}.ft-contact-trace::before{right:auto;bottom:0;width:2px;height:auto;transform:scaleY(var(--ft-trace));transform-origin:top}.ft-contact-trace .touchpoint-tile{transform:none!important}}
@media(prefers-reduced-motion:reduce){[data-ft-plane],[data-ft-scene] .mod,.ft-depth-ground,.ft-depth-corners,.ft-contact-trace::before,.ft-contact-trace .touchpoint-tile{transform:none!important}[data-ft-scene] .mods::after,[data-ft-scene] .mod::after{transform:none!important}[data-ft-scene] img{clip-path:none!important}.ft-contact-trace .touchpoint-tile{transition:none!important}}

/* Trace lies on bright cards in either theme. */
.ft-contact-trace{color:#181818}

@media(prefers-reduced-motion:reduce){.film-layout img,.it::after{transform:none!important}}
