.hero{min-height:200dvh}.hero-canvas{opacity:0;animation:hero-canvas-in .9s var(--ease-machine) .12s forwards}@keyframes hero-canvas-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (max-width:1023px){.hero-canvas{opacity:.45;top:34%}}.hero-copy{opacity:clamp(0, calc(1 - var(--p,0) * 2.6), 1);transform:translateY(calc(var(--p,0) * -32px));transition:opacity 90ms linear}.hero-stage[data-exploded=true] .hero-copy{pointer-events:none}.hero-callout{left:0;right:0;top:var(--cy);opacity:0;transition:opacity .42s var(--ease-machine) var(--delay);will-change:opacity;justify-content:flex-end;align-items:center;padding-right:2.5rem;display:flex;position:absolute;transform:translateY(-50%)}.hero-stage[data-exploded=true] .hero-callout{opacity:1}.hero-callout-leader{left:min(var(--cx), calc(100% - 4rem));background:var(--hairline-strong);height:1px;position:absolute;top:50%;right:2.5rem}.hero-callout-leader:before{content:"";background:var(--brand-500);width:5px;height:5px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)rotate(45deg)}.hero-callout-body{border:1px solid var(--hairline);background:var(--surface);align-items:baseline;gap:.5rem;max-width:min(28rem,60%);padding:.4rem .7rem;display:flex;position:relative}.hero-callout-body>:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width:1023px){.hero-callout{display:none}}@media (prefers-reduced-motion:reduce){.hero{min-height:0}.hero-canvas{opacity:1;animation:none}.hero-copy{opacity:1;transition:none;transform:none}.hero-callout{transition:none}}