/* The AI Agent film (/ai-agent and /ai-agent-bn). Each scene is a small 3D set seen through a moving camera:
   .k-w (perspective) > .k-cam (the camera move, per scene) > .k-cam2 (shakes) > pieces placed with .k-at (left/top in cqw, --z depth).
   k- = shared pieces, kN- = scene N. The frame is 100cqw wide and 56.25cqw tall; the caption sits over the bottom.
   Timings come from AT in src/pages/agent.js: a piece waits for its sentence with --d. Only transform and opacity animate. */
.film-agent .f-frame { aspect-ratio: 16 / 9 !important; background: #030604; }
.film-agent .f-stage.f-fs .f-frame { width: min(100vw, calc(100dvh * 16 / 9)) !important; }
.film-agent .f-frame::before, .film-agent .f-dust { display: none; }
.film-agent .f-frame .s-slide { position: absolute; inset: 0; padding: 0; display: block; }
.film-agent .f-frame .s-slide:not([hidden]) { animation: k-cut .9s ease-out both; }
@keyframes k-cut { from { opacity: 0; transform: scale(1.03); } }
.film-agent .f-frame .s-visual { position: absolute; inset: 0; display: block; animation: none; }
.film-agent .f-frame .s-slide::after { z-index: 4; height: 15cqw; background: linear-gradient(transparent, rgba(0,0,0,.82) 70%); }
.f-frame .s-slide figcaption.a-cap { position: absolute; left: 4cqw; right: 4cqw; bottom: 3.4cqw; z-index: 5; margin: 0; max-width: none; font-size: max(15px, 3cqw); font-weight: 700; letter-spacing: -.01em; text-align: center; }

/* ---------- the world, the camera, the floor ---------- */
.k-w { position: absolute; inset: 0; overflow: hidden; perspective: 80cqw; perspective-origin: 50% 40%; background: radial-gradient(ellipse 80% 70% at 50% 30%, #0b1a10, #020403 75%); }
.k-cam, .k-cam2 { position: absolute; inset: 0; transform-style: preserve-3d; }
.k-cam { animation: var(--cam, none) var(--len, 12s) cubic-bezier(.45, .05, .25, 1) both; }
.k-at { position: absolute; transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * 1cqw)) rotateY(var(--ry, 0deg)); }
.k-sky { position: absolute; left: -200cqw; width: 500cqw; top: -130cqw; height: 300cqw; transform: translateZ(-150cqw); background: var(--sky, linear-gradient(#020403, #08140c)); }
.k-floor { position: absolute; left: -170cqw; width: 440cqw; top: calc(var(--fy, 40cqw) - 160cqw); height: 320cqw; transform: translateZ(-90cqw) rotateX(90deg);
  background: linear-gradient(rgba(124,227,139,.13) .12cqw, transparent .12cqw) 0 0 / 7cqw 7cqw, linear-gradient(90deg, rgba(124,227,139,.13) .12cqw, transparent .12cqw) 0 0 / 7cqw 7cqw,
  radial-gradient(ellipse 22% 16% at 50% 72%, rgba(76,175,80,.3), transparent 70%), linear-gradient(#020403, #06100a 60%, #0a1a0f);
  -webkit-mask: linear-gradient(transparent 8%, #000 45%); mask: linear-gradient(transparent 8%, #000 45%); }
.k-haze { position: absolute; left: -80cqw; width: 260cqw; top: 14cqw; height: 34cqw; transform: translateZ(-70cqw); background: radial-gradient(ellipse 50% 45% at 50% 70%, rgba(124,227,139,.16), transparent 70%); pointer-events: none; }
.k-bokeh { left: 0; top: 0; pointer-events: none; }
.k-bokeh i { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(150,235,160,.16), rgba(150,235,160,.05) 50%, transparent 70%); animation: k-drift calc(7s + var(--i) * 1.3s) ease-in-out infinite alternate; }
@keyframes k-drift { to { transform: translate(2cqw, -3cqw); } }
.k-city { display: block; }

/* ---------- shared pieces ---------- */
.k-glass { position: absolute; border-radius: var(--radius); color: #fff; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 42%, rgba(76,175,80,.07)); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 2.4cqw 5cqw -1cqw rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2.4cqw rgba(76,175,80,.07); }
.k-glass::before { content: ''; position: absolute; inset: -50% -100%; background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.12) 50%, transparent 56%); animation: k-sheen 6s 1s ease-in-out infinite; pointer-events: none; }
@keyframes k-sheen { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
.k-in { animation: k-in .8s var(--d, 0s) cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes k-in { from { opacity: 0; transform: translateY(2cqw) scale(.92); } }
@keyframes k-out { to { opacity: 0; } }
@keyframes k-show { to { opacity: 1; } }
@keyframes k-grow { from { transform: scaleX(0); } }
.k-dot { display: inline-block; width: .9cqw; height: .9cqw; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 .8cqw currentColor; flex: none; }
.k-dot.ok { background: #4CAF50; color: #4CAF50; } .k-dot.late, .k-dot.warn { background: #FFB74D; color: #FFB74D; } .k-dot.bad { background: #E5534B; color: #E5534B; }
.a-lamp { width: 3.4cqw; height: 3.4cqw; flex: none; } .a-lamp > circle { fill: #4CAF50; } .a-lamp.a-warn > circle { fill: #FFB74D; } .a-lamp.a-bad > circle { fill: #E5534B; }
.a-lamp g circle { fill: #06210a; } .a-lamp g path { fill: none; stroke: #06210a; stroke-width: 7; stroke-linecap: round; }
/* something moving from one 3D point to another */
.k-fly { position: absolute; left: 0; top: 0; opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)); animation: k-fly var(--t) var(--d) cubic-bezier(.5, 0, .3, 1) both; }
@keyframes k-fly { 0% { opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)) scale(.6); } 15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw), calc(var(--z1) * 1cqw)) scale(.8); } }
.k-fly.stay { animation-name: k-flystay; } .k-fly.arc { animation-name: k-flyarc; }
@keyframes k-flyarc { 0% { opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)) scale(.5); } 15% { opacity: 1; }
  50% { transform: translate3d(calc((var(--x0) + var(--x1)) * .5cqw), calc((var(--y0) + var(--y1)) * .5cqw - 9cqw), calc((var(--z0) + var(--z1)) * .5cqw)) scale(1.15); } 90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw), calc(var(--z1) * 1cqw)) scale(.6); } }
@keyframes k-flystay { 0% { opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)) scale(.6); } 20% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw), calc(var(--z1) * 1cqw)); } }
/* people walking: a straight path in 3D, legs and arms swinging */
.k-wk { position: absolute; left: 0; top: 0; width: 3.4cqw; height: 9cqw; opacity: 0; animation: k-walk var(--t) var(--d) linear both; }
@keyframes k-walk { 0% { opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)); } 8%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw), calc(var(--z1) * 1cqw)); } }
.k-wk.stay { animation-name: k-walkstay; }
@keyframes k-walkstay { 0% { opacity: 0; transform: translate3d(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw), calc(var(--z0) * 1cqw)); } 10%, 100% { opacity: 1; }
  100% { transform: translate3d(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw), calc(var(--z1) * 1cqw)); } }
.k-wk::after { content: ''; position: absolute; left: 5%; right: 5%; bottom: -.5cqw; height: 1cqw; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.7), transparent 70%); }
.k-fig { display: block; width: 100%; height: 100%; overflow: visible; }
.k-wk.l .k-fig { transform: scaleX(-1); }
.k-fig .lA, .k-fig .lB, .k-fig .aA, .k-fig .aB { transform-box: fill-box; transform-origin: 50% 0; animation: k-swing 1.1s linear infinite; }
.k-fig .lB, .k-fig .aA { animation-name: k-swing2; }
@keyframes k-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-26deg); } 75% { transform: rotate(26deg); } }
@keyframes k-swing2 { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(26deg); } 75% { transform: rotate(-26deg); } }
.k-fig .bd { animation: k-bob .55s ease-in-out infinite alternate; } @keyframes k-bob { to { transform: translateY(-1.3px); } }
.k-wk.run .k-fig .lA, .k-wk.run .k-fig .lB, .k-wk.run .k-fig .aA, .k-wk.run .k-fig .aB { animation-duration: .6s; } .k-wk.run .k-fig .bd { animation-duration: .3s; }
.k-wk.stay .k-fig .lA, .k-wk.stay .k-fig .lB, .k-wk.stay .k-fig .aA, .k-wk.stay .k-fig .aB, .k-wk.stay .k-fig .bd { animation-delay: var(--d); animation-iteration-count: 2; }
/* the bot: glow, gloss, two eye beams in short bursts (like the home page), a status chip */
.k-bot { position: absolute; width: var(--w, 10cqw); display: grid; justify-items: center; animation: k-hover 4.6s ease-in-out infinite; }
.k-bot > svg { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 1.4cqw 1.8cqw rgba(0,0,0,.65)); }
.k-aura { position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, rgba(76,175,80,.42), transparent 62%); animation: k-breathe 3s ease-in-out infinite; }
@keyframes k-breathe { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes k-hover { 50% { transform: translateY(-.9cqw); } }
.k-gloss { position: absolute; left: 16%; top: 5%; width: 44%; height: 28%; border-radius: 50%; background: radial-gradient(ellipse at 45% 45%, rgba(255,255,255,.32), transparent 70%); transform: rotate(-22deg); pointer-events: none; }
.k-eb { position: absolute; top: 39%; width: calc(var(--len, 20cqw) * .42); height: var(--len, 20cqw); margin-left: calc(var(--len, 20cqw) * -.21); transform-origin: 50% 0; transform: rotate(var(--r1, 0deg));
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(150,255,165,.6), rgba(76,175,80,.16) 70%, transparent); opacity: 0; animation: k-burst 1s var(--bd, 99s) infinite both; pointer-events: none; }
.k-eb.e1 { left: 31.4%; } .k-eb.e2 { left: 68.2%; transform: rotate(var(--r2, var(--r1, 0deg))); }
@keyframes k-burst { 0% { opacity: 0; } 8%, 34% { opacity: .95; } 46%, 100% { opacity: .14; } }
.k-st { position: absolute; top: 100%; margin-top: .6cqw; font-style: normal; font-size: max(9px, 1.25cqw); color: #9be29f; border: 1px solid rgba(76,175,80,.6); background: rgba(0,0,0,.65); padding: .15cqw .9cqw; border-radius: var(--radius); white-space: nowrap; }
.k-st::before { content: ''; display: inline-block; width: .7cqw; height: .7cqw; margin-right: .5cqw; border-radius: 50%; background: #4CAF50; animation: sv-pulse 1.2s infinite; }
/* a 3D phone */
.k-ph { position: absolute; aspect-ratio: 9 / 19; transform-style: preserve-3d; }
.k-ph-edge { position: absolute; inset: 0; border-radius: 2.4cqw; background: linear-gradient(90deg, #2a332d, #121714); transform: translateZ(-.9cqw); }
.k-ph-face { position: absolute; inset: 0; border-radius: 2.4cqw; background: linear-gradient(#111a14, #050806); border: .45cqw solid #2c352f; overflow: hidden; box-shadow: 0 3cqw 6cqw -1cqw rgba(0,0,0,.85); }
.k-ph-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 35%); pointer-events: none; }
.k-ph-notch { position: absolute; left: 50%; top: .7cqw; width: 28%; height: 1.1cqw; margin-left: -14%; border-radius: 1cqw; background: #000; }

/* ---------- 1: the clock reaches nine; the office; lost minutes become lost hours ---------- */
.k1 { --sky: linear-gradient(#010302 0%, #041009 38%, #0f2615 62%, #3d4a24 80%, #a8742f 100%); }
.k1 .k-cam { --cam: k1-cam; }
@keyframes k1-cam { 0% { transform: translate3d(0, 9cqw, 50cqw); } 24% { transform: translate3d(0, 9cqw, 53cqw); } 45% { transform: translate3d(0, 4cqw, 0); } 100% { transform: translate3d(-2cqw, 3cqw, 5cqw); } }
.k1-city .k-city { position: absolute; left: 0; top: 0; width: 240cqw; height: 72cqw; }
.k1-bld { position: absolute; left: 0; top: 10cqw; width: 38cqw; height: 24cqw; border-radius: var(--radius) var(--radius) 0 0; overflow: visible;
  background: linear-gradient(100deg, #0c1911, #15291c 45%, #09130d); border: 1px solid rgba(124,227,139,.28); box-shadow: 0 0 6cqw rgba(76,175,80,.16); }
.k1-bld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 38%, transparent 46%); }
.k1-wins { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 4.2cqw; display: grid; grid-template-columns: repeat(10, 1fr); gap: .9cqw .3cqw; }
.k1-wins i { position: relative; height: 2.6cqw; background: linear-gradient(160deg, rgba(150,210,175,.16), rgba(20,40,28,.9) 45%, rgba(10,22,15,.95)); box-shadow: 0 .45cqw 0 -.05cqw #223029; animation: k1-lit .6s var(--d) both; }
.k1-wins i::after { content: ''; position: absolute; left: 12%; right: 12%; top: .2cqw; height: .14cqw; background: rgba(255,240,210,0); animation: k1-lamp .6s var(--d) both; }
@keyframes k1-lit { to { background: linear-gradient(160deg, rgba(150,210,175,.16), rgba(120,96,58,.55) 45%, rgba(60,46,28,.75)); } }
@keyframes k1-lamp { to { background: rgba(255,240,210,.85); box-shadow: 0 .2cqw .6cqw rgba(255,226,170,.6); } }
.k1-wins i.o, .k1-wins i.o::after { animation: none; }
.k1-entry { position: absolute; left: 50%; bottom: 0; width: 15cqw; height: 9cqw; margin-left: -7.5cqw; }
.k1-sign { position: absolute; left: 50%; top: -.4cqw; transform: translate(-50%, -100%); padding: .15cqw 1cqw; border-radius: .3cqw; background: #0b120e; border: 1px solid rgba(124,227,139,.6); font-size: 1.15cqw; font-weight: 800; letter-spacing: .2em; color: #9dffad; text-shadow: 0 0 .8cqw #4CAF50; white-space: nowrap; }
.k1-canopy { position: absolute; left: -.8cqw; right: -.8cqw; top: 0; height: .9cqw; border-radius: .2cqw; background: linear-gradient(#3a473e, #161c18); border-bottom: .18cqw solid #7CE38B; box-shadow: 0 .6cqw 1.6cqw rgba(255,226,170,.25); }
.k1-doors { position: absolute; left: 1.6cqw; right: 1.6cqw; top: 1.3cqw; bottom: 0; display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 1fr; gap: .25cqw; padding: .25cqw .25cqw 0; background: #1c231f; border-radius: .15cqw .15cqw 0 0; }
.k1-doors i { position: relative; background: linear-gradient(115deg, rgba(255,255,255,.2), transparent 30%), linear-gradient(rgba(255,226,170,.45), rgba(196,140,64,.3) 65%, rgba(40,30,20,.65)); box-shadow: inset 0 0 0 .12cqw rgba(0,0,0,.45); }
.k1-doors i:first-child, .k1-doors i:last-child { background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 30%), linear-gradient(rgba(150,200,170,.18), rgba(30,45,36,.8)); }
.k1-doors i:nth-child(2)::after, .k1-doors i:nth-child(3)::after { content: ''; position: absolute; top: 40%; width: .25cqw; height: 2.2cqw; border-radius: .2cqw; background: #e3e9e5; }
.k1-doors i:nth-child(2)::after { right: .4cqw; } .k1-doors i:nth-child(3)::after { left: .4cqw; }
.k1-reader { position: absolute; left: .2cqw; top: 3.6cqw; width: 1cqw; height: 2cqw; border-radius: .15cqw; background: #101512; border: 1px solid rgba(124,227,139,.5); }
.k1-reader::after { content: ''; position: absolute; left: 50%; top: .3cqw; width: .4cqw; height: .4cqw; margin-left: -.2cqw; border-radius: 50%; background: #7CE38B; box-shadow: 0 0 .6cqw #4CAF50; animation: sv-pulse 1.2s infinite; }
.k1-step { position: absolute; left: 50%; bottom: -.4cqw; width: 17cqw; height: .5cqw; margin-left: -8.5cqw; border-radius: .2cqw; background: linear-gradient(#3a4a3f, #1a221d); }
.k1-glow { position: absolute; left: 50%; bottom: -1.5cqw; width: 14cqw; height: 3cqw; margin-left: -7cqw; background: radial-gradient(ellipse, rgba(255,190,90,.2), transparent 70%); }
.k1-clock { position: absolute; left: 13cqw; top: -1cqw; width: 12cqw; aspect-ratio: 1; }
.k1-dial { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1.6cqw rgba(76,175,80,.55)); }
.k1-hh, .k1-mh, .k1-sh { transform-box: view-box; transform-origin: 50% 50%; }
.k1-hh { transform: rotate(270deg); }
.k1-mh { animation: k1-min .35s 2.95s cubic-bezier(.3, 1.8, .5, 1) both; } @keyframes k1-min { from { transform: rotate(354deg); } to { transform: rotate(360deg); } }
.k1-sh { animation: k1-s3 3s steps(3, end) both, k1-s60 60s 3s steps(60, end) infinite; }
@keyframes k1-s3 { from { transform: rotate(342deg); } to { transform: rotate(360deg); } } @keyframes k1-s60 { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.k1-ring { position: absolute; inset: -6%; border-radius: 50%; border: .4cqw solid #7CE38B; opacity: 0; animation: k1-ring 1.3s var(--d) ease-out forwards; } @keyframes k1-ring { 0% { opacity: .95; transform: scale(.85); } 100% { opacity: 0; transform: scale(2); } }
.k1-dig { position: absolute; left: 12cqw; top: 11.6cqw; width: 14cqw; height: 2.6cqw; border-radius: .4cqw; background: #020503; border: 1px solid rgba(124,227,139,.3); font: 700 1.9cqw/2.6cqw ui-monospace, Menlo, Consolas, monospace; color: #7CE38B; text-align: center; }
.k1-dig b { position: absolute; inset: 0; opacity: 0; } .k1-dig .slot { animation: k1-slot 1s var(--d) forwards; } @keyframes k1-slot { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
.k1-dig .keep { color: #fff; text-shadow: 0 0 1.4cqw #4CAF50; animation: k-show .01s var(--d) forwards; }
.k1-min { display: flex; gap: .4cqw; align-items: baseline; font-size: max(9px, 1.4cqw); color: #FFB74D; background: rgba(40,24,0,.8); border: 1px solid rgba(255,183,77,.7); padding: .2cqw .8cqw; border-radius: var(--radius); white-space: nowrap; box-shadow: 0 0 1.6cqw rgba(255,183,77,.4); }
.k1-dot { width: .8cqw; height: .8cqw; border-radius: 50%; background: #FFB74D; box-shadow: 0 0 1cqw #FFB74D; }
.k1-lost { left: 0; top: 0; width: 19cqw; padding: 1.4cqw 1.6cqw; }
.k1-lost small { font-size: max(8px, 1.15cqw); color: rgba(255,255,255,.72); } .k1-lost p { margin: .2cqw 0 .7cqw; display: flex; align-items: baseline; gap: .6cqw; }
.k1-lost p b { font-size: 5cqw; line-height: 1; color: #FFB74D; text-shadow: 0 0 2cqw rgba(255,183,77,.4); } .k1-lost p span { font-size: 1.6cqw; color: rgba(255,255,255,.8); }
.k1-meter { display: block; height: .5cqw; border-radius: .3cqw; background: linear-gradient(90deg, #FFB74D, #E5534B); transform-origin: left; animation: k-grow 4.3s 7.3s ease-out both; }
.k1-bot { --w: 8cqw; }

/* ---------- 2: the front door: tickets for on time, late, absent; one clear answer ---------- */
.k2 .k-cam { --cam: k2-cam; }
@keyframes k2-cam { 0% { transform: translate3d(5cqw, 0, 8cqw); } 58% { transform: translate3d(0, 0, 0); } 80%, 100% { transform: translate3d(-14cqw, 2cqw, 16cqw); } }
.k2-wall { position: absolute; left: 0; top: 0; width: 180cqw; height: 100cqw; background: linear-gradient(#060c08, #0b170f 62%, #050906); }
.k2-win { position: absolute; left: 22cqw; top: 26cqw; width: 30cqw; height: 50cqw; border-radius: var(--radius); background: linear-gradient(rgba(150,230,170,.16), rgba(150,230,170,.03)); border: .3cqw solid rgba(124,227,139,.14); }
.k2-win.b { left: 125cqw; } .k2-win.c { left: 74cqw; width: 32cqw; background: linear-gradient(rgba(255,214,140,.18), rgba(255,214,140,.03)); }
.k2-sign { position: absolute; left: 96cqw; top: 9cqw; margin: 0; display: flex; align-items: center; gap: 1.6cqw; font-size: 7cqw; font-weight: 800; color: #7CE38B; text-shadow: 0 0 3cqw rgba(76,175,80,.7); }
.k2-lg { width: 7cqw; height: auto; }
.k2-term { position: absolute; left: 0; top: 0; width: 6cqw; height: 25cqw; transform-style: preserve-3d; }
.k2-face { position: absolute; inset: 0; border-radius: .8cqw; padding: .8cqw; background: linear-gradient(90deg, #18201b, #2b372f 50%, #111713); border: 1px solid rgba(255,255,255,.16); }
.k2-side { position: absolute; top: 0; right: 0; width: 2cqw; height: 100%; background: linear-gradient(#0d130f, #070a08); transform-origin: right; transform: rotateY(-90deg); }
.k2-term::after { content: ''; position: absolute; left: -8cqw; right: -8cqw; bottom: -2cqw; height: 4cqw; background: radial-gradient(ellipse, rgba(124,227,139,.3), transparent 70%); }
.k2-scr { position: relative; height: 6.4cqw; border-radius: .5cqw; background: #031007; display: grid; place-items: center; overflow: hidden; }
.k2-scr svg { width: 3cqw; fill: none; stroke: #7CE38B; stroke-width: 1.6; }
.k2-fl { position: absolute; inset: 0; opacity: 0; animation: k2-fl .9s var(--d) forwards; } .k2-fl.ok { background: rgba(76,175,80,.85); } .k2-fl.late { background: rgba(255,183,77,.9); } .k2-fl.bad { background: rgba(229,83,75,.9); }
@keyframes k2-fl { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.k2-pad { display: block; margin: 1.4cqw auto 0; width: 3cqw; height: 3cqw; border-radius: 50%; border: .3cqw solid rgba(124,227,139,.55); box-shadow: 0 0 1.4cqw rgba(76,175,80,.4); }
.k2-ghost { width: 3.4cqw; height: 9cqw; opacity: 0; animation: k2-ghost 1.9s var(--d) forwards; }
.k2-ghost svg { width: 100%; height: 100%; fill: rgba(229,83,75,.1); stroke: #FF7A72; stroke-width: .8; stroke-dasharray: 2 1.5; overflow: visible; }
.k2-ghost b { position: absolute; left: 50%; top: -3.4cqw; transform: translateX(-50%); color: #FF7A72; font-size: 2.6cqw; }
@keyframes k2-ghost { 0% { opacity: 0; } 12% { opacity: .9; } 20% { opacity: .3; } 30%, 70% { opacity: .9; } 100% { opacity: 0; } }
.k-fly.k2-tk { display: flex; align-items: center; gap: .6cqw; padding: .4cqw 1cqw; border-radius: var(--radius); background: rgba(8,16,10,.88); border: 1px solid rgba(255,255,255,.18); font-size: max(8px, 1.25cqw); white-space: nowrap;
  animation: k-flystay var(--t) var(--d) cubic-bezier(.5, 0, .3, 1) both, k-out .4s 6s forwards; }
.k2-tk em { font-style: normal; font-weight: 800; } .k2-tk em.ok { color: #69d96f; } .k2-tk em.late { color: #FFB74D; } .k2-tk em.bad { color: #FF7A72; }
.k2-board { left: 0; top: 0; width: 22cqw; padding: 1.4cqw 1.6cqw; display: grid; gap: .8cqw; }
.k2-board small { font-size: max(8px, 1.15cqw); color: rgba(255,255,255,.7); }
.k2-board p { display: flex; align-items: center; gap: 1cqw; margin: 0; font-size: max(9px, 1.5cqw); animation: k-in .5s var(--d) both; } .k2-board p b { font-size: 3cqw; min-width: 2.6cqw; }
.k2-bot { --w: 8cqw; }

/* ---------- 3: a busy desk; far behind, a late arrival and an empty chair; the bot sees both ---------- */
.k3 .k-cam { --cam: k3-cam; }
@keyframes k3-cam { 0% { transform: translate3d(0, -3cqw, 0) rotateX(-7deg); } 64% { transform: translate3d(0, -1cqw, 6cqw) rotateX(-4deg); } 79% { transform: translate3d(0, 0, 8cqw) rotateX(-2deg); } 100% { transform: translate3d(-8cqw, 2cqw, 18cqw) rotateX(0); } }
.k3-office { position: absolute; left: 0; top: 0; width: 200cqw; height: 100cqw; filter: blur(.25cqw); background: linear-gradient(#050a07, #0a140d 55%, #040805); }
.k3-office::before { content: ''; position: absolute; left: 10cqw; right: 10cqw; top: 8cqw; height: 2cqw; background: repeating-linear-gradient(90deg, rgba(220,255,230,.35) 0 18cqw, transparent 18cqw 30cqw); }
.k3-door { position: absolute; left: 34cqw; top: 30cqw; width: 11cqw; height: 26cqw; background: linear-gradient(#ffe2a6, #9c6a22); opacity: .55; }
.k3-desk { position: absolute; width: 24cqw; height: 8cqw; border-radius: .8cqw; background: linear-gradient(#18221b, #0b110d); box-shadow: 0 -3cqw 4cqw -2cqw rgba(124,227,139,.18); }
.k3-late { filter: brightness(.75); }
.k3-faint { position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.4cqw; padding: .2cqw .7cqw; border-radius: var(--radius); border: 1px dashed; white-space: nowrap; opacity: 0; animation: k3-faint .6s var(--d) forwards; }
.k3-faint.late { color: #FFB74D; } .k3-faint.bad { color: #FF7A72; top: -3cqw; } @keyframes k3-faint { to { opacity: .4; } }
.k3-chair { position: absolute; width: 5cqw; } .k3-chair svg { display: block; width: 100%; fill: #18201b; stroke: rgba(255,255,255,.28); stroke-width: 1; }
.k3-ring { position: absolute; left: -40%; top: 70%; width: 180%; height: 45%; border-radius: 50%; border: .25cqw dashed rgba(255,122,114,.5); opacity: 0; animation: k3-faint .6s var(--d) forwards; }
.k3-desktop { position: absolute; left: 0; top: 6cqw; width: 84cqw; height: 16cqw; background: linear-gradient(#3a2c1e, #1a130c 70%); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.k3-mon { position: absolute; left: 27cqw; top: -15cqw; width: 30cqw; height: 18cqw; border-radius: .9cqw; padding: 1.6cqw; background: linear-gradient(#0f1d14, #07100a); border: .5cqw solid #1e2621; box-shadow: 0 0 5cqw rgba(76,175,80,.22); }
.k3-mon i { position: absolute; left: 50%; bottom: -3.4cqw; width: 2.4cqw; height: 3cqw; margin-left: -1.2cqw; background: #1e2621; }
.k3-mon p { height: .9cqw; margin: 0 0 1cqw; border-radius: .3cqw; background: rgba(124,227,139,.18); }
.k3-cup { position: absolute; left: 63cqw; top: 2.4cqw; width: 3cqw; height: 4cqw; border-radius: 0 0 .8cqw .8cqw; background: linear-gradient(90deg, #bdbdbd, #fff, #a9a9a9); }
.k3-phone { position: absolute; left: 13cqw; top: 3.4cqw; width: 6cqw; height: 3cqw; border-radius: .6cqw; background: #0d0d0d; border: 1px solid #333; box-shadow: 0 0 2cqw rgba(124,227,139,.6); animation: k3-ringing .1s .8s 22 alternate both; }
@keyframes k3-ringing { to { transform: translateX(.35cqw) rotate(2deg); } }
.k3-win { left: 0; top: 0; width: 24cqw; padding: .8cqw 1cqw 1.2cqw; animation: k-in .6s var(--d) cubic-bezier(.2, 1.3, .4, 1) both, k3-away .8s 9.3s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes k3-away { to { opacity: 0; transform: translateX(var(--dx)) rotate(8deg); } }
.k3-bar { display: flex; align-items: center; gap: .4cqw; margin: 0 0 .8cqw; font-size: max(8px, 1.2cqw); font-weight: 700; white-space: nowrap; }
.k3-bar i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #E5534B; } .k3-bar i:nth-child(2) { background: #FFB74D; } .k3-bar i:nth-child(3) { background: #4CAF50; margin-right: .5cqw; }
.k3-win span { display: block; height: .8cqw; margin-top: .6cqw; border-radius: .3cqw; background: rgba(255,255,255,.14); } .k3-win span.s { width: 60%; }
.k3-tgt { position: absolute; left: 0; top: 0; width: 6.6cqw; height: 11cqw; border: .35cqw solid currentColor; border-radius: var(--radius); box-shadow: 0 0 2.4cqw currentColor, inset 0 0 2cqw currentColor; animation: k-in .5s var(--d) both, k3-pulse 1.2s calc(var(--d) + .5s) ease-in-out infinite; }
.k3-tgt.late { color: #FFB74D; } .k3-tgt.bad { color: #FF7A72; width: 8cqw; height: 9cqw; } @keyframes k3-pulse { 50% { transform: scale(1.06); } }
.k3-tgt em { position: absolute; left: 50%; bottom: 100%; margin-bottom: .8cqw; transform: translateX(-50%); font-style: normal; font-weight: 800; font-size: 1.7cqw; white-space: nowrap; color: #000; background: currentColor; padding: .2cqw .9cqw; border-radius: var(--radius); }
.k3-tgt em { color: inherit; } .k3-tgt.late em { background: #FFB74D; color: #1a1000; } .k3-tgt.bad em { background: #FF7A72; color: #1a0000; }
.k3-in { position: absolute; animation: k3-in 1s 9.1s cubic-bezier(.2, .9, .3, 1) both; } @keyframes k3-in { from { opacity: 0; transform: translateX(30cqw); } }
.k3-bot { --w: 9cqw; }
.k3-radar { position: absolute; left: 4.5cqw; top: 4.6cqw; }
.k3-radar::before, .k3-radar::after { content: ''; position: absolute; left: -8cqw; top: -8cqw; width: 16cqw; height: 16cqw; border-radius: 50%; border: .3cqw solid rgba(124,227,139,.7); opacity: 0; animation: k3-radar 2s var(--d) ease-out infinite; }
.k3-radar::after { animation-delay: calc(var(--d) + 1s); } @keyframes k3-radar { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- 4: the reveal; panels orbit; attendance flows in; exceptions out; actions ---------- */
.k4 .k-cam { --cam: k4-cam; }
@keyframes k4-cam { 0% { transform: translate3d(0, 5cqw, 30cqw); } 20% { transform: translate3d(0, 3cqw, 26cqw); } 34% { transform: translate3d(0, 0, 0) rotateY(-5deg); } 100% { transform: translate3d(0, 0, 4cqw) rotateY(5deg); } }
.k4 .k-floor { --fy: 41cqw; }
.k4-cone { position: absolute; left: 30cqw; top: -10cqw; width: 40cqw; height: 54cqw; background: linear-gradient(rgba(124,227,139,.24), rgba(124,227,139,.05) 75%, transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: k-in 1.2s .6s both; }
.k4-pad { position: absolute; left: -15cqw; top: -15cqw; width: 30cqw; height: 30cqw; transform: rotateX(90deg); }
.k4-pad i { position: absolute; inset: calc(var(--i) * 3.6cqw); border-radius: 50%; border: .3cqw solid rgba(124,227,139,.75); box-shadow: 0 0 2cqw rgba(76,175,80,.5), inset 0 0 2cqw rgba(76,175,80,.4); animation: k4-pulse 3s calc(.6s + var(--i) * .3s) ease-in-out infinite both; }
@keyframes k4-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.k4-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(210,255,220,.85), transparent 55%); opacity: 0; animation: k4-flash 1.1s 1.1s ease-out forwards; pointer-events: none; }
@keyframes k4-flash { 12% { opacity: .9; } 100% { opacity: 0; } }
.k4-dash { left: 0; top: 0; width: 40cqw; height: 24cqw; padding: 1.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; animation: k-in .7s var(--d) both, k4-split .6s 4.2s ease-in forwards; }
.k4-dash i { border-radius: .6cqw; background: rgba(255,255,255,.08); } @keyframes k4-split { to { opacity: 0; transform: scale(1.35); } }
.k4-orbit { position: absolute; top: 3cqw; transform-style: preserve-3d; transform: rotateX(-18deg); }
.k4-spin { transform-style: preserve-3d; animation: k4-spin 22s linear infinite; } @keyframes k4-spin { to { transform: rotateY(360deg); } }
.k4-tile { position: absolute; left: -5cqw; top: -3.5cqw; width: 10cqw; height: 7cqw; transform: rotateY(calc(var(--i) * 60deg)) translateZ(34cqw); backface-visibility: hidden; }
.k4-tile .k-glass { inset: 0; display: grid; place-content: center; text-align: center; animation: k-in .6s var(--d) both, k4-dim .8s 6.2s forwards; }
.k4-tile b { font-size: 2.6cqw; line-height: 1.1; } .k4-tile small { font-size: max(7px, 1.05cqw); color: rgba(255,255,255,.7); } @keyframes k4-dim { to { opacity: .4; } }
.k4-mach { width: 7cqw; display: grid; justify-items: center; gap: .6cqw; animation: k-in .8s 6s both; } .k4-mach .f-door { width: 100%; height: auto; }
.k4-mach small { font-size: max(8px, 1.1cqw); color: rgba(255,255,255,.7); white-space: nowrap; }
.k4-row { display: flex; gap: .5cqw; align-items: center; font-size: max(8px, 1.35cqw); padding: .3cqw .8cqw; border-radius: var(--radius); background: rgba(5,15,8,.88); border: 1px solid rgba(124,227,139,.4); white-space: nowrap; }
.k4-ex { display: flex; gap: .6cqw; align-items: center; font-size: max(9px, 1.5cqw); font-weight: 700; padding: .6cqw 1.2cqw; border-radius: var(--radius); border: .25cqw solid; background: rgba(0,0,0,.75); white-space: nowrap; }
.k4-ex.late { color: #FFB74D; box-shadow: 0 0 2cqw rgba(255,183,77,.5); } .k4-ex.bad { color: #FF7A72; box-shadow: 0 0 2cqw rgba(229,83,75,.5); }
.k4-act { display: flex; align-items: center; gap: .8cqw; width: 22cqw; padding: .9cqw 1.2cqw; border-radius: var(--radius); font-size: max(9px, 1.45cqw); background: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.04)); border: 1px solid rgba(124,227,139,.55); box-shadow: 0 1.6cqw 3cqw rgba(0,0,0,.6); }
.k4-act svg { width: 2.2cqw; fill: none; stroke: #7CE38B; stroke-width: 2; } .k4-ok { margin-left: auto; font-style: normal; color: #7CE38B; }
.k4-rise { position: absolute; animation: k4-rise 1.4s .6s cubic-bezier(.2, .8, .2, 1) both; } @keyframes k4-rise { from { opacity: 0; transform: translateY(14cqw) scale(.7); } }
.k4-bot { --w: 16cqw; }

.k3-kb { position: absolute; left: 31cqw; top: 9cqw; width: 22cqw; height: 3cqw; border-radius: .5cqw; background: repeating-linear-gradient(90deg, #262d29 0 1.6cqw, #1a201c 1.6cqw 1.8cqw); transform: perspective(30cqw) rotateX(40deg); box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.6); }
.k3-paper { position: absolute; left: 4cqw; top: 9cqw; width: 8cqw; height: 5cqw; background: linear-gradient(#e9ece6, #cfd4cc); transform: perspective(30cqw) rotateX(45deg) rotate(-8deg); box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.5); }
.k3-paper.b { left: 66cqw; top: 8.4cqw; transform: perspective(30cqw) rotateX(45deg) rotate(11deg); }

@property --r1 { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --r2 { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.k-av { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- 5: three cards, three stamps; what needs attention comes forward ---------- */
.k5 .k-cam { --cam: k5-cam; }
@keyframes k5-cam { 0% { transform: translate3d(0, 1cqw, -4cqw); } 70% { transform: translate3d(0, 0, 4cqw); } 80%, 100% { transform: translate3d(10cqw, 2cqw, 10cqw); } }
.k5-pos { position: absolute; transform-style: preserve-3d; } .k5-fwd { animation: k5-fwd .8s 9.6s ease-out both; } .k5-back { animation: k5-back .8s 9.6s ease-out both; }
@keyframes k5-fwd { to { transform: translateZ(4cqw); } } @keyframes k5-back { to { transform: translateZ(-14cqw) translateX(4cqw); opacity: .35; } }
.k5-card { left: 0; top: 0; width: 21cqw; height: 27cqw; padding: 1.6cqw 1.2cqw; display: grid; justify-items: center; align-content: start; gap: .4cqw; text-align: center; animation: k5-flip .9s var(--d) cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes k5-flip { from { opacity: 0; transform: rotateY(-80deg) translateY(3cqw); } }
.k5-card.late { border-color: rgba(255,183,77,.55); } .k5-card.bad { border-color: rgba(229,83,75,.55); } .k5-card.ok { border-color: rgba(124,227,139,.55); }
.k5-av { position: relative; width: 8.4cqw; height: 10.8cqw; } .k5-av.ghost .k-av { opacity: .28; filter: grayscale(1); }
.k5-av.ghost::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 4cqw; font-weight: 800; color: #FF7A72; border: .25cqw dashed #FF7A72; border-radius: 50% 50% 1cqw 1cqw; }
.k5-name { margin: .3cqw 0 0; font-size: 2cqw; font-weight: 800; } .k5-line { margin: 0; font-size: max(8px, 1.2cqw); color: rgba(255,255,255,.8); }
.k5-line b.late { color: #FFB74D; } .k5-line b.bad { color: #FF7A72; } .k5-line b.ok { color: #7CE38B; }
.k5-streak { display: flex; flex-wrap: wrap; gap: .3cqw; justify-content: center; width: 15cqw; margin: .3cqw 0 0; } .k5-streak i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #4CAF50; animation: k-in .3s var(--d) both; }
.k5-stamp { position: absolute; left: 50%; top: 30%; padding: .4cqw 1.2cqw; border: .4cqw solid currentColor; border-radius: var(--radius); font-weight: 900; font-size: 2.2cqw; letter-spacing: .06em; white-space: nowrap; background: rgba(0,0,0,.6);
  transform: translate(-50%, -50%) rotate(-12deg); animation: k5-stamp .45s var(--d) cubic-bezier(.3, 1.6, .5, 1) both; }
.k5-stamp.late { color: #FFB74D; } .k5-stamp.bad { color: #FF7A72; } .k5-stamp.ok { color: #7CE38B; }
@keyframes k5-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.6); } }
.k5-spark { position: absolute; left: 50%; top: 30%; width: .6cqw; height: .6cqw; border-radius: 50%; background: #FFE27A; opacity: 0; animation: k5-spark .9s var(--d) ease-out forwards; }
@keyframes k5-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-9cqw); } }
.k5-need { position: absolute; width: 53cqw; height: 30cqw; border: .3cqw dashed rgba(255,183,77,.85); border-radius: var(--radius); animation: k-in .6s var(--d) both; }
.k5-need span { position: absolute; left: 50%; top: -1.6cqw; transform: translateX(-50%); background: #FFB74D; color: #1a1000; font-weight: 800; font-size: 1.5cqw; padding: .2cqw 1cqw; border-radius: var(--radius); white-space: nowrap; }
.k5-bot { --w: 9cqw; animation: k-hover 4.6s ease-in-out infinite, k5-look 13.3s linear both; }
@keyframes k5-look { 0%, 24% { --r1: 52deg; --r2: 40deg; } 27%, 43% { --r1: 5deg; --r2: -5deg; } 46%, 71% { --r1: -40deg; --r2: -52deg; } 75%, 100% { --r1: 34deg; --r2: 14deg; } }

/* ---------- 6: the reminder: a message arcs to a phone, PING, it types out; then a thank-you ---------- */
.k6 .k-cam { --cam: k6-cam; }
@keyframes k6-cam { 0% { transform: translate3d(12cqw, 0, 6cqw); } 8% { transform: translate3d(12cqw, 0, 6cqw); } 17% { transform: translate3d(-10cqw, 2cqw, 16cqw); } 45% { transform: translate3d(-13cqw, 3cqw, 22cqw); } 49% { transform: translate3d(-13cqw, 3cqw, 22cqw); } 60%, 100% { transform: translate3d(-4cqw, 2cqw, 6cqw); } }
.k6-wall { position: absolute; left: 0; top: 0; width: 160cqw; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3cqw; }
.k6-wall i { aspect-ratio: 9 / 16; border-radius: 1.2cqw; background: #0a110c; border: .3cqw solid #1d2620; animation: k6-wp 1.2s var(--a) both, k6-wp2 1.2s var(--b); }
@keyframes k6-wp { 0% { background: #0a110c; } 20% { background: rgba(124,227,139,.85); } 100% { background: rgba(76,175,80,.22); } }
@keyframes k6-wp2 { 0% { background: rgba(76,175,80,.22); } 20% { background: rgba(255,226,122,.85); } 100% { background: rgba(76,175,80,.22); } }
.k6-bot { --w: 12cqw; }
.k6-msg { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #9dffad, #2e7d32 70%); box-shadow: 0 0 3cqw #4CAF50, 0 0 6cqw rgba(76,175,80,.6); }
.k6-msg svg { width: 60%; fill: #04210a; } .k6-msg.g { background: radial-gradient(circle, #fff3b0, #c9a227 70%); box-shadow: 0 0 3cqw #ffd54f; }
.k6-p1 { width: 17cqw; } .k6-p2 { width: 14cqw; } .k6-p2 .k-ph-face { border-color: #2e7d32; box-shadow: 0 0 4cqw rgba(76,175,80,.5), 0 3cqw 6cqw -1cqw rgba(0,0,0,.85); }
.k6-time { margin: 3cqw 0 0; text-align: center; font-size: 3.6cqw; font-weight: 300; color: rgba(255,255,255,.9); }
.k6-ban { margin: 1.2cqw .8cqw 0; padding: .6cqw .9cqw; border-radius: 1cqw; background: rgba(255,255,255,.14); font-size: max(7px, 1.05cqw); animation: k6-drop .5s var(--d) cubic-bezier(.2, 1.3, .4, 1) both; } .k6-ban b { color: #7CE38B; }
@keyframes k6-drop { from { opacity: 0; transform: translateY(-3cqw); } }
.k6-bub { position: relative; margin: .9cqw .8cqw 0; padding: .9cqw 1cqw; border-radius: 1.2cqw 1.2cqw 1.2cqw .3cqw; background: #e9f7ea; color: #0b1a0e; font-size: max(7px, 1.1cqw); line-height: 1.35; animation: k-in .5s var(--d) both; }
.k6-bub p { margin: 0; opacity: 0; animation: k-show .4s calc(var(--d) + 1.1s) forwards; } .k6-bub.g { background: #dff5e1; }
.k6-typ { position: absolute; left: 1cqw; top: 1cqw; display: flex; gap: .3cqw; animation: k-out .2s calc(var(--d) + 1.1s) forwards; }
.k6-typ i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #2e7d32; animation: k6-dot .6s infinite alternate; } .k6-typ i:nth-child(2) { animation-delay: .2s; } .k6-typ i:nth-child(3) { animation-delay: .4s; }
@keyframes k6-dot { to { opacity: .2; } }
.k6-star { position: absolute; right: .6cqw; bottom: -1.6cqw; font-size: 2.6cqw; color: #FFD54F; text-shadow: 0 0 1.4cqw #FFB300; animation: k5-stamp2 .5s 7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes k5-stamp2 { from { opacity: 0; transform: scale(2.4) rotate(-40deg); } }
.k6-ping { position: absolute; left: 8.5cqw; top: 18cqw; }
.k6-ping::before, .k6-ping::after { content: ''; position: absolute; left: -12cqw; top: -12cqw; width: 24cqw; height: 24cqw; border-radius: 50%; border: .35cqw solid rgba(124,227,139,.8); opacity: 0; animation: k3-radar 1.2s var(--d) ease-out 2 forwards; }
.k6-ping::after { animation-delay: calc(var(--d) + .3s); }
.k6-in2 { position: absolute; transform-style: preserve-3d; animation: k6-in2 .9s 4.9s cubic-bezier(.2, .9, .3, 1) both; } @keyframes k6-in2 { from { transform: translateX(26cqw) rotateY(-50deg); } }
.k6-conf { position: absolute; left: 7cqw; top: 22cqw; width: .7cqw; height: 1.1cqw; background: hsl(calc(var(--i) * 40), 80%, 62%); opacity: 0; animation: k6-conf 1.4s var(--d) ease-out forwards; }
@keyframes k6-conf { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-15cqw) rotate(200deg); } }

/* ---------- 7: late minutes x salary data = cost ---------- */
.k7 .k-cam { --cam: k7-cam; }
@keyframes k7-cam { 0% { transform: translate3d(34cqw, 2cqw, 18cqw); } 25% { transform: translate3d(34cqw, 2cqw, 20cqw); } 37% { transform: translate3d(0, 1cqw, 18cqw); } 57% { transform: translate3d(0, 1cqw, 20cqw); } 67%, 100% { transform: translate3d(0, 2cqw, 0); } }
.k7-st { left: 0; top: 0; padding: 1.6cqw; display: grid; gap: .5cqw; justify-items: start; } .k7-a { width: 22cqw; } .k7-b { width: 26cqw; } .k7-c { width: 24cqw; }
.k7-st small { font-size: max(8px, 1.2cqw); color: rgba(255,255,255,.72); } .k7-a b { font-size: 4.6cqw; line-height: 1; color: #FFB74D; text-shadow: 0 0 2cqw rgba(255,183,77,.4); }
.k7-ic svg { width: 2.6cqw; fill: none; stroke: #FFB74D; stroke-width: 2; }
.k7-cube { width: 1.6cqw; height: 1.6cqw; border-radius: .3cqw; background: linear-gradient(135deg, #ffd08a, #e08a1e); box-shadow: 0 0 1.2cqw rgba(255,183,77,.6); }
.k7-sal { margin: .2cqw 0 0; font-size: 3.4cqw; font-weight: 800; animation: k-in .5s var(--d) both; } .k7-sal span, .k7-pm span { font-size: 1.3cqw; font-weight: 400; color: rgba(255,255,255,.7); }
.k7-f { margin: 0; font-size: 1.6cqw; color: rgba(255,255,255,.85); animation: k-in .5s var(--d) both; } .k7-pm { margin: 0; font-size: 3cqw; font-weight: 800; color: #7CE38B; animation: k-in .5s var(--d) both; }
.k7-op { position: absolute; font-size: 5cqw; color: #7CE38B; text-shadow: 0 0 2cqw #4CAF50; animation: k-in .5s var(--d) both; }
.k7-pt { width: 1cqw; height: 1cqw; border-radius: 50%; background: #FFE27A; box-shadow: 0 0 1.4cqw #FFB74D; }
.k7-c b { font-size: 5cqw; line-height: 1; color: #FF8A65; text-shadow: 0 0 2.4cqw rgba(255,138,101,.5); }
.k7-bars { display: flex; align-items: flex-end; gap: .6cqw; width: 100%; height: 7cqw; margin-top: .6cqw; }
.k7-bars i { flex: 1; height: var(--h); border-radius: .4cqw .4cqw 0 0; background: linear-gradient(#FF8A65, rgba(255,138,101,.2)); transform-origin: bottom; animation: k7-bar .7s var(--d) ease-out both; } @keyframes k7-bar { from { transform: scaleY(0); } }
.k7-bot { --w: 7cqw; }

/* ---------- 8: rows on the floor lift into a dashboard ---------- */
.k8 .k-cam { --cam: k8-cam; }
@keyframes k8-cam { 0% { transform: translate3d(0, -8cqw, 8cqw) rotateX(-16deg); } 26% { transform: translate3d(0, -6cqw, 10cqw) rotateX(-14deg); } 40% { transform: translate3d(0, 0, 0) rotateY(-8deg); } 100% { transform: translate3d(0, 0, 8cqw) rotateY(6deg); } }
.k8-sheet { position: absolute; left: 0; top: 0; width: 60cqw; height: 30cqw; padding: 1.4cqw; display: grid; gap: .7cqw; transform-origin: 50% 0; transform: rotateX(-58deg); background: linear-gradient(#13241a, #0a140d); border: 1px solid rgba(124,227,139,.45); box-shadow: 0 0 6cqw rgba(76,175,80,.25); animation: k-out .8s 4s forwards; }
.k8-sheet p { margin: 0; display: grid; grid-template-columns: 1fr 2fr 1fr 1fr 1fr; gap: .8cqw; } .k8-sheet p i { height: 1cqw; border-radius: .2cqw; background: rgba(255,255,255,.3); }
.k8-sheet p:nth-child(4n) i:nth-child(4) { background: rgba(255,183,77,.7); } .k8-sheet p:nth-child(5n) i:nth-child(5) { background: rgba(229,83,75,.7); }
.k8-scan { position: absolute; left: 0; right: 0; top: 0; height: .5cqw; background: #7CE38B; box-shadow: 0 0 2cqw #4CAF50; animation: k8-scan 1.6s .4s ease-in-out 2 both; } @keyframes k8-scan { to { top: 100%; } }
.k8-row { display: flex; gap: .5cqw; width: 16cqw; padding: .5cqw; border-radius: .4cqw; background: rgba(124,227,139,.15); border: 1px solid rgba(124,227,139,.45); } .k8-row i { flex: 1; height: .8cqw; border-radius: .2cqw; background: rgba(255,255,255,.35); }
.k8-dash { left: 0; top: 0; width: 64cqw; height: 34cqw; padding: 1.6cqw 2cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 1.2cqw; }
.k8-top { display: flex; align-items: center; gap: .8cqw; font-size: max(8px, 1.3cqw); } .k8-top b { color: #7CE38B; }
.k8-tl { display: flex; gap: .4cqw; } .k8-tl i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #E5534B; } .k8-tl i:nth-child(2) { background: #FFB74D; } .k8-tl i:nth-child(3) { background: #4CAF50; }
.k8-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.k8-k { position: relative; display: grid; gap: .2cqw; padding: 1.2cqw; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); animation: k8-pop .6s var(--d) cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes k8-pop { from { opacity: .12; transform: scale(.9); } } .k8-k b { font-size: 3.4cqw; line-height: 1; } .k8-k small { font-size: max(7px, 1.1cqw); color: rgba(255,255,255,.7); } .k8-k.cost b { color: #FF8A65; }
.k8-ring { position: absolute; right: 1cqw; top: 1cqw; width: 4.4cqw; transform: rotate(-90deg); } .k8-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; }
.k8-ring .v { stroke: #4CAF50; stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; animation: k8-ring 1.5s 6s ease-out forwards; } @keyframes k8-ring { to { stroke-dashoffset: 18; } }
.k8-chart { position: relative; animation: k-in .6s var(--d) both; } .k8-chart svg { display: block; width: 100%; height: 9cqw; } .k8-chart .a { fill: rgba(76,175,80,.16); }
.k8-chart .l { fill: none; stroke: #7CE38B; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: k8-draw 1.4s 10.6s ease-out forwards; } @keyframes k8-draw { to { stroke-dashoffset: 0; } }
.k8-chart small { font-size: max(7px, 1.05cqw); color: rgba(255,255,255,.6); }
.k8-bot { --w: 7cqw; }

/* ---------- 9: the boardroom ---------- */
.k9 .k-cam { --cam: k9-cam; }
@keyframes k9-cam { 0% { transform: translate3d(-28cqw, 4cqw, 12cqw); } 42% { transform: translate3d(-28cqw, 4cqw, 13cqw); } 54% { transform: translate3d(0, 1cqw, 0); } 100% { transform: translate3d(-1cqw, 1cqw, 3cqw); } }
.k9-wall { position: absolute; left: 0; top: 0; width: 180cqw; height: 100cqw; background: linear-gradient(#060b08, #0a140d 70%, #050806); }
.k9-win { position: absolute; left: 30cqw; top: 12cqw; width: 120cqw; height: 52cqw; border: .6cqw solid #18221b; background: linear-gradient(#08140d, #12281a); }
.k9-wall .k-city { position: absolute; left: 30.6cqw; top: 30cqw; width: 118.8cqw; height: 33.4cqw; }
.a9-room { position: absolute; left: 0; top: 0; width: 52cqw; height: 34cqw; } .a9-sv { width: 100%; height: 100%; display: block; overflow: visible; } .a9-m { animation: a9-fade .7s var(--d) both; }
.a9-tp { fill: #0b100c; stroke: #3a443c; stroke-width: .5; animation: a9-lit .5s var(--d) both; } .a9-gl { fill: url(#a9gl); opacity: 0; animation: a9-glow .6s var(--d) both; }
.a9-bot { --w: 10cqw; left: 0; top: 0; }
.a9-ring { position: absolute; left: 0; top: 0; width: 10cqw; height: 10cqw; border-radius: 50%; border: .35cqw solid rgba(76,175,80,.8); opacity: 0; animation: a9-ring 1.3s var(--d) ease-out both; }
.a9-pingtxt { position: absolute; left: 1.5cqw; top: -5.5cqw; padding: .4cqw 1.6cqw; border-radius: var(--radius); background: #4CAF50; color: #04210a; font-weight: 800; font-size: max(11px, 2cqw); opacity: 0; animation: a9-pt 1.6s var(--d) both; }
.k9-ph { width: 22cqw; height: 36cqw; aspect-ratio: auto; }
.a9-ph { height: 100%; padding: 3cqw 1.6cqw 1.6cqw; display: grid; align-content: start; gap: .7cqw; }
.a9-hd { margin: 0 0 .4cqw; font-size: max(8px, 1.2cqw); line-height: 1.3; color: rgba(255,255,255,.85); } .a9-hd b { color: #9be29f; }
.a9-kp { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6cqw; } .a9-kp span { display: grid; background: rgba(255,255,255,.08); padding: .6cqw .8cqw; border-radius: .8cqw; font-size: max(7px, 1cqw); color: rgba(255,255,255,.75); } .a9-kp b { font-size: 2cqw; color: #fff; }
.a9-r { margin: 0; display: flex; justify-content: space-between; gap: .6cqw; font-size: max(8px, 1.2cqw); color: #fff; padding: .35cqw 0; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; } .a9-r b { color: #FFB74D; }
.a9-cost { margin: .3cqw 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: .6cqw; font-size: max(8px, 1.1cqw); color: rgba(255,255,255,.75); } .a9-cost b { font-size: 2.2cqw; color: #FF8A65; }
.a9-card { position: absolute; left: 79cqw; top: 18cqw; width: 2.6cqw; height: 3.4cqw; border-radius: .7cqw; background: #fff; box-shadow: 0 0 1.4cqw rgba(76,175,80,.8); opacity: 0; animation: a9-fly 1.1s var(--d) ease-in-out both; transform: translateZ(6cqw); }
@keyframes a9-lit { from { fill: #0b100c; stroke: #3a443c; } to { fill: #3ddc6a; stroke: #b8ffc8; } }
@keyframes a9-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes a9-pt { 0% { opacity: 0; transform: translateY(1cqw) scale(.8); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes a9-fly { 0% { opacity: 0; transform: translate3d(0, 0, 6cqw) scale(1); } 12% { opacity: 1; } 55% { opacity: 1; transform: translate3d(calc(var(--tx) * .5), -15cqw, 6cqw) scale(.9); } 100% { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0) scale(.5); } }
@keyframes a9-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a9-glow { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 10: the gap, the long way down, the bridge of light ---------- */
.k10 .k-cam { --cam: k10-cam; }
@keyframes k10-cam { 0% { transform: translate3d(0, -3cqw, 4cqw) rotateX(-10deg); } 19% { transform: translate3d(0, -3cqw, 4cqw) rotateX(-10deg); } 50% { transform: translate3d(0, -5cqw, 8cqw) rotateX(-16deg); } 53% { transform: translate3d(0, -5cqw, 8cqw) rotateX(-16deg); } 70%, 100% { transform: translate3d(0, 0, 12cqw) rotateX(-6deg); } }
.k10-pit { position: absolute; left: -13cqw; top: -40cqw; width: 26cqw; height: 80cqw; transform: rotateX(90deg); background: linear-gradient(90deg, rgba(124,227,139,.45), #000 10%, #000 90%, rgba(124,227,139,.45)); }
.k10-plat { position: absolute; left: 0; top: 0; width: 32cqw; height: 14cqw; border-radius: var(--radius); background: linear-gradient(#1a2a1f, #0b130e); border-top: .4cqw solid rgba(124,227,139,.5); box-shadow: 0 2cqw 4cqw rgba(0,0,0,.6); }
.k10-plat small { position: absolute; left: 0; right: 0; top: 4cqw; text-align: center; font-size: 1.3cqw; color: rgba(255,255,255,.75); }
.k10-mach { position: absolute; left: 1.5cqw; bottom: 100%; width: 5cqw; } .k10-mach .f-door { width: 100%; height: auto; display: block; }
.k10-pp { position: absolute; bottom: 100%; width: 5cqw; height: 6.4cqw; }
.k10-sms { position: absolute; left: 50%; top: -1.8cqw; width: 1.4cqw; height: 1.4cqw; margin-left: -.7cqw; border-radius: 50%; background: #7CE38B; box-shadow: 0 0 1.4cqw #4CAF50; opacity: 0; animation: k-show .3s var(--d) forwards; }
.k10-desk { position: absolute; left: 14cqw; bottom: 100%; width: 14cqw; height: 9cqw; } .k10-desk::after { content: ''; position: absolute; left: 6cqw; bottom: 0; width: 2cqw; height: 3cqw; background: #2a332d; }
.k10-scr { position: absolute; left: 0; right: 0; top: 0; bottom: 3cqw; border-radius: .6cqw; background: #0b120d; border: .3cqw solid #2a332d; animation: k10-lit .6s var(--d) forwards; } @keyframes k10-lit { to { background: #1d4d26; border-color: #4CAF50; } }
.k10-boss { position: absolute; left: 3cqw; bottom: 100%; width: 7cqw; height: 9cqw; }
.k10-gate { position: absolute; display: grid; justify-items: center; gap: .3cqw; animation: k-in .5s var(--d) both; }
.k10-gate i { width: 5cqw; height: 5cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.65); border: .25cqw solid #FF7A72; box-shadow: 0 0 2cqw rgba(229,83,75,.45); }
.k10-gate svg { width: 2.8cqw; fill: none; stroke: #FF7A72; stroke-width: 2; } .k10-gate small { font-size: 1.3cqw; color: #FF7A72; white-space: nowrap; font-weight: 700; }
.k10-doc { position: absolute; left: 0; top: 0; z-index: 2; width: 3cqw; opacity: 0; animation: k10-doc 4.6s var(--d) linear forwards; } .k10-doc svg { display: block; width: 100%; fill: #e9ece6; stroke: #667; stroke-width: 1; }
@keyframes k10-doc { 0% { opacity: 0; transform: translate3d(30cqw, 21cqw, 0); } 5% { opacity: 1; } 22%, 35% { transform: translate3d(38.5cqw, 29cqw, -5cqw); } 28% { transform: translate3d(38.5cqw, 29cqw, -5cqw) rotate(12deg); }
  46% { transform: translate3d(48.5cqw, 33cqw, -5cqw) scale(.75); } 61% { opacity: 1; transform: translate3d(48.5cqw, 33cqw, -5cqw) scale(.45); } 72% { opacity: .8; transform: translate3d(58.5cqw, 29cqw, -5cqw) scale(.4); } 92%, 100% { opacity: 0; transform: translate3d(58.5cqw, 29cqw, -5cqw) scale(.4); } }
.k10-bridge { position: absolute; left: 4cqw; top: 2cqw; width: 32cqw; height: 1.2cqw; border-radius: .6cqw; background: linear-gradient(90deg, rgba(124,227,139,.3), #9dffad, rgba(124,227,139,.3)); box-shadow: 0 0 3cqw #4CAF50, 0 0 8cqw rgba(76,175,80,.5); transform-origin: left; animation: k-grow .9s var(--d) ease-out both; }
.k10-pk { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1.6cqw #7CE38B; } .k10-pk.b { background: #FFE27A; box-shadow: 0 0 1.6cqw #FFB74D; }
.k10-in { position: absolute; animation: k10-in 1s 7.9s cubic-bezier(.2, .9, .3, 1) both; } @keyframes k10-in { from { opacity: 0; transform: translateY(-16cqw); } }
.k10-bot { --w: 9cqw; }

/* ---------- 11: the week ---------- */
.k11 .k-cam { --cam: k11-cam; }
@keyframes k11-cam { 0% { transform: translate3d(34cqw, 0, 14cqw); } 6% { transform: translate3d(34cqw, 0, 14cqw); } 44% { transform: translate3d(-34cqw, 0, 14cqw); } 56% { transform: translate3d(-34cqw, 0, 14cqw); } 67%, 100% { transform: translate3d(0, 1cqw, 0); } }
.k11-day { left: 0; top: 0; width: 11cqw; height: 22cqw; padding: 1cqw; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: .5cqw; overflow: visible; }
.k11-day::before { display: none; } .k11-day p { margin: 0; font-size: 1.5cqw; font-weight: 800; }
.k11-eye { display: grid; animation: k11-blink .5s var(--d) both, k11-blink .5s var(--e) both; } .k11-eye svg { width: 2.6cqw; fill: none; stroke: #7CE38B; stroke-width: 1.8; }
@keyframes k11-blink { 0%, 100% { transform: none; } 50% { transform: scale(1.5); filter: drop-shadow(0 0 .8cqw #7CE38B); } }
.k11-bar { width: 4cqw; height: 100%; display: flex; align-items: flex-end; } .k11-bar i { width: 100%; height: var(--h); border-radius: .4cqw .4cqw 0 0; background: linear-gradient(#FFB74D, rgba(255,183,77,.2)); transform-origin: bottom; animation: k7-bar .7s var(--d) ease-out both; }
.k11-day small { font-size: max(7px, 1.05cqw); color: rgba(255,255,255,.7); white-space: nowrap; }
.k11-sms { position: absolute; top: -3.6cqw; left: 50%; margin-left: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; display: grid; place-items: center; background: #2e7d32; box-shadow: 0 0 1.6cqw #4CAF50; opacity: 0; animation: k11-sms 1.6s var(--d) both; }
.k11-sms svg { width: 60%; fill: #d9ffe0; } @keyframes k11-sms { 0% { opacity: 0; transform: translateY(1cqw) scale(.4); } 25% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(-1.5cqw); } 100% { opacity: 0; transform: translateY(-3cqw); } }
.k11-rep { left: 0; top: 0; width: 40cqw; padding: 1.6cqw 2cqw; display: grid; gap: .8cqw; color: #0b1a0e; background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(236,248,238,.93)); animation: k11-fwd 1s var(--d) cubic-bezier(.2, .9, .3, 1) both; }
@keyframes k11-fwd { from { opacity: 0; transform: translateZ(-40cqw) translateY(6cqw); } }
.k11-rep p { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; font-size: 1.6cqw; } .k11-rep b { font-size: 2.2cqw; } .k11-rep .d b, .k11-rep .u b { color: #2e7d32; } .k11-rep small { color: #555; font-size: 1.2cqw; }
.k11-bot { --w: 7cqw; }

/* ---------- 12: rings of memory; not a spreadsheet, not a machine; behind your system ---------- */
.k12 .k-cam { --cam: k12-cam; }
@keyframes k12-cam { 0% { transform: translate3d(0, 0, 10cqw); } 41% { transform: translate3d(0, 0, 8cqw); } 56%, 100% { transform: translate3d(0, 1cqw, 0); } }
.k12-net { position: absolute; left: -10cqw; top: -6cqw; width: 120cqw; height: 67.5cqw; overflow: visible; }
.k12-net line { stroke: rgba(124,227,139,.55); stroke-width: .25; stroke-dasharray: 1 1.6; opacity: 0; animation: k-show .5s var(--d) forwards, k12-flow 1.2s linear infinite; } @keyframes k12-flow { to { stroke-dashoffset: -2.6; } }
.k12-net circle { fill: #7CE38B; opacity: 0; animation: k-show .4s var(--d) forwards; }
.k12-mem { position: absolute; left: 7cqw; top: 7.2cqw; transform-style: preserve-3d; }
.k12-ring { position: absolute; left: 0; top: 0; width: calc(24cqw + var(--i) * 7cqw); aspect-ratio: 1; border-radius: 50%; border: .2cqw solid rgba(124,227,139,.55); transform: translate(-50%, -50%) rotateX(72deg); animation: k12-spin calc(8s + var(--i) * 4s) linear infinite; }
@keyframes k12-spin { to { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); } }
.k12-ring b { position: absolute; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #9dffad; box-shadow: 0 0 1.4cqw #4CAF50; } .k12-ring b:nth-child(1) { left: -.6cqw; top: 50%; } .k12-ring b:nth-child(2) { right: 8%; top: 12%; } .k12-ring b:nth-child(3) { left: 40%; bottom: -.6cqw; }
.k12-bot { --w: 14cqw; }
.k12-slab { position: absolute; left: 0; top: 0; }
.k12-xls { width: 18cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3cqw; padding: 2.8cqw .8cqw .8cqw; border-radius: .6cqw; background-color: #e9efe9; animation: k12-in .7s var(--d) cubic-bezier(.2, .9, .3, 1) both, k12-bg .3s 3.8s forwards; }
.k12-xls p { position: absolute; left: .8cqw; top: .6cqw; margin: 0; font-size: 1.2cqw; font-weight: 700; color: #1b5e20; animation: k-out .2s 3.8s forwards; }
.k12-xls i { height: 3cqw; background: #fff; border: 1px solid #b9c7b9; animation: k12-break 1.2s 3.8s cubic-bezier(.5, 0, .8, .6) forwards; }
@keyframes k12-in { from { opacity: 0; transform: translateX(-14cqw); } } @keyframes k12-bg { to { background-color: transparent; } }
@keyframes k12-break { to { opacity: 0; transform: translate(var(--fx), 26cqw) rotate(var(--fr)); } }
.k12-slab s { position: absolute; left: -8%; right: -8%; top: 48%; height: .7cqw; background: #E5534B; box-shadow: 0 0 1.4cqw #E5534B; transform-origin: left; transform: rotate(-20deg) scaleX(0); animation: k12-strike .35s var(--d) ease-out forwards, k-out .3s calc(var(--d) + .5s) forwards; }
@keyframes k12-strike { to { transform: rotate(-20deg) scaleX(1); } }
.k12-mach { width: 11cqw; animation: k12-in2 .7s var(--d) cubic-bezier(.2, .9, .3, 1) both, k12-fall .9s 5.8s cubic-bezier(.5, 0, .8, .6) forwards; } .k12-mach .f-door { display: block; width: 100%; height: auto; }
@keyframes k12-in2 { from { opacity: 0; transform: translateX(14cqw); } } @keyframes k12-fall { to { opacity: 0; transform: translateY(14cqw) rotate(30deg); } }
.k12-sys { position: absolute; left: 0; top: 0; width: 44cqw; height: 26cqw; padding: 1.6cqw; display: grid; gap: 1cqw; align-content: start; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.35); background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); animation: k12-sys 1s var(--d) cubic-bezier(.2, .9, .3, 1) both; }
@keyframes k12-sys { from { opacity: 0; transform: translateY(30cqw); } }
.k12-sys p { margin: 0; font-size: 1.3cqw; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); } .k12-sys i { display: block; height: 1.4cqw; border-radius: .4cqw; background: rgba(255,255,255,.1); } .k12-sys i:nth-child(odd) { width: 70%; }

/* ---------- 13: night; the lights go out; the bot stays on ---------- */
.k13 { --sky: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 8%, #cfe, transparent), radial-gradient(1.5px 1.5px at 47% 16%, #fff, transparent), radial-gradient(1px 1px at 63% 6%, #fff, transparent),
  radial-gradient(1px 1px at 81% 22%, #dfe, transparent), radial-gradient(1px 1px at 92% 12%, #fff, transparent), linear-gradient(#000 0%, #010508 45%, #03110a 100%); }
.k13 .k-cam { --cam: k13-cam; } @keyframes k13-cam { from { transform: translate3d(0, 1cqw, 0); } to { transform: translate3d(0, 0, 12cqw); } }
.k13-moon { position: absolute; left: 80cqw; top: 3cqw; width: 5cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #d8d2b8 60%, #9a9480); box-shadow: 0 0 4cqw rgba(255,250,220,.45); transform: translateZ(-60cqw) scale(1.8); }
.k13-city .k-city { position: absolute; left: 0; top: 0; width: 240cqw; height: 72cqw; }
.k13-city rect[opacity] { animation: k-out .15s 1s forwards; } .k13-city rect[opacity]:nth-child(3n) { animation-delay: .4s; } .k13-city rect[opacity]:nth-child(3n+1) { animation-delay: 1.6s; }
.k13-city rect[opacity]:nth-child(5n) { animation-delay: 2.2s; } .k13-city rect[opacity]:nth-child(7n) { animation-delay: .8s; }
.k13-off { display: none; }
.k13-bot { --w: 14cqw; } .k13-bot .sv-eyes { transform-box: fill-box; transform-origin: center; animation: k13-blink .3s 1.2s both; } @keyframes k13-blink { 50% { transform: scaleY(.1); } }
.k13-rings { position: absolute; left: 0; top: -17cqw; } .k13-rings i { position: absolute; left: -10cqw; top: -10cqw; width: 20cqw; height: 20cqw; border-radius: 50%; border: .3cqw solid rgba(124,227,139,.55); opacity: 0; animation: k3-radar 3s 1.8s ease-out infinite; }
.k13-rings i:nth-child(2) { animation-delay: 2.8s; } .k13-rings i:nth-child(3) { animation-delay: 3.8s; }
.k13-logo { position: absolute; left: -20cqw; top: 0; width: 40cqw; display: grid; justify-items: center; gap: .8cqw; animation: k-in 1s 1.8s both; }
.k13-logo span { display: flex; align-items: center; gap: 1.2cqw; font-size: 6cqw; font-weight: 800; letter-spacing: -.02em; color: transparent; background: linear-gradient(100deg, #fff 40%, #b9ffc4 50%, #fff 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: k13-sweep 2.4s 2.2s ease-in-out both; }
@keyframes k13-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.k13-lg { width: 5.6cqw; height: auto; color: #7CE38B; } .k13-logo small { font-size: 1.6cqw; letter-spacing: .3em; color: rgba(255,255,255,.6); }

/* ---------- 0: the opening - the home page hero (crowd.js and bot.js draw on the two canvases) ---------- */
.film-agent .f-frame .s-slide.f-light::after { background: none; }
.k0 { position: absolute; inset: 0; background: #fff; color: #111; overflow: hidden; }
.k0-h { position: relative; z-index: 2; max-width: 92cqw; margin: 4.4cqw auto 0; text-align: center; font-size: 3.3cqw; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; animation: k-in .8s .1s both; }
.k0-h .s-g { color: #2E7D32; } .k0-h .s-ai { color: #111; }
.k0-bot { position: absolute; left: 50%; top: 17cqw; width: 11cqw; margin-left: -5.5cqw; z-index: 2; animation: s-hover 5s ease-in-out infinite; }
.k0-bot svg { display: block; width: 100%; height: auto; overflow: visible; }
.k0 .s-crowd { height: 58%; }

.k3-seat { position: absolute; left: 57cqw; top: -10.5cqw; width: 12.5cqw; height: 16cqw; }
.k3-seat .k-av { filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.55)); } .k3-arm { transform-box: fill-box; transform-origin: 50% 100%; animation: k3-talk 1.8s ease-in-out infinite; }
@keyframes k3-talk { 30% { transform: rotate(-3deg); } 70% { transform: rotate(2deg); } }
.k3-oncall { position: absolute; left: 1.4cqw; top: -2.4cqw; font-style: normal; font-size: max(8px, 1.25cqw); color: #fff; background: rgba(46,125,50,.9); padding: .2cqw .9cqw; border-radius: var(--radius); white-space: nowrap; animation: k-in .5s var(--d) both; }
.k3-oncall::before { content: ''; display: inline-block; width: .7cqw; height: .7cqw; margin-right: .5cqw; border-radius: 50%; background: #E5534B; animation: sv-pulse 1s infinite; }

/* scene 9: the report lights up as the voice names each part: who was late, who is absent, the cost */
.a9-kp span, .a9-cost { animation: a9-hl 1.4s var(--d, 99s) ease-out both; } @keyframes a9-hl { 0% { box-shadow: 0 0 0 0 rgba(124,227,139,0); } 25% { box-shadow: 0 0 0 .3cqw rgba(124,227,139,.9), 0 0 2cqw rgba(76,175,80,.7); } 100% { box-shadow: 0 0 0 0 rgba(124,227,139,0); } }
.film-bn .k1-sign { letter-spacing: 0; } /* spacing breaks Bangla letters apart */
/* the big Start / Watch-again button: small, in the bottom-right corner, its label beside it (not over the picture's middle) */
.film-agent .is-idle .f-play { left: auto; top: auto; right: 3cqw; bottom: 3cqw; width: max(44px, 7cqw); height: max(44px, 7cqw); margin: 0; font-size: max(16px, 2.8cqw); padding-left: .3cqw; z-index: 6; }
.film-agent .is-idle .f-play::after { left: auto; right: 100%; top: 50%; transform: translateY(-50%); margin: 0 1.2cqw 0 0; font-size: max(12px, 1.6cqw); }
/* Sound + pause: small, tucked into the top-right corner so they never sit on the heading (phones especially) */
.film-agent .f-mute, .film-agent .f-pause { top: 1.2cqw; width: max(30px, 3.6cqw); height: max(30px, 3.6cqw); min-width: 0; min-height: 0; background: rgba(0,0,0,.4); }
.film-agent .f-mute { right: 1.2cqw; }
.film-agent .f-pause { top: auto; bottom: 1.2cqw; right: 1.2cqw; background: rgba(0,0,0,.78); border-color: rgba(255,255,255,.7); } /* bottom corner, over the crowd, never over the heading */

/* ---------- 9:16 (/ai-agent-vertical): one tall screen, only Play and Pause ----------
   The 16:9 set sits in the middle at full width (nothing trimmed), the title above, the words below. */
body.film-916 { background: #000; }
.film-916 .f-page { max-width: none; padding: 0; gap: 0; }
.film-916 .f-brand, .film-916 .f-h1, .film-916 .f-aud, .film-916 .f-ctl, .film-916 .f-cta, .film-916 .f-mute, .film-916 .s-progress, .film-916 .is-idle .f-play::after { display: none !important; }
.film-916 .f-stage, .film-916 .f-stage.f-fs { width: min(100vw, calc(100dvh * 9 / 16)); min-width: 0; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.film-916 .f-frame, .film-916 .f-stage.f-fs .f-frame { aspect-ratio: 9 / 16 !important; width: 100% !important; border-radius: 0; box-shadow: none; }
.film-916 .f-frame .s-slide { background: radial-gradient(ellipse 120% 60% at 50% 50%, #0b1a10, #020403 70%); }
.film-916 .f-frame .s-slide.f-light { background: #fff; }
.film-916 .f-frame .s-visual { inset: auto 0; top: 50%; height: 56.25cqw; transform: translateY(-50%);
  -webkit-mask: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.film-916 .f-frame .s-slide::after { height: 60cqw; }
.f-frame .s-slide figcaption.a-cap { transition: none; }
.film-916 .f-frame .s-slide figcaption.a-cap { bottom: 22cqw; left: 6cqw; right: 6cqw; font-size: 6.4cqw; line-height: 1.2; }
.f-top { display: none; }
.film-916 .f-top { display: flex; position: absolute; z-index: 6; left: 6cqw; right: 6cqw; top: 14cqw; margin: 0; flex-direction: column; align-items: center; gap: 3cqw;
  text-align: center; font-size: 5.6cqw; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.film-916 .f-top .s-logo { width: 11cqw; height: 11cqw; }
.film-916 .f-frame:has(.f-light:not([hidden])) .f-top { color: #111; }
.film-916 .is-idle .f-play { left: 50%; top: 50%; right: auto; bottom: auto; width: 20cqw; height: 20cqw; margin: -10cqw 0 0 -10cqw; font-size: 7cqw; padding-left: 1cqw; }
.film-916 .f-pause { width: 12cqw !important; height: 12cqw !important; bottom: 5cqw !important; right: 5cqw !important; }