.motion-calculator, .motion-calculator * { box-sizing: border-box; }
.motion-calculator { width: min(100%, 1380px); aspect-ratio: 1380 / 800; overflow: hidden; container-type: inline-size; background: #1c1c1c; }
.motion-composition { position: relative; width: 100%; height: 100%; opacity: 0; }
.calculator-base { display: block; width: 100%; height: 100%; }
.is-started .motion-composition { animation: entrance 850ms cubic-bezier(.16,1,.3,1) both; }
.motion-selection, .motion-focus { position: absolute; left: 8.6956521739%; top: 20.75%; width: 53.1884057971%; height: 65.875%; border-radius: 1.4492753623cqw; opacity: 0; pointer-events: none; }
.motion-selection { overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.motion-focus { box-shadow: 0 0 0 150vmax rgba(0,0,0,.055); }
.motion-sweep { position: absolute; inset: -30% -20%; opacity: 0; background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.025) 38%,rgba(255,255,255,.14) 49%,rgba(255,255,255,.045) 55%,transparent 72%); }
.motion-row { position: absolute; left: 10.1449275362%; width: 50.7246376812%; height: 6.375%; border-radius: .7246376812cqw; background: rgba(255,255,255,.035); opacity: 0; pointer-events: none; }
.row-1 { top: 28.375%; --row-delay: 0ms; }
.row-2 { top: 38.25%; --row-delay: 105ms; }
.row-3 { top: 48.125%; --row-delay: 210ms; }
.row-4 { top: 58%; --row-delay: 315ms; }
.row-5 { top: 67.875%; --row-delay: 420ms; }
.is-started .motion-selection { animation: selection 6000ms ease-in-out 1250ms infinite both; }
.is-started .motion-focus { animation: focus 6000ms ease-in-out 1250ms infinite both; }
.is-started .motion-sweep { animation: sweep 6000ms cubic-bezier(.25,.1,.25,1) 1250ms infinite both; }
.is-started .motion-row { animation: row-accent 6000ms ease-in-out calc(1250ms + var(--row-delay)) infinite both; }
.is-paused .motion-composition, .is-paused .motion-selection, .is-paused .motion-focus, .is-paused .motion-sweep, .is-paused .motion-row { animation-play-state: paused; }
@keyframes entrance { from { opacity: 0; transform: translateY(5px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes selection { 0%,11.702%,74.468%,100% { opacity: 0; transform: scale(.99); } 20.213%,65.957% { opacity: 1; transform: scale(1); } }
@keyframes focus { 0%,11.702%,74.468%,100% { opacity: 0; } 20.213%,65.957% { opacity: 1; } }
@keyframes sweep { 0%,20.213% { opacity: 0; transform: translateX(-100%); } 22% { opacity: 1; } 35% { opacity: 1; } 37.234%,100% { opacity: 0; transform: translateX(100%); } }
@keyframes row-accent { 0%,28.723%,33.191%,100% { opacity: 0; } 30.957% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .motion-composition, .is-started .motion-composition { opacity: 1; transform: none; animation: none; }
  .is-started .motion-selection { opacity: 1; transform: none; animation: none; }
  .is-started .motion-focus, .is-started .motion-sweep, .is-started .motion-row { animation: none; opacity: 0; }
}