/* RWID film. Scenes animate only while .on; pausing freezes every animation. Sizes are in cqw so the
   whole film scales with the 16:9 stage. */
@font-face { font-family: "Sora"; src: url("Sora.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root { color-scheme: dark; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
html, body { margin: 0; height: 100%; background: #05080f; }
body { overflow: hidden; }

.film {
  --bg: #070c16; --ink: #eef2f9; --muted: #9aa7bd; --dim: #6f7c92; --line: rgba(255, 255, 255, .13);
  --gold: #f2b53a; --gold-soft: #fff1c4; --green: #6fdca2; --amber: #f2b53a; --red: #ff7a7a;
  --sans: "Sora", ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed; inset: 0; display: grid; place-items: center; background: #05080f; color: var(--ink); font-family: var(--sans); outline: none;
}
.film.is-fs { z-index: 9999; }
.stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #12203a, var(--bg) 72%); }

.sc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.1cqw; padding: 3.6cqw 5cqw 7cqw; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.sc.on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.film.is-paused .sc:not(.end) * { animation-play-state: paused !important; }

/* entrance */
.a { opacity: 0; }
.on .a { animation: rise .9s var(--ease) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
.d0 { --d: .2s; } .d1 { --d: 1s; } .d2 { --d: 2s; } .d3 { --d: 3s; } .d4 { --d: 4s; } .d5 { --d: 5s; }
.d6 { --d: 6s; } .d7 { --d: 7s; } .d8 { --d: 8s; } .d9 { --d: 9s; } .d10 { --d: 10s; }

.title { margin: 0; max-width: 92%; text-align: center; font-weight: 700; font-size: 3.1cqw; line-height: 1.14; letter-spacing: -.03em; }
.cap { position: absolute; left: 50%; bottom: 8.4cqw; width: 80%; margin: 0; text-align: center; font-size: 1.55cqw; line-height: 1.45; font-weight: 500; color: #dfe6f3; transform: translateX(-50%); }
.on .cap { animation-name: capin; }
@keyframes capin { from { opacity: 0; transform: translate(-50%, 1.2cqw); } to { opacity: 1; transform: translate(-50%, 0); } }
.note { margin: 1cqw 0 0; font-size: 1.15cqw; line-height: 1.5; color: var(--dim); }

/* real pictures */
.shot { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 1cqw; overflow: hidden; background: #0b1424; box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .6), 0 0 0 .1cqw rgba(242, 181, 58, .08); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { position: absolute; left: .8cqw; bottom: .8cqw; padding: .3cqw .9cqw; border-radius: 99cqw; background: rgba(7, 12, 22, .82); font: 1.05cqw var(--mono); color: var(--ink); }
.shot.big { width: 58cqw; margin: 0; }
.swap { display: grid; margin-top: .8cqw; }
.swap > * { grid-area: 1 / 1; }
.on .swap .over { opacity: 0; animation: swapin 1.2s ease 6.5s forwards; }
@keyframes swapin { to { opacity: 1; } }
.on .shot.big img { animation: drift 11s ease-out both; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.4cqw; align-items: center; width: 92%; margin-top: 2.4cqw; }
.split .col { display: grid; gap: 1.2cqw; align-content: start; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; width: 90%; margin-top: 2.6cqw; }
.stack { position: relative; padding-bottom: 7cqw; }
code { font: inherit; }
.stack .s2 { position: absolute; width: 70%; right: -2cqw; bottom: 0; }

/* 1 */
.sc1 { justify-content: center; gap: .6cqw; }
.logo { width: 11cqw; height: 11cqw; object-fit: contain; filter: drop-shadow(0 0 3cqw rgba(242, 181, 58, .35)); }
.logo.sm { width: 7cqw; height: 7cqw; }
.type { margin: 0; font-weight: 700; font-size: 5.2cqw; line-height: 1.12; letter-spacing: -.04em; text-align: center; clip-path: inset(0 100% 0 0); }
.t2 { color: var(--gold); }
.tagline { margin: 1.6cqw 0 0; font-size: 2cqw; letter-spacing: .02em; color: var(--muted); }
.on .t1 { animation: reveal 1.4s steps(14) .9s forwards; }
.on .t2 { animation: reveal 1.1s steps(8) 2.8s forwards; }
.on .t3 { animation: reveal 2.2s steps(23) 4.2s forwards; }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }

/* diagrams */
.dia { width: 88%; margin-top: 1.6cqw; overflow: visible; }
.dia text { fill: var(--ink); font-family: var(--mono); }
.dia .lbl { font: 700 15px var(--sans); }
.dia .sm { font-size: 14px; } .dia .xs { font-size: 12px; }
.dia .dim { fill: var(--dim); } .dia .amber { fill: var(--amber); } .dia .green { fill: var(--green); } .dia .red { fill: var(--red); }
.box { fill: rgba(255, 255, 255, .04); stroke: var(--line); stroke-width: 1.2; }
.box.hot { stroke: var(--green); fill: rgba(111, 220, 162, .07); }
.deny { fill: rgba(255, 122, 122, .08); stroke: var(--red); stroke-width: 1.2; }
.wire { stroke: rgba(242, 181, 58, .55); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.pkt { fill: var(--green); }
.on .pkt { animation: pkt 3.2s ease-in-out infinite; }
@keyframes pkt { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(380px); opacity: 0; } }
.orbit { width: 100%; margin: 0; }
.core { fill: #1b2f57; stroke: var(--gold); stroke-width: 1.6; }
.core-t { font: 700 15px var(--sans); fill: #fff; }
.pill { fill: #0d1a2d; stroke: rgba(111, 220, 162, .5); }
.pill-t { font-size: 13px; fill: #c6f5dc; }
.chain { width: 100%; }

/* 3 stat tiles */
.tiles { display: grid; gap: 1.2cqw; }
.tile { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.4cqw; align-items: center; padding: 1.3cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1.2cqw; background: rgba(255, 255, 255, .035); }
.tile b { font-size: 3.6cqw; font-weight: 800; letter-spacing: -.04em; color: var(--gold); font-variant-numeric: tabular-nums; }
.tile.wide { grid-template-columns: 15cqw 1fr; }
.tile span { font-size: 1.3cqw; line-height: 1.4; color: #dfe6f3; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .9cqw; margin: 1.4cqw 0 0; padding: 0; list-style: none; }
.chips.v { justify-content: flex-start; }
.chips li { padding: .6cqw 1.3cqw; border: 1px solid rgba(242, 181, 58, .35); border-radius: 99cqw; font: 1.2cqw var(--mono); color: #ffe7b0; background: rgba(242, 181, 58, .06); }

/* bar charts */
.chart-t { margin: 0 0 1cqw; font: 600 1.2cqw/1.35 var(--mono); color: var(--muted); }
.bar { position: relative; display: grid; gap: .3cqw; margin-bottom: .9cqw; }
.bar span { font-size: 1.2cqw; color: #dfe6f3; }
.bar .track { height: 1.7cqw; border-radius: .5cqw; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar .track i { display: block; height: 100%; width: 0; border-radius: .5cqw; background: linear-gradient(90deg, #a4731a, var(--gold)); }
.bar .track i.ok { background: linear-gradient(90deg, #1f8b5c, var(--green)); }
.bar .track i.warn { background: linear-gradient(90deg, #a4731a, var(--amber)); }
.bar b { position: absolute; right: .6cqw; bottom: .12cqw; font: 700 1.15cqw var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.on .bar .track i { animation: grow 1.3s var(--ease) calc(2s + var(--n, 0) * .35s) forwards; }
@keyframes grow { to { width: var(--w); } }
.b0 { --n: 0; } .b1 { --n: 1; } .b2 { --n: 2; } .b3 { --n: 3; } .b4 { --n: 4; } .b5 { --n: 5; } .b6 { --n: 6; }
.f0 { --n: 1; } .f1 { --n: 3; }
.w10 { --w: 100%; } .w7 { --w: 70%; } .w5 { --w: 50%; } .w3 { --w: 30%; } .w2 { --w: 20%; } .w84 { --w: 84%; } .w12 { --w: 12%; }

/* 6 themes */
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; margin: 1.6cqw 0 0; padding: 0; list-style: none; font: 1.1cqw var(--mono); color: var(--muted); }
.swatches li { display: inline-flex; align-items: center; gap: .5cqw; }
.sw { display: inline-block; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); }
.sw-malam { background: #ffc24b; } .sw-ungu { background: #ff5fd2; } .sw-senja { background: #ffb347; } .sw-zamrud { background: #34d399; }
.sw-laut { background: #22d3ee; } .sw-grafit { background: #e6e8ec; } .sw-terang { background: #f3f5fb; }

/* 8, 9 rule lists */
.rules { display: grid; gap: 1cqw; margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; align-items: center; gap: 1.1cqw; padding: 1.1cqw 1.4cqw; border: 1px solid var(--line); border-radius: 1cqw; background: rgba(255, 255, 255, .035); font-size: 1.4cqw; color: #e6ecf7; }
.rules i { flex: none; display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; font: 700 1.2cqw var(--mono); font-style: normal; background: rgba(111, 220, 162, .16); color: var(--green); }
.rules .r1 i, .rules .r2 i, .rules .r3 i { background: rgba(255, 122, 122, .16); color: var(--red); }
.rules.open i { background: rgba(242, 181, 58, .16); color: var(--gold); }
.rules b { color: #fff; font-weight: 700; }

/* 13 limits */
.lim { display: grid; gap: 1.4cqw; width: 76%; margin: 3cqw 0 0; padding: 0; list-style: none; }
.lim li { padding: 1.4cqw 1.8cqw; border: 1px solid var(--line); border-left: .4cqw solid var(--gold); border-radius: 1cqw; background: rgba(255, 255, 255, .035); font-size: 1.5cqw; line-height: 1.4; color: #e6ecf7; opacity: 0; }
.on .lim li { animation: rise .7s var(--ease) calc(.8s + var(--n) * 2.2s) both; }
.l0 { --n: 0; } .l1 { --n: 1; } .l2 { --n: 2; } .l3 { --n: 3; }

/* 14 end */
.sc.end { justify-content: center; text-align: center; }
.endwrap { display: grid; justify-items: center; gap: 1.6cqw; width: 100%; }
.endh { margin: 0; font-weight: 700; font-size: 3.7cqw; line-height: 1.15; letter-spacing: -.035em; }
.endh em { font-style: normal; color: var(--gold); }
.badge { display: inline-flex; align-items: center; gap: 1.4cqw; padding: .6cqw 1.8cqw .6cqw .7cqw; border: 1px solid rgba(111, 220, 162, .4); border-radius: 99cqw; background: rgba(111, 220, 162, .07); color: var(--ink); font: 1.3cqw var(--mono); text-decoration: none; }
.badge b { font: 700 1.5cqw var(--sans); color: #fff; }
.badge span { color: var(--muted); }
.badge img { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(255, 255, 255, .25); }
.badge:hover { border-color: var(--green); }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw; margin-top: .6cqw; }
.end .a { animation-play-state: running !important; }
.btn { display: inline-flex; align-items: center; min-height: 4.4cqw; padding: 0 2.2cqw; border: 1px solid transparent; border-radius: 99cqw; background: #fff; color: #070c16; font: 700 1.4cqw var(--sans); text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, .25); }
.btn:hover { transform: translateY(-1px); }
.btn.ghost:hover { border-color: #fff; }

/* poster */
.poster { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; width: 100%; padding: 4cqw; border: 0; background: radial-gradient(ellipse at 50% 40%, #16294a, var(--bg) 72%); color: var(--ink); font-family: var(--sans); cursor: pointer; text-align: center; container-type: inline-size; }
.poster[hidden] { display: none; }
.poster .logo { width: 10cqw; height: 10cqw; }
.p-title { font-weight: 700; font-size: 4.6cqw; letter-spacing: -.04em; line-height: 1.1; }
.p-sub { font-size: 1.8cqw; color: var(--muted); }
.p-play { display: grid; place-items: center; width: 8cqw; height: 8cqw; margin-top: 1.6cqw; border-radius: 50%; background: #fff; color: #070c16; font-size: 2.8cqw; padding-left: .5cqw; box-shadow: 0 0 6cqw rgba(242, 181, 58, .45); transition: transform .25s var(--ease); }
.poster:hover .p-play { transform: scale(1.08); }
.poster:focus-visible, .ctl:focus-visible, .seg:focus-visible, .btn:focus-visible, .badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* controls: same bar as the Lovable film */
.bar-ctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); background: rgba(12, 18, 32, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity .4s; }
.film:not(.is-started) .bar-ctl { display: none; }
.film.is-idle .bar-ctl { opacity: 0; }
.film.is-idle { cursor: none; }
.ctl { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; }
.ctl:hover { background: rgba(255, 255, 255, .1); }
.ctl.main { width: 40px; height: 40px; background: #fff; color: #070c16; font-size: 12px; letter-spacing: -1px; }
.ctl.main:hover { background: #e5e0ef; }
.ctl svg .offp { display: none; }
.ctl.off svg .on { display: none; }
.ctl.off svg .offp { display: inline; }
.ctl.off { color: var(--muted); }
.scrub { flex: 1; display: flex; gap: 4px; margin: 0 8px; min-width: 0; }
.seg { position: relative; flex: 1 1 0; min-width: 0; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.seg i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--gold); }
.seg:hover::before { background: rgba(255, 255, 255, .3); }
.time { flex: none; font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.chap { flex: none; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--mono); color: var(--ink); text-align: right; }

/* ?still / reduced motion: final frames, manual navigation */
.film.is-static .sc * { animation: none !important; opacity: 1 !important; }
.film.is-static .type { clip-path: none; }
.film.is-static .bar .track i { width: var(--w); }
.film.is-static .pkt { display: none; }
.film.is-static .swap .over { opacity: 0 !important; }
.film.is-static .lim li { opacity: 1; }

@media (max-width: 720px) {
  .chap { display: none; }
}

/* vision act */
.quote { margin: .4cqw 0 0; max-width: 70%; text-align: center; font-size: 1.9cqw; font-style: italic; color: #fff1c4; }
.quote span { display: block; margin-top: .3cqw; font: normal 1.1cqw var(--mono); color: var(--dim); }
.split.gap { grid-template-columns: 1fr 1.1fr; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.kpi { display: grid; align-content: start; gap: .2cqw; padding: 1.3cqw 1.5cqw; border: 1px solid var(--line); border-radius: 1.2cqw; background: rgba(255, 255, 255, .035); }
.kpi b { font-size: 3.3cqw; font-weight: 800; letter-spacing: -.04em; color: var(--gold); font-variant-numeric: tabular-nums; }
.kpi u { text-decoration: none; font: 1.1cqw var(--mono); color: var(--muted); }
.kpi span { font-size: 1.15cqw; line-height: 1.35; color: #dfe6f3; }
.line { width: 100%; margin: 0; }
.line .gl { stroke: rgba(255, 255, 255, .08); }
.line .axt { font: 11px var(--mono); fill: var(--dim); }
.line .cap-t { fill: var(--muted); }
.line .ln { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.on .line .ln { animation: draw 3.2s ease 2.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.line .dot { fill: var(--bg); stroke: var(--gold); stroke-width: 2.5; opacity: 0; }
.on .line .dot { animation: dotin .5s ease calc(2.2s + var(--k, 0) * .45s) forwards; }
@keyframes dotin { to { opacity: 1; } }
.dd0 { --k: 0; } .dd1 { --k: 1; } .dd2 { --k: 2; } .dd3 { --k: 3; } .dd4 { --k: 4; } .dd5 { --k: 5; } .dd6 { --k: 6; }
.line .lab { font: 700 14px var(--mono); fill: #fff; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; width: 90%; margin-top: 2.6cqw; }
.card4 { display: grid; align-content: start; gap: .6cqw; padding: 1.8cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1.2cqw; background: rgba(255, 255, 255, .035); }
.card4 b { font-size: 3cqw; font-weight: 800; letter-spacing: -.04em; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card4 span { font-size: 1.2cqw; line-height: 1.4; color: #dfe6f3; }
.stairs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 1cqw; width: 90%; height: 21cqw; margin: 2.4cqw 0 0; padding: 0; list-style: none; }
.stairs li { display: grid; align-content: end; gap: .4cqw; padding: 1.2cqw 1.2cqw; border: 1px solid rgba(242, 181, 58, .35); border-radius: 1.1cqw 1.1cqw .4cqw .4cqw; background: linear-gradient(180deg, rgba(242, 181, 58, .14), rgba(242, 181, 58, .04)); }
.stairs b { font-size: 1.5cqw; color: #fff; }
.stairs span { font-size: 1.1cqw; line-height: 1.35; color: #dfe6f3; }
.st0 { height: 38%; } .st1 { height: 52%; } .st2 { height: 66%; } .st3 { height: 82%; } .st4 { height: 100%; border-color: var(--green); background: linear-gradient(180deg, rgba(111, 220, 162, .18), rgba(111, 220, 162, .05)); }
.rules.pr { grid-template-columns: 1fr 1fr; width: 90%; margin-top: 1.8cqw; }
.rules.pr li { font-size: 1.25cqw; padding: .9cqw 1.2cqw; }
.flow3 { width: 100%; margin: 0; }
.deny.gold { fill: rgba(242, 181, 58, .08); stroke: var(--gold); }
.stack.sm { width: 82%; padding-bottom: 4.6cqw; justify-self: center; }
.endp { max-width: 62cqw; margin: 0; font-size: 1.45cqw; line-height: 1.55; color: var(--muted); }

/* embed dialog ([data-embed]) */
.embed-box { position: absolute; left: 50%; bottom: 64px; z-index: 7; width: min(560px, 92%); padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 18, 32, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transform: translateX(-50%); font-family: var(--sans); }
.embed-box[hidden] { display: none; }
.embed-t { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.embed-h { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.embed-box textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #05080f; color: #e6ecf7; font: 12px/1.5 var(--mono); resize: none; }
.embed-box textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.embed-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.embed-acts .btn { min-height: 34px; padding: 0 16px; font-size: 13px; }

/* small screens: fullscreen, sound and embed live in a popup (⋯), with labels and big touch targets */
.ctl-more { display: none; font-size: 20px; line-height: 1; }
.ctl-menu { position: absolute; right: 8px; bottom: 64px; z-index: 7; display: grid; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 18, 32, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.ctl-menu[hidden] { display: none; }
.ctl-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 600 15px var(--sans); text-align: start; cursor: pointer; }
.ctl-item:hover, .ctl-item:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.ctl-item svg { flex: none; }
.ctl-item svg .offp { display: none; }
.ctl-item.off svg .on { display: none; }
.ctl-item.off svg .offp { display: inline; }
@media (max-width: 720px) {
  .bar-ctl > [data-sound], .bar-ctl > [data-embed], .bar-ctl > [data-fs] { display: none; }
  .ctl-more { display: grid; }
}