/* Opening screen: a small Kade icon on primary blue sends out signal ripples, then the blue
   itself clears away as one big ripple opening from the centre to reveal the page. */
@property --hole{syntax:"<length>";inherits:false;initial-value:0px}
#brand-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;overflow:hidden;
  background:radial-gradient(800px 460px at 15% -10%,rgba(255,255,255,.14),transparent 65%),radial-gradient(700px 460px at 100% 115%,rgba(0,10,120,.45),transparent 65%),#0032FE;
  --hole:0px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 2px));
  mask-image:radial-gradient(circle at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 2px));
  animation:intro-out .85s 1.45s cubic-bezier(.65,0,.35,1) forwards}
#brand-intro::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 60%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 60%)}
#brand-intro .bi-orb{position:relative;display:grid;place-items:center;width:56px;height:56px;animation:bi-orb-in .7s cubic-bezier(.2,1.2,.3,1) both}
/* three signal ripples spreading out from the icon */
#brand-intro .bi-orb::before,#brand-intro .bi-orb::after,#brand-intro .bi-mark+i{content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:0;animation:bi-ripple 1.6s cubic-bezier(.2,.6,.35,1) infinite}
#brand-intro .bi-orb::after{animation-delay:.5s}
#brand-intro .bi-mark+i{animation-delay:1s}
#brand-intro .bi-mark{position:relative;z-index:1;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,10,110,.45));animation:bi-mark-in .7s .05s cubic-bezier(.2,1.3,.3,1) both,bi-pulse 1.6s .7s ease-in-out infinite}
@keyframes bi-orb-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes bi-mark-in{from{opacity:0;transform:scale(.4);filter:blur(8px)}to{opacity:1;transform:none}}
@keyframes bi-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bi-ripple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
/* exit: the blue opens up from the centre like a ripple and fades */
@keyframes intro-out{0%{--hole:0px;opacity:1}70%{opacity:1}100%{--hole:150vmax;opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){#brand-intro{display:none}}