/* ============================================================
   V3.0 — GLOBAL CENTERSPREAD SITE INTRO
   First page load per browser session.
============================================================ */

#csSiteIntro{
  --cs-intro-purple:#8d1d92;
  --cs-intro-purple-deep:#53116f;
  --cs-intro-orange:#f25722;
  --cs-intro-orange-bright:#ff7817;
  --cs-intro-ease:cubic-bezier(.18,.72,.18,1);
  --cs-intro-spring:cubic-bezier(.16,1,.3,1);

  position:fixed;
  inset:0;
  z-index:25000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(141,29,146,.07),transparent 28%),
    radial-gradient(circle at 73% 64%,rgba(242,87,34,.075),transparent 24%),
    linear-gradient(135deg,#ffffff 0%,#fcf9fc 52%,#fffaf7 100%);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .64s var(--cs-intro-ease),
    visibility .64s var(--cs-intro-ease);
}

#csSiteIntro.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#csSiteIntro::before,
#csSiteIntro::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

#csSiteIntro::before{
  width:460px;
  height:460px;
  left:-190px;
  top:-220px;
  border:1px solid rgba(141,29,146,.08);
  box-shadow:
    0 0 0 55px rgba(141,29,146,.018),
    0 0 0 110px rgba(141,29,146,.012);
  animation:csSiteOrbitA 5s ease-in-out infinite alternate;
}

#csSiteIntro::after{
  width:390px;
  height:390px;
  right:-150px;
  bottom:-200px;
  border:1px solid rgba(242,87,34,.08);
  box-shadow:
    0 0 0 50px rgba(242,87,34,.018),
    0 0 0 98px rgba(242,87,34,.011);
  animation:csSiteOrbitB 5.5s ease-in-out infinite alternate;
}

#csSiteIntro .cs-site-intro-inner{
  position:relative;
  z-index:3;
  width:min(620px,88vw);
  text-align:center;
}

#csSiteIntro .cs-site-intro-logo-wrap{
  position:relative;
  min-height:150px;
  display:grid;
  place-items:center;
}

#csSiteIntro .cs-site-intro-logo{
  position:relative;
  z-index:3;
  display:block;
  width:min(430px,78vw);
  max-height:118px;
  object-fit:contain;
  filter:drop-shadow(0 16px 38px rgba(78,17,95,.10));
  animation:
    csSiteLogoEnter .82s var(--cs-intro-spring) both,
    csSiteLogoPulse 1.1s .82s ease-in-out 1;
}

#csSiteIntro .cs-site-intro-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:320px;
  height:115px;
  transform:translate(-50%,-50%) scale(.75);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(141,29,146,.14),
      rgba(242,87,34,.07) 48%,
      transparent 72%
    );
  filter:blur(16px);
  animation:csSiteGlow 1.9s ease-in-out both;
}

#csSiteIntro .cs-site-intro-tagline{
  margin-top:10px;
  color:#6b6570;
  font-size:10px;
  font-weight:850;
  letter-spacing:.25em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  animation:csSiteTaglineIn .55s .62s var(--cs-intro-ease) forwards;
}

#csSiteIntro .cs-site-intro-tagline strong{
  color:var(--cs-intro-purple-deep);
}

#csSiteIntro .cs-site-intro-track{
  position:relative;
  width:min(320px,68vw);
  height:3px;
  margin:24px auto 0;
  overflow:hidden;
  border-radius:999px;
  background:#ece8ef;
}

#csSiteIntro .cs-site-intro-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      var(--cs-intro-purple-deep),
      var(--cs-intro-purple),
      var(--cs-intro-orange)
    );
  box-shadow:0 0 16px rgba(141,29,146,.20);
}

#csSiteIntro .cs-site-intro-dot{
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cs-intro-purple);
  box-shadow:0 0 14px rgba(141,29,146,.34);
  opacity:0;
}

#csSiteIntro .cs-site-intro-dot.d1{
  left:9%;
  animation:csSiteDot 1.6s .2s ease-in-out infinite;
}
#csSiteIntro .cs-site-intro-dot.d2{
  right:11%;
  animation:csSiteDot 1.6s .55s ease-in-out infinite;
}
#csSiteIntro .cs-site-intro-dot.d3{
  right:28%;
  background:var(--cs-intro-orange);
  animation:csSiteDot 1.6s .9s ease-in-out infinite;
}

@keyframes csSiteLogoEnter{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.91);
    filter:blur(9px);
  }
  68%{
    opacity:1;
    transform:translateY(-2px) scale(1.018);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:none;
  }
}

@keyframes csSiteLogoPulse{
  0%,100%{transform:scale(1)}
  28%{transform:scale(1.026)}
  48%{transform:scale(.996)}
  70%{transform:scale(1.012)}
}

@keyframes csSiteGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  42%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.2;transform:translate(-50%,-50%) scale(1.18)}
}

@keyframes csSiteTaglineIn{
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes csSiteDot{
  0%,100%{opacity:.15;transform:translateY(0) scale(.8)}
  50%{opacity:.75;transform:translateY(-12px) scale(1.15)}
}

@keyframes csSiteOrbitA{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(24px,18px,0)}
}

@keyframes csSiteOrbitB{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-20px,-14px,0)}
}

@media(max-width:720px){
  #csSiteIntro .cs-site-intro-logo-wrap{
    min-height:120px;
  }

  #csSiteIntro .cs-site-intro-logo{
    width:min(330px,79vw);
    max-height:92px;
  }

  #csSiteIntro .cs-site-intro-tagline{
    font-size:8.5px;
    letter-spacing:.20em;
  }

  #csSiteIntro .cs-site-intro-track{
    margin-top:19px;
  }
}

@media(prefers-reduced-motion:reduce){
  #csSiteIntro{
    display:none !important;
  }
}