:root{--accent:#fff;--fg:#f4f4f6;--dim:#f4f4f68c;--faint:#f4f4f624;--font:"Helvetica Neue", "Inter", "PingFang SC", "Segoe UI", Arial, sans-serif;--pad:clamp(20px, 4vw, 56px);--ease:cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;background:#020204;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}#ui button{pointer-events:auto;cursor:pointer;font-family:inherit}.vignette{background:linear-gradient(#000000bf,#0000 9% 88%,#000c),radial-gradient(#0000 55%,#0000008c 100%);position:absolute;inset:0}.brand{top:var(--pad);left:var(--pad);opacity:0;transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);position:absolute;transform:translateY(-6px)}.brand-title{letter-spacing:.42em;font-size:12px;font-weight:500}.brand-sub{letter-spacing:.5em;color:var(--dim);margin-top:8px;font-size:10px;font-weight:300}.is-running .brand{opacity:1;transform:none}.controls{top:var(--pad);right:var(--pad);opacity:0;transition:opacity 1s var(--ease) 1s;gap:8px;display:flex;position:absolute}.is-started .controls{opacity:1}.controls button{-webkit-backdrop-filter:blur(8px);border:1px solid var(--faint);color:var(--dim);letter-spacing:.28em;background:#0a0a0e59;padding:9px 14px 9px 16px;font-size:10px;transition:color .3s,border-color .3s,background .3s}.controls button:hover{color:var(--fg);border-color:#fff6}.is-record .controls,.is-record .start{display:none}.is-end [data-action=replay]{color:#000;background:var(--fg);border-color:var(--fg)}.intro{text-align:center;transition:opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease);background:radial-gradient(60% 40%,#020204bf,#0000 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.intro-kicker{letter-spacing:.6em;color:var(--dim);margin-bottom:28px;padding-left:.6em;font-size:11px}.intro-title{letter-spacing:.24em;text-shadow:0 0 40px #a0afff59;padding-left:.24em;font-size:clamp(38px,7.2vw,124px);font-weight:200;line-height:1}.intro-sub{letter-spacing:.7em;color:var(--dim);align-items:center;gap:18px;margin-top:26px;padding-left:.7em;font-size:clamp(11px,1.1vw,15px);font-weight:300;display:flex}.intro-sub:before,.intro-sub:after{content:"";background:var(--faint);width:48px;height:1px}.start{color:var(--fg);letter-spacing:.5em;background:0 0;border:1px solid #ffffff4d;margin-top:64px;padding:16px 28px 16px 34px;font-size:11px;transition:background .4s,color .4s,opacity .8s,border-color .4s}.start:hover{background:var(--fg);color:#000;border-color:var(--fg)}.is-started .start{opacity:0;pointer-events:none!important}.is-running .intro{opacity:0;filter:blur(6px);transform:translateY(-20px)scale(.98)}.card{left:var(--pad);bottom:calc(var(--pad) + 84px);max-width:min(80vw,720px);padding-left:22px;position:absolute}.card:before{content:"";background:var(--accent);width:2px;box-shadow:0 0 16px var(--accent);transform-origin:top;transition:transform .7s var(--ease);position:absolute;top:4px;bottom:4px;left:0;transform:scaleY(0)}.card>*{opacity:0;transition:opacity .5s var(--ease), transform .7s var(--ease);transform:translateY(14px)}.card.is-visible:before{transform:scaleY(1)}.card.is-visible>*{opacity:1;transform:none}.card.is-visible>:nth-child(2){transition-delay:80ms}.card.is-visible>:nth-child(3){transition-delay:.16s}.card.is-visible>:nth-child(4){transition-delay:.26s}.card-index{letter-spacing:.4em;color:var(--dim);font-size:10px}.card-company{letter-spacing:.42em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 18px var(--accent);margin-top:16px;font-size:13px;font-weight:500}.card-name{letter-spacing:.04em;margin-top:10px;font-size:clamp(30px,4.4vw,64px);font-weight:300;line-height:1.05}.card-date{letter-spacing:.36em;color:var(--dim);margin-top:14px;font-size:12px;font-weight:300}.finale,.next{text-align:center;opacity:0;transition:opacity 1.6s var(--ease), letter-spacing 3s var(--ease);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.finale-l1{letter-spacing:.22em;text-shadow:0 0 40px #ffffff59;padding-left:.22em;font-size:clamp(30px,5vw,84px);font-weight:200}.finale-l2{letter-spacing:.55em;color:var(--dim);margin-top:22px;padding-left:.55em;font-size:clamp(11px,1.2vw,16px)}.is-finale .finale{opacity:1}.next{letter-spacing:.1em;text-shadow:0 0 60px #ffffff73;justify-content:flex-start;padding-top:14vh;font-size:clamp(48px,10vw,180px);font-weight:100}.is-next .next{opacity:1;letter-spacing:.3em}.timeline{left:var(--pad);right:var(--pad);bottom:var(--pad);opacity:0;height:30px;transition:opacity 1.2s var(--ease);position:absolute}.is-running .timeline{opacity:1}.is-finale .timeline,.is-next .timeline{opacity:.25}.timeline-track{background:var(--faint);height:1px;position:absolute;top:8px;left:0;right:0}.timeline-fill{background:linear-gradient(to right, #fff3, var(--accent));width:0;height:100%;transition:width 1.2s var(--ease)}.timeline-ticks span{background:#ffffff47;width:1px;height:9px;transition:background .4s,height .4s,top .4s,box-shadow .4s;position:absolute;top:4px}.timeline-ticks span.is-past{background:#ffffffbf}.timeline-ticks span.is-active{background:var(--accent);width:2px;height:21px;box-shadow:0 0 10px var(--accent);top:-2px}.timeline-months span{letter-spacing:.3em;color:#ffffff59;font-size:9px;position:absolute;top:20px;transform:translate(-50%)}@media (width<=720px){.controls button{letter-spacing:.15em;padding:7px 9px}.brand,.timeline-months span:nth-child(2n){display:none}}
