.hero-code__line:nth-child(1) { animation: hero-line-0 18.45s linear infinite; }
@keyframes hero-line-0 { 0%, 8.672% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(3, end); } 9.539% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(2) { animation: hero-line-1 18.45s linear infinite; }
@keyframes hero-line-1 { 0%, 9.539% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(4, end); } 10.407% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(3) { animation: hero-line-2 18.45s linear infinite; }
@keyframes hero-line-2 { 0%, 10.407% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(9, end); } 11.274% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(4) { animation: hero-line-3 18.45s linear infinite; }
@keyframes hero-line-3 { 0%, 11.274% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(5, end); } 12.141% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(5) { animation: hero-line-4 18.45s linear infinite; }
@keyframes hero-line-4 { 0%, 12.141% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(6, end); } 13.008% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(6) { animation: hero-line-5 18.45s linear infinite; }
@keyframes hero-line-5 { 0%, 13.008% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(6, end); } 13.875% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(7) { animation: hero-line-6 18.45s linear infinite; }
@keyframes hero-line-6 { 0%, 13.875% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(5, end); } 14.743% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(8) { animation: hero-line-7 18.45s linear infinite; }
@keyframes hero-line-7 { 0%, 14.743% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(3, end); } 15.610% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(9) { animation: hero-line-8 18.45s linear infinite; }
@keyframes hero-line-8 { 0%, 15.610% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(1, end); } 16.043% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(10) { animation: hero-line-9 18.45s linear infinite; }
@keyframes hero-line-9 { 0%, 16.043% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(7, end); } 16.911% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(11) { animation: hero-line-10 18.45s linear infinite; }
@keyframes hero-line-10 { 0%, 16.911% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(1, end); } 17.344% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(12) { animation: hero-line-11 18.45s linear infinite; }
@keyframes hero-line-11 { 0%, 17.344% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(16, end); } 20.054% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(13) { animation: hero-line-12 18.45s linear infinite; }
@keyframes hero-line-12 { 0%, 20.054% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(17, end); } 22.764% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(14) { animation: hero-line-13 18.45s linear infinite; }
@keyframes hero-line-13 { 0%, 22.764% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(30, end); } 25.474% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(15) { animation: hero-line-14 18.45s linear infinite; }
@keyframes hero-line-14 { 0%, 25.474% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(31, end); } 28.184% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(16) { animation: hero-line-15 18.45s linear infinite; }
@keyframes hero-line-15 { 0%, 28.184% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(10, end); } 30.081% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(17) { animation: hero-line-16 18.45s linear infinite; }
@keyframes hero-line-16 { 0%, 30.081% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(32, end); } 32.791% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(18) { animation: hero-line-17 18.45s linear infinite; }
@keyframes hero-line-17 { 0%, 32.791% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(6, end); } 34.688% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(19) { animation: hero-line-18 18.45s linear infinite; }
@keyframes hero-line-18 { 0%, 34.688% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(10, end); } 36.585% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(20) { animation: hero-line-19 18.45s linear infinite; }
@keyframes hero-line-19 { 0%, 36.585% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(24, end); } 39.295% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(21) { animation: hero-line-20 18.45s linear infinite; }
@keyframes hero-line-20 { 0%, 39.295% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(31, end); } 42.005% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(22) { animation: hero-line-21 18.45s linear infinite; }
@keyframes hero-line-21 { 0%, 42.005% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(7, end); } 43.902% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(23) { animation: hero-line-22 18.45s linear infinite; }
@keyframes hero-line-22 { 0%, 43.902% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(31, end); } 46.612% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(24) { animation: hero-line-23 18.45s linear infinite; }
@keyframes hero-line-23 { 0%, 46.612% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(10, end); } 48.509% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(25) { animation: hero-line-24 18.45s linear infinite; }
@keyframes hero-line-24 { 0%, 48.509% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(31, end); } 51.220% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(26) { animation: hero-line-25 18.45s linear infinite; }
@keyframes hero-line-25 { 0%, 51.220% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(32, end); } 53.930% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(27) { animation: hero-line-26 18.45s linear infinite; }
@keyframes hero-line-26 { 0%, 53.930% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(6, end); } 55.827% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(28) { animation: hero-line-27 18.45s linear infinite; }
@keyframes hero-line-27 { 0%, 55.827% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(32, end); } 58.537% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-code__line:nth-child(29) { animation: hero-line-28 18.45s linear infinite; }
@keyframes hero-line-28 { 0%, 58.537% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(17, end); } 60.434% { clip-path: inset(0 0 0 0); opacity: 1; } 95.664% { clip-path: inset(0 0 0 0); opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l0 { animation: hero-layer-0 18.45s ease-out infinite; }
@keyframes hero-layer-0 { 0%, 20.325% { opacity: 0; translate: 0 24px; } 22.764% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l1 { animation: hero-layer-1 18.45s ease-out infinite; }
@keyframes hero-layer-1 { 0%, 23.035% { opacity: 0; translate: 0 24px; } 25.474% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l2 { animation: hero-layer-2 18.45s ease-out infinite; }
@keyframes hero-layer-2 { 0%, 25.745% { opacity: 0; translate: 0 24px; } 28.184% { opacity: 0.4; translate: 0 0; } 95.664% { opacity: 0.4; } 99.729%, 100% { opacity: 0; } }
.hero-l3 { animation: hero-layer-3 18.45s ease-out infinite; }
@keyframes hero-layer-3 { 0%, 30.352% { opacity: 0; translate: 0 24px; } 32.791% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l4 { animation: hero-layer-4 18.45s ease-out infinite; }
@keyframes hero-layer-4 { 0%, 36.856% { opacity: 0; translate: 0 24px; } 39.295% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l5 { animation: hero-layer-5 18.45s ease-out infinite; }
@keyframes hero-layer-5 { 0%, 39.566% { opacity: 0; translate: 0 24px; } 42.005% { opacity: 0.3; translate: 0 0; } 95.664% { opacity: 0.3; } 99.729%, 100% { opacity: 0; } }
.hero-l6 { animation: hero-layer-6 18.45s ease-out infinite; }
@keyframes hero-layer-6 { 0%, 44.173% { opacity: 0; translate: 0 24px; } 46.612% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l7 { animation: hero-layer-7 18.45s ease-out infinite; }
@keyframes hero-layer-7 { 0%, 48.780% { opacity: 0; translate: 0 24px; } 51.220% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l8 { animation: hero-layer-8 18.45s ease-out infinite; }
@keyframes hero-layer-8 { 0%, 51.491% { opacity: 0; translate: 0 24px; } 53.930% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l9 { animation: hero-layer-9 18.45s ease-out infinite; }
@keyframes hero-layer-9 { 0%, 56.098% { opacity: 0; translate: 0 24px; } 58.537% { opacity: 1; translate: 0 0; } 95.664% { opacity: 1; } 99.729%, 100% { opacity: 0; } }
.hero-l10 { animation: hero-layer-10 18.45s ease-out infinite; }
@keyframes hero-layer-10 { 0%, 60.705% { opacity: 0; translate: 0 24px; } 63.144% { opacity: 0.6; translate: 0 0; } 95.664% { opacity: 0.6; } 99.729%, 100% { opacity: 0; } }
.hero-cursor { animation: hero-cursor 18.45s ease-in-out infinite; }
@keyframes hero-cursor { 0%, 18.157% { translate: 90.0% 90.0%; opacity: 0; } 20.325% { translate: 90.0% 90.0%; opacity: 1; } 23.035% { translate: 90.0% 40.0%; opacity: 1; } 25.745% { translate: 90.0% 47.4%; opacity: 1; } 30.352% { translate: 56.5% 46.6%; opacity: 1; } 36.856% { translate: 82.1% 71.3%; opacity: 1; } 39.566% { translate: 90.0% 74.1%; opacity: 1; } 44.173% { translate: 31.1% 79.6%; opacity: 1; } 48.780% { translate: 41.4% 83.8%; opacity: 1; } 51.491% { translate: 90.0% 84.5%; opacity: 1; } 56.098% { translate: 86.2% 81.8%; opacity: 1; } 60.705% { translate: 55.6% 90.0%; opacity: 1; } 68.564% { opacity: 1; } 70.732%, 100% { opacity: 0; } }
@keyframes hero-scroll-wide { 0% { translate: 0 0; } 38.645% { translate: 0 calc(var(--hero-row) * 0); } 39.295% { translate: 0 calc(var(--hero-row) * -1); } 41.355% { translate: 0 calc(var(--hero-row) * -1); } 42.005% { translate: 0 calc(var(--hero-row) * -2); } 43.252% { translate: 0 calc(var(--hero-row) * -2); } 43.902% { translate: 0 calc(var(--hero-row) * -3); } 45.962% { translate: 0 calc(var(--hero-row) * -3); } 46.612% { translate: 0 calc(var(--hero-row) * -4); } 47.859% { translate: 0 calc(var(--hero-row) * -4); } 48.509% { translate: 0 calc(var(--hero-row) * -5); } 50.569% { translate: 0 calc(var(--hero-row) * -5); } 51.220% { translate: 0 calc(var(--hero-row) * -6); } 53.279% { translate: 0 calc(var(--hero-row) * -6); } 53.930% { translate: 0 calc(var(--hero-row) * -7); } 55.176% { translate: 0 calc(var(--hero-row) * -7); } 55.827% { translate: 0 calc(var(--hero-row) * -8); } 57.886% { translate: 0 calc(var(--hero-row) * -8); } 58.537% { translate: 0 calc(var(--hero-row) * -9); } 99.729% { translate: 0 calc(var(--hero-row) * -9); } 100% { translate: 0 0; } }
@keyframes hero-scroll-narrow { 0% { translate: 0 0; } 16.694% { translate: 0 calc(var(--hero-row) * 0); } 17.344% { translate: 0 calc(var(--hero-row) * -1); } 19.404% { translate: 0 calc(var(--hero-row) * -1); } 20.054% { translate: 0 calc(var(--hero-row) * -2); } 22.114% { translate: 0 calc(var(--hero-row) * -2); } 22.764% { translate: 0 calc(var(--hero-row) * -3); } 24.824% { translate: 0 calc(var(--hero-row) * -3); } 25.474% { translate: 0 calc(var(--hero-row) * -4); } 27.534% { translate: 0 calc(var(--hero-row) * -4); } 28.184% { translate: 0 calc(var(--hero-row) * -5); } 29.431% { translate: 0 calc(var(--hero-row) * -5); } 30.081% { translate: 0 calc(var(--hero-row) * -6); } 32.141% { translate: 0 calc(var(--hero-row) * -6); } 32.791% { translate: 0 calc(var(--hero-row) * -7); } 34.038% { translate: 0 calc(var(--hero-row) * -7); } 34.688% { translate: 0 calc(var(--hero-row) * -8); } 35.935% { translate: 0 calc(var(--hero-row) * -8); } 36.585% { translate: 0 calc(var(--hero-row) * -9); } 38.645% { translate: 0 calc(var(--hero-row) * -9); } 39.295% { translate: 0 calc(var(--hero-row) * -10); } 41.355% { translate: 0 calc(var(--hero-row) * -10); } 42.005% { translate: 0 calc(var(--hero-row) * -11); } 43.252% { translate: 0 calc(var(--hero-row) * -11); } 43.902% { translate: 0 calc(var(--hero-row) * -12); } 45.962% { translate: 0 calc(var(--hero-row) * -12); } 46.612% { translate: 0 calc(var(--hero-row) * -13); } 47.859% { translate: 0 calc(var(--hero-row) * -13); } 48.509% { translate: 0 calc(var(--hero-row) * -14); } 50.569% { translate: 0 calc(var(--hero-row) * -14); } 51.220% { translate: 0 calc(var(--hero-row) * -15); } 53.279% { translate: 0 calc(var(--hero-row) * -15); } 53.930% { translate: 0 calc(var(--hero-row) * -16); } 55.176% { translate: 0 calc(var(--hero-row) * -16); } 55.827% { translate: 0 calc(var(--hero-row) * -17); } 57.886% { translate: 0 calc(var(--hero-row) * -17); } 58.537% { translate: 0 calc(var(--hero-row) * -18); } 99.729% { translate: 0 calc(var(--hero-row) * -18); } 100% { translate: 0 0; } }
.hero-code__lines { animation: hero-scroll-wide 18.45s ease-out infinite; }
@media (max-width: 879px) { .hero-code__lines { animation-name: hero-scroll-narrow; } }
.hero-prompt { animation: hero-prompt 18.45s linear infinite; }
@keyframes hero-prompt { 0%, 1.626% { opacity: 0; } 3.252%, 95.664% { opacity: 1; } 97.290%, 100% { opacity: 0; } }
.hero-status__writing { animation: hero-writing 18.45s linear infinite; }
@keyframes hero-writing { 0%, 5.962% { opacity: 0; } 7.588%, 61.518% { opacity: 1; } 63.144%, 100% { opacity: 0; } }
.hero-status__done { animation: hero-done 18.45s linear infinite; }
@keyframes hero-done { 0%, 63.144% { opacity: 0; } 64.770%, 95.664% { opacity: 1; } 97.290%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-code__line, .hero-code__lines, .hero-design *, .hero-cursor, .hero-prompt, .hero-status__writing { animation: none; } .hero-status__writing { opacity: 0; } .hero-status__done { animation: none; opacity: 1; } .hero-cursor { opacity: 0; } }