/* ==========================================================================
   Animated Mascot Styles (Pip the Painter Pup - Supersized & Animated)
   ========================================================================== */

.mascot-wrapper {
  position: relative;
  width: 210px;
  height: 230px;
  cursor: pointer;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.22));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-wrapper:hover, .mascot-wrapper:active {
  transform: scale(1.1);
}

.mascot-wrapper.bouncing {
  animation: pupBounce 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) alternate 2;
}

@keyframes pupBounce {
  0% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-30px) scale(0.95, 1.05); }
  100% { transform: translateY(0) scale(1.05, 0.95); }
}

/* Talking Speech Bubble - Much larger, playful toddler typography */
.mascot-bubble {
  position: absolute;
  top: -80px;
  right: 25px;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 24px;
  font-weight: 900;
  padding: 16px 28px;
  border-radius: 32px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(0.8);
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  border: 4px solid #FEF08A;
}

.mascot-bubble::after {
  content: '';
  position: absolute;
  bottom: -14px;
  right: 60px;
  border-width: 14px 14px 0;
  border-style: solid;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
}

.mascot-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Ear Wag Animations */
.pup-ear-left {
  transform-origin: 50px 70px;
  animation: earWiggleLeft 2.8s ease-in-out infinite;
}

.pup-ear-right {
  transform-origin: 150px 70px;
  animation: earWiggleRight 2.8s ease-in-out infinite 0.2s;
}

@keyframes earWiggleLeft {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(8deg); }
}

@keyframes earWiggleRight {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-8deg); }
}

/* Gentle Body Breathing */
.pup-character {
  width: 100%;
  height: 100%;
  animation: pupBreathe 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes pupBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03, 0.97); }
}

/* Magic Brush Wave */
.pup-brush {
  transform-origin: 140px 145px;
  animation: brushWave 2.8s ease-in-out infinite;
}

@keyframes brushWave {
  0%, 100% { transform: rotate(25deg); }
  50% { transform: rotate(8deg); }
}

.pup-pupil {
  transition: transform 0.08s ease-out;
}

@media (max-width: 900px) {
  .mascot-wrapper {
    width: 160px;
    height: 175px;
  }
  .mascot-bubble {
    font-size: 19px;
    padding: 12px 20px;
    top: -65px;
  }
}