simbiot-harness/video/shkor-labs-site/template.tpl

435 lines
30 KiB
Smarty

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Shkor Labs — autopilot for any business</title>
<script src="./gsap.min.js"></script>
<style>
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; src: url("fonts/inter-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; src: url("fonts/inter-600-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); }
/* палитра shkor.com v2 */
:root {
--bg: #050506; --bg1: #0b0c0f; --bg2: #111318;
--fg: #f2f3f5; --fg2: #b4b8c2; --fg3: #80869a;
--acid: #c6ff4d; --acid-dim: rgba(198, 255, 77, 0.12); --cyan: #5ce1e6;
--line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); }
body { color: var(--fg); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.clip { position: absolute; inset: 0; }
.mono { font-family: "JetBrains Mono", monospace; }
.hl { color: var(--acid); }
/* фон */
#bg { background: radial-gradient(1300px 800px at 82% -10%, rgba(198, 255, 77, 0.07), transparent 60%),
radial-gradient(1000px 700px at -10% 110%, rgba(92, 225, 230, 0.06), transparent 60%), var(--bg); }
#bg-grid { position: absolute; inset: -160px;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 80px 80px; opacity: 0.55;
mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 0%, transparent 75%); }
#bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; left: 1100px; top: -520px; background: var(--acid); filter: blur(200px); opacity: 0.07; }
/* HUD */
.hud-row { position: absolute; left: 96px; right: 96px; display: flex; justify-content: space-between; align-items: center;
font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
#hud-top { top: 44px; }
#hud-top .brand { display: flex; align-items: center; gap: 14px; color: var(--fg2); }
#hud-top .brand svg { width: 30px; height: 30px; }
#hud-bot { bottom: 54px; }
.chap { display: flex; gap: 34px; }
.chap span { color: #7d818d; }
#hud-prog { position: absolute; left: 96px; right: 96px; bottom: 34px; height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
#hud-prog-fill { width: 100%; height: 3px; background: var(--acid); transform-origin: left center; border-radius: 2px; }
/* общие элементы сцен */
.in { position: absolute; inset: 0; padding: 150px 160px 140px; display: flex; flex-direction: column; justify-content: center; }
.k { display: flex; align-items: center; gap: 16px; font: 400 22px/1 "JetBrains Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); margin-bottom: 26px; }
.k::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 18px var(--acid); }
h2 { font: 700 84px/1.02 "Space Grotesk", sans-serif; letter-spacing: -0.03em; max-width: 1600px; }
.sub { margin-top: 22px; font-size: 30px; line-height: 1.45; color: var(--fg2); max-width: 1300px; }
.card { position: relative; border-radius: 26px; background: linear-gradient(180deg, var(--bg2), var(--bg1)); box-shadow: inset 0 0 0 1px var(--line2); padding: 38px 36px; overflow: hidden; }
.card h3 { font: 600 38px/1.1 "Space Grotesk", sans-serif; letter-spacing: -0.01em; }
.card p { margin-top: 14px; font-size: 24px; line-height: 1.45; color: var(--fg3); }
.card.on { box-shadow: inset 0 0 0 1px rgba(198, 255, 77, 0.55), 0 30px 80px -30px rgba(198, 255, 77, 0.35); }
.ghost { position: absolute; top: 26px; right: 30px; font: 700 76px/1 "Space Grotesk", sans-serif; letter-spacing: -0.04em; color: #111318; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16); }
.ico { width: 52px; height: 52px; padding: 12px; border-radius: 14px; color: var(--acid); background: var(--acid-dim); margin-bottom: 26px; }
.ico svg { width: 28px; height: 28px; display: block; }
/* S1 — крючок */
#s1-in { padding-right: 860px; }
#s1-a { font: 500 54px/1.2 "Space Grotesk", sans-serif; color: var(--fg2); letter-spacing: -0.01em; }
#s1-h { margin-top: 34px; font: 700 132px/0.98 "Space Grotesk", sans-serif; letter-spacing: -0.035em; }
#s1-h em { font-style: normal; color: var(--acid); }
#s1-by { margin-top: 44px; font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg3); }
#s1-ring { position: absolute; right: 150px; top: 50%; width: 620px; height: 620px; margin-top: -310px; }
#s1-ring .rip { position: absolute; inset: 0; border: 2px solid rgba(198, 255, 77, 0.35); border-radius: 50%; }
/* S2 — метод */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.cards3 .card { height: 420px; }
.ev { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.evl { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; color: var(--fg2); }
.evl b { font-weight: 400; color: var(--acid); }
.flow { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-size: 18px; }
.pill { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--fg2); }
.pill.ok { color: #0a0d02; background: var(--acid); box-shadow: none; }
.pill.up { color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(92, 225, 230, 0.5); }
.arrow { color: var(--fg3); }
/* S3 — ритм */
#s3-in { padding-right: 900px; }
.ticks { margin-top: 48px; display: flex; flex-direction: column; gap: 14px; width: 820px; }
.tick { display: grid; grid-template-columns: 96px 210px 1fr; align-items: center; height: 76px; padding: 0 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); font-size: 24px; }
.tick .tg { justify-self: start; padding: 6px 14px; border-radius: 9px; background: var(--acid); color: #0a0d02; font: 400 20px "JetBrains Mono", monospace; }
.tick b { font: 600 28px "Space Grotesk", sans-serif; }
.tick span:last-child { color: var(--fg3); }
#s3-orbit { position: absolute; right: 150px; top: 50%; width: 720px; height: 720px; margin-top: -360px; }
.orb { position: absolute; border-radius: 50%; border: 2px dashed rgba(92, 225, 230, 0.45); }
.orb.o1 { inset: 250px; border-color: rgba(198, 255, 77, 0.7); }
.orb.o2 { inset: 170px; border-color: rgba(198, 255, 77, 0.5); }
.orb.o3 { inset: 90px; }
.orb.o4 { inset: 10px; border-color: rgba(92, 225, 230, 0.3); }
#s3-core { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(198, 255, 77, 0.28), rgba(198, 255, 77, 0.03) 70%); box-shadow: inset 0 0 0 2px var(--acid); }
#s3-core b { font: 700 30px "Space Grotesk", sans-serif; }
#s3-core small { font: 400 15px "JetBrains Mono", monospace; letter-spacing: 0.1em; color: var(--fg3); margin-top: 4px; text-transform: uppercase; }
.wave { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 2px solid var(--acid); opacity: 0; }
/* S4 — доверие */
.cards3.t .card { height: 470px; }
.term { margin-top: 26px; padding: 22px 24px; border-radius: 16px; background: #020203; box-shadow: inset 0 0 0 1px var(--line2); font: 400 22px/1.7 "JetBrains Mono", monospace; color: var(--fg2); }
.term .ok { color: var(--acid); }
.circles { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.circ { display: flex; align-items: center; gap: 14px; font-size: 22px; color: var(--fg2); }
.circ i { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 17px "JetBrains Mono", monospace; font-style: normal; color: #0a0d02; background: var(--acid); }
.circ:nth-child(2) i { background: rgba(198, 255, 77, 0.8); }
.circ:nth-child(3) i { background: rgba(198, 255, 77, 0.62); }
.circ:nth-child(4) i { background: rgba(255, 255, 255, 0.18); color: var(--fg); }
.esc { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.esc .pill { align-self: flex-start; font-size: 20px; }
/* S5 — лабы */
#s5-grid { margin-top: 48px; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-template-rows: 190px 190px; gap: 22px; }
.lab { position: relative; padding: 26px 28px; border-radius: 22px; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--line2); display: flex; flex-direction: column; justify-content: flex-end; }
.lab .t { font: 400 16px "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); position: absolute; top: 24px; left: 28px; }
.lab .n { font: 600 34px/1.1 "Space Grotesk", sans-serif; }
.lab .d { margin-top: 6px; font-size: 19px; line-height: 1.35; color: var(--fg3); }
.lab.core { grid-row: span 2; background: radial-gradient(500px 360px at 0% 100%, rgba(198, 255, 77, 0.16), transparent 70%), var(--bg1); box-shadow: inset 0 0 0 1px rgba(198, 255, 77, 0.45); }
.lab.core .t { color: var(--acid); }
.lab.core .n { font-size: 64px; }
.lab.core .d { font-size: 22px; color: var(--fg2); }
/* S6 — тарифы-лестница */
#s6-cols { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line2); border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px var(--line2); }
.plan { position: relative; background: var(--bg); padding: 40px 36px 40px; height: 440px; display: flex; flex-direction: column; }
.plan .pk { font: 400 18px/1 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acid); margin-bottom: 14px; }
.plan h3 { font: 600 40px/1.1 "Space Grotesk", sans-serif; }
.plan .pp { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); font: 600 36px/1.1 "Space Grotesk", sans-serif; }
.plan .pp span { display: block; margin-top: 8px; font: 400 20px "Inter", sans-serif; color: var(--fg3); }
.plan.p1 .pp { color: var(--acid); }
.plan.p3 .pk, .plan.p3 h3, .plan.p3 .pp { color: var(--fg2); }
.plan.p3 .pk { color: var(--fg3); }
.plan.p3 .ico { color: var(--fg3); background: rgba(255, 255, 255, 0.05); }
.plan .glow { position: absolute; inset: 0; background: radial-gradient(520px 320px at 0% 0%, rgba(198, 255, 77, 0.14), transparent 70%); opacity: 0; }
/* S7 — финал */
#s7-in { align-items: center; text-align: center; }
#s7-logo { width: 230px; height: 230px; }
#s7-name { margin-top: 30px; font: 700 128px/1 "Space Grotesk", sans-serif; letter-spacing: -0.035em; }
#s7-tag { margin-top: 22px; font: 600 52px/1.1 "Space Grotesk", sans-serif; color: var(--acid); }
#s7-cta { margin-top: 54px; display: flex; gap: 18px; align-items: center; }
#s7-cta .url { padding: 18px 30px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); font: 400 30px "JetBrains Mono", monospace; color: var(--fg); }
#s7-cta .btn { padding: 18px 34px; border-radius: 999px; background: var(--acid); color: #0a0d02; font: 600 30px "Inter", sans-serif; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="@TOTAL" data-width="1920" data-height="1080">
<div id="bg" class="clip" data-start="0" data-duration="@TOTAL" data-track-index="0">
<div id="bg-grid"></div>
<div id="bg-glow"></div>
</div>
<!-- S1: крючок -->
<section id="s1" class="clip" data-start="@S1_START" data-duration="@S1_DUR" data-track-index="1">
<div class="in" id="s1-in">
<div id="s1-a">Every business runs on routine<br />nobody has time for.</div>
<h1 id="s1-h">Autopilot<br />for <em>any</em> business.</h1>
<p id="s1-by" class="mono">Shkor Labs · R&amp;D for autonomous business</p>
</div>
<div id="s1-ring">
<div class="rip" id="s1-rip1"></div><div class="rip" id="s1-rip2"></div>
<svg class="logo" viewBox="0 0 200 200" width="620" height="620">
<g class="spin" id="s1-spin"><circle cx="100" cy="100" r="78" fill="none" stroke="#c6ff4d" stroke-width="7" stroke-dasharray="20 27" stroke-linecap="round" /></g>
<circle id="s1-dot" cx="100" cy="100" r="30" fill="#c6ff4d" />
</svg>
</div>
</section>
<!-- S2: метод -->
<section id="s2" class="clip" data-start="@S2_START" data-duration="@S2_DUR" data-track-index="1">
<div class="in" id="s2-in">
<p class="k" id="s2-k">01 — Method</p>
<h2 id="s2-h">Mirror. Rehearse. <span class="hl">Autopilot.</span></h2>
<div class="cards3">
<div class="card" id="s2-c1">
<span class="ghost">01</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 7l7-4 7 4M5 17l7 4 7-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Mirror</h3>
<div class="ev mono">
<div class="evl">MessageReceived<b>signed</b></div>
<div class="evl">TaskCreated<b>signed</b></div>
<div class="evl">PaymentReceived<b>signed</b></div>
</div>
</div>
<div class="card" id="s2-c2">
<span class="ghost">02</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Rehearse</h3>
<p>Every change is tried on the twin and its real history first.</p>
<div class="flow mono"><span class="pill">change</span><span class="arrow">→</span><span class="pill ok" id="s2-ok">safe</span><span class="pill up" id="s2-up">ask a person</span></div>
</div>
<div class="card" id="s2-c3">
<span class="ghost">03</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M5 19 19 5M9 5h10v10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Autopilot</h3>
<p>The routine goes to an agent with real tools, and every action feeds back into the twin.</p>
</div>
</div>
</div>
</section>
<!-- S3: ритм -->
<section id="s3" class="clip" data-start="@S3_START" data-duration="@S3_DUR" data-track-index="1">
<div class="in" id="s3-in">
<p class="k" id="s3-k">02 — The autopilot</p>
<h2 id="s3-h">Not a chatbot.<br /><span class="hl">A heartbeat.</span></h2>
<div class="ticks">
<div class="tick" id="tk1"><span class="tg">1s</span><b>Reflexes</b><span>telemetry, alerts</span></div>
<div class="tick" id="tk2"><span class="tg">1m</span><b>Triage</b><span>inbox, routing, quick fixes</span></div>
<div class="tick" id="tk3"><span class="tg">1h</span><b>Execution</b><span>tasks end to end</span></div>
<div class="tick" id="tk4"><span class="tg">1d</span><b>Planning</b><span>the plan for tomorrow</span></div>
</div>
</div>
<div id="s3-orbit">
<div class="orb o4" id="ob4"></div><div class="orb o3" id="ob3"></div><div class="orb o2" id="ob2"></div><div class="orb o1" id="ob1"></div>
<div class="wave" id="wv1"></div><div class="wave" id="wv2"></div><div class="wave" id="wv3"></div><div class="wave" id="wv4"></div>
<div id="s3-core"><b>Autopilot</b><small>Simbiot core</small></div>
</div>
</section>
<!-- S4: доверие -->
<section id="s4" class="clip" data-start="@S4_START" data-duration="@S4_DUR" data-track-index="1">
<div class="in" id="s4-in">
<p class="k" id="s4-k">03 — Trust</p>
<h2 id="s4-h">Trusted with <span class="hl">real work.</span></h2>
<div class="cards3 t">
<div class="card" id="s4-t1">
<div class="ico"><svg viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3Z M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Every step signed</h3>
<p>A tamper-evident log of everything it did, and why.</p>
<div class="term"><div>$ simbiot verify</div><div class="ok" id="s4-ok">✓ chain intact</div></div>
</div>
<div class="card" id="s4-t2">
<div class="ico"><svg viewBox="0 0 24 24"><path d="M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM5 21c0-3.9 3.1-7 7-7s7 3.1 7 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Rights from identity</h3>
<p>Never from what a message says.</p>
<div class="circles">
<div class="circ"><i>1</i>Owner — full tools</div>
<div class="circ"><i>2</i>Board — work, no secrets</div>
<div class="circ"><i>3</i>Members — scoped</div>
<div class="circ"><i>4</i>Everyone else — reply only</div>
</div>
</div>
<div class="card" id="s4-t3">
<div class="ico"><svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<h3>Knows its limits</h3>
<p>When it isn't sure, a person decides, with the full story attached.</p>
<div class="esc mono">
<span class="pill" id="s4-e1">agent · not sure</span>
<span class="pill up" id="s4-e2">↑ person · decides</span>
</div>
</div>
</div>
</div>
</section>
<!-- S5: лабы -->
<section id="s5" class="clip" data-start="@S5_START" data-duration="@S5_DUR" data-track-index="1">
<div class="in" id="s5-in">
<p class="k" id="s5-k">04 — The labs</p>
<h2 id="s5-h">We don't sell what <span class="hl">we don't run.</span></h2>
<p class="sub" id="s5-sub">Real businesses inside Cooperative 42 — each a founder plus AI agents.</p>
<div id="s5-grid">
<div class="lab core"><span class="t">Core · autopilot</span><div class="n">Simbiot</div><div class="d">The agent harness that runs the cooperative itself.</div></div>
<div class="lab"><span class="t">Media</span><div class="n">ReelsUp</div></div>
<div class="lab"><span class="t">Marketing</span><div class="n">Avatar</div></div>
<div class="lab"><span class="t">Consulting</span><div class="n">Mainbeam</div></div>
<div class="lab"><span class="t">Construction</span><div class="n">MalyarKa</div></div>
<div class="lab"><span class="t">Fintech</span><div class="n">Vybirai</div></div>
<div class="lab"><span class="t">+ more</span><div class="n">GroupSign · DEIP</div></div>
</div>
</div>
</section>
<!-- S6: тарифы -->
<section id="s6" class="clip" data-start="@S6_START" data-duration="@S6_DUR" data-track-index="1">
<div class="in" id="s6-in">
<p class="k" id="s6-k">05 — Plans</p>
<h2 id="s6-h">One studio. <span class="hl">Choose how close we work.</span></h2>
<div id="s6-cols">
<div class="plan p1" id="pl1"><div class="glow" id="pg1"></div><span class="ghost">01</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M4 17 9 12l4 4 7-8M15 8h5v5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<span class="pk">Autopilot</span><h3>Build it yourself</h3>
<div class="pp">$99<span>per month</span></div></div>
<div class="plan p2" id="pl2"><div class="glow" id="pg2"></div><span class="ghost">02</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3 19c0-2.8 2.2-5 5-5s5 2.2 5 5m-2-5c.9-.6 2-1 3-1h2c2.8 0 5 2.2 5 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<span class="pk">Lab</span><h3>Build it with us</h3>
<div class="pp">By application<span>pay as you grow</span></div></div>
<div class="plan p3" id="pl3"><div class="glow" id="pg3"></div><span class="ghost">03</span>
<div class="ico"><svg viewBox="0 0 24 24"><path d="M12 3l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.8L12 3Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg></div>
<span class="pk">Studio</span><h3>Paid to build</h3>
<div class="pp">By invitation<span>earned, not bought</span></div></div>
</div>
</div>
</section>
<!-- S7: финал -->
<section id="s7" class="clip" data-start="@S7_START" data-duration="@S7_DUR" data-track-index="1">
<div class="in" id="s7-in">
<svg class="logo" id="s7-logo" viewBox="0 0 200 200">
<g class="spin" id="s7-spin"><circle cx="100" cy="100" r="78" fill="none" stroke="#c6ff4d" stroke-width="8" stroke-dasharray="20 27" stroke-linecap="round" /></g>
<circle id="s7-dot" cx="100" cy="100" r="30" fill="#c6ff4d" />
</svg>
<div id="s7-name">Shkor Labs</div>
<div id="s7-tag">Autopilot for any business.</div>
<div id="s7-cta"><span class="url">shkor.com</span><span class="btn">Start now →</span></div>
</div>
</section>
<!-- звук: музыка + озвучка по сценам (вставляется build.py) -->
@AUDIO
<div id="hud" class="clip" data-start="0" data-duration="@TOTAL" data-track-index="2">
<div class="hud-row mono" id="hud-top">
<div class="brand"><svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="78" fill="none" stroke="#c6ff4d" stroke-width="12" stroke-dasharray="20 27" stroke-linecap="round" /><circle cx="100" cy="100" r="30" fill="#c6ff4d" /></svg>Shkor Labs</div>
<div>R&amp;D for autonomous business</div>
</div>
<div class="hud-row mono" id="hud-bot">
<div class="chap"><span id="c1">Method</span><span id="c2">Rhythm</span><span id="c3">Trust</span><span id="c4">Labs</span><span id="c5">Plans</span></div>
<div>shkor.com</div>
</div>
<div id="hud-prog"><div id="hud-prog-fill"></div></div>
</div>
</div>
<script>
// тайминги сцен и фраз — из build.py (озвучка Kokoro по предложениям)
const TM = @TIMING;
const TOTAL = @TOTAL;
const at = (i, k = 0, f = 0) => { const s = TM[i].sents[Math.min(k, TM[i].sents.length - 1)]; return s.t0 + (s.t1 - s.t0) * f; };
const beg = (i) => TM[i].start;
const fin = (i) => TM[i].start + TM[i].dur;
const tl = gsap.timeline({ paused: true });
const pop = (sel, t, from = { opacity: 0, y: 30 }, d = 0.7) =>
tl.fromTo(sel, from, { opacity: 1, x: 0, y: 0, scale: 1, duration: d, ease: "power3.out" }, t);
const leave = (sel, i) => tl.to(sel, { opacity: 0, y: -24, duration: 0.45, ease: "power2.in" }, fin(i) - 0.5);
// фон и HUD
tl.fromTo("#bg-grid", { x: 0, y: 0 }, { x: 160, y: 80, duration: TOTAL, ease: "none" }, 0);
tl.fromTo("#bg-glow", { x: 0, y: 0 }, { x: -520, y: 260, duration: TOTAL, ease: "sine.inOut" }, 0);
tl.fromTo("#hud-top, #hud-bot, #hud-prog", { opacity: 0 }, { opacity: 1, duration: 0.8 }, beg(1) - 0.3);
tl.fromTo("#hud-prog-fill", { scaleX: 0 }, { scaleX: 1, duration: TOTAL - beg(1), ease: "none" }, beg(1));
[["#c1", 1], ["#c2", 2], ["#c3", 3], ["#c4", 4], ["#c5", 5]].forEach(([sel, i]) => {
tl.to(sel, { color: "#c6ff4d", duration: 0.3 }, beg(i));
tl.to(sel, { color: "#7d818d", duration: 0.3 }, fin(i));
});
// S1 — крючок
pop("#s1-a", at(0, 0) - 0.2, { opacity: 0, y: 30 }, 0.8);
tl.to("#s1-a", { opacity: 0.4, duration: 0.5 }, at(0, 1) - 0.1);
pop("#s1-h", at(0, 1), { opacity: 0, y: 40 }, 0.9);
tl.fromTo("#s1-ring", { opacity: 0, scale: 0.7 }, { opacity: 1, scale: 1, duration: 1.0, ease: "back.out(1.4)" }, at(0, 1) + 0.2);
tl.fromTo("#s1-ring svg", { rotation: 0 }, { rotation: 300, duration: fin(0) - at(0, 1), ease: "none" }, at(0, 1));
tl.fromTo(["#s1-rip1", "#s1-rip2"], { scale: 0.55, opacity: 0.8 }, { scale: 1.6, opacity: 0, duration: 2.4, stagger: 1.2, repeat: 1, ease: "power1.out" }, at(0, 1) + 0.6);
pop("#s1-by", at(0, 1) + 1.0, { opacity: 0, y: 12 }, 0.6);
leave("#s1-in, #s1-ring", 0);
// S2 — метод
pop("#s2-k", beg(1) + 0.1, { opacity: 0, y: 16 }, 0.5);
pop("#s2-h", beg(1) + 0.2);
pop("#s2-c1", at(1, 0), { opacity: 0, y: 50 }, 0.6);
tl.fromTo("#s2-c1 .evl", { opacity: 0, x: -30 }, { opacity: 1, x: 0, duration: 0.45, stagger: (at(1, 1, 1) - at(1, 1)) / 3.4, ease: "power3.out" }, at(1, 1));
tl.to("#s2-c1", { boxShadow: "inset 0 0 0 1px rgba(198,255,77,0.55), 0 30px 80px -30px rgba(198,255,77,0.35)", duration: 0.4 }, at(1, 1));
pop("#s2-c2", at(1, 2), { opacity: 0, y: 50 }, 0.6);
tl.to("#s2-c1", { boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 0 0 rgba(0,0,0,0)", duration: 0.4 }, at(1, 2));
tl.to("#s2-c2", { boxShadow: "inset 0 0 0 1px rgba(198,255,77,0.55), 0 30px 80px -30px rgba(198,255,77,0.35)", duration: 0.4 }, at(1, 2) + 0.3);
tl.fromTo("#s2-ok", { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1, duration: 0.35, ease: "back.out(2)" }, at(1, 2, 0.45));
tl.fromTo("#s2-up", { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1, duration: 0.35, ease: "back.out(2)" }, at(1, 2, 0.7));
pop("#s2-c3", at(1, 2, 0.85), { opacity: 0, y: 50 }, 0.6);
leave("#s2-in", 1);
// S3 — ритм
pop("#s3-k", beg(2) + 0.1, { opacity: 0, y: 16 }, 0.5);
pop("#s3-h", beg(2) + 0.2);
tl.fromTo(".orb", { opacity: 0, scale: 0.7 }, { opacity: 1, scale: 1, duration: 0.7, stagger: 0.1, ease: "power3.out" }, at(2, 0, 0.3));
tl.fromTo("#s3-core", { opacity: 0, scale: 0.6 }, { opacity: 1, scale: 1, duration: 0.8, ease: "back.out(1.6)" }, at(2, 0, 0.45));
tl.fromTo(".orb", { rotation: 0 }, { rotation: 40, duration: fin(2) - at(2, 0), ease: "none" }, at(2, 0));
const tw = (at(2, 1, 1) - at(2, 1)) / 4;
["#tk1", "#tk2", "#tk3", "#tk4"].forEach((sel, n) => {
const t = at(2, 1) + tw * n;
pop(sel, t, { opacity: 0, x: -40 }, 0.45);
tl.fromTo(`#wv${n + 1}`, { opacity: 0.9, scale: 1 }, { opacity: 0, scale: 1.4 + n * 0.8, duration: 1.1, ease: "power2.out" }, t + 0.1);
tl.to(`#ob${n + 1}`, { borderColor: "#c6ff4d", duration: 0.2, yoyo: true, repeat: 1 }, t + 0.1);
});
leave("#s3-in, #s3-orbit", 2);
// S4 — доверие
pop("#s4-k", beg(3) + 0.1, { opacity: 0, y: 16 }, 0.5);
pop("#s4-h", at(3, 0));
pop("#s4-t1", at(3, 1) - 0.1, { opacity: 0, y: 50 }, 0.6);
tl.fromTo("#s4-ok", { opacity: 0 }, { opacity: 1, duration: 0.3 }, at(3, 1, 0.8) + 0.3);
pop("#s4-t2", at(3, 2) - 0.1, { opacity: 0, y: 50 }, 0.6);
tl.fromTo("#s4-t2 .circ", { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.35, stagger: 0.18, ease: "power3.out" }, at(3, 2) + 0.4);
pop("#s4-t3", at(3, 3) - 0.1, { opacity: 0, y: 50 }, 0.6);
tl.fromTo("#s4-e1", { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.35 }, at(3, 3) + 0.4);
tl.fromTo("#s4-e2", { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.45, ease: "back.out(1.8)" }, at(3, 3, 0.55));
leave("#s4-in", 3);
// S5 — лабы
pop("#s5-k", beg(4) + 0.1, { opacity: 0, y: 16 }, 0.5);
pop("#s5-h", at(4, 0));
pop("#s5-sub", at(4, 1), { opacity: 0, y: 16 }, 0.6);
tl.fromTo("#s5-grid .lab", { opacity: 0, y: 40, scale: 0.96 }, { opacity: 1, y: 0, scale: 1, duration: 0.55, stagger: 0.16, ease: "power3.out" }, at(4, 1) + 0.3);
leave("#s5-in", 4);
// S6 — тарифы
pop("#s6-k", beg(5) + 0.1, { opacity: 0, y: 16 }, 0.5);
pop("#s6-h", beg(5) + 0.2);
tl.fromTo("#s6-cols", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, beg(5) + 0.5);
[["#pg1", 0], ["#pg2", 1], ["#pg3", 2]].forEach(([sel, k]) => {
tl.to(sel, { opacity: 1, duration: 0.4 }, at(5, k));
if (k < 2) tl.to(sel, { opacity: 0, duration: 0.4 }, at(5, k + 1));
});
tl.fromTo("#pl1 .pp", { scale: 1 }, { scale: 1.06, duration: 0.35, yoyo: true, repeat: 1, ease: "sine.inOut", transformOrigin: "left center" }, at(5, 0, 0.8));
leave("#s6-in", 5);
// S7 — финал
tl.fromTo("#s7-logo", { opacity: 0, scale: 0.7 }, { opacity: 1, scale: 1, duration: 0.8, ease: "back.out(1.5)" }, beg(6) + 0.1);
tl.fromTo("#s7-logo", { rotation: 0 }, { rotation: 360, duration: fin(6) - beg(6), ease: "none" }, beg(6));
pop("#s7-name", at(6, 0) - 0.1);
pop("#s7-tag", at(6, 1) - 0.1);
pop("#s7-cta", at(6, 2) - 0.1, { opacity: 0, y: 20 }, 0.6);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
</body>
</html>