/* /tools/kpi-cascade/ first screen (S0, the cascade fall). Classes prefixed kpi-sa- and kpi-splash. Animated
   properties: transform, opacity, clip-path only. Entrances once on load; lives on their own elements. */
/* family colours on dark grounds (graphics at 3:1 or more, text uses them only at 18 px bold and above) */
.kpi-splash,.kpi-dk{--kf-production:#7fd0a3;--kf-quality:#a5c8ff;--kf-delivery:#e8c37a;--kf-cost:#d5b6ff;--kf-people:#f4ab92;--kf-sustainability:#8fdcd2}
:is(.kpi-splash,.kpi-dk) [data-f=production]{--fc:var(--kf-production)}:is(.kpi-splash,.kpi-dk) [data-f=quality]{--fc:var(--kf-quality)}:is(.kpi-splash,.kpi-dk) [data-f=delivery]{--fc:var(--kf-delivery)}:is(.kpi-splash,.kpi-dk) [data-f=cost]{--fc:var(--kf-cost)}:is(.kpi-splash,.kpi-dk) [data-f=people]{--fc:var(--kf-people)}:is(.kpi-splash,.kpi-dk) [data-f=sustainability]{--fc:var(--kf-sustainability)}

.kpi-splash .kpi-splash__structure{inset:0;height:auto;display:block;z-index:-1}
.kpi-splash .kpi-splash__structure::after{display:none}
.kpi-splash__weave{position:absolute;inset:0;background-image:linear-gradient(#b4d4c514 1px,transparent 1px),linear-gradient(90deg,#b4d4c514 1px,transparent 1px);background-size:96px 96px;background-position:-1px -1px}
.kpi-splash__scrim{position:absolute;inset:0 auto 0 0;width:44%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#072d2b 0%,#072d2bf5 62%,#072d2b00 100%)}
.kpi-splash .gft-splash__content{max-width:none}
.kpi-splash h1{font-size:clamp(3.2rem,min(5.4vw,9svh),5.6rem);max-width:9ch}
.kpi-splash .gft-splash__lede{font-size:18px;max-width:34ch;color:#dce8e1}
.kpi-splash :is(.gft-eyebrow,.gft-splash__cue,.gft-splash__caption){font-size:13px;color:#dce8e1}
.kpi-splash .gft-splash__bottom{position:relative}

.kpi-sa{position:absolute;right:clamp(12px,2.2vw,40px);top:20px;bottom:calc(var(--splash-strip-h,70px) + 6px);width:58%;overflow-anchor:none}
.kpi-sa__land{position:absolute;inset:0;transform-origin:30% 100%}
.kpi-sa__art{position:absolute;inset:0;display:grid;place-items:center}
.kpi-sa__art svg{width:100%;height:100%;overflow:visible}
.kpi-sa__art--phone{display:none}
.kpi-sa svg text{font-family:var(--gft-font-display);fill:#eef4f0}
.kpi-sa .kpi-sa-mono{font:600 15.5px var(--gft-font-mono);letter-spacing:.1em;fill:#eef4f0}
.kpi-sa .kpi-sa-mono2{font:500 15.5px var(--gft-font-mono);fill:#eef4f0}
.kpi-sa-root circle{fill:#6bb68f}
.kpi-sa-trunk path,.kpi-sa-br{fill:none;stroke:#6bb68f;stroke-width:3}
.kpi-sa-th{stroke:var(--fc);stroke-opacity:.6;stroke-width:2}
.kpi-sa-box{fill:#ffffff10;stroke:var(--fc);stroke-opacity:.75}
.kpi-sa .kpi-sa-n{font-size:24px;font-weight:850;fill:var(--fc)}
.kpi-sa .kpi-sa-l{font-size:17px;font-weight:650}
.kpi-sa-pulse{fill:#f1c480;opacity:0}
.kpi-sa-chip rect{fill:#0a3d3a;stroke:var(--fc);stroke-opacity:.75}
.kpi-sa-chip text{font-size:15px}
.kpi-sa-chip[data-mine=true] rect{fill:#5a4a1e;stroke:#e9ad52;stroke-opacity:1}
.kpi-sa-st{fill:none;stroke:#e9ad52;stroke-width:2.2}
.kpi-sa-lbg{fill:#072d2b}
.kpi-sa-shaft{stroke:#d6e5dc;stroke-width:3}
.kpi-sa-eye path{stroke:#d6e5dc;stroke-width:1.5}
.kpi-sa-ring{fill:#072d2b;stroke:#d6e5dc;stroke-width:2}
.kpi-sa-fill{fill:#f1c480;opacity:0}
.kpi-sa-eye[data-on=true] .kpi-sa-ring{stroke:#f1c480}
.kpi-sa-eye[data-on=true] .kpi-sa-fill{opacity:1}
.kpi-sa .kpi-sa-five text{font-size:170px;font-weight:850;letter-spacing:-.06em;fill:#f1c480}

/* entrance on load: the trunk drops, the warps split right, the chips fall, the five threads pass the heddle, the 5 rolls in */
:root[data-m-go] .kpi-sa-trunk{animation-name:kpi-sa-drop;animation-duration:420ms;animation-timing-function:cubic-bezier(.3,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:60ms}
:root[data-m-go] .kpi-sa-root{animation-name:kpi-sa-fade;animation-duration:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .kpi-sa-warp{animation-name:kpi-sa-warp;animation-duration:460ms;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:calc(160ms + var(--i,0) * 60ms)}
:root[data-m-go] .kpi-sa-chip{animation-name:kpi-sa-fall;animation-duration:380ms;animation-timing-function:cubic-bezier(.3,1.3,.5,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:calc(250ms + var(--j,0) * 30ms)}
:root[data-m-go] .kpi-sa-st{animation-name:kpi-sa-drop;animation-duration:320ms;animation-timing-function:cubic-bezier(.3,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:calc(480ms + var(--k,0) * 40ms)}
:root[data-m-go] .kpi-sa-eye[data-on=true] .kpi-sa-fill{animation-name:kpi-sa-eye;animation-duration:220ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:calc(600ms + var(--k,0) * 50ms)}
:root[data-m-go] .kpi-sa-five text{animation-name:kpi-sa-roll;animation-duration:240ms;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:820ms}
:root[data-m-go] .kpi-sa-cap{animation-name:kpi-sa-fade;animation-duration:400ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:500ms}
@keyframes kpi-sa-drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes kpi-sa-fade{from{opacity:0}}
@keyframes kpi-sa-warp{from{opacity:.15;transform:translateX(-36px)}}
@keyframes kpi-sa-fall{from{opacity:0;transform:translateY(-48px)}}
@keyframes kpi-sa-eye{from{opacity:0}}
@keyframes kpi-sa-roll{from{opacity:0;transform:translateY(60px)}}
/* live while on screen: a signal pulse runs down each thread, the eyes breathe, the five owned chips glow in turn */
:root[data-m-go] .kpi-sa[data-m-on] .kpi-sa-pulse{animation-name:kpi-sa-run;animation-duration:4.2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(1.2s + var(--i,0) * 560ms)}
:root[data-m-go] .kpi-sa[data-m-on] .kpi-sa-ring{animation-name:kpi-sa-breathe;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--k,0) * 260ms)}
:root[data-m-go] .kpi-sa[data-m-on] .kpi-sa-chip[data-mine=true] rect{animation-name:kpi-sa-glow;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:calc(var(--j,0) * 400ms)}
@keyframes kpi-sa-run{0%{opacity:0;transform:translateX(0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(540px)}}
@keyframes kpi-sa-breathe{from{opacity:.85}to{opacity:1}}
@keyframes kpi-sa-glow{0%,70%,100%{opacity:1}82%{opacity:.62}}
/* cascade lands: while the splash leaves, its stage compresses (transform only, alone on its element) and the 5 slides down-left toward the console's gauge */
@supports (animation-timeline:view()){
 :root[data-m-go] .kpi-sa__land{animation-name:kpi-sa-land;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 100%}
 :root[data-m-go] .kpi-sa-five{animation-name:kpi-sa-slide;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 90%}
}
@keyframes kpi-sa-land{from{transform:none}to{transform:translateY(3%) scale(.92)}}
@keyframes kpi-sa-slide{from{transform:none}to{transform:translate(-24px,68px)}}

@media(min-width:1001px) and (max-height:790px){.kpi-sa{top:10px}}
@media(max-width:1000px){
 .kpi-splash__scrim{display:none}
 .kpi-sa{left:28px;right:28px;width:auto;top:auto;height:min(46svh,380px);bottom:calc(var(--splash-strip-h,64px) + 4px)}
 .kpi-sa__art{display:none}
 .kpi-sa__art--phone{display:grid}
 .kpi-splash .gft-splash__content{padding-bottom:calc(min(46svh,380px) + 40px)}
 .kpi-sa .kpi-sa-n{font-size:20px}
 .kpi-sa .kpi-sa-l{font-size:13px;font-weight:600}
 .kpi-sa .kpi-sa-mono2{font-size:13px}
 .kpi-sa .kpi-sa-five text{font-size:84px}
}
@media(max-width:640px){
 .kpi-sa{left:20px;right:20px}
 .kpi-splash h1{font-size:36px;line-height:1.05;max-width:12ch}
 .kpi-splash .gft-splash__lede{font-size:17px;line-height:1.6}
}