/* Circular brand opening. Transform/opacity work without an animated CSS mask. */
.intro{
 --intro-diameter:min(76vw,84vh,660px);
 --intro-band:calc(var(--intro-diameter) * .068);
 isolation:isolate;
}
.intro-veil{z-index:0}
.intro-circle{
 position:absolute;left:50%;top:48%;aspect-ratio:1;
 border-radius:50%;border:var(--intro-band) solid;
 pointer-events:none;will-change:transform;
 transform:translate(-50%,-50%) scale(0);
 animation:king-circle-enter 850ms cubic-bezier(.16,1,.3,1) both;
}
.circle-red{width:var(--intro-diameter);border-color:var(--king-red);z-index:1}
.circle-orange{width:calc(var(--intro-diameter) * .84);border-color:var(--king-orange);z-index:2;animation-delay:160ms}
.circle-yellow{width:calc(var(--intro-diameter) * .68);border-color:var(--king-yellow);z-index:3;animation-delay:320ms}
.intro-mark{
 position:absolute;left:50%;top:48%;width:calc(var(--intro-diameter) * .56);
 aspect-ratio:1;border-radius:50%;background:#000;z-index:4;
 transform:translate(-50%,-50%);
 animation:king-mark-enter 850ms 430ms cubic-bezier(.16,1,.3,1) both;
 pointer-events:none;will-change:transform,opacity;
}
.intro .intro-mark .intro-logo{
 position:absolute;left:50%;top:45%;width:92%;max-width:none;height:auto;
 transform:translate(-50%,-50%);clip-path:circle(50%);mix-blend-mode:normal;
 animation:none;opacity:1;
}
.intro .intro-mark .intro-word{
 position:absolute;left:50%;top:81%;bottom:auto;z-index:3;
 transform:translate(-50%,-50%);width:max-content;
 font:700 clamp(8px,1.1vw,12px) var(--font-label);letter-spacing:.1em;
 animation:none;opacity:1;
}
.intro .intro-skip{
 z-index:10;opacity:1;pointer-events:auto;border:1px solid #fff3d654;
 border-radius:30px;background:#000;padding:12px 20px;color:var(--king-cream);
 min-height:44px;
}
.intro.burst .intro-skip{opacity:1;pointer-events:auto}
.intro.burst .intro-veil{
 mask-image:none;-webkit-mask-image:none;
 animation:king-veil-exit 750ms 120ms both;
}
.intro.burst .intro-circle{
 animation:king-circle-exit 1250ms cubic-bezier(.65,0,.35,1) both;
}
.intro.burst .circle-orange{animation-delay:120ms}
.intro.burst .circle-yellow{animation-delay:240ms}
.intro.burst .intro-mark{animation:king-mark-exit 1250ms cubic-bezier(.65,0,.35,1) both}
@keyframes king-circle-enter{
 0%{transform:translate(-50%,-50%) scale(0)}
 75%{transform:translate(-50%,-50%) scale(1.035)}
 100%{transform:translate(-50%,-50%) scale(1)}
}
@keyframes king-mark-enter{
 from{opacity:0;transform:translate(-50%,-50%) scale(.75)}
 to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes king-circle-exit{
 0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 85%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-50%) scale(9)}
}
@keyframes king-mark-exit{
 0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 35%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-320%) scale(3)}
}
@keyframes king-veil-exit{to{opacity:0}}
@media(max-width:540px){
 .intro{--intro-diameter:min(108vw,68vh)}
 .intro .intro-mark .intro-word{font-size:9px;letter-spacing:.07em}
 .intro .intro-skip{right:18px;bottom:max(22px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}}