/* Intro cloud + bunny scene */
#introCloudWrap{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

#introCloudWrap.intro--show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#introCloudWrap.intro--hide{
  opacity: 0;
  transform: translate(-50%, -52%) scale(0.97);
}

#introSpringScene{
  position: relative;
  width: clamp(320px, 39vw, 470px);
  aspect-ratio: 10 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 22px 36px rgba(84, 62, 50, 0.22));
}

#introCloud{
  position: relative;
  z-index: 3;
  width: clamp(240px, 30vw, 360px);
  aspect-ratio: 3 / 2;
  background-image: url('../img/intro/cloud.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: introCloudBob 4.2s ease-in-out infinite;
}

#introCloud::after{
  content: "";
  position: absolute;
  inset: 26% 12% 12%;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

#introCloudNumber{
  position: relative;
  z-index: 4;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #6e6a70;
  text-shadow: 0 1px 0 rgba(255,255,255,0.95);
}

#introCloudText{
  position: relative;
  z-index: 4;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 16px);
  color: #5c5962;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms ease, transform 500ms ease;
  text-align: center;
}

#introCloudText.intro--visible{
  opacity: 1;
  transform: translateY(0);
}

.introHalo{
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  width: 48%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,214,0.9) 0%, rgba(255,237,194,0.45) 38%, rgba(255,237,194,0) 72%);
  z-index: 0;
  filter: blur(2px);
}

.introBunny{
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: clamp(142px, 17vw, 198px);
  height: clamp(172px, 21vw, 236px);
  z-index: 1;
  pointer-events: none;
}

.introBunnyHead{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 68%;
  height: 45%;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffdf8 0%, #f5e8e7 100%);
  box-shadow: 0 10px 22px rgba(115,83,78,0.14);
}

.introBunnyHead::before{
  content: "";
  position: absolute;
  left: 18%;
  top: 42%;
  width: 11px;
  height: 14px;
  border-radius: 50%;
  background: #4f4748;
  box-shadow: 40px 0 0 #4f4748;
}

.introBunnyHead::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  width: 20px;
  height: 14px;
  border-radius: 55% 55% 65% 65%;
  background: #f4a2b4;
  box-shadow: 0 11px 0 -7px #826f71;
}

.introBunnyCheek{
  position: absolute;
  bottom: 20%;
  width: 16px;
  height: 11px;
  border-radius: 50%;
  background: rgba(248,177,194,0.72);
  filter: blur(0.3px);
}

.introBunnyCheek--left{ left: 23%; }
.introBunnyCheek--right{ right: 23%; }

.introBunnyEar{
  position: absolute;
  bottom: 38%;
  width: 23%;
  height: 60%;
  border-radius: 999px 999px 42% 42%;
  background: linear-gradient(180deg, #fffdf8 0%, #f1dfdc 100%);
  transform-origin: 50% 100%;
  box-shadow: 0 10px 18px rgba(115,83,78,0.10);
}

.introBunnyEar::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 42%;
  height: 72%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5b6c4 0%, #f7d3da 100%);
}

.introBunnyEar--left{ left: 22%; transform: rotate(-14deg); }
.introBunnyEar--right{ right: 22%; transform: rotate(12deg); animation: introEarWave 1.45s ease-in-out infinite; }

.introBunnyPaw{
  position: absolute;
  bottom: 3%;
  width: 22px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffaf8 0%, #f4e7e5 100%);
  box-shadow: 0 8px 10px rgba(115,83,78,0.08);
}

.introBunnyPaw::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244,162,180,0.72);
}

.introBunnyPaw--left{ left: 25%; }
.introBunnyPaw--right{ right: 25%; }

.introBunnySparkle{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,240,187,0.75) 40%, rgba(255,240,187,0) 72%);
  opacity: 0.85;
  animation: introSparkle 3.2s ease-in-out infinite;
}

.introBunnySparkle--left{ left: 22%; top: 28%; }
.introBunnySparkle--right{ right: 20%; top: 20%; animation-delay: 1s; }

.introEgg{
  position: absolute;
  top: 43%;
  width: clamp(58px, 6.8vw, 82px);
  height: clamp(76px, 9vw, 106px);
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  z-index: 2;
  box-shadow: 0 12px 22px rgba(141,108,87,0.18);
  animation: introEggSpin 7s ease-in-out infinite;
}

.introEgg::before,
.introEgg::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.introEgg::before{
  top: 20%;
  width: 76%;
  height: 12%;
  background: rgba(255,255,255,0.45);
  box-shadow: 0 16px 0 rgba(255,255,255,0.3), 0 34px 0 rgba(255,255,255,0.26);
}

.introEgg::after{
  top: 12%;
  width: 20%;
  height: 20%;
  background: rgba(255,255,255,0.32);
  filter: blur(2px);
}

.introEgg--left{ left: 1%; transform: rotate(-12deg); background: linear-gradient(180deg, #ffdcb8 0%, #f4a36f 100%); }
.introEgg--right{ right: 1%; transform: rotate(14deg); background: linear-gradient(180deg, #dff0ff 0%, #9fc4ff 100%); animation-direction: reverse; }

.introEggBand{
  position: absolute;
  left: 12%;
  right: 12%;
  height: 10%;
  border-radius: 999px;
  opacity: 0.95;
}

.introEggBand--one{ top: 24%; background: repeating-linear-gradient(90deg, #fff6e5 0 8px, #f7c45f 8px 16px, #fff6e5 16px 24px); }
.introEggBand--two{ top: 44%; background: repeating-linear-gradient(90deg, #ffffff 0 10px, #f28fa3 10px 20px, #ffffff 20px 30px); }
.introEggBand--three{ top: 63%; background: repeating-linear-gradient(90deg, #effff2 0 9px, #88c494 9px 18px, #effff2 18px 27px); }

.introEggDot{
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22);
}

.introEggDot--a{ left: 18%; top: 16%; }
.introEggDot--b{ right: 18%; top: 54%; }
.introEggDot--c{ left: 50%; bottom: 12%; transform: translateX(-50%); }

@keyframes introCloudBob{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}

@keyframes introEarWave{
  0%,100%{ transform: rotate(12deg); }
  18%{ transform: rotate(32deg); }
  38%{ transform: rotate(4deg); }
  58%{ transform: rotate(24deg); }
  80%{ transform: rotate(8deg); }
}

@keyframes introEggSpin{
  0%{ transform: rotate(-10deg) translateY(0); }
  50%{ transform: rotate(10deg) translateY(-4px); }
  100%{ transform: rotate(-10deg) translateY(0); }
}

@keyframes introSparkle{
  0%,100%{ transform: scale(0.8); opacity: 0.4; }
  50%{ transform: scale(1.3); opacity: 1; }
}

@media (max-width: 640px){
  #introSpringScene{ width: min(92vw, 380px); }
  .introBunny{ top: 12%; }
  .introEgg{ top: 49%; }
}

@media (prefers-reduced-motion: reduce){
  #introCloud,
  .introBunnyEar--right,
  .introEgg,
  .introBunnySparkle{
    animation: none;
  }
  #introCloudWrap{ transition: opacity 0.01ms linear; }
}