/* The sky as a playground (js/play.js): the sky through the day, bubbles, the carried Puff, drop targets, friends and
   night stars. */

/* the sky follows the clock */
body[data-time="evening"] .scene { background-image: url(../assets/art/ui/sky-evening.webp); }
body[data-time="night"] .scene { background-image: url(../assets/art/ui/sky-night.webp); }
@media (orientation: landscape) {
  body[data-time="evening"] .scene { background-image: url(../assets/art/ui/sky-evening-wide.webp); }
  body[data-time="night"] .scene { background-image: url(../assets/art/ui/sky-night-wide.webp); }
}
body[data-time="night"] .sky > .clouds, body[data-time="night"] .drift .cloud { filter: brightness(.78) saturate(.9) hue-rotate(-12deg); }
body[data-time="night"] .isle .name { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5)); }
body[data-time="evening"] .sky > .clouds { filter: sepia(.18) saturate(1.2); }

/* the carried Puff: a little bigger, with a glow; islands light up to say "drop me here" */
.sky-puff.carried { z-index: 8; }
.sky-puff.carried img { animation: none; filter: drop-shadow(0 18px 16px rgba(110, 80, 180, .35)) drop-shadow(0 0 16px rgba(255, 246, 200, .8)); }
.isle.target img { filter: drop-shadow(0 0 24px #fff6b8) drop-shadow(0 16px 18px rgba(110, 80, 180, .28)) brightness(1.1); scale: 1.08; transition: scale .2s; }

/* bubbles drifting up (the whole bubble is the button) */
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.soap { position: absolute; bottom: -16vmin; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: auto; padding: 0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .5) 0 4%, rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .35) 70%, rgba(255, 255, 255, .8) 100%),
    conic-gradient(from var(--h), rgba(255, 160, 220, .35), rgba(160, 220, 255, .35), rgba(200, 255, 190, .3), rgba(255, 240, 160, .35), rgba(255, 160, 220, .35));
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 71%); mask: radial-gradient(circle, #000 69%, transparent 71%);
  animation: rise-soap var(--t) linear forwards; }
.soap.popped { animation: popped .25s ease-out forwards; }
@keyframes rise-soap {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  6% { opacity: 1; }
  30% { transform: translate(calc(var(--sway) * .6), -35vh) scale(1); }
  60% { transform: translate(calc(var(--sway) * -.4), -75vh) scale(1.02, .98); }
  100% { transform: translate(var(--sway), -125vh) scale(1); opacity: .9; }
}
@keyframes popped { to { scale: 1.6; opacity: 0; } }

/* a little unicorn cantering round the castle island in the air; pets sitting on the Home Cloud island */
.friend { position: absolute; left: 0; top: 0; pointer-events: auto; }
.friend img { width: 100%; display: block; filter: drop-shadow(0 8px 8px rgba(110, 80, 180, .3)); pointer-events: none; }
.friend.unicorn { width: clamp(48px, 7.5vmin, 90px); will-change: transform; }
.friend.unicorn img { animation: canter .45s ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes canter { from { rotate: -7deg; translate: 0 2%; } to { rotate: 5deg; translate: 0 -6%; } }
@keyframes flap-soft { to { translate: 0 -4px; rotate: 4deg; } }
.isle .friend.pet { position: absolute; top: auto; bottom: 30%; width: 26%; translate: -50% 0; animation: bob-pet 2.4s ease-in-out infinite; }
@keyframes bob-pet { 50% { translate: -50% -6%; } }

/* stars to tap at night */
.night-star { position: absolute; z-index: 2; width: var(--s); height: var(--s); padding: 0; translate: -50% -50%;
  background: url(../assets/art/ui/star.webp) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255, 240, 170, .9));
  animation: twinkle-star 2.8s ease-in-out infinite; }
@keyframes twinkle-star { 50% { scale: .8; filter: drop-shadow(0 0 16px rgba(255, 240, 170, 1)) brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { .night-star, .isle .friend.pet { animation: none; } }