/* ==========================================================
   intro.css - Scene 1: Night sky, glowing moon, long-press interaction
   ========================================================== */

#scene-intro {
  background: radial-gradient(
    circle at 50% 35%,
    #18233c 0%,
    #0c1222 55%,
    #05070f 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  z-index: 20;
}

/* Background elements: Stars and Clouds */
.sky-stars-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.intro-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: starTwinkle 3s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 245, 200, 0.9);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

/* Clouds drifting */
.cloud-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.25;
}

.cloud {
  position: absolute;
  background: radial-gradient(
    ellipse at center,
    rgba(160, 190, 230, 0.35) 0%,
    rgba(20, 30, 60, 0) 70%
  );
  border-radius: 50%;
  filter: blur(25px);
  animation: cloudDrift linear infinite;
}

.cloud-1 {
  width: 480px;
  height: 140px;
  top: 25%;
  left: -20%;
  animation-duration: 45s;
}

.cloud-2 {
  width: 600px;
  height: 180px;
  top: 50%;
  left: -40%;
  animation-duration: 65s;
  animation-delay: -20s;
}

@keyframes cloudDrift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(120vw);
  }
}

/* Central Moon Container */
.moon-wrapper {
  position: relative;
  width: min(72vw, 320px);
  height: min(72vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  touch-action: none;
  margin-top: -30px;
}

/* Outer Aura Glow */
.moon-glow-aura {
  position: absolute;
  width: 125%;
  height: 125%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 230, 140, 0.45) 0%,
    rgba(255, 210, 80, 0.15) 50%,
    transparent 75%
  );
  filter: blur(20px);
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  animation: moonGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.moon-wrapper * {
  pointer-events: none;
}

/* Circular Progress Ring for Long Press */
.moon-progress-svg {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.moon-wrapper.pressing .moon-progress-svg {
  opacity: 1;
}

.moon-progress-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 3.5;
}

.moon-progress-fill {
  fill: none;
  stroke: #ffd166;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 295.3;
  stroke-dashoffset: 295.3;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95));
}

.moon-wrapper.pressing .moon-progress-fill {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.75s linear;
}

.moon-wrapper:not(.pressing) .moon-progress-fill {
  stroke-dashoffset: 295.3;
  transition: stroke-dashoffset 0.15s ease-out;
}

/* Tap bounce feedback when clicked quickly */
.moon-wrapper.tap-bounce {
  animation: moonTapBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes moonTapBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.92);
  }
  65% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* The Moon Image */
.moon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255, 220, 110, 0.65));
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
  animation: moonFloating 5s ease-in-out infinite;
  pointer-events: none;
}

/* Pressing & Active States for Moon */
.moon-wrapper.pressing .moon-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 45px rgba(255, 240, 160, 0.95)) brightness(1.1);
}

.moon-wrapper.pressing .moon-glow-aura {
  transform: scale(1.3);
  opacity: 0.9;
}

@keyframes moonFloating {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

@keyframes moonGlowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

/* Rabbit at Scene 1 */
.rabbit-container {
  position: absolute;
  bottom: -15px;
  right: 5%;
  width: min(28vw, 110px);
  z-index: 12;
  pointer-events: none;
  animation: rabbitSway 4s ease-in-out infinite;
}

.rabbit-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

@keyframes rabbitSway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

/* Flower at Scene 1 */
.flower-container {
  position: absolute;
  bottom: 20px;
  left: 4%;
  width: min(35vw, 130px);
  z-index: 11;
  pointer-events: none;
  transform-origin: bottom left;
  animation: flowerBreeze 6s ease-in-out infinite;
}

.flower-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

@keyframes flowerBreeze {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg) translateY(-2px);
  }
}

/* Ambient Lanterns in Scene 1 */
.intro-lantern {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  animation: lanternDrift 6s ease-in-out infinite alternate;
}

.intro-lantern img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 16px rgba(255, 140, 40, 0.7));
}

.intro-lantern-1 {
  top: 15%;
  left: 8%;
  width: min(15vw, 62px);
  animation-duration: 5.5s;
}

.intro-lantern-2 {
  top: 22%;
  right: 10%;
  width: min(14vw, 55px);
  animation-duration: 6.8s;
  animation-delay: -2s;
}

@keyframes lanternDrift {
  0% {
    transform: translateY(0) rotate(-3deg);
  }
  100% {
    transform: translateY(-16px) rotate(4deg);
  }
}

/* Long press text hint */
.press-hint-container {
  position: absolute;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 15;
  pointer-events: none;
}

.press-hint-text {
  font-size: clamp(14px, 4vw, 17px);
  color: #ffd880;
  text-shadow: 0 0 10px rgba(255, 216, 128, 0.6);
  letter-spacing: 0.5px;
  animation: hintPulse 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 6px;
}

.press-hint-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 77, 109, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 6px 22px rgba(255, 77, 109, 0.65),
    0 0 16px rgba(255, 215, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 18px;
  border-radius: 24px;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition:
    opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.press-hint-feedback.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    text-shadow: 0 0 16px rgba(255, 225, 140, 0.9);
  }
}