@supports (animation-timeline: view()){
  main .s-head h2,main .i3-head h2,main .tstate-k h2,main .sstep h3,main .prof-txt h2,main .a-txt h3,main .cta h2,main .mhero-txt h1{
    animation:maskUp linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  @keyframes maskUp{from{clip-path:inset(0 0 100% 0);translate:0 .45em}to{clip-path:inset(0 0 -20% 0);translate:0 0}}
  main .area .m1,main .side-tile,main .who-plate img,main .reach-stage,main .mapcard{
    animation:unveil linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  @keyframes unveil{from{clip-path:inset(14% 6% 14% 6% round 22px)}to{clip-path:inset(0 0 0 0 round 16px)}}
  main .stats .stat,main .qa{animation:liftIn linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes liftIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){main *{animation:none!important}}



@supports (animation-timeline: view()){
  .hero .rv,.phero .rv,.thero .rv,.mhero .rv,.lhero .rv{animation:none!important;
    transition:opacity .67s ease,transform .8s cubic-bezier(.16,.84,.3,1)!important}
  .hero .rv.d1,.phero .rv.d1,.thero .rv.d1,.mhero .rv.d1{transition-delay:.14s!important}
  .hero .rv.d2,.phero .rv.d2,.thero .rv.d2,.mhero .rv.d2{transition-delay:.28s!important}
  .hero .rv.d3,.phero .rv.d3,.thero .rv.d3,.mhero .rv.d3{transition-delay:.42s!important}
  .mhero-txt h1{animation:none!important}
}



html:not(.go) .hero .msk span,html:not(.go) .hero .rv,html:not(.go) .phero .rv,html:not(.go) .thero .rv,html:not(.go) .mhero .rv,
html:not(.go) .phero-media,html:not(.go) .tframe,html:not(.go) .mstack{opacity:0!important;transform:translateY(38px)!important;transition:none!important}
html.go .phero-media,html.go .mstack{transition:opacity .8s ease .2s,transform .94s cubic-bezier(.16,.84,.3,1) .2s}