/* Custom Storybook & Toddler Animations */

@keyframes pulseGentle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(3deg); }
}

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

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

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

@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes squirrelPeekUp {
  0% { transform: translateY(110%) scale(0.8); }
  60% { transform: translateY(-10%) scale(1.05); }
  80% { transform: translateY(2%) scale(0.98); }
  100% { transform: translateY(0%) scale(1); }
}

@keyframes squirrelHideDown {
  0% { transform: translateY(0%) scale(1); }
  100% { transform: translateY(115%) scale(0.8); }
}

@keyframes squirrelTapped {
  0% { transform: scale(1); }
  30% { transform: scale(1.25) rotate(8deg); }
  60% { transform: scale(0.9) rotate(-6deg); }
  100% { transform: scale(1) translateY(110%); }
}

.animate-pulse-gentle {
  animation: pulseGentle 4s ease-in-out infinite;
}

.animate-bounce-soft {
  animation: bounceSoft 2s ease-in-out infinite;
}

.animate-bounce-gentle {
  animation: bounceSoft 1s ease-in-out infinite;
}

.animate-pop-in {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.swaying-flower {
  transform-origin: bottom center;
  animation: sway 3s ease-in-out infinite;
}

/* Sunbeams Effect */
.sunbeam {
  position: absolute;
  top: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 65%);
  transform-origin: top left;
  pointer-events: none;
}
.ray-1 { transform: rotate(15deg); }
.ray-2 { transform: rotate(32deg); opacity: 0.7; }
.ray-3 { transform: rotate(48deg); opacity: 0.5; }

/* Cloud drift with interactive puff */
.cloud {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.88;
  transition: transform 0.2s ease-out;
}
.cloud:active {
  transform: scale(1.3) rotate(5deg);
}
.cloud-1 {
  top: 12%;
  animation: cloudDrift 36s linear infinite;
}
.cloud-2 {
  top: 22%;
  animation: cloudDrift 46s linear infinite 12s;
}

/* Spot Positions for Fluid Responsive Layout across Mobile & iPad Landscape */
.peek-spot {
  position: absolute;
  width: clamp(100px, 14vw, 160px);
  height: clamp(110px, 16vw, 175px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Spot 1: Center Trunk Hollow */
.spot-pos-1 {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/* Spot 2: Canopy Left */
.spot-pos-2 {
  top: 14%;
  left: 12%;
}

/* Spot 3: Canopy Right */
.spot-pos-3 {
  top: 14%;
  right: 12%;
}

/* Spot 4: Meadow Mushroom (Mid-Left) */
.spot-pos-4 {
  top: 38%;
  left: 8%;
}

/* Spot 5: Mossy Log (Mid-Right) */
.spot-pos-5 {
  top: 38%;
  right: 8%;
}

/* Spot 6: Berry Bush (Center-Left) */
.spot-pos-6 {
  top: 55%;
  left: 26%;
}

/* Spot 7: Flower Stump (Center-Right) */
.spot-pos-7 {
  top: 55%;
  right: 26%;
}

/* Spot 8: Leaf Pile (Ground Center) */
.spot-pos-8 {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

/* Screen adaptation: for very tall phones (<640px wide) arrange comfortably */
@media (max-width: 639px) {
  .spot-pos-2 { top: 16%; left: 4%; }
  .spot-pos-3 { top: 16%; right: 4%; }
  .spot-pos-4 { top: 38%; left: 2%; }
  .spot-pos-5 { top: 38%; right: 2%; }
  .spot-pos-6 { top: 58%; left: 16%; }
  .spot-pos-7 { top: 58%; right: 16%; }
  .spot-pos-8 { bottom: 4%; }
}

/* Cloud 3 position */
.cloud-3 {
  top: 8%;
  animation: cloudDrift 50s linear infinite 7s;
}

/* Squirrel Actor Animation States */
.squirrel-actor {
  transform: translateY(115%);
  will-change: transform;
}

.squirrel-actor.peeking {
  animation: squirrelPeekUp 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.squirrel-actor.hiding {
  animation: squirrelHideDown 0.35s ease-in forwards;
}

.squirrel-actor.tapped {
  animation: squirrelTapped 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Floating Nut Particles */
.flying-acorn {
  position: absolute;
  pointer-events: none;
  font-size: 2rem;
  z-index: 50;
  transition: all 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.tap-bubble {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(125,211,252,0.6));
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  animation: bubblePop 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes bubblePop {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Basket Wobble on Receive */
.basket-wobble {
  animation: basketBump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes basketBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22) rotate(-6deg); }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Squirrel Speech Bubble on Tap */
.squirrel-speech {
  position: absolute;
  bottom: 85%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #F59E0B;
  color: #78350F;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
  pointer-events: none;
  z-index: 45;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Flower key pressed feedback */
.flower-key:active {
  transform: translateY(6px) scale(1.15);
}