/**
 * Baby & Miko - Brand Motion Graphics & Character Micro-Interactions
 * 1. Brand Logo Motion Graphics (Header & Footer)
 * 2. Hero Title & Story Float Motion Graphics (Homepage)
 * 3. Character Micro-Interactions (Miko Cat, Chidiya Bird, Raam, Cubi, Monograms)
 * 4. Mango Picnic & Game Card Physics (Juicy Mango Drop, Floating Sway, Card Waves)
 * 5. Memory Match 3D Card Flip & Celebratory Pulses
 * 6. Accessibility & Reduced Motion Compliance
 */

/* ==========================================================================
   1. Brand Logo Motion Graphics (Header & Footer)
   ========================================================================== */

.official-wordmark {
  cursor: pointer;
}

.official-wordmark .logo-window {
  transform-origin: 20% 75%;
  animation: logo-entrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

@keyframes logo-entrance {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.85);
  }
  60% {
    transform: translateY(2px) scale(1.05);
  }
  82% {
    transform: translateY(-1px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Playful squash-and-stretch wiggle on hover and keyboard focus */
.official-wordmark:hover .logo-window,
.official-wordmark:focus-visible .logo-window {
  animation: logo-wiggle 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes logo-wiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.07, 0.94) rotate(-3.5deg) translateY(-2px);
  }
  48% {
    transform: scale(0.95, 1.05) rotate(3deg) translateY(-1px);
  }
  72% {
    transform: scale(1.03, 0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Playroom label interactive highlight */
.playroom-label {
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.official-wordmark:hover .playroom-label {
  color: var(--bm-coral, #d86e61);
  border-left-color: var(--bm-yellow, #f3bd59);
  transform: translateX(3px);
}


/* ==========================================================================
   2. Hero Title & Story Float Motion Graphics (Homepage)
   ========================================================================== */

/* Hero kicker micro-pulse */
.hero-kicker:before {
  animation: kicker-pulse 2.2s infinite ease-in-out;
  transform-origin: center;
}

@keyframes kicker-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* Hero main headline bouncy entrance */
.brand-hero h1 {
  animation: hero-title-enter 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes hero-title-enter {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Big imagination." italic span pop & coral warmth */
.brand-hero h1 span {
  display: block;
  transform-origin: left center;
  animation: hero-span-pop 0.95s 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes hero-span-pop {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px) rotate(-1.5deg);
  }
  68% {
    transform: scale(1.04) translateY(-2px) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Organic sinusoidal floating badges on hero artwork */
.hero-float {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.25s ease;
  transform: translate3d(0, 0, 0);
}

.hero-float.song {
  animation: float-gentle-1 4.4s infinite ease-in-out;
}

.hero-float.story {
  animation: float-gentle-2 5.2s infinite ease-in-out 0.9s;
}

.hero-float.learn {
  animation: float-gentle-3 4.8s infinite ease-in-out 1.6s;
}

@keyframes float-gentle-1 {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(1.2deg); }
}

@keyframes float-gentle-2 {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-1.4deg); }
}

@keyframes float-gentle-3 {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(0.9deg); }
}

.hero-float:hover {
  animation-play-state: paused;
  transform: translateY(-9px) scale(1.08) !important;
  box-shadow: 0 16px 42px rgba(44, 61, 55, 0.22);
  border-color: var(--bm-coral, #d86e61);
}

.hero-float i {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-float:hover i {
  transform: scale(1.25) rotate(8deg);
}

/* Ambient hero backdrop shapes gentle organic drift */
.brand-hero:before {
  animation: ambient-drift-1 10s infinite ease-in-out alternate;
  transform: translate3d(0, 0, 0);
}

.brand-hero:after {
  animation: ambient-drift-2 12s infinite ease-in-out alternate;
  transform: translate3d(0, 0, 0);
}

@keyframes ambient-drift-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(14px, -10px, 0) scale(1.08); }
}

@keyframes ambient-drift-2 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-12px, 12px, 0) rotate(20deg); }
}

/* Hero artwork frame gentle lift */
.hero-art-frame {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}

.hero-art-frame:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 35px 80px rgba(56, 76, 64, 0.18);
}


/* ==========================================================================
   3. Character Micro-Interactions (Meet Their Little World)
   ========================================================================== */

.character-profile {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.character-profile:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(44, 61, 55, 0.16);
}

.character-profile:has(.raam-art):hover {
  border-color: #d86e61;
}

.character-profile:has(.miko-art):hover {
  border-color: #f3bd59;
}

.character-profile:has(.cubi-art):hover {
  border-color: #7b9672;
}

.character-profile:has(.chidiya-art):hover {
  border-color: #6fb7b1;
}

.character-profile.naina-profile:hover {
  border-color: #d86e61;
}

.character-profile.aman-profile:hover {
  border-color: #6fb7b1;
}

.character-profile .character-profile-art {
  transform-origin: center bottom;
  will-change: transform;
}

/* Miko the Cat: Joyful bouncy spring hop */
.character-profile:hover .miko-art {
  animation: miko-bounce 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes miko-bounce {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.12, 0.88) translateY(6px); }
  45% { transform: scale(0.94, 1.14) translateY(-16px); }
  70% { transform: scale(1.06, 0.96) translateY(-4px); }
  85% { transform: scale(0.98, 1.02) translateY(1px); }
  100% { transform: scale(1.04) translateY(-2px); }
}

/* Chidiya the Garden Bird: Fluttering flight lift */
.character-profile:hover .chidiya-art {
  animation: chidiya-flutter 0.8s ease-in-out both;
}

@keyframes chidiya-flutter {
  0% { transform: scale(1) translateY(0) rotate(0deg); }
  20% { transform: scale(1.06) translateY(-16px) rotate(-4deg); }
  42% { transform: scale(1.02) translateY(-6px) rotate(3deg); }
  68% { transform: scale(1.08) translateY(-18px) rotate(-3deg); }
  88% { transform: scale(1.03) translateY(-8px) rotate(1.5deg); }
  100% { transform: scale(1.05) translateY(-10px) rotate(-1deg); }
}

/* Raam the Little Explorer: Curious tilt and forward peek */
.character-profile:hover .raam-art {
  animation: raam-peek 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes raam-peek {
  0% { transform: scale(1) translateY(0) rotate(0deg); }
  35% { transform: scale(1.08) translateY(-10px) rotate(-3deg); }
  65% { transform: scale(1.04) translateY(-4px) rotate(1.5deg); }
  100% { transform: scale(1.06) translateY(-6px) rotate(-1.5deg); }
}

/* Cubi the Puppy: Cheerful playful waggle */
.character-profile:hover .cubi-art {
  animation: cubi-wag 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cubi-wag {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.07) translateY(-6px) rotate(5deg); }
  40% { transform: scale(1.07) translateY(-8px) rotate(-5deg); }
  60% { transform: scale(1.06) translateY(-5px) rotate(4deg); }
  80% { transform: scale(1.05) translateY(-3px) rotate(-2deg); }
  100% { transform: scale(1.05) translateY(-4px) rotate(0deg); }
}

/* Character Card Header Text Micro-Interaction */
.character-profile .character-profile-copy h3 {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.character-profile:hover .character-profile-copy h3 {
  color: var(--bm-coral, #d86e61);
  transform: translateX(4px);
}

/* Naina & Aman: Family Monograms pulse */
.character-monogram {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, background-color 0.3s ease;
}

.character-profile:hover .character-monogram {
  transform: scale(1.15) rotate(4deg);
  box-shadow: 0 14px 30px rgba(41, 72, 61, 0.22);
  background: rgba(255, 255, 255, 0.95);
}


/* ==========================================================================
   4. Mango Picnic & Game Card Micro-Interactions
   ========================================================================== */

/* 3D Picnic Tray Scene & Platter */
.picnic-tray-scene {
  perspective: 900px;
  margin: 12px auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 16px;
}

/* Real 3D Serving Platter / Tray */
.picnic-plate {
  position: relative;
  width: min(440px, 92vw);
  min-height: 180px;
  padding: 24px 30px;
  margin: 0 auto;
  border-radius: 54px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 10px 14px;
  transform: rotateX(18deg);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
  
  /* Multi-layer 3D wood / ceramic platter styling */
  background: 
    radial-gradient(ellipse 95% 75% at 50% 32%, #fffdf8 0%, #faf1e1 45%, #edd9bc 80%, #dfc49e 100%);
  border: 8px solid #f2ca85;
  box-shadow:
    /* Top rim specular highlight */
    0 -2px 0 1px rgba(255, 255, 255, 0.85),
    /* 3D tray rim lip (wood / brass thickness) */
    0 4px 0 0 #d9a356,
    0 8px 0 0 #be853c,
    0 12px 0 0 #9c6725,
    /* Elevated table drop shadow */
    0 24px 38px -4px rgba(10, 16, 28, 0.52),
    0 12px 20px -4px rgba(10, 16, 28, 0.32),
    /* Deep inner bowl recess shadow */
    inset 0 16px 26px -6px rgba(100, 60, 20, 0.28),
    inset 0 3px 8px rgba(100, 60, 20, 0.16),
    /* Inner bottom rim reflection */
    inset 0 -5px 12px rgba(255, 255, 255, 0.7);
}

/* Platter decorative inner stitch groove */
.picnic-plate::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(190, 140, 75, 0.38);
  border-radius: 46px;
  pointer-events: none;
}

/* 3D Handles on the tray sides */
.picnic-tray-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.picnic-plate-handle-left,
.picnic-plate-handle-right {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 56px;
  background: linear-gradient(180deg, #ffdc9c 0%, #dba257 50%, #af752f 100%);
  border: 3px solid #85531b;
  box-shadow: 
    0 6px 12px rgba(10, 16, 28, 0.42),
    inset 0 2px 4px rgba(255, 255, 255, 0.65);
  transform: translateY(-50%) translateZ(-4px);
}

.picnic-plate-handle-left {
  left: -19px;
  border-radius: 14px 4px 4px 14px;
}

.picnic-plate-handle-right {
  right: -19px;
  border-radius: 4px 14px 14px 4px;
}

/* Juicy Mango drop bounce and 3D presence */
.picnic-plate .mango {
  display: inline-block;
  font-size: 48px;
  line-height: 1;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 10px 8px rgba(30, 20, 10, 0.35));
  transform-origin: center bottom;
  animation: mango-drop-bounce 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
}

@keyframes mango-drop-bounce {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.22, 0.82);
  }
  80% {
    transform: translateY(-3px) scale(0.95, 1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.picnic-plate .mango:hover {
  transform: translateY(-8px) scale(1.22) rotate(-5deg);
  filter: drop-shadow(0 16px 12px rgba(30, 20, 10, 0.45));
}

.picnic-plate .mango:active {
  transform: translateY(2px) scale(1.15, 0.88);
}

/* Staggered natural tilt for mangoes piled on the tray */
.picnic-plate .mango:nth-child(2n) { transform: rotate(7deg); }
.picnic-plate .mango:nth-child(3n) { transform: rotate(-8deg) translateY(-2px); }
.picnic-plate .mango:nth-child(4n) { transform: rotate(6deg) translateY(3px); }
.picnic-plate .mango:nth-child(5n) { transform: rotate(-10deg); }
.picnic-plate .mango:nth-child(6n) { transform: rotate(5deg) translateY(-2px); }
.picnic-plate .mango:nth-child(7n) { transform: rotate(-6deg) translateY(2px); }

/* Empty tray welcoming decal */
.plate-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7a5530;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  padding: 10px;
}

.plate-empty .empty-icon {
  font-size: 40px;
  animation: empty-mango-float 3s infinite ease-in-out;
  filter: drop-shadow(0 4px 6px rgba(110, 70, 20, 0.25));
}

.plate-empty .empty-text {
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #6d4822;
}

@keyframes empty-mango-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px) scale(1.06); }
}

/* Celebratory tray lift when serving */
.picnic-plate.served {
  animation: tray-serve-lift 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tray-serve-lift {
  0% {
    transform: rotateX(18deg) translateY(0) scale(1);
  }
  40% {
    transform: rotateX(10deg) translateY(-18px) scale(1.06);
    box-shadow:
      0 -2px 0 1px rgba(255, 255, 255, 0.85),
      0 4px 0 0 #d9a356,
      0 8px 0 0 #be853c,
      0 12px 0 0 #9c6725,
      0 35px 55px -6px rgba(10, 16, 28, 0.62),
      0 16px 25px -4px rgba(10, 16, 28, 0.42),
      inset 0 16px 26px -6px rgba(100, 60, 20, 0.28),
      inset 0 3px 8px rgba(100, 60, 20, 0.16),
      inset 0 -5px 12px rgba(255, 255, 255, 0.7);
  }
  80% {
    transform: rotateX(19deg) translateY(-2px) scale(1.01);
  }
  100% {
    transform: rotateX(18deg) translateY(0) scale(1);
  }
}

/* Preview Mango floating sway (Homepage & Playroom preview) */
.preview-mango {
  display: inline-block;
  animation: mango-float-sway 4.2s infinite ease-in-out;
  transform-origin: center center;
}

@keyframes mango-float-sway {
  0%, 100% {
    transform: rotate(13deg) translateY(0);
  }
  50% {
    transform: rotate(6deg) translateY(-8px);
  }
}

/* Counting Game Card Mangoes Seesaw */
.game-card .counting-art i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card:hover .counting-art i:first-child {
  transform: rotate(-24deg) scale(1.08) translateY(-4px);
}

.game-card:hover .counting-art i:nth-child(2) {
  transform: translate(-12px, 12px) rotate(24deg) scale(1.08);
}

/* Music Game Card Melody Wave */
.game-card .music-art i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card:hover .music-art i:nth-child(1) { transform: rotate(8deg) translateY(-8px); }
.game-card:hover .music-art i:nth-child(2) { transform: translateY(-6px); }
.game-card:hover .music-art i:nth-child(3) { transform: translateY(-4px); }
.game-card:hover .music-art i:nth-child(4) { transform: translateY(-3px); }
.game-card:hover .music-art i:nth-child(5) { transform: translateY(-2px); }

/* Keyboard Card Keys Press Reaction */
.game-card .keyboard-art i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card:hover .keyboard-art i:nth-child(1) {
  transform: rotate(-10deg) translateY(3px) scale(0.96);
}

.game-card:hover .keyboard-art i:nth-child(2) {
  transform: translateY(-8px) rotate(9deg) scale(1.04);
}


/* ==========================================================================
   5. Memory Match 3D Card Flip & Pulses
   ========================================================================== */

.memory-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
  transform-style: preserve-3d;
}

.memory-card:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
}

.memory-card.revealed {
  animation: card-flip-reveal 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes card-flip-reveal {
  0% { transform: rotateY(85deg) scale(0.92); }
  100% { transform: rotateY(0deg) scale(1); }
}

.memory-card.matched {
  animation: card-matched-pulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes card-matched-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* ==========================================================================
   6. Playroom Welcome Toys Interactive Reaction
   ========================================================================== */

.toy {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage:hover .toy.flower { transform: rotate(-6deg) scale(1.06); }
.stage:hover .toy.star   { transform: rotate(23deg) scale(1.08); }
.stage:hover .toy.letter { transform: rotate(-11deg) scale(1.05); }
.stage:hover .toy.number { transform: rotate(21deg) scale(1.06); }
.stage:hover .toy.circle { transform: scale(1.09); }


/* ==========================================================================
   7. Accessibility & Reduced Motion Compliance
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .official-wordmark .logo-window,
  .official-wordmark:hover .logo-window,
  .hero-kicker:before,
  .brand-hero h1,
  .brand-hero h1 span,
  .hero-float,
  .hero-float.song,
  .hero-float.story,
  .hero-float.learn,
  .brand-hero:before,
  .brand-hero:after,
  .hero-art-frame,
  .character-profile,
  .character-profile:hover .miko-art,
  .character-profile:hover .chidiya-art,
  .character-profile:hover .raam-art,
  .character-profile:hover .cubi-art,
  .character-monogram,
  .picnic-plate,
  .picnic-plate.served,
  .plate-empty .empty-icon,
  .picnic-plate .mango,
  .preview-mango,
  .game-card:hover .counting-art i,
  .game-card:hover .music-art i,
  .game-card:hover .keyboard-art i,
  .memory-card,
  .memory-card.revealed,
  .memory-card.matched,
  .toy {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.reduce-motion .official-wordmark .logo-window,
.reduce-motion .official-wordmark:hover .logo-window,
.reduce-motion .hero-kicker:before,
.reduce-motion .brand-hero h1,
.reduce-motion .brand-hero h1 span,
.reduce-motion .hero-float,
.reduce-motion .hero-float.song,
.reduce-motion .hero-float.story,
.reduce-motion .hero-float.learn,
.reduce-motion .brand-hero:before,
.reduce-motion .brand-hero:after,
.reduce-motion .hero-art-frame,
.reduce-motion .character-profile,
.reduce-motion .character-profile:hover .miko-art,
.reduce-motion .character-profile:hover .chidiya-art,
.reduce-motion .character-profile:hover .raam-art,
.reduce-motion .character-profile:hover .cubi-art,
.reduce-motion .character-monogram,
.reduce-motion .picnic-plate,
.reduce-motion .picnic-plate.served,
.reduce-motion .plate-empty .empty-icon,
.reduce-motion .picnic-plate .mango,
.reduce-motion .preview-mango,
.reduce-motion .memory-card,
.reduce-motion .memory-card.revealed,
.reduce-motion .memory-card.matched,
.reduce-motion .toy {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}