@property --unscramble-offset{syntax:"<number>";inherits:true;initial-value:75}.scroll-driven-text-unscramble{--unscramble-accent:var(--go);background:var(--cream);height:520vh;color:var(--charcoal);view-timeline-name:--unscramble;view-timeline-axis:block;position:relative}.scroll-driven-text-unscramble__stage{place-items:center;height:100svh;padding:1.5rem;display:grid;position:sticky;top:0;overflow:clip}.scroll-driven-text-unscramble__words{flex-wrap:wrap;justify-content:center;align-items:center;gap:1ch;max-width:46rem;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;animation:steps(100,end) both unscramble-settle;animation-timeline:--unscramble;animation-range:entry 100% exit 0%;display:flex}.scroll-driven-text-unscramble__word{perspective:300px;transform-style:preserve-3d;align-items:center;margin:0;display:flex}.scroll-driven-text-unscramble__word[data-accent=true]{color:var(--unscramble-accent)}.scroll-driven-text-unscramble__letter{--dir:calc(1 - 2 * mod(var(--i), 2));--rand:calc(mod((var(--i) * 7 + 20), 4) - 4);--wave:sin(calc(var(--i) * 17deg));--start-y:calc((var(--rand) + var(--wave)) * var(--dir) * var(--unscramble-offset) * 1px);--z:calc(abs(var(--rand) * 2 + var(--wave)));--depth-factor:calc(var(--unscramble-offset) * .02);--start-z:calc(var(--z) * var(--depth-factor) * 13px);transform:translate3d(0, var(--start-y), var(--start-z));font-size:clamp(1.35rem,2.4vw + .6rem,2.35rem);line-height:1.2;display:inline-block;position:relative}.scroll-driven-text-unscramble__mouse{width:2.5rem;height:2.5rem;color:var(--unscramble-accent);pointer-events:none;animation:linear both unscramble-mouse;animation-timeline:--unscramble;animation-range:entry 100% exit 0%;position:absolute;bottom:1.25rem;left:50%;translate:-50%}@keyframes unscramble-settle{to{--unscramble-offset:0}}@keyframes unscramble-mouse{0%,82%{opacity:1}to{opacity:0}}@supports not (animation-timeline:view()){.scroll-driven-text-unscramble{height:auto}.scroll-driven-text-unscramble__stage{height:auto;min-height:70vh;position:relative}.scroll-driven-text-unscramble__words{--unscramble-offset:0;animation:none}.scroll-driven-text-unscramble__mouse{display:none}}@media (prefers-reduced-motion:reduce){.scroll-driven-text-unscramble{height:auto}.scroll-driven-text-unscramble__stage{height:auto;min-height:70vh;position:relative}.scroll-driven-text-unscramble__words,.scroll-driven-text-unscramble__mouse{animation:none}.scroll-driven-text-unscramble__words{--unscramble-offset:0}.scroll-driven-text-unscramble__mouse{display:none}}
