/* A brief vector identity reveal. The page remains usable behind the overlay. */
.brand-intro{
  position:fixed;
  inset:0;
  z-index:120;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  animation:jaylex-intro-emergency-hide 1ms step-end 2400ms forwards;
}
.brand-intro *{pointer-events:none!important}
.brand-intro__backdrop{
  position:absolute;
  inset:0;
  background:var(--bg);
  overflow:hidden;
}
.brand-intro__backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 48% 49%,color-mix(in srgb,var(--accent) 19%,transparent),transparent 46%),
    radial-gradient(ellipse at 64% 53%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 38%);
}
.brand-intro__orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:min(78vw,690px);
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--accent) 17%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-27deg) scaleY(.66);
  animation:jaylex-intro-orbit 2200ms cubic-bezier(.2,.7,.2,1) both;
}
.brand-intro__orbit::after{
  content:"";
  position:absolute;
  top:13%;
  right:15%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 16px color-mix(in srgb,var(--pink) 50%,transparent);
}
.brand-intro__orbit--inner{
  width:min(58vw,510px);
  border-color:color-mix(in srgb,var(--pink) 11%,transparent);
  animation-name:jaylex-intro-orbit-inner;
}
.brand-intro__orbit--inner::after{
  top:auto;
  right:auto;
  bottom:15%;
  left:13%;
  width:3px;
  height:3px;
  background:var(--accent);
}
.brand-intro .brand-intro__logo{
  position:absolute;
  left:0;
  top:0;
  margin:0;
  opacity:0;
  transform-origin:0 0;
  will-change:transform,opacity;
  z-index:1;
}
.jaylex-wordmark.is-brand-intro-target{
  opacity:0;
  animation:jaylex-intro-restore-target 1ms step-end 2400ms forwards;
}
@keyframes jaylex-intro-orbit{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-34deg) scaleY(.66) scale(.94)}
  24%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scaleY(.66) scale(1.06)}
}
@keyframes jaylex-intro-orbit-inner{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(21deg) scaleY(.69) scale(.95)}
  26%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(3deg) scaleY(.69) scale(1.05)}
}
@keyframes jaylex-intro-emergency-hide{to{visibility:hidden;opacity:0}}
@keyframes jaylex-intro-restore-target{to{opacity:1}}
@media(max-width:600px){
  .brand-intro__orbit--inner{display:none}
  .brand-intro__backdrop::before{opacity:.65}
  .brand-intro__orbit{border-color:color-mix(in srgb,var(--accent) 11%,transparent);animation-duration:1800ms}
}
html[data-motion=off] .brand-intro{display:none!important}
html[data-motion=off] .jaylex-wordmark.is-brand-intro-target{opacity:1!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
  .brand-intro{display:none!important}
  .jaylex-wordmark.is-brand-intro-target{opacity:1!important;animation:none!important}
}