/* Two immutable HTML layers. Only transforms and opacity move on scroll. */
@media(max-width:760px){
 #qp-experience #mobile-welcome-circle,#qp-experience #mobile-welcome-tile{position:absolute;inset:0;will-change:opacity}
 #qp-experience #mobile-welcome-circle{border-radius:50%;padding:.6px;background:var(--gradient);opacity:.42;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
 #qp-experience #mobile-welcome-tile{inset:-1.25px;border:2.5px solid transparent;border-radius:25.25px;background:linear-gradient(var(--welcome-tile-fill),var(--welcome-tile-fill)) padding-box,var(--gradient) border-box;opacity:0}
 #qp-experience #mobile-welcome-tile svg{position:absolute;left:-1.25px;top:-1.25px;width:148px;height:164px;overflow:visible}
 #qp-experience #mobile-welcome-label{fill:var(--ink);font-family:var(--f-display);font-size:21px;font-weight:750}

 #qp-experience.no-pest-selection #mobile-welcome-tile{display:none}
 #qp-experience.no-pest-selection.mobile-welcome-native #mobile-welcome-circle{animation:none;opacity:.42}

 /* Endpoints are assigned once when the layout is built. The selected tile
    arrives at 55%; the grid's 57–77% fade therefore has no moving double. */
 #qp-experience.mobile-welcome-native #mobile-welcome-morph{animation:qp-welcome-travel linear both,qp-welcome-handoff linear both}
 #qp-experience.mobile-welcome-native #mobile-welcome-circle{animation:qp-welcome-circle linear both}
 #qp-experience.mobile-welcome-native #mobile-welcome-tile{animation:qp-welcome-tile linear both}
 #qp-experience.mobile-welcome-native #mobile-art-entry{animation:qp-welcome-grid linear both}
 #qp-experience.mobile-welcome-native .intro-copy,#qp-experience.mobile-welcome-native .intro-caption,#qp-experience.mobile-welcome-native .intro-scroll{animation:qp-welcome-copy linear both}
 #qp-experience.mobile-welcome-native .intro-aura{animation:qp-welcome-aura linear both}
 #qp-experience.mobile-welcome-native :is(#mobile-welcome-morph,#mobile-welcome-circle,#mobile-welcome-tile,#mobile-art-entry,.intro-copy,.intro-caption,.intro-scroll,.intro-aura){animation-timeline:scroll(root);animation-range:0px var(--welcome-finish);animation-duration:auto}
}
@keyframes qp-welcome-travel{0%{transform:var(--welcome-from);animation-timing-function:cubic-bezier(.33,0,.67,1)}55%,100%{transform:var(--welcome-to)}}
@keyframes qp-welcome-handoff{0%,57%{opacity:1}77%,100%{opacity:0}}
@keyframes qp-welcome-circle{0%,22%{opacity:.42}57%,100%{opacity:0}}
@keyframes qp-welcome-tile{0%,22%{opacity:0}57%,100%{opacity:1}}
@keyframes qp-welcome-grid{0%,57%{opacity:0}77%,100%{opacity:1}}
@keyframes qp-welcome-copy{0%,8%{opacity:1}40%,100%{opacity:0}}
@keyframes qp-welcome-aura{0%,10%{opacity:1}80%,100%{opacity:0}}
