/* ============================================================
   PRODUCT SHOWREEL — 26s master clock, 10 scenes
   Beats (% of the 26s clock):
     flythru  0-17   connector tiles, recycled per-tile
     sc2     16-27   connections panel
     sc3     26-40   slack / teams thread
     sc5     39-55   the delivered document
     sc6     54-68   coworkers
     sc8     67-87   credits
     sc10    86-100  close
   ============================================================ */
.reel-sec{padding:40px 0 70px}
/* the window is 588px tall and scaled by --s, so the frame is derived from it -
   never guessed, or the dashboard gets sliced at in-between widths. */
.reel:not(.playing) *,.reel:not(.playing){animation-play-state:paused!important}
.reel{position:relative;--s:1.06;--pad:36px;height:calc(588px * var(--s) + var(--pad));border-radius:var(--radius-l);overflow:hidden;background:#06060A;isolation:isolate}

/* ---------- moving gradient background ---------- */
.reel-bg{position:absolute;inset:-20%;pointer-events:none}
.reel-bg span{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform,opacity}
.rb-a{width:60%;height:80%;left:-6%;top:-14%;background:radial-gradient(circle,rgba(96,104,120,.5),transparent 66%);animation:rbA 34s infinite alternate ease-in-out}
.rb-b{width:56%;height:74%;right:-8%;bottom:-16%;background:radial-gradient(circle,rgba(72,78,92,.46),transparent 66%);animation:rbB 41s infinite alternate ease-in-out}
.rb-c{width:44%;height:52%;left:26%;top:24%;background:radial-gradient(circle,rgba(200,228,95,.20),transparent 62%);animation:rbC 26s infinite ease-in-out}
@keyframes rbA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(16%,10%,0) scale(1.24)}}
@keyframes rbB{0%{transform:translate3d(0,0,0) scale(1.14)}100%{transform:translate3d(-14%,-8%,0) scale(1)}}
@keyframes rbC{0%,100%{transform:translate3d(-8%,4%,0) scale(.8);opacity:.5}22%{transform:translate3d(6%,-6%,0) scale(1.3);opacity:.95}52%{transform:translate3d(-4%,8%,0) scale(.9);opacity:.4}80%{transform:translate3d(10%,-2%,0) scale(1.5);opacity:1}}
.reel-mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 100% at 50% 50%,#000 20%,transparent 78%);animation:meshDrift 26s linear infinite;pointer-events:none}
@keyframes meshDrift{to{background-position:64px 64px}}
.reel-vig{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(to top,rgba(6,6,10,.76) 0,rgba(6,6,10,.3) 66px,rgba(6,6,10,0) 136px),radial-gradient(130% 108% at 50% 46%,transparent 40%,rgba(4,4,8,.72) 100%)}
.reel-grain{position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:7;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

/* ---------- stage & scenes ---------- */
.reel-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1150px;perspective-origin:50% 48%;transform:scale(var(--s));transform-style:preserve-3d;z-index:2}
.sc{position:absolute;display:grid;place-items:center;opacity:0;perspective:1150px;transform-style:flat;will-change:opacity,filter;animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:linear}
.sc-fly,.sc-tilt{transform-style:preserve-3d;will-change:transform;animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:linear}
.sc2{animation-name:sc2}.sc3{animation-name:sc3}.sc5{animation-name:sc5}.sc6{animation-name:sc6}.sc8{animation-name:sc8}.sc10{animation-name:sc10}
.sc2 .sc-fly{animation-name:fly2}.sc3 .sc-fly{animation-name:fly3}.sc5 .sc-fly{animation-name:fly5}.sc6 .sc-fly{animation-name:fly6}.sc8 .sc-fly{animation-name:fly8}.sc10 .sc-fly{animation-name:fly10}
.sc2 .sc-tilt{animation-name:tilt2}.sc3 .sc-tilt{animation-name:tilt3}.sc5 .sc-tilt{animation-name:tilt5}.sc6 .sc-tilt{animation-name:tilt6}.sc8 .sc-tilt{animation-name:tilt8}.sc10 .sc-tilt{animation-name:tilt10}

/* 1 · cold open — mark blooms, rushes past camera */
/* 2 · connections — camera holds, the field flies through it */
@keyframes sc2{0%,15.8%{opacity:0;filter:blur(0)}18.2%{opacity:1;filter:blur(0)}25%{opacity:1;filter:blur(0)}26.6%{opacity:1;filter:blur(9px)}27.4%,100%{opacity:0;filter:blur(18px)}}
/* 3 · slack — whips in from the right, settles close */
@keyframes sc3{0%,26.4%{opacity:0;filter:blur(0)}29%{opacity:1;filter:blur(0)}37%{opacity:1;filter:blur(0)}39%{opacity:1;filter:blur(9px)}40.4%,100%{opacity:0;filter:blur(18px)}}
/* 4 · overview — punches up from below, fast */
/* 5 · the document — slow, patient drift */
@keyframes sc5{0%,39.4%{opacity:0;filter:blur(0)}42%{opacity:1;filter:blur(0)}53%{opacity:1;filter:blur(0)}54.4%{opacity:1;filter:blur(9px)}55.4%,100%{opacity:0;filter:blur(18px)}}
/* 6 · coworkers — flips in from the left */
@keyframes sc6{0%,54.4%{opacity:0;filter:blur(0)}57%{opacity:1;filter:blur(0)}65%{opacity:1;filter:blur(0)}67%{opacity:1;filter:blur(9px)}68.4%,100%{opacity:0;filter:blur(18px)}}
/* 7 · settings — the fast beat, a snap */
/* 8 · credits — pushes in out of the depth, tilted */
@keyframes sc8{0%,67.4%{opacity:0;filter:blur(0)}70%{opacity:1;filter:blur(0)}83%{opacity:1;filter:blur(0)}85.5%{opacity:1;filter:blur(9px)}87%,100%{opacity:0;filter:blur(18px)}}
/* 9 · constellation — everything at once, pulling back */
/* 10 · close */
@keyframes sc10{0%,86.4%{opacity:0;filter:blur(0)}89.5%{opacity:1;filter:blur(0)}97%{opacity:1;filter:blur(0)}99.3%{opacity:1;filter:blur(1px)}100%{opacity:0;filter:blur(2px)}}


@keyframes fly2{0%,14.8%{transform:translate3d(30%,3%,-940px)}28.4%,100%{transform:translate3d(-26%,-4%,780px)}}
@keyframes fly3{0%,25.4%{transform:translate3d(-30%,5%,-520px)}41.4%,100%{transform:translate3d(26%,-6%,640px)}}
@keyframes fly5{0%,38.4%{transform:translate3d(24%,7%,-760px)}56.4%,100%{transform:translate3d(-22%,-6%,430px)}}
@keyframes fly6{0%,53.4%{transform:translate3d(-30%,-11%,-900px)}69.4%,100%{transform:translate3d(24%,13%,780px)}}
@keyframes fly8{0%,66.4%{transform:translate3d(28%,20%,-980px)}88%,100%{transform:translate3d(-24%,-16%,780px)}}
@keyframes fly10{0%,85.4%{transform:translateZ(-72px) scale(.986)}100%{transform:translateZ(80px) scale(1.03)}}
@keyframes tilt2{0%,14.8%{transform:rotateX(44deg) rotateY(-34deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}18.2%{transform:rotateX(3deg) rotateY(-9deg);animation-timing-function:linear}25%{transform:rotateX(-2deg) rotateY(7deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}28.4%,100%{transform:rotateX(-22deg) rotateY(26deg)}}
@keyframes tilt3{0%,25.4%{transform:rotateX(-27deg) rotateY(25deg) rotateZ(3deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}29%{transform:rotateX(-3deg) rotateY(9deg) rotateZ(1deg);animation-timing-function:linear}37%{transform:rotateX(4deg) rotateY(-8deg) rotateZ(-1deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}41.4%,100%{transform:rotateX(26deg) rotateY(-26deg) rotateZ(-3deg)}}
@keyframes tilt5{0%,38.4%{transform:rotateZ(-6deg) rotateY(-30deg) rotateX(-10deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}42%{transform:rotateZ(-2deg) rotateY(-8deg) rotateX(-1deg);animation-timing-function:linear}52%{transform:rotateZ(2deg) rotateY(7deg) rotateX(3deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}56.4%,100%{transform:rotateZ(6deg) rotateY(24deg) rotateX(16deg)}}
@keyframes tilt6{0%,53.4%{transform:rotateX(-46deg) rotateY(38deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}57%{transform:rotateX(-4deg) rotateY(10deg);animation-timing-function:linear}65%{transform:rotateX(3deg) rotateY(-8deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}69.4%,100%{transform:rotateX(24deg) rotateY(-28deg)}}
@keyframes tilt8{0%,66.4%{transform:rotateX(54deg) rotateY(-32deg) rotateZ(4deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}70%{transform:rotateX(4deg) rotateY(-9deg) rotateZ(1deg);animation-timing-function:linear}83%{transform:rotateX(-4deg) rotateY(8deg) rotateZ(-1deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}88%,100%{transform:rotateX(-28deg) rotateY(26deg) rotateZ(-4deg)}}
@keyframes tilt10{0%,85.4%{transform:rotateY(1.1deg) rotateX(.7deg);animation-timing-function:cubic-bezier(.2,.62,.28,1)}89.5%{transform:rotateY(.2deg) rotateX(.1deg);animation-timing-function:linear}97%{transform:rotateY(-.2deg) rotateX(-.1deg);animation-timing-function:cubic-bezier(.72,.04,.86,.58)}100%{transform:rotateY(-.9deg) rotateX(-.6deg)}}

/* ---------- cold open / close mark ---------- */
.reel-mark{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:clamp(36px,4.35vw,60px)}
.rm-row{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:1;letter-spacing:-.045em;white-space:nowrap;text-align:center}
.rm-logo{display:inline-block;height:.95em;width:auto;vertical-align:baseline;filter:brightness(0) invert(1);opacity:.97}
.rm-dot{display:inline-block;color:#C8E45F;letter-spacing:normal;margin-left:.065em;text-shadow:0 0 .16em rgba(200,228,95,.55)}
.rm-word{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:64px;letter-spacing:-.045em;color:#F4F3ED;line-height:1}
.rm-word b{font-weight:500}
.rm-word i{font-style:normal;color:#C8E45F;text-shadow:0 0 26px rgba(200,228,95,.85)}
.rm-sub{font-family:'Space Grotesk',sans-serif;font-size:.268em;letter-spacing:.241em;text-indent:.241em;text-transform:uppercase;color:rgba(244,243,237,.5)}

/* ---------- app window (dashboard) ---------- */
.reel .app{position:relative;width:1060px;height:588px;background:#ECECEE;border-radius:15px;overflow:hidden;display:grid;grid-template-columns:222px 1fr;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 50px 110px -34px rgba(0,0,0,.92),0 0 150px -24px rgba(200,228,95,.13);text-align:left}
.ap-side{background:#E6E6E8;border-right:1px solid rgba(20,20,18,.07);padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.aps-brand{display:flex;align-items:center;gap:8px}
.aps-brand i{width:22px;height:22px;border-radius:50%;background:#15161A;flex-shrink:0;position:relative}
.aps-brand i::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#C8E45F}
.aps-brand strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10px;letter-spacing:.1em;color:#15161A}
.aps-brand span{font-size:8px;color:#7A7B80;display:flex;align-items:center;gap:4px}
.aps-brand span::before{content:'';width:4px;height:4px;border-radius:50%;background:#9FBE3C}
.aps-agent{background:#DEDEE0;border:1px solid rgba(20,20,18,.06);border-radius:9px;padding:8px;display:flex;align-items:center;gap:7px}
.aps-agent i{width:17px;height:17px;border-radius:5px;background:#15161A;flex-shrink:0}
.aps-agent div{flex:1;min-width:0}
.aps-agent strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:9.5px;color:#15161A}
.aps-agent span{font-family:ui-monospace,monospace;font-size:7.5px;color:#8A8B90;white-space:nowrap}
.aps-agent em{font-family:'Space Grotesk',sans-serif;font-style:normal;font-size:6.5px;letter-spacing:.06em;background:#fff;border-radius:20px;padding:3px 6px;color:#15161A;display:flex;align-items:center;gap:3px}
.aps-agent em::before{content:'';width:4px;height:4px;border-radius:50%;background:#9FBE3C}
.aps-nav{display:flex;flex-direction:column;gap:2px}
.aps-nav span{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;font-size:9.5px;color:#4C4D52}
.aps-nav span::before{content:'';width:9px;height:9px;border-radius:2px;border:1.2px solid currentColor;opacity:.5;flex-shrink:0}
.aps-nav span b{margin-left:auto;font-family:ui-monospace,monospace;font-size:8px;font-weight:400;color:#8A8B90}
.aps-nav span.on{background:#D6DCEA;color:#15161A;font-weight:500}
.aps-foot{margin-top:auto;background:#DEDEE0;border-radius:9px;padding:8px 9px}
.aps-foot>span{display:block;font-size:7.5px;color:#8A8B90;margin-bottom:5px}
.aps-foot div{display:flex;justify-content:space-between;align-items:baseline}
.aps-foot em{font-style:normal;font-size:7px;color:#8A8B90;display:block}
.aps-foot strong{font-family:ui-monospace,monospace;font-weight:400;font-size:12px;color:#15161A}

.ap-main{display:flex;flex-direction:column;min-width:0}
.ap-top{display:flex;align-items:center;gap:14px;padding:9px 18px;border-bottom:1px solid rgba(20,20,18,.07)}
.ap-top .t-ws{flex:1}
.ap-top .t-ws span{display:block;font-size:7.5px;color:#8A8B90}
.ap-top .t-ws strong{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:10.5px;color:#15161A}
.ap-top .t-link{font-family:'Space Grotesk',sans-serif;font-size:9px;color:#8A8B90}
.ap-top .t-cr{display:flex;align-items:center;gap:7px;border:1px solid rgba(20,20,18,.12);border-radius:20px;padding:4px 10px;font-size:8.5px;color:#8A8B90}
.ap-top .t-cr b{font-family:ui-monospace,monospace;font-weight:400;font-size:10px;color:#15161A}
.ap-body{padding:16px 18px;flex:1;min-height:0}
.ap-kicker{font-family:'Space Grotesk',sans-serif;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8B90;margin-bottom:5px}
.ap-h1{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:19px;letter-spacing:-.025em;color:#15161A;margin:0 0 5px}
.ap-lede{font-size:9.5px;color:#6C6D72;line-height:1.45;max-width:330px;margin:0 0 14px}
.ap-btn{position:absolute;top:74px;right:18px;border:1px solid rgba(20,20,18,.14);border-radius:20px;padding:7px 14px;font-family:'Space Grotesk',sans-serif;font-size:9.5px;color:#15161A;background:#ECECEE}
.ap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px}
.ap-stat{background:#E6E6E8;border:1px solid rgba(20,20,18,.06);border-radius:9px;padding:9px 10px}
.ap-stat span{display:block;font-size:7.5px;color:#8A8B90;margin-bottom:4px}
.ap-stat strong{display:block;font-family:ui-monospace,monospace;font-weight:400;font-size:17px;letter-spacing:-.02em;color:#15161A;margin-bottom:4px}
.ap-stat em{font-style:normal;font-size:7px;color:#9A9B9F}
.ap-cols{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ap-card{background:#E6E6E8;border:1px solid rgba(20,20,18,.06);border-radius:11px;padding:12px 13px}
.ap-card>h4{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:10.5px;color:#15161A;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.ap-card>h4 i{margin-left:auto;font-style:normal;font-size:6.5px;letter-spacing:.06em;background:#fff;border-radius:20px;padding:3px 6px;color:#15161A;display:flex;align-items:center;gap:3px;font-family:'Space Grotesk',sans-serif}
.ap-card>h4 i::before{content:'';width:4px;height:4px;border-radius:50%;background:#9FBE3C}
.ap-row{display:flex;justify-content:space-between;gap:10px;padding:6.5px 0;border-top:1px solid rgba(20,20,18,.07);font-size:9px;color:#6C6D72}
.ap-row b{font-weight:400;color:#15161A}
.ap-who{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ap-who i{width:30px;height:30px;border-radius:8px;background:#15161A;flex-shrink:0}
.ap-who strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:13px;color:#15161A}
.ap-who span{font-family:ui-monospace,monospace;font-size:7.5px;color:#8A8B90}
.ap-big{font-family:ui-monospace,monospace;font-size:27px;letter-spacing:-.03em;color:#15161A;margin-bottom:9px;display:flex;align-items:baseline;gap:7px}
.ap-big em{font-style:normal;font-size:10px;color:#9A9B9F}
.ap-bar{height:7px;border-radius:20px;background:#D6D6D9;overflow:hidden;margin-bottom:9px}
.ap-bar i{display:block;height:100%;border-radius:20px;background:#15161A;width:0}
.ap-note{font-size:8.5px;color:#8A8B90;line-height:1.45}
.ap-list{display:flex;flex-direction:column}
.ap-act{display:grid;grid-template-columns:34px 24px 1fr auto;gap:9px;align-items:baseline;padding:7px 0;border-top:1px solid rgba(20,20,18,.07);font-size:8.5px}
.ap-act .ts,.ap-act .dir{font-family:ui-monospace,monospace;font-size:7.5px;color:#9A9B9F}
.ap-act p{margin:0;color:#4C4D52;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-act .amt{font-family:ui-monospace,monospace;font-size:8px;color:#8A8B90}
.sc6 .ap-agentrow{position:relative;border-radius:8px;animation:rowLight 26s infinite ease-in-out}
.sc6 .ap-agentrow::before{content:'';position:absolute;left:-9px;top:5px;bottom:5px;width:3px;border-radius:3px;background:#C8E45F;opacity:0;animation:rowBar 26s infinite ease-in-out}
.sc6 .ap-agentrow:nth-child(2),.sc6 .ap-agentrow:nth-child(2)::before{animation-delay:.39s}
.sc6 .ap-agentrow:nth-child(3),.sc6 .ap-agentrow:nth-child(3)::before{animation-delay:.78s}
.sc6 .ap-agentrow:nth-child(4),.sc6 .ap-agentrow:nth-child(4)::before{animation-delay:1.17s}
@keyframes rowLight{0%,57.6%{background:rgba(200,228,95,0)}58.3%{background:rgba(200,228,95,.3)}58.9%{background:rgba(200,228,95,.3)}59.7%,100%{background:rgba(200,228,95,0)}}
@keyframes rowBar{0%,57.6%{opacity:0;transform:scaleY(.3)}58.3%{opacity:1;transform:scaleY(1)}58.9%{opacity:1;transform:scaleY(1)}59.7%,100%{opacity:0;transform:scaleY(.3)}}
.ap-agentrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid rgba(20,20,18,.07)}
.ap-agentrow:first-child{border-top:none}
.ap-agentrow div{flex:1;min-width:0}
.ap-agentrow strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:11px;color:#15161A}
.ap-agentrow span{font-family:ui-monospace,monospace;font-size:7.5px;color:#8A8B90}
.ap-pill{font-family:'Space Grotesk',sans-serif;font-size:7.5px;border:1px solid rgba(20,20,18,.14);border-radius:20px;padding:4px 9px;color:#15161A}
.ap-pill.live{border-color:transparent;background:#fff;display:flex;align-items:center;gap:4px}
.ap-pill.live::before{content:'';width:4px;height:4px;border-radius:50%;background:#9FBE3C}
.ap-conn{display:flex;align-items:center;gap:11px;background:#E6E6E8;border:1px solid rgba(20,20,18,.06);border-radius:10px;padding:7px 12px;margin-bottom:6px}
.ap-conn>img{width:22px;height:22px;object-fit:contain;flex-shrink:0;filter:grayscale(100%) contrast(1.04)}
.ap-conn div{flex:1;min-width:0}
.ap-conn strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:10.5px;color:#15161A}
.ap-conn span{font-size:8.5px;color:#8A8B90}
.ap-conn .st{font-family:'Space Grotesk',sans-serif;font-size:7px;letter-spacing:.06em;background:#fff;border-radius:20px;padding:4px 8px;color:#15161A;display:flex;align-items:center;gap:4px;white-space:nowrap}
.ap-conn .st::before{content:'';width:4px;height:4px;border-radius:50%;background:#9FBE3C}
/* one integration switches on mid-scene: both pill states share a grid cell so the
   swap cannot shift the row's width */
.st-swap{display:inline-grid;justify-items:end}
.st-swap>.st{grid-area:1/1}
.sc2 .st-swap>.st.off{animation:stOff 26s infinite linear}
.sc2 .st-swap>.st.now{animation:stOn 26s infinite cubic-bezier(.2,.7,.2,1)}
.st-swap>.st.now{opacity:0}
@keyframes stOff{0%,21.4%{opacity:1;transform:none}22.4%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes stOn{0%,21.8%{opacity:0;transform:translateY(6px) scale(.92)}23.2%,100%{opacity:1;transform:none}}
.sc2 .ap-conns>.ap-conn:first-child{animation:connIn 26s infinite cubic-bezier(.2,.7,.2,1),connPulse 26s infinite linear}
.tg{width:38px;height:21px;border-radius:20px;background:#CFD0D4;position:relative;flex-shrink:0;margin-right:2px}
.tg i{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,20,18,.28)}
.sc2 .ap-conns>.ap-conn:first-child .tg{animation:tgTrack 26s infinite linear}
.sc2 .ap-conns>.ap-conn:first-child .tg i{animation:tgKnob 26s infinite cubic-bezier(.34,1.36,.64,1)}
@keyframes tgTrack{0%,21.4%{background:#CFD0D4}22.8%,100%{background:#C8E45F}}
@keyframes tgKnob{0%,21.4%{transform:translateX(0)}22.8%,100%{transform:translateX(17px)}}
@keyframes connPulse{0%,21.6%{box-shadow:0 0 0 0 rgba(200,228,95,0)}22.6%{box-shadow:0 0 0 3px rgba(200,228,95,.6)}24.6%,100%{box-shadow:0 0 0 0 rgba(200,228,95,0)}}
.ap-conn .st.off{color:#9A9B9F}
.ap-conn .st.off::before{background:#B8B9BD}
.ap-dark-btn{display:inline-block;background:#15161A;color:#ECEAE3;font-family:'Space Grotesk',sans-serif;font-size:10px;border-radius:20px;padding:9px 16px}

/* per-scene micro-motion inside the app */
.sc8 .ap-bar i{animation:barFill8 26s infinite cubic-bezier(.2,.7,.2,1)}
@keyframes barFill8{0%,71%{width:0}79%{width:72%}100%{width:72%}}
.sc2 .ap-conns>.ap-conn{animation:connIn 26s infinite cubic-bezier(.2,.7,.2,1)}
.sc2 .ap-conns>.ap-conn:nth-child(2){animation-delay:.09s}
.sc2 .ap-conns>.ap-conn:nth-child(3){animation-delay:.18s}
.sc2 .ap-conns>.ap-conn:nth-child(4){animation-delay:.27s}
.sc2 .ap-conns>.ap-conn:nth-child(5){animation-delay:.36s}
.sc2 .ap-conns>.ap-conn:nth-child(6){animation-delay:.45s}
@keyframes connIn{0%,18.6%{opacity:0;transform:translateX(-14px)}21%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:none}}

/* ---------- connections flythrough field ---------- */
/* Two elements on purpose: .ft-fade owns the opacity + the perspective, .ft-field owns
   the 3D. Animating opacity on a preserve-3d element makes Chrome collapse the subtree
   into one flat layer - the tiles' individual Z stops projecting. Keep them separate. */
.ft-fade{position:absolute;left:50%;top:50%;width:0;height:0;perspective:1500px;animation:ftFade 26s infinite linear;will-change:opacity;opacity:0}
@keyframes ftFade{0%,16.4%{opacity:1}17.2%,99.4%{opacity:0}100%{opacity:1}}
.ft-field{position:absolute;transform-style:preserve-3d}
.ft{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px;animation:ftTile 4.3333s infinite linear;animation-delay:var(--d);will-change:transform}
@keyframes ftTile{0%{transform:translate3d(var(--x),var(--y),-1700px)}100%{transform:translate3d(var(--x),var(--y),1360px)}}
.ftb{width:100%;height:100%;border-radius:17px;background:rgba(236,236,238,.94);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 18px 40px -14px rgba(0,0,0,.8);animation:ftBlur 4.3333s infinite linear;animation-delay:var(--d);will-change:filter}
@keyframes ftBlur{0%,95%{filter:blur(0)}98%{filter:blur(4px)}100%{filter:blur(10px)}}
.ft img{width:68px;height:68px;object-fit:contain;filter:grayscale(100%) contrast(1.05)}

/* ---------- slack panel ---------- */
.slackp{width:790px;background:#ECECEE;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 50px 110px -34px rgba(0,0,0,.92),0 0 150px -24px rgba(200,228,95,.13);text-align:left}
.sl-top{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#E6E6E8;border-bottom:1px solid rgba(20,20,18,.08)}
.sl-surf{display:flex;align-items:center;gap:13px;border-radius:40px;padding:11px 24px 11px 15px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:22px;letter-spacing:-.02em;color:#8A8B90;background:transparent}
.sl-surf img{width:46px;height:46px;object-fit:contain;opacity:.9}
.sl-surf.on{background:#fff;color:#15161A;box-shadow:0 3px 10px rgba(20,20,18,.12)}
.sl-surf.on img{opacity:1}
.sl-or{font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:#A9AAAE}
.sl-top .h{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11px;color:#15161A}
.sl-top .m{font-family:ui-monospace,monospace;font-size:13px;color:#9A9B9F;margin-left:auto}
.sl-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.sl-msg{display:flex;gap:11px}
.sl-msg .av{width:30px;height:30px;border-radius:8px;flex-shrink:0;overflow:hidden;background:#DEDEE0}
.sl-msg .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05)}
.sl-msg .av.bot{background:#15161A;display:grid;place-items:center}
.sl-msg .av.bot::after{content:'';width:12px;height:12px;border-radius:50%;background:#C8E45F}
.sl-msg .b{min-width:0;flex:1}
.sl-who{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sl-who strong{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:10.5px;color:#15161A}
.sl-who span{font-family:ui-monospace,monospace;font-size:7.5px;color:#9A9B9F}
.sl-msg p{margin:0;font-size:11px;line-height:1.5;color:#4C4D52}
.sl-msg p .men{background:rgba(200,228,95,.5);border-radius:4px;padding:1px 5px;color:#15161A}
.sl-msg.bot p{color:#15161A}
.sl-steps{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.sl-step{display:flex;align-items:center;gap:9px;background:#E6E6E8;border-radius:8px;padding:6px 10px;font-size:9px;color:#6C6D72}
.sl-step b{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:7px;letter-spacing:.07em;text-transform:uppercase;background:#fff;border-radius:20px;padding:3px 7px;color:#15161A}
.sl-step i{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#C8E45F;font-style:normal}
.sc3 .sl-msg{animation:slIn 26s infinite cubic-bezier(.2,.7,.2,1)}
.sc3 .sl-msg:nth-of-type(2){animation-delay:.55s}
@keyframes slIn{0%,28%{opacity:0;transform:translateY(9px)}31.5%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:none}}
.sc3 .sl-step{animation:slStep 26s infinite ease-out}
.sc3 .sl-step:nth-child(2){animation-delay:.2s}
.sc3 .sl-step:nth-child(3){animation-delay:.4s}
@keyframes slStep{0%,32%{opacity:0;transform:translateX(-8px)}35%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:none}}

/* ---------- document panel ---------- */
.docp{width:660px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 50px 110px -34px rgba(0,0,0,.92),0 0 150px -24px rgba(200,228,95,.13);text-align:left}
.doc-top{display:flex;align-items:center;gap:9px;padding:10px 15px;background:#ECECEE;border-bottom:1px solid rgba(20,20,18,.07)}
.doc-top .dots{display:flex;gap:5px}
.doc-top .dots i{width:8px;height:8px;border-radius:50%;background:#C2C3C7}
.doc-top .nm{font-family:'Space Grotesk',sans-serif;font-size:9.5px;color:#4C4D52;flex:1;text-align:center}
.doc-top .sv{font-family:'Space Grotesk',sans-serif;font-size:8px;color:#7E8A45;display:flex;align-items:center;gap:4px}
.doc-top .sv::before{content:'';width:5px;height:5px;border-radius:50%;background:#9FBE3C}
.doc-page{padding:24px 40px 26px}
.doc-page h4{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:20px;letter-spacing:-.025em;color:#15161A;margin:0 0 5px;line-height:1.15}
.doc-page .sub{font-size:9px;color:#9A9B90;margin-bottom:16px;letter-spacing:.02em}
.doc-sec{font-family:'Space Grotesk',sans-serif;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:#9A9B90;margin:0 0 7px}
.doc-page p{margin:0 0 15px;font-size:11.5px;line-height:1.62;color:#3A3B40}
.doc-page p .hl{background:rgba(200,228,95,.45);border-radius:3px;padding:1px 4px}
.doc-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}
.sc5 .doc-type{animation:docType 26s infinite steps(52,end);max-width:0}
@keyframes docType{0%,42.8%{max-width:0}46.4%{max-width:29em}100%{max-width:29em}}
.doc-cur{display:inline-block;width:1.5px;height:1em;background:#15161A;vertical-align:-.13em;margin-left:2px;animation:docBlink 1s steps(2,end) infinite}
@keyframes docBlink{50%{opacity:0}}
.doc-reply{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0 auto;max-width:78%;background:#fff;border:1px solid rgba(20,20,18,.1);border-radius:14px;padding:13px 16px;box-shadow:0 18px 40px -18px rgba(20,20,18,.42),0 2px 6px -2px rgba(20,20,18,.12)}
.doc-reply .av{width:34px;height:34px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#DEDEE0}
.doc-reply .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05)}
.doc-reply strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11.5px;color:#8A8B90;margin-bottom:3px}
.doc-reply p{margin:0;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:400;letter-spacing:-.015em;line-height:1.35;color:#15161A}
.sc5 .doc-reply{animation:docReply 26s infinite cubic-bezier(.2,.7,.2,1)}
@keyframes docReply{0%,47.2%{opacity:0;transform:translateY(12px) scale(.95)}48.9%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:none}}
.sc5 .doc-fig{animation:docFigDim 26s infinite ease-out}
@keyframes docFigDim{0%,47.4%{opacity:1}49.2%{opacity:.42}100%{opacity:.42}}
.doc-fig{margin:0 0 13px;padding:11px 14px 9px;border:1px solid rgba(20,20,18,.1);border-radius:9px;background:#FAFAF9}
.doc-fig-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.doc-fig-head strong{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#15161A}
.doc-fig-head span{font-size:8.5px;color:#9A9B90}
.doc-plot{position:relative;height:58px}
.doc-plot svg{display:block;width:100%;height:100%;overflow:visible}
.doc-area{fill:url(#docGrad)}
.doc-line{fill:none;stroke:#15161A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:502;stroke-dashoffset:502}
.doc-dot{fill:#fff;stroke:#15161A;stroke-width:1.6}
.doc-dot.last{fill:#C8E45F;stroke-width:2.2;r:5}
.doc-axis{stroke:rgba(20,20,18,.09);stroke-width:1}
.doc-xlab{display:flex;justify-content:space-between;margin-top:6px;padding:0 4px}
.doc-xlab span{font-family:ui-monospace,monospace;font-size:7.5px;color:#B0B1B5;line-height:1}
.doc-xlab span:last-child{color:#15161A}
.doc-val{position:absolute;top:-2px;right:0;font-family:ui-monospace,monospace;font-size:11px;color:#15161A;background:rgba(200,228,95,.5);border-radius:3px;padding:1px 5px}
.sc5 .doc-line{animation:docDraw 26s infinite cubic-bezier(.35,.7,.3,1)}
.sc5 .doc-area{animation:docArea 26s infinite ease-out}
.sc5 .doc-dot{animation:docDotIn 26s infinite ease-out;opacity:0}
.sc5 .doc-dot:nth-of-type(1){animation-delay:0.55s}
.sc5 .doc-dot:nth-of-type(2){animation-delay:0.64s}
.sc5 .doc-dot:nth-of-type(3){animation-delay:0.73s}
.sc5 .doc-dot:nth-of-type(4){animation-delay:0.82s}
.sc5 .doc-dot:nth-of-type(5){animation-delay:0.91s}
.sc5 .doc-dot:nth-of-type(6){animation-delay:1.00s}
@keyframes docDraw{0%,42.2%{stroke-dashoffset:502}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes docArea{0%,42.6%{opacity:0}45.4%{opacity:1}100%{opacity:1}}
@keyframes docDotIn{0%,42.4%{opacity:0}44.2%{opacity:1}100%{opacity:1}}
.doc-fig-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(20,20,18,.08)}
.doc-fig-foot span{font-size:7.5px;color:#A9AAA2}
.doc-fig-foot .dl{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:8.5px;color:#15161A;background:rgba(200,228,95,.5);border-radius:3px;padding:2px 6px;white-space:nowrap}
.doc-foot{display:flex;align-items:center;gap:9px;border-top:1px solid rgba(20,20,18,.07);padding-top:12px;font-size:8.5px;color:#9A9B90}
.doc-foot .by{display:flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;color:#15161A}
.doc-foot .by i{width:14px;height:14px;border-radius:4px;background:#15161A;position:relative}
.doc-foot .by i::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#C8E45F}

/* ---------- captions ---------- */
.reel-caps{position:absolute;left:0;right:0;bottom:30px;z-index:7;display:grid;place-items:center;pointer-events:none}
.cap{position:absolute;display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:clamp(19px,2.6vw,36px);letter-spacing:-.025em;color:#F4F3ED;text-shadow:0 2px 24px rgba(0,0,0,.85);opacity:0;white-space:nowrap;animation-duration:26s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.cap::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#C8E45F;box-shadow:0 0 14px rgba(200,228,95,.95);margin-right:.42em;vertical-align:.14em}
.cap em{font-style:italic;font-weight:300;color:#C8E45F}
.cap2{animation-name:cp2}.cap2b{animation-name:cp2b}.cap3{animation-name:cp3}.cap5{animation-name:cp5}.cap6{animation-name:cp6}.cap8{animation-name:cp8}
@keyframes cp2{0%,3.4%{opacity:0}5%{opacity:1}14%{opacity:1}15.5%,100%{opacity:0}}
@keyframes cp2b{0%,17%{opacity:0}19%{opacity:1}25.5%{opacity:1}27.4%,100%{opacity:0}}
@keyframes cp3{0%,27.5%{opacity:0}29.5%{opacity:1}37.5%{opacity:1}39.5%,100%{opacity:0}}
@keyframes cp5{0%,40.5%{opacity:0}42.5%{opacity:1}52.5%{opacity:1}54.5%,100%{opacity:0}}
@keyframes cp6{0%,55.5%{opacity:0}57.5%{opacity:1}65.5%{opacity:1}67.5%,100%{opacity:0}}
@keyframes cp8{0%,68.5%{opacity:0}70.5%{opacity:1}83.5%{opacity:1}85.5%,100%{opacity:0}}

/* ---------- hud ---------- */
.reel-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:16px 20px 36px;z-index:8;background:linear-gradient(to bottom,rgba(6,6,10,.86) 0,rgba(6,6,10,.34) 58%,rgba(6,6,10,0) 100%);animation:hudShow 26s infinite linear;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,237,.42);pointer-events:none}
.reel-hud .l{display:flex;align-items:center;gap:7px}
.reel-hud .l::before{content:'';width:5px;height:5px;border-radius:50%;background:#C8E45F;box-shadow:0 0 8px rgba(200,228,95,.9);animation:hudBlink 2.6s ease-in-out infinite}
@keyframes hudBlink{50%{opacity:.25}}
.reel-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(244,243,237,.1);z-index:8}
.reel-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(200,228,95,.5),#C8E45F);animation:progRun 26s linear infinite}
@keyframes progRun{to{width:100%}}
.reel-corner{position:absolute;width:20px;height:20px;border:1px solid rgba(244,243,237,.26);z-index:8;pointer-events:none;animation:hudShow 26s infinite linear}
@keyframes hudShow{0%,14%{opacity:1}15.5%,87.5%{opacity:0}89%,100%{opacity:1}}
.rc-tl{top:14px;left:14px;border-right:none;border-bottom:none}
.rc-tr{top:14px;right:14px;border-left:none;border-bottom:none}
.rc-bl{bottom:14px;left:14px;border-right:none;border-top:none}
.rc-br{bottom:14px;right:14px;border-left:none;border-top:none}

/* ---------- responsive: scale the whole stage ---------- */
@media (max-width:1150px){.reel{--s:.99}}
@media (max-width:960px){.reel{--s:.82}}
@media (max-width:780px){.reel{--s:.65;--pad:30px}.reel-caps{bottom:22px}}
@media (max-width:620px){
  .reel{--s:.649;--pad:24px}
  .reel-sec{padding:24px 0 44px}
  .reel-hud{font-size:7.5px;padding:11px 13px}
  .cap{font-size:19px;gap:10px}
  .cap::before{width:7px;height:7px}
  .reel-corner{width:14px;height:14px}
  .rc-tl,.rc-tr{top:10px}.rc-bl,.rc-br{bottom:10px}
  .rc-tl,.rc-bl{left:10px}.rc-tr,.rc-br{right:10px}
}
@media (max-width:560px){.reel{--s:.566}}
@media (max-width:480px){.reel{--s:.489}}
@media (max-width:430px){.reel{--s:.436}}
@media (max-width:390px){.reel{--s:.395;--pad:20px}}
@media (max-width:360px){.reel{--s:.354}}

.reel-play{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;border:none;background:rgba(6,6,10,.58);backdrop-filter:blur(3px);cursor:pointer;font-family:'Space Grotesk',sans-serif;color:#F4F3ED;padding:0}
.reel-play .ico{width:66px;height:66px;border-radius:50%;background:#C8E45F;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(200,228,95,.5),0 0 44px rgba(200,228,95,.4);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.reel-play .ico svg{width:22px;height:22px;margin-left:3px;display:block;fill:#15161A}
.reel-play:hover .ico{transform:scale(1.07)}
.reel-play .lbl{font-size:1rem;font-weight:500;letter-spacing:-.01em}
.reel-play .sub{font-size:.8rem;color:rgba(244,243,237,.6);max-width:250px;text-align:center;line-height:1.45}
@media (max-width:620px){.reel-play .ico{width:56px;height:56px}.reel-play .lbl{font-size:.94rem}}

@media (prefers-reduced-motion:reduce){
  .reel:not(.user-started) .reel-play{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .reel:not(.user-started) *,.reel:not(.user-started){animation:none!important}
  .reel:not(.user-started) .sc3{opacity:1!important;transform:none!important}
  .reel:not(.user-started) .cap3{opacity:1!important;transform:none!important}
  .reel:not(.user-started) .reel-prog i{width:100%!important}
}