@property --scale{syntax:"<number>";inherits:false;initial-value:1}#x{--scale:0;width:calc(2em * var(--scale));height:calc(2em * var(--scale));margin:0 auto;animation:1s 2s forwards x-in;position:relative;rotate:0deg}#x>span{width:calc(2em * var(--scale));transform-origin:50%;background-color:var(--color-foreground);height:1px;animation:1s .5s forwards line-in;display:block;position:absolute;top:50%;left:50%;translate:-50% -50%}#x .line-y{margin:0 0 -1px;animation:1s 1s forwards line-in,1s 1.5s forwards line-y-in;rotate:0deg}.char{--delay:0s;animation-delay:var(--delay,0s)}.fade-in-up{opacity:0;animation:1s forwards fade-in-up;translate:0 12em}.hero-scroll-track{z-index:20;position:relative}.hero-fixed{transform-origin:50%;will-change:transform, opacity}#inner,#names,#date{text-align:center;place-content:center;place-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0}#china,#x,#michael,#month,#day{position:absolute;top:50%;left:50%;translate:-50% -50%}#names .chars{animation:1s 3s forwards slide-in;display:block;position:relative}#china .chars{left:-6em;translate:6em}#michael .chars{left:6em;translate:-6em}#date .chars{position:relative}#month .chars{top:-3em}#day .chars{bottom:-3em}@keyframes fade-in-up{to{opacity:1;translate:0}}@keyframes slide-in{to{translate:0}}@keyframes line-in{to{--scale:9}}@keyframes x-in{to{rotate:-45deg}}@keyframes line-y-in{to{rotate:-90deg}}