/* A short opening composed from the native faces and the real hero cards. */
html:is(.lab-intro-pending,.lab-intro-active) .hero :is(.grok-pill,.wordmark,.hero-sub,.hero-stamp,.hero-cta,.launch-ticker,.ca-hero,.fan-dots),
html:is(.lab-intro-pending,.lab-intro-active) .nav,
html:is(.lab-intro-pending,.lab-intro-active) .hero .horizon,
html:is(.lab-intro-pending,.lab-intro-active) #fan .pack{opacity:0}
html:is(.lab-intro-pending,.lab-intro-active) #fan .pack.dealt{animation:none!important}

#xshop-intro{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;isolation:isolate}
#xshop-intro .li-halo{position:absolute;left:50%;top:50%;width:min(620px,110vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#ffffff0b,transparent 68%);opacity:0}
#xshop-intro .li-orbit{position:absolute;left:50%;top:50%;width:258px;height:86px;margin:-43px 0 0 -129px;border:1px solid #ffffff13;border-radius:50%;opacity:0}
#xshop-intro .li-face{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:88px;height:88px;margin:-44px 0 0 -44px;will-change:transform,opacity;opacity:0}
#xshop-intro .li-face .bot{--s:88px;box-shadow:inset 0 1px #ffffff80,inset 0 -2px 8px #0002,0 16px 44px #0008}
#xshop-intro .li-face:not(.li-center){width:60px;height:60px;margin:-30px 0 0 -30px}
#xshop-intro .li-face:not(.li-center) .bot{--s:60px}
#xshop-intro .li-face .bot-black,#xshop-intro .li-face .bot-line{box-shadow:inset 0 0 0 1.5px #ffffff8c,0 16px 44px #0008}
#xshop-intro .li-center{z-index:3}
#xshop-intro :is(.li-halo,.li-orbit){will-change:opacity,scale,rotate}
html.lab-intro-active #fan .pack{will-change:transform,translate,scale,rotate,opacity}
html.lab-intro-active .hero :is(.wordmark,.grok-pill,.hero-sub,.hero-stamp,.hero-cta,.launch-ticker,.ca-hero,.fan-dots,.horizon){will-change:opacity,translate}
#xshop-intro .li-face[data-depth="1"]{z-index:2}
#xshop-intro .li-face[data-depth="2"]{z-index:1}
html.lab-intro-active #fan .center .gc:after{animation:li-card-glint 1.18s 1.55s cubic-bezier(.16,1,.3,1) both}
@keyframes li-card-glint{from{transform:translate(-80%)}to{transform:translate(80%)}}

@media(max-width:560px){
  #xshop-intro .li-face{width:72px;height:72px;margin:-36px 0 0 -36px}
  #xshop-intro .li-face .bot{--s:72px}
  #xshop-intro .li-face:not(.li-center){width:48px;height:48px;margin:-24px 0 0 -24px}
  #xshop-intro .li-face:not(.li-center) .bot{--s:48px}
  #xshop-intro .li-orbit{width:216px;height:72px;margin:-36px 0 0 -108px}
}
@media(prefers-reduced-motion:reduce){
  #xshop-intro{display:none}
  html:is(.lab-intro-pending,.lab-intro-active) .hero :is(.grok-pill,.wordmark,.hero-sub,.hero-stamp,.hero-cta,.launch-ticker,.ca-hero,.fan-dots),
  html:is(.lab-intro-pending,.lab-intro-active) .nav{opacity:1}
  html:is(.lab-intro-pending,.lab-intro-active) .hero .horizon{opacity:1}
  html:is(.lab-intro-pending,.lab-intro-active) #fan .pack:not(.off){opacity:1}
}