* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scene {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #63bef5 0%,
    #79cdf8 14%,
    #91d9fb 28%,
    #b1e8ff 42%,
    #d7f7ff 54%,
    #edfdfd 64%,
    #e8f8ef 72%,
    #c8e6a7 82%,
    #86cb67 92%,
    #2f8f3a 100%
  );
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(41, 128, 185, 0.92) 0%,
    rgba(73, 162, 219, 0.82) 18%,
    rgba(102, 190, 237, 0.62) 34%,
    rgba(185, 230, 248, 0.34) 50%,
    rgba(225, 246, 255, 0.10) 64%,
    rgba(255, 255, 255, 0) 76%
  );
}

.sun {
  position: absolute;
  top: 6svh;
  right: 12vw;
  width: clamp(58px, 8vw, 80px);
  height: clamp(58px, 8vw, 80px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffde7, #ffe082 60%, #ffc107);
  box-shadow: 0 0 40px 20px rgba(255, 220, 50, 0.35), 0 0 80px 40px rgba(255, 200, 0, 0.15);
  animation: sunPulse 6s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 40px 20px rgba(255, 220, 50, 0.35), 0 0 80px 40px rgba(255, 200, 0, 0.15); }
  50% { box-shadow: 0 0 56px 26px rgba(255, 220, 50, 0.45), 0 0 90px 48px rgba(255, 200, 0, 0.18); }
}

.cloud {
  position: absolute;
  z-index: 3;
  filter: drop-shadow(0 4px 12px rgba(100, 160, 220, 0.15));
  pointer-events: none;
}

.cloud svg {
  display: block;
  width: 100%;
  height: auto;
}

.cloud-1 { width: clamp(180px, 26vw, 260px); top: 8svh; left: -280px; animation: floatCloud1 55s linear infinite; }
.cloud-2 { width: clamp(140px, 20vw, 200px); top: 18svh; left: -220px; animation: floatCloud2 70s linear infinite; animation-delay: -20s; }
.cloud-3 { width: clamp(220px, 32vw, 320px); top: 5svh; left: -340px; animation: floatCloud3 90s linear infinite; animation-delay: -45s; }
.cloud-4 { width: clamp(130px, 18vw, 180px); top: 24svh; left: -200px; animation: floatCloud4 65s linear infinite; animation-delay: -10s; }

@keyframes floatCloud1 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 340px)); } }
@keyframes floatCloud2 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 280px)); } }
@keyframes floatCloud3 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 400px)); } }
@keyframes floatCloud4 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }

.bird-group {
  position: absolute;
  z-index: 4;
  animation: flyBird linear infinite;
  pointer-events: none;
}

.bird-group svg {
  display: block;
  animation: flapWings ease-in-out infinite;
}

.bird-1 { top: 22svh; animation-duration: 22s; animation-delay: -5s; left: -120px; }
.bird-2 { top: 19svh; animation-duration: 28s; animation-delay: -12s; left: -80px; }
.bird-3 { top: 26svh; animation-duration: 18s; animation-delay: -3s; left: -100px; }
.bird-4 { top: 15svh; animation-duration: 35s; animation-delay: -20s; left: -60px; }
.bird-5 { top: 30svh; animation-duration: 25s; animation-delay: -8s; left: -90px; }
.bird-6 { top: 12svh; animation-duration: 20s; animation-delay: -15s; left: -70px; }
.bird-7 { top: 28svh; animation-duration: 32s; animation-delay: -6s; left: -110px; }

.bird-1 svg { animation-duration: 0.5s; }
.bird-2 svg { animation-duration: 0.6s; animation-delay: -0.2s; }
.bird-3 svg { animation-duration: 0.45s; animation-delay: -0.1s; }
.bird-4 svg { animation-duration: 0.55s; animation-delay: -0.3s; }
.bird-5 svg { animation-duration: 0.5s; animation-delay: -0.15s; }
.bird-6 svg { animation-duration: 0.48s; animation-delay: -0.05s; }
.bird-7 svg { animation-duration: 0.58s; animation-delay: -0.25s; }

@keyframes flyBird { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 200px)); } }
@keyframes flapWings { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }

.intro {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(90vw, 720px);
  padding: clamp(18px, 4vw, 28px) clamp(18px, 5vw, 32px);
  text-align: center;
  color: #11445d;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: clamp(18px, 4vw, 28px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
}

.intro h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.intro p {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  line-height: 1.4;
}

.grass {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(35svh, 280px);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 1vw;
  background: linear-gradient(transparent 0%, rgba(28, 112, 46, 0.45) 70%);
  z-index: 20;
}

.grass span {
  width: clamp(6px, 1vw, 10px);
  height: var(--h, clamp(80px, 15svh, 110px));
  border-radius: 999px 999px 0 0;
  background: linear-gradient(#7fe36b, #197d2c);
  transform-origin: bottom center;
  animation: sway 2.4s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.grass span:nth-child(3n) { --h: clamp(105px, 19svh, 150px); --d: -0.7s; }
.grass span:nth-child(4n) { --h: clamp(70px, 13svh, 95px); --d: -1.1s; }
.grass span:nth-child(5n) { --h: clamp(125px, 22svh, 180px); --d: -1.6s; }
.grass span:nth-child(7n) { --h: clamp(90px, 17svh, 130px); --d: -2s; }

@keyframes sway { from { rotate: -5deg; } to { rotate: 6deg; } }

@media (max-width: 600px) {
  .scene {
    background: linear-gradient(
      to bottom,
      #63bef5 0%,
      #8ad6fb 20%,
      #c4efff 42%,
      #edfdfd 58%,
      #d7efbe 70%,
      #8dcc68 86%,
      #2f8f3a 100%
    );
  }

  .sun { top: 5svh; right: 8vw; }
  .cloud-1 { top: 10svh; }
  .cloud-2 { top: 22svh; }
  .cloud-3 { top: 4svh; opacity: 0.72; }
  .cloud-4 { top: 28svh; opacity: 0.8; }

  .intro {
    top: 39%;
    width: min(88vw, 420px);
    padding: 18px 18px;
  }

  .intro h1 { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .intro p { font-size: clamp(0.9rem, 4vw, 1.05rem); }

  .grass {
    height: 32svh;
    padding: 0 2vw;
  }

  .grass span { width: clamp(5px, 1.8vw, 8px); }

  .bird-group svg {
    transform: scale(0.82);
    transform-origin: left center;
  }

  .bird-4, .bird-7 { display: none; }
}

@media (max-width: 380px) {
  .intro {
    top: 40%;
    padding: 16px 14px;
  }

  .intro h1 { font-size: 1.65rem; }
  .intro p { font-size: 0.9rem; }
  .grass { height: 30svh; }
  .bird-5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .bird-group, .bird-group svg, .grass span, .sun { animation: none; }
}


/* More grass proportion */
.grass {
  height: min(40svh, 330px);
}

.grass span {
  height: var(--h, clamp(95px, 18svh, 130px));
}

.grass span:nth-child(3n) { --h: clamp(125px, 23svh, 175px); }
.grass span:nth-child(4n) { --h: clamp(85px, 16svh, 115px); }
.grass span:nth-child(5n) { --h: clamp(145px, 26svh, 205px); }
.grass span:nth-child(7n) { --h: clamp(110px, 20svh, 155px); }

@media (max-width: 600px) {
  .grass {
    height: 38svh;
  }

  .grass span {
    height: var(--h, clamp(90px, 19svh, 125px));
  }

  .grass span:nth-child(3n) { --h: clamp(115px, 24svh, 160px); }
  .grass span:nth-child(4n) { --h: clamp(80px, 16svh, 110px); }
  .grass span:nth-child(5n) { --h: clamp(130px, 27svh, 185px); }
  .grass span:nth-child(7n) { --h: clamp(105px, 22svh, 145px); }
}

@media (max-width: 380px) {
  .grass {
    height: 36svh;
  }
}


/* Interactive touch / click effects */
.sun,
.cloud,
.bird-group,
.grass span {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Sun interaction */
.sun:active,
.sun.interact {
  transform: scale(1.08);
  filter: saturate(1.15) brightness(1.08);
}

/* Cloud interaction */
.cloud {
  transition: transform 0.6s ease;
}

.cloud:active,
.cloud.interact {
  transform: translateY(-10px) scale(1.03);
}

/* Bird interaction */
.bird-group svg {
  transition: transform 0.25s ease;
}

.bird-group:active svg,
.bird-group.interact svg {
  transform: scale(1.15) scaleY(0.45);
}

/* Grass interaction */
.grass span {
  transition: transform 0.35s ease;
}

.grass span:active,
.grass span.interact {
  transform: rotate(14deg) scaleY(1.06);
}

@media (hover: hover) {
  .sun:hover {
    transform: scale(1.05);
  }

  .cloud:hover {
    transform: translateY(-6px);
  }

  .bird-group:hover svg {
    transform: scale(1.08) scaleY(0.6);
  }

  .grass span:hover {
    transform: rotate(10deg);
  }
}


/* Interaction fix: do not fight existing transform animations */
.sun,
.cloud,
.bird-group,
.grass span {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Bigger touch targets for mobile */
.sun::after,
.cloud::after,
.bird-group::after {
  content: "";
  position: absolute;
  inset: -22px;
}

/* Sun: use filter / shadow, not transform */
.sun.interact {
  animation: sunPulse 6s ease-in-out infinite, sunTap 650ms ease-out;
}

@keyframes sunTap {
  0% {
    filter: brightness(1);
    box-shadow:
      0 0 40px 20px rgba(255, 220, 50, 0.35),
      0 0 80px 40px rgba(255, 200, 0, 0.15);
  }
  45% {
    filter: brightness(1.18) saturate(1.2);
    box-shadow:
      0 0 70px 34px rgba(255, 230, 70, 0.58),
      0 0 120px 70px rgba(255, 200, 0, 0.25);
  }
  100% {
    filter: brightness(1);
  }
}

/* Cloud: animate the SVG inside, so cloud flying transform keeps working */
.cloud.interact svg {
  animation: cloudTap 700ms ease-out;
}

@keyframes cloudTap {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-16px) scale(1.04); }
  70% { transform: translateY(5px) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

/* Bird: animate SVG inside, so bird flying transform keeps working */
.bird-group.interact svg {
  animation: birdTap 520ms ease-out, flapWings 0.22s ease-in-out infinite;
}

@keyframes birdTap {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.35) rotate(-8deg); }
  70% { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Grass: keep direct interaction */
.grass span.interact {
  animation: grassTap 600ms ease-out, sway 2.4s ease-in-out infinite alternate;
}

@keyframes grassTap {
  0% { transform: rotate(0deg) scaleY(1); }
  40% { transform: rotate(18deg) scaleY(1.12); }
  70% { transform: rotate(-10deg) scaleY(1.05); }
  100% { transform: rotate(0deg) scaleY(1); }
}


/* Reliable tap effects - final */
.sun,
.cloud,
.bird-group,
.grass span {
  -webkit-tap-highlight-color: transparent;
}

.sun.tap-burst {
  animation: sunPulse 6s ease-in-out infinite, sunBurst 700ms ease-out !important;
}

@keyframes sunBurst {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.35) saturate(1.35);
    box-shadow:
      0 0 80px 42px rgba(255, 235, 80, 0.7),
      0 0 150px 90px rgba(255, 200, 0, 0.35);
  }
  100% {
    filter: brightness(1);
  }
}

.cloud.tap-burst svg {
  animation: cloudBounce 850ms ease-out !important;
}

@keyframes cloudBounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-26px) scale(1.08); }
  60% { transform: translateY(10px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

.bird-group.tap-burst svg {
  animation: birdBurst 700ms ease-out !important;
}

@keyframes birdBurst {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.7) rotate(-12deg); }
  50% { transform: scale(1.2) rotate(12deg); }
  75% { transform: scale(1.45) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.grass span.tap-burst {
  animation: grassBurst 700ms ease-out, sway 2.4s ease-in-out infinite alternate !important;
}

@keyframes grassBurst {
  0% { transform: rotate(0deg) scaleY(1); }
  35% { transform: rotate(24deg) scaleY(1.18); }
  65% { transform: rotate(-16deg) scaleY(1.08); }
  100% { transform: rotate(0deg) scaleY(1); }
}