.world{position:relative;display:block;width:max-content;isolation:isolate}.world>span{display:block}.base{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.wire,.slice{position:absolute;inset:0;pointer-events:none}.wire{color:transparent;-webkit-text-stroke:1.3px #efece3;clip-path:polygon(0 8%,22% 8%,22% 33%,17% 33%,17% 71%,10% 71%,10% 100%,0 100%);transform:translate(-10px,0)}.digital .base{clip-path:polygon(22% 0,100% 0,100% 100%,10% 100%,10% 71%,17% 71%,17% 33%,22% 33%)}.orange{color:#f46b33;clip-path:polygon(0 35%,49% 35%,49% 43%,74% 43%,74% 50%,0 50%);transform:translate(-19px,1px);z-index:3}.blue{color:#57a3de;clip-path:polygon(45% 67%,100% 67%,100% 73%,62% 73%,62% 77%,45% 77%);transform:translate(10px,0);z-index:2}.reverse{color:#efece3;clip-path:polygon(0 36%,16% 36%,16% 51%,39% 51%,39% 56%,0 56%);transform:translate(-7px,0);z-index:4}.fragment{position:absolute;height:.035em;background:#f46b33;z-index:5}.f1{width:.14em;left:-.18em;top:48%}.f2{width:.23em;left:19%;top:57%;height:.017em}.f3{width:.07em;right:-.07em;top:70%;background:#57a3de;height:.025em}
@keyframes orange-jump{0%{transform:translate(-34px,2px)}18%{transform:translate(21px,-2px)}29%{transform:translate(-27px,0)}53%{transform:translate(-8px,1px)}69%{transform:translate(-24px,0)}85%,100%{transform:translate(-19px,1px)}}@keyframes blue-jump{0%{transform:translate(20px,0)}18%{transform:translate(-13px,0)}29%{transform:translate(28px,1px)}53%{transform:translate(3px,0)}69%{transform:translate(16px,-1px)}85%,100%{transform:translate(10px,0)}}@keyframes wire-jump{0%{transform:translate(-18px,0)}29%{transform:translate(-5px,0)}53%{transform:translate(-14px,0)}85%,100%{transform:translate(-10px,0)}}@keyframes reverse-jump{0%{transform:translate(8px,0)}18%{transform:translate(-19px,0)}53%{transform:translate(3px,0)}85%,100%{transform:translate(-7px,0)}}
/* Context revision: large moving bands, independent color plates and a sharp core jog.
   em-based amplitude follows type size on phones. All layers end at the static signature. */
.playing .base,.inspecting .base{animation:word-jog var(--duration,800ms) steps(1,end) both}
.inspecting .base{animation-play-state:paused;animation-delay:var(--inspect-time)}
@keyframes word-jog{0%{transform:translate(calc(-.04em * var(--movement,1)),0)}12%{transform:translate(calc(.025em * var(--movement,1)),0)}24%{transform:translate(calc(-.02em * var(--movement,1)),0)}36%{transform:translate(calc(.01em * var(--movement,1)),0)}49%,100%{transform:translate(0,0)}}
@keyframes orange-jump{0%{transform:translate(calc(-.18em * var(--separation,1)),calc(-.005em * var(--separation,1)));clip-path:inset(0 0 48% 0)}12%{transform:translate(calc(.13em * var(--separation,1)),0);clip-path:inset(44% 0 5% 0)}24%{transform:translate(calc(-.15em * var(--separation,1)),calc(.005em * var(--separation,1)));clip-path:inset(8% 0 21% 0)}36%{transform:translate(calc(-.1em * var(--separation,1)),0);clip-path:inset(27% 0 32% 0)}49%{transform:translate(calc(.055em * var(--separation,1)),0);clip-path:inset(0 0 0 0)}62%{transform:translate(calc(-.07em * var(--separation,1)),0);clip-path:inset(10% 0 55% 0)}77%,100%{transform:translate(calc(-19px * var(--separation,1)),calc(1px * var(--separation,1)));clip-path:polygon(0 35%,49% 35%,49% 43%,74% 43%,74% 50%,0 50%)}}
@keyframes blue-jump{0%{transform:translate(calc(.13em * var(--separation,1)),calc(.008em * var(--separation,1)));clip-path:inset(38% 0 0 0)}12%{transform:translate(calc(-.1em * var(--separation,1)),0);clip-path:inset(0 0 49% 0)}24%{transform:translate(calc(.15em * var(--separation,1)),0);clip-path:inset(0 0 0 0)}36%{transform:translate(calc(.06em * var(--separation,1)),calc(-.005em * var(--separation,1)));clip-path:inset(54% 0 0 0)}49%{transform:translate(calc(.035em * var(--separation,1)),0);clip-path:inset(0 0 30% 0)}62%{transform:translate(calc(-.025em * var(--separation,1)),0);clip-path:inset(25% 0 0 0)}77%,100%{transform:translate(calc(10px * var(--separation,1)),0);clip-path:polygon(45% 67%,100% 67%,100% 73%,62% 73%,62% 77%,45% 77%)}}
@keyframes reverse-jump{0%{transform:translate(calc(.1em * var(--movement,1)),0);clip-path:inset(19% 0 69% 0)}12%{transform:translate(calc(-.14em * var(--movement,1)),0);clip-path:inset(59% 0 24% 0)}24%{transform:translate(calc(.085em * var(--movement,1)),0);clip-path:inset(32% 0 58% 0)}36%{transform:translate(calc(-.07em * var(--movement,1)),0);clip-path:inset(72% 0 14% 0)}49%{transform:translate(calc(.03em * var(--movement,1)),0);clip-path:inset(21% 0 61% 0)}62%{transform:translate(calc(-.035em * var(--movement,1)),0);clip-path:inset(41% 0 48% 0)}77%,100%{transform:translate(calc(-7px * var(--movement,1)),0);clip-path:polygon(0 36%,16% 36%,16% 51%,39% 51%,39% 56%,0 56%)}}
.playing .orange,.playing .blue,.inspecting .orange,.inspecting .blue{mix-blend-mode:screen}

/* The last frame is clean. Hard-cut resolution, not a fade or residual glitch. */
.playing .base,.inspecting .base{animation:word-jog var(--duration,800ms) steps(1,end) both,clean-core var(--duration,800ms) steps(1,end) both}
.playing .orange,.inspecting .orange{animation:orange-jump var(--duration,800ms) steps(1,end) both,clean-plates var(--duration,800ms) steps(1,end) both}
.playing .blue,.inspecting .blue{animation:blue-jump var(--duration,800ms) steps(1,end) both,clean-plates var(--duration,800ms) steps(1,end) both}
.playing .wire,.inspecting .wire{animation:wire-jump var(--duration,800ms) steps(1,end) both,clean-plates var(--duration,800ms) steps(1,end) both}
.playing .reverse,.inspecting .reverse{animation:reverse-jump var(--duration,800ms) steps(1,end) both,clean-plates var(--duration,800ms) steps(1,end) both}
.playing .fragment,.inspecting .fragment{animation:clean-plates var(--duration,800ms) steps(1,end) both}
.inspecting .base,.inspecting .orange,.inspecting .blue,.inspecting .wire,.inspecting .reverse,.inspecting .fragment{animation-play-state:paused;animation-delay:var(--inspect-time)}
@keyframes clean-core{0%,99%{clip-path:polygon(22% 0,100% 0,100% 100%,10% 100%,10% 71%,17% 71%,17% 33%,22% 33%)}100%{clip-path:inset(0)}}
@keyframes clean-plates{0%,99%{opacity:var(--plate-alpha,1)}100%{opacity:0}}

.orange,.blue{--plate-alpha:var(--color-strength,1)}

.motion-hero{--duration:400ms;--movement:.45;--separation:.6;--color-strength:.6}.world{display:inline-block;vertical-align:baseline}.world>span{display:block}.motion-hero:not(.digital) .wire,.motion-hero:not(.digital) .slice,.motion-hero:not(.digital) .fragment{visibility:hidden}.playing .wire{animation:wire-jump var(--duration) steps(1,end) both,clean-plates var(--duration) steps(1,end) both}@media(prefers-reduced-motion:reduce){.world .base{animation:none!important;clip-path:none!important;transform:none!important}.wire,.slice,.fragment{display:none!important}}@media print{.world .base{animation:none!important;clip-path:none!important;transform:none!important}.wire,.slice,.fragment{display:none!important}}