/* A velvet, editorial treatment for an adult-wellness brand opening. */
.site-intro {
  background:
    radial-gradient(ellipse at 50% 111%, rgba(188, 75, 111, .35), transparent 46%),
    radial-gradient(ellipse at 15% 15%, rgba(123, 27, 62, .34), transparent 34%),
    linear-gradient(135deg, #10080d, #210c16 55%, #12090d) !important;
}

.site-intro::before {
  width: 130vw !important;
  height: 72vh !important;
  right: -28vw !important;
  top: 31vh !important;
  opacity: .8 !important;
  border-radius: 50% !important;
  transform: rotate(-9deg) !important;
  background:
    linear-gradient(112deg, transparent 8%, rgba(105, 17, 51, .44) 29%, rgba(217, 96, 127, .46) 49%, rgba(91, 13, 43, .74) 68%, transparent 88%) !important;
  filter: blur(3px) !important;
  animation: sensual-silk 2.1s .05s cubic-bezier(.16, 1, .3, 1) both !important;
}

.site-intro::after {
  content: "" !important;
  width: min(48vw, 680px) !important;
  height: min(48vw, 680px) !important;
  right: -12vw !important;
  bottom: -24vw !important;
  border: 1px solid rgba(255, 210, 182, .38);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(211, 105, 139, .05), 0 0 0 100px rgba(211, 105, 139, .035), 0 0 110px rgba(235, 98, 137, .24);
  animation: sensual-orbit 5.4s ease-in-out infinite alternate !important;
}

.intro-mark {
  justify-self: center;
  transform: translateY(-16px) scale(.92) !important;
}
.intro-mark img {
  width: 54px;
  height: 54px;
  box-shadow: 0 0 0 1px rgba(249, 201, 170, .5), 0 0 28px rgba(238, 91, 139, .34);
}
.intro-mark b { font-size: 21px; letter-spacing: -.065em; }
.intro-mark b span { color: #f58aaa; }
.intro-mark small { color: #d8b6bf; letter-spacing: .16em; }

.intro-copy { width: min(750px, 100%); }
.intro-copy span { color: #f1c1a8; letter-spacing: .34em; }
.intro-copy strong {
  margin: 22px 0 20px;
  font-size: clamp(58px, 8vw, 124px);
  letter-spacing: -.055em;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .65);
}
.intro-copy i { color: #e9cbd1; letter-spacing: .2em; }
.intro-progress { justify-self: center; width: min(300px, 64vw); height: 1px; background: rgba(250, 211, 192, .3); }
.intro-progress span { background: linear-gradient(90deg, #b83366, #f4d0ae, #d34f79); box-shadow: 0 0 14px rgba(255, 181, 150, .8); }
.site-intro > p { justify-self: center; color: #d8b8c1; letter-spacing: .22em; }
.intro-complete .site-intro { clip-path: circle(0 at 50% 50%); }

@keyframes sensual-silk {
  from { transform: translate3d(20vw, 18vh, 0) rotate(-15deg) scale(.75); opacity: 0; }
  to { transform: translate3d(0, 0, 0) rotate(-9deg) scale(1); opacity: .8; }
}
@keyframes sensual-orbit {
  from { transform: rotate(-8deg) scale(.95); opacity: .52; }
  to { transform: rotate(8deg) scale(1.08); opacity: .9; }
}

@media (max-width: 700px) {
  .intro-mark { justify-self: start; }
  .intro-copy strong { font-size: 55px; }
}