#intro {
  isolation: isolate;
  overflow: hidden;
}

.intro-burst {
  position: absolute;
  z-index: -2;
  width: min(780px, 115vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from -8deg, #fff9 0 4deg, transparent 4deg 17deg);
  mask-image: radial-gradient(circle, transparent 0 25%, #000 46%, transparent 72%);
  animation: introSpin 26s linear infinite, introBurstIn 1.1s ease-out both;
}

.intro-orbit {
  position: absolute;
  z-index: -1;
  width: min(630px, 92vw);
  aspect-ratio: 1.8;
  border: 2px solid #fff9;
  border-radius: 50%;
  box-shadow: 0 0 35px #ff6f9b33, inset 0 0 25px #fff7;
  animation: orbitIn 1s .15s both, orbitFloat 5s 1.15s ease-in-out infinite;
}

.orbit-one { transform: rotate(-8deg); }
.orbit-two { transform: rotate(16deg) scale(.83); animation-delay: .25s, 1.25s; }

.intro-copy {
  position: absolute;
  z-index: 5;
  top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: copyDrop .8s .15s cubic-bezier(.18,1.35,.3,1) both;
}

.intro-copy .eyebrow {
  padding: 7px 13px;
  border-radius: 99px;
  background: #3c3040;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  box-shadow: 0 7px 18px #3c304033;
}

#intro .intro-copy h1 {
  margin: 10px 0 5px;
  text-shadow: 0 3px 0 #fff, 0 10px 30px #a9446830;
}

.intro-copy p {
  margin: 0;
  padding: 7px 14px;
  border-radius: 99px;
  background: #ffffffa8;
  color: #745d6d;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

#intro .hero-pair {
  margin-top: 8vh;
  animation: heroEntrance 1.05s .28s cubic-bezier(.14,1.25,.3,1) both, heroDance 2.2s 1.35s ease-in-out infinite;
}

#intro .sticker {
  z-index: 8;
  animation: stickerSlam .7s .75s cubic-bezier(.16,1.6,.3,1) both, stickerWiggle 2.8s 1.5s ease-in-out infinite;
}

.intro-start {
  position: relative;
  z-index: 8;
  min-width: 205px;
  overflow: visible;
  animation: buttonUp .65s 1s both, buttonPulse 1.8s 1.65s ease-in-out infinite;
}

.intro-start::before,
.intro-start::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid #ff5d8877;
  border-radius: 99px;
  animation: buttonRipple 1.8s ease-out infinite;
}

.intro-start::after { animation-delay: .9s; }
.start-heart { display: inline-block; margin-left: 8px; color: #ff7ea3; animation: heartBeat .8s ease-in-out infinite; }
.tap-hint { z-index: 7; margin-top: 15px; font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #907580; animation: captionUp .6s 1.25s both; }

.intro-sparkles i {
  position: absolute;
  z-index: 4;
  color: #ff5d88;
  font-style: normal;
  font-size: clamp(18px, 3vw, 34px);
  filter: drop-shadow(0 5px 8px #a9426040);
  animation: sparkleFloat 3s ease-in-out infinite;
}

.intro-sparkles i:nth-child(1){left:8%;top:24%;animation-delay:-.4s}.intro-sparkles i:nth-child(2){left:18%;top:69%;color:#ffc933;animation-delay:-1.7s}.intro-sparkles i:nth-child(3){right:10%;top:29%;animation-delay:-2.2s}.intro-sparkles i:nth-child(4){right:18%;top:67%;color:#78bce9;animation-delay:-.8s}.intro-sparkles i:nth-child(5){left:30%;top:19%;font-size:16px;animation-delay:-2.6s}.intro-sparkles i:nth-child(6){right:31%;top:78%;color:#ffc933;font-size:17px;animation-delay:-1.2s}

@keyframes introSpin{to{transform:rotate(360deg)}}
@keyframes introBurstIn{from{opacity:0;scale:.45}to{opacity:.72;scale:1}}
@keyframes orbitIn{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes orbitFloat{50%{translate:0 -10px;scale:1.04}}
@keyframes copyDrop{from{opacity:0;transform:translateY(-45px) scale(.75)}to{opacity:1;transform:none}}
@keyframes heroEntrance{from{opacity:0;transform:translateY(120px) scale(.45) rotate(-7deg)}70%{opacity:1;transform:translateY(-14px) scale(1.07) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes heroDance{50%{transform:translateY(-13px) rotate(1.2deg) scale(1.015)}}
@keyframes stickerSlam{from{opacity:0;transform:rotate(-28deg) scale(2.4)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes stickerWiggle{50%{transform:rotate(-4deg) translateY(-5px)}}
@keyframes buttonUp{from{opacity:0;transform:translateY(35px) scale(.75)}to{opacity:1;transform:none}}
@keyframes buttonPulse{50%{transform:translateY(-5px) scale(1.04);box-shadow:0 12px 0 #201923,0 23px 38px #ff5d8840}}
@keyframes buttonRipple{from{opacity:.8;transform:scale(.96)}to{opacity:0;transform:scale(1.35)}}
@keyframes heartBeat{50%{transform:scale(1.5) rotate(8deg)}}
@keyframes sparkleFloat{50%{transform:translateY(-18px) rotate(18deg) scale(1.25)}}

@media(max-width:700px){
  .intro-copy{top:9%}.intro-copy p{font-size:10px}#intro .hero-pair{margin-top:6vh;height:43vh}#intro .sticker{top:18%;scale:.82}.intro-start{margin-top:-4px}.tap-hint{margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  .intro-burst,.intro-orbit,.intro-copy,#intro .hero-pair,#intro .sticker,.intro-start,.intro-start::before,.intro-start::after,.start-heart,.tap-hint,.intro-sparkles i{animation-duration:.01ms!important;animation-delay:0ms!important}
}