/* ============================================================
   URBAN GLO GROWTH STORY INTRO — v5.0
============================================================ */
#csUrbanGloIntro{
  --ug-purple:#8e2192;
  --ug-orange:#f15c24;
  position:fixed;
  inset:0;
  z-index:27000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 28% 24%,rgba(142,33,146,.10),transparent 30%),
    radial-gradient(circle at 76% 70%,rgba(241,92,36,.10),transparent 31%),
    linear-gradient(145deg,#fff,#fbf8fc 62%,#fff9f5);
  transition:opacity .68s cubic-bezier(.18,.72,.18,1),
             visibility .68s cubic-bezier(.18,.72,.18,1);
}

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

#csUrbanGloIntro .ug-intro-inner{
  width:min(590px,88vw);
  text-align:center;
}

#csUrbanGloIntro .ug-logo-stage{
  position:relative;
  min-height:190px;
  display:grid;
  place-items:center;
}

#csUrbanGloIntro .ug-ring{
  position:absolute;
  width:178px;
  height:178px;
  border-radius:50%;
  border:1px solid rgba(142,33,146,.14);
  animation:ugRingIn 1.45s cubic-bezier(.16,1,.3,1) both;
}

#csUrbanGloIntro .ug-ring::before,
#csUrbanGloIntro .ug-ring::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(241,92,36,.10);
}

#csUrbanGloIntro .ug-ring::before{inset:15px}
#csUrbanGloIntro .ug-ring::after{inset:-24px;border-style:dashed}

#csUrbanGloIntro .ug-logo{
  position:relative;
  z-index:4;
  width:min(330px,70vw);
  max-height:110px;
  object-fit:contain;
  opacity:0;
  transform:translateY(20px) scale(.91);
  filter:blur(7px) drop-shadow(0 20px 40px rgba(53,20,59,.09));
  animation:ugLogoIn .9s .06s cubic-bezier(.16,1,.3,1) forwards;
}

#csUrbanGloIntro .ug-systems{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#csUrbanGloIntro .ug-system{
  position:absolute;
  width:102px;
  padding:9px 8px;
  border:1px solid rgba(142,33,146,.11);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(45,21,51,.07);
  color:#555a65;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  opacity:0;
  animation:ugNodeIn .48s ease forwards;
}

#csUrbanGloIntro .ug-system:nth-child(1){left:2%;top:15%;animation-delay:.45s}
#csUrbanGloIntro .ug-system:nth-child(2){right:2%;top:15%;animation-delay:.62s}
#csUrbanGloIntro .ug-system:nth-child(3){left:50%;bottom:0;transform:translateX(-50%);animation-delay:.79s}

#csUrbanGloIntro .ug-kicker{
  margin-top:9px;
  color:#8b8f98;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

#csUrbanGloIntro .ug-title{
  margin-top:7px;
  color:#1b1c22;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.03em;
}

#csUrbanGloIntro .ug-track{
  width:min(330px,70vw);
  height:4px;
  margin:25px auto 10px;
  overflow:hidden;
  border-radius:999px;
  background:#eee8ef;
}

#csUrbanGloIntro .ug-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ug-purple),#b93486,var(--ug-orange));
}

#csUrbanGloIntro .ug-status{
  width:min(330px,70vw);
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#888d96;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#csUrbanGloIntro .ug-status strong{color:var(--ug-purple)}

@keyframes ugLogoIn{
  0%{opacity:0;transform:translateY(20px) scale(.91);filter:blur(7px)}
  70%{opacity:1;transform:translateY(-2px) scale(1.012);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes ugNodeIn{
  from{opacity:0;translate:0 9px}
  to{opacity:1;translate:0 0}
}
@keyframes ugRingIn{
  from{opacity:0;transform:scale(.68) rotate(-18deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

@media(max-width:520px){
  #csUrbanGloIntro .ug-logo-stage{min-height:168px}
  #csUrbanGloIntro .ug-ring{width:142px;height:142px}
  #csUrbanGloIntro .ug-logo{width:min(270px,68vw)}
  #csUrbanGloIntro .ug-system{width:86px;font-size:8px}
  #csUrbanGloIntro .ug-title{font-size:16px}
}

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