/*
 * Slidestory scenes: the pictures in "From a file to a finished story", the three proof cards, and the reel of chart styles.
 * Every animation starts only under .js, so without scripts the pictures simply show their finished state.
 */

/* ---------- the reel: real drawings from the app, drifting past on a dark band ---------- */
.forms { background: var(--inv-bg); color: var(--inv-fg); overflow: hidden; padding-bottom: clamp(48px, 7vw, 96px); }
.forms .band-head p { color: color-mix(in srgb, var(--inv-fg) 72%, transparent); }
.reel { --g: 18px; --fw: clamp(230px, 25vw, 330px); min-height: calc(2 * (var(--fw) * .5625 + 21.5px) + var(--g)); align-content: start; display: grid; gap: var(--g); margin-top: clamp(28px, 4.4vw, 52px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reel-track { display: flex; gap: var(--g); width: max-content; animation: reel 80s linear infinite; }
.reel-track.back { animation-direction: reverse; animation-duration: 95s; }
.reel:hover .reel-track { animation-play-state: paused; }
.reel figure { flex: none; width: var(--fw); display: grid; gap: 8px; margin: 0; }
.reel .pic { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .6); }
.reel .pic svg { display: block; width: 100%; height: 100%; }
.reel figcaption { padding-left: 4px; font: 600 13.5px/1 var(--sans); color: color-mix(in srgb, var(--inv-fg) 70%, transparent); }
@keyframes reel { to { transform: translateX(calc(-50% - var(--g) / 2)); } }

/* ---------- shared keyframes (every one names its end state, so hidden starting styles cannot hold it back) ---------- */
@keyframes scIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes scDown { from { opacity: 0; transform: translateY(-9px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes scUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes scFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes scGrow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes scDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes march { to { stroke-dashoffset: -56; } }

/* ---------- the three scenes in "How it works" ---------- */
.step { gap: 14px; }
.scene { margin: 0 0 4px; aspect-ratio: 16 / 10; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-soft); }
.scene svg { display: block; width: 100%; height: 100%; }
.scene text { font: 600 11px var(--sans); fill: var(--ink); text-anchor: middle; }
.scene text.l { text-anchor: start; }
.js .scene { opacity: .55; transform: scale(.97); transition: opacity .5s, transform .6s var(--ease); }
.js .step.on .scene { opacity: 1; transform: none; }
.sc1 .mini, .sc1 .file, .sc1 .fc, .sc2 .pl, .sc2 .sl, .sc2 .ky, .sc3 .pk, .sc3 .png { transform-box: fill-box; transform-origin: 50% 50%; }

/* 1. upload: a file drops into the tray and opens into its slides */
.sc1 .dz { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 7; }
.sc1 .fc rect { fill: var(--accent-soft); }
.sc1 .ft { fill: #fff; font-size: 9px; font-weight: 700; }
.sc1 .dn circle { fill: var(--ok-fg); }
.sc1 .dn path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc1 .dn text { fill: var(--ink-2); }
.js .sc1 .file, .js .sc1 .mini, .js .sc1 .fc, .js .sc1 .dn { opacity: 0; }
.js .step.on .sc1 .dz { animation: march 9s linear infinite; }
.js .step.on .sc1 .fc { animation: scDown .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * 110ms + 100ms) both; }
.js .step.on .sc1 .file { animation: fileDrop 1s cubic-bezier(.3, 1.35, .5, 1) .35s both; }
.js .step.on .sc1 .mini { animation: miniOut .8s var(--ease) calc(var(--k) * 120ms + 1.25s) both; }
.js .step.on .sc1 .dn { animation: scFade .5s 2.3s both; }
@keyframes fileDrop { from { opacity: 0; transform: translateY(-130px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes miniOut { from { opacity: 0; transform: translateX(var(--tx)) scale(.55); } to { opacity: 1; transform: none; } }

/* 2. find the thread: slides in a row, one line drawn through them, the acts and the key numbers marked */
.sc2 .pbg { fill: var(--ink); }
.sc2 .pln { fill: var(--paper); }
.sc2 .pln.o { opacity: .5; }
.sc2 .kt { font-size: 9.5px; font-weight: 700; fill: #0E1530; }
.sc2 .ky { transform-origin: 50% 100%; }
.sc2 .ky path, .sc2 .stems path { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 3 3; }
.sc2 .th { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.sc2 .dots circle { fill: #FFD84A; stroke: var(--ink); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.sc2 .ac path { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc2 .ac text { fill: var(--ink-2); }
.js .sc2 .pl, .js .sc2 .sl, .js .sc2 .ky, .js .sc2 .dots circle, .js .sc2 .ac, .js .sc2 .stems { opacity: 0; }
.js .sc2 .th { stroke-dashoffset: 1; }
.js .step.on .sc2 .pl { animation: scIn .7s var(--ease) .1s both; }
.js .step.on .sc2 .sl { animation: scUp .7s var(--ease) calc(var(--k) * 90ms + .35s) both; }
.js .step.on .sc2 .stems { animation: scFade .5s 1s both; }
.js .step.on .sc2 .th { animation: scDraw 1.4s var(--ease) 1s both; }
.js .step.on .sc2 .dots circle { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * 270ms + 1.15s) both; }
.js .step.on .sc2 .ac { animation: scFade .6s 2.5s both; }
.js .step.on .sc2 .ky { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * 200ms + 2.9s) both, bob 3s ease-in-out calc(var(--k) * 400ms + 3.6s) infinite; }

/* 3. choose the telling: the ring glides along the options, the big picture follows, one is picked and saved */
.sc3 .cap { font-size: 10px; fill: var(--muted); }
.sc3 .arr { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc3 .png rect { fill: var(--accent); }
.sc3 .png text { fill: #fff; font-size: 11.5px; font-weight: 700; }
.sc3 .png path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc3 .card { fill: #fff; stroke: var(--line-2); stroke-width: 1.2; }
.sc3 .big { font-size: 17px; font-weight: 800; fill: #0E1530; }
.sc3 .ring { fill: none; stroke: var(--accent); stroke-width: 2.6; }
.sc3 .pk circle { fill: var(--accent); }
.sc3 .pk path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc3 .lb, .sc3 .lc, .sc3 .png { opacity: 0; }
.sc3 .pk { transform: scale(0); }
.js .step.on .sc3 .la { animation: s3a 9s linear .6s infinite; }
.js .step.on .sc3 .lb { animation: s3b 9s linear .6s infinite; }
.js .step.on .sc3 .lc { animation: s3c 9s linear .6s infinite; }
.js .step.on .sc3 .ring { animation: s3r 9s var(--ease) .6s infinite; }
.js .step.on .sc3 .pk { animation: s3p 9s cubic-bezier(.3, 1.5, .5, 1) .6s infinite; }
.js .step.on .sc3 .png { animation: s3d 9s var(--ease) .6s infinite; }
@keyframes s3a { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s3b { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes s3c { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s3r { 0%, 30% { transform: none; } 34%, 63% { transform: translateX(54px); } 67%, 96% { transform: translateX(108px); } 100% { transform: none; } }
@keyframes s3p { 0%, 72% { transform: scale(0); } 76%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes s3d { 0%, 78% { opacity: 0; transform: translateY(8px); } 84%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- the proof cards ---------- */
.proof { gap: 14px; }
.pv { aspect-ratio: 2 / 1; border-radius: 16px; background: var(--accent-soft); overflow: hidden; }
.pv svg { display: block; width: 100%; height: 100%; }
.pv text { font: 600 11px var(--sans); fill: #5A6587; text-anchor: start; }
.pv .cd { fill: #fff; stroke: #DADFEE; }
.pv .e { text-anchor: end; }
.pv g { transform-box: fill-box; transform-origin: 50% 50%; }
.js .proof { transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s, border-color .3s; transition-delay: calc(var(--i, 0) * 120ms); }
.js .proof.in:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 40px -26px rgba(14, 21, 48, .5); transition-delay: 0s; }

/* 1. every figure is looked up on the slide */
.pv1 .nm { font: 800 17px var(--display); fill: #0E1530; text-anchor: end; }
.pv1 .hi { fill: #FFD84A; }
.pv1 .chev { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pv1 .bx { fill: #8E9AC2; transform-box: fill-box; transform-origin: 50% 100%; }
.pv1 .ck circle { fill: var(--ok-fg); }
.pv1 .ck path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .pv1 .hi, .js .pv1 .chev, .js .pv1 .ck { opacity: 0; }
.js .pv1 .bx { transform: scaleY(0); }
.js .proof.in .pv1 .hi { animation: pvHi 1.2s calc(var(--k) * 700ms + .5s) both; }
.js .proof.in .pv1 .chev { animation: scFade .5s .4s both; }
.js .proof.in .pv1 .bx { animation: scGrow .7s var(--ease) calc(var(--k) * 700ms + .9s) both; }
.js .proof.in .pv1 .ck { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * 700ms + 1.5s) both; }
@keyframes pvHi { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: .3; } }

/* 2. the change is worked out from the chart's own two points */
.pv2 .gl { fill: none; stroke: #C0C8E2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.pv2 .al { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.pv2 .gd { fill: none; stroke: #8E9AC2; stroke-width: 1.6; stroke-dasharray: 3 4; }
.pv2 .d0 { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.pv2 .d1 { fill: #FFD84A; stroke: #0E1530; stroke-width: 2.6; }
.pv2 .d0, .pv2 .d1 { transform-box: fill-box; transform-origin: center; }
.pv2 .br { fill: none; stroke: #0E1530; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv2 .ct { font: 800 11.5px var(--sans); fill: #0E1530; text-anchor: middle; }
.pv2 .fm { text-anchor: middle; font-weight: 700; }
.js .pv2 .gl, .js .pv2 .al { stroke-dashoffset: 1; }
.js .pv2 .d0, .js .pv2 .d1, .js .pv2 .br, .js .pv2 .chp, .js .pv2 .gd, .js .pv2 .fm { opacity: 0; }
.js .proof.in .pv2 .gl { animation: scDraw 1.2s var(--ease) .4s both; }
.js .proof.in .pv2 .al { animation: scDraw 1.4s var(--ease) .6s both; }
.js .proof.in .pv2 .d0 { animation: scPop .4s cubic-bezier(.3, 1.5, .5, 1) .6s both; }
.js .proof.in .pv2 .d1 { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) 1.9s both; }
.js .proof.in .pv2 .gd { animation: scFade .5s 1.9s both; }
.js .proof.in .pv2 .br { animation: scFade .5s 2.2s both; }
.js .proof.in .pv2 .chp { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) 2.5s both; }
.js .proof.in .pv2 .fm { animation: scFade .6s 3s both; }

/* 3. a value read off a picture is drawn as a question, not as a fact */
.pv3 .bx { fill: #8E9AC2; transform-box: fill-box; transform-origin: 50% 100%; }
.pv3 .unk { fill: url(#hatch); stroke: #E08A00; stroke-width: 2; stroke-dasharray: 5 4; transform-box: fill-box; transform-origin: 50% 100%; }
.pv3 .tg rect { fill: var(--tune-bg); }
.pv3 .tg text { fill: var(--tune-fg); font-size: 11px; font-weight: 700; text-anchor: middle; }
.js .pv3 .bx, .js .pv3 .unk { transform: scaleY(0); }
.js .pv3 .tg, .js .pv3 .im { opacity: 0; }
.js .proof.in .pv3 .bx { animation: scGrow .7s var(--ease) calc(var(--k) * 140ms + .4s) both; }
.js .proof.in .pv3 .unk { animation: scGrow .7s var(--ease) .68s both, unkPulse 2.4s ease-in-out 1.8s infinite; }
.js .proof.in .pv3 .tg { animation: scPop .5s cubic-bezier(.3, 1.5, .5, 1) 1.4s both; }
.js .proof.in .pv3 .im { animation: scFade .6s .9s both; }
@keyframes unkPulse { 50% { stroke-width: 3.4; stroke: #C66F00; } }

/* a small invitation to press: the arrow on each call to action nudges */
.cta .gem svg { animation: gemBob 1.9s ease-in-out 1.5s infinite; }
.end .cta { --bob: -3px; }
@keyframes gemBob { 50% { transform: translateY(var(--bob, 3px)); } }

@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; }
  .reel-track { animation: none; }
  .cta .gem svg { animation: none; }
}