/* Toddler Friendly Styles & Animations */
:root {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body {
  touch-action: manipulation;
}

/* Background Animated Bubbles */
.bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: floatBubble 14s infinite ease-in-out alternate;
}
.bubble-1 { width: 220px; height: 220px; top: 5%; left: -50px; }
.bubble-2 { width: 280px; height: 280px; bottom: 10%; right: -60px; animation-duration: 18s; }
.bubble-3 { width: 180px; height: 180px; top: 45%; left: 30%; animation-duration: 12s; }
.bubble-4 { width: 200px; height: 200px; top: 10%; right: 10%; animation-duration: 16s; }

@keyframes floatBubble {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.15); }
  100% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Character Wiggle & Expressions */
.samsam-wiggle {
  animation: samsamHappy 1.2s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes samsamHappy {
  0% { transform: rotate(-3deg) scale(1); }
  100% { transform: rotate(3deg) scale(1.02); }
}

.samsam-jump {
  animation: samsamHop 0.5s ease-in-out 3;
}

@keyframes samsamHop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

/* Floating interactive items */
.float-item {
  animation: floatItem 2.5s ease-in-out infinite alternate;
}

@keyframes floatItem {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.05); }
}

/* Scene Background Crisp Artwork */
.scene-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.scene-overlay-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
  z-index: 1;
}

/* High Definition interactive items */
.interactive-object {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.22));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.interactive-object:active {
  transform: scale(0.92);
}

/* Pulsing prompt glow */
.pulse-glow {
  box-shadow: 0 0 0 0 rgba(255, 71, 126, 0.7);
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 71, 126, 0.7); }
  70% { box-shadow: 0 0 0 16px rgba(255, 71, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 71, 126, 0); }
}

/* Hand sparkle effect */
.sparkle-hand {
  animation: sparkleAnim 0.7s infinite alternate;
}

@keyframes sparkleAnim {
  0% { transform: scale(0.8) rotate(-10deg); opacity: 0.6; }
  100% { transform: scale(1.2) rotate(10deg); opacity: 1; }
}

/* Door opening 3D effect */
.door-panel {
  transform-origin: right center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.door-open {
  transform: perspective(600px) rotateY(-80deg);
}

/* Custom scrollbars hidden for dots */
#dotsContainer::-webkit-scrollbar {
  display: none;
}