/* Only the seven central labels/numbers participate. Default/no-JS is the original page. */
html[data-h001-motion="pending"] body[data-page="home"] #hero .skill-title,
html[data-h001-motion="pending"] body[data-page="home"] #hero .skill-number{opacity:0}
body[data-page="home"] #hero .h001-window{position:absolute;display:block;overflow:hidden;pointer-events:none}
body[data-page="home"] #hero .h001-ink{position:absolute;inset:0;display:block;pointer-events:none;background:currentColor;-webkit-mask:var(--motion-glyph) center / 100% 100% no-repeat;mask:var(--motion-glyph) center / 100% 100% no-repeat;transform:translateY(105%);opacity:0;will-change:transform,opacity;image-rendering:auto}
@media(min-width:761px){
html[data-h001-motion="ready"] body[data-page="home"] #hero .skill-title::after,
html[data-h001-motion="ready"] body[data-page="home"] #hero .skill-number::after,
html[data-h001-motion="running"] body[data-page="home"] #hero .skill-title::after,
html[data-h001-motion="running"] body[data-page="home"] #hero .skill-number::after{visibility:hidden}
}
@media(max-width:760px){
html[data-h001-motion="ready"] body[data-page="home"] #hero .skill-title,
html[data-h001-motion="ready"] body[data-page="home"] #hero .skill-number{opacity:0}
}
@media(prefers-reduced-motion:reduce){
html[data-h001-motion] body[data-page="home"] #hero .skill-title,
html[data-h001-motion] body[data-page="home"] #hero .skill-number{opacity:1}
html[data-h001-motion] body[data-page="home"] #hero .skill-title::after,
html[data-h001-motion] body[data-page="home"] #hero .skill-number::after{visibility:visible}
body[data-page="home"] #hero .h001-window{display:none}
}