/* v0.5: focused motion at the three requested transitions. */
.motion-enabled .hero-copy{transform:translateY(calc(var(--hero-progress,0)*-22px));opacity:calc(1 - var(--hero-progress,0)*.7);will-change:transform,opacity}
.motion-enabled .problems .section-heading{transform:translateY(calc((1 - var(--section-entry,0))*72px));opacity:calc(.2 + var(--section-entry,0)*.8);transition:none;will-change:transform,opacity}
.motion-enabled .problems .problem-grid{transform:translateY(calc((1 - var(--section-entry,0))*98px));opacity:calc(.25 + var(--section-entry,0)*.75);transition:none;will-change:transform,opacity}
.motion-enabled .problems::before{width:100%;height:2px;top:0;background:linear-gradient(90deg,#42a447,#09294415);transform:scaleX(var(--section-entry,0));transform-origin:left;will-change:transform}
#role-panel{position:relative;overflow:clip;padding:12px 0 16px;min-height:350px}
.role-changing .role-copy{animation:role-content-in .6s cubic-bezier(.16,.75,.2,1) both}
.role-changing .app-example{animation:role-app-in .7s cubic-bezier(.16,.75,.2,1) both}
.role-changing .app-rows>div{animation:role-row-in .45s ease both}
.role-changing .app-rows>div:nth-child(1){animation-delay:.1s}.role-changing .app-rows>div:nth-child(2){animation-delay:.18s}.role-changing .app-rows>div:nth-child(3){animation-delay:.26s}
@keyframes role-content-in{from{opacity:0;transform:translateX(var(--role-shift,32px))}to{opacity:1;transform:translateX(0)}}
@keyframes role-app-in{from{opacity:.2;transform:translateX(var(--role-shift,32px)) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes role-row-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.about{position:relative;isolation:isolate;border-top:0;overflow:clip}
.about::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,#42a447,#09294415);transform:scaleX(var(--section-entry,1));transform-origin:left}
.motion-enabled .about>.about-symbol{transform:translateX(calc((1 - var(--section-entry,0))*-65px)) scale(calc(.8 + var(--section-entry,0)*.2));opacity:calc(.15 + var(--section-entry,0)*.85);transition:none;will-change:transform,opacity}
.motion-enabled .about>div:last-child{transform:translateX(calc((1 - var(--section-entry,0))*65px));opacity:calc(.15 + var(--section-entry,0)*.85);transition:none;will-change:transform,opacity}
.motion-enabled .about h2,.motion-enabled .about>.about-symbol span{transform:none;opacity:1;transition:none}
@media(max-width:650px){#role-panel{min-height:0;padding:7px 0 12px}.motion-enabled .problems .section-heading{transform:translateY(calc((1 - var(--section-entry,0))*45px))}.motion-enabled .problems .problem-grid{transform:translateY(calc((1 - var(--section-entry,0))*60px))}.motion-enabled .about>.about-symbol{transform:translateY(calc((1 - var(--section-entry,0))*30px)) scale(calc(.9 + var(--section-entry,0)*.1))}.motion-enabled .about>div:last-child{transform:translateY(calc((1 - var(--section-entry,0))*45px))}}
@media(prefers-reduced-motion:reduce){.hero-copy,.problems .section-heading,.problems .problem-grid,.about>div,.role-changing .role-copy,.role-changing .app-example,.role-changing .app-rows>div{transform:none!important;opacity:1!important;animation:none!important;transition:none!important}.problems::before,.about::before{transform:none!important}}