<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
.sc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(3%);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.sc.on{opacity:1;transform:none}.e{color:#f5b942;letter-spacing:.4em;font-size:2.2cqw;font-weight:700}.t{color:#f5efe6;font-size:10cqw;font-weight:900;letter-spacing:-.04em}.s{color:#a8a29e;font-size:2.6cqw}
</style></head>
<body><div class="stage"><div class="sc" data-start="0" data-duration="1.6"><div class="e">CHAPTER 01</div></div><div class="sc" data-start="1.6" data-duration="2.4"><div class="t">The brief</div></div><div class="sc" data-start="4" data-duration="2"><div class="s">Every great motion piece starts with one sentence.</div></div></div><script>var sc=[].slice.call(document.querySelectorAll("[data-start]")),L=6,t0=performance.now();function f(n){var t=((n-t0)/1000)%L;sc.forEach(function(e){var s=+e.dataset.start,d=+e.dataset.duration;e.classList.toggle("on",t>=s&&t<s+d)});requestAnimationFrame(f)}requestAnimationFrame(f);</script></body></html>