/* ============================================================================
   CALM MOTION — shared micro-interaction vocabulary
   ----------------------------------------------------------------------------
   Mirrors the BreathingDoodle component on mobile. Keep timing values in sync
   so brand motion feels the same across web and native.
     period:        5s
     idle scale:    1.000 -> 1.025
     selected:      1.000 -> 1.040 + soft halo in the doodle's splat color
     hover:         settles to 1.060 (replaces previous abrupt 1.10 scale)
     stagger:       180ms between siblings via --motion-index
   ============================================================================ */

:root {
  --motion-breath-period: 5s;
  --motion-ease-calm: cubic-bezier(0.45, 0, 0.55, 1); /* sine in-out */
  --motion-stagger-step: 180ms;
}

@keyframes doodle-breath {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.025); opacity: 1; }
}

@keyframes doodle-breath-selected {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1.045); }
}

/* Mood picker: each doodle breathes on a staggered phase so the grid never
   pulses in unison (which would read as a heartbeat, not a calm field). */
.mood-btn .doodle-icon {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
  animation: doodle-breath var(--motion-breath-period) var(--motion-ease-calm) infinite;
  animation-delay: calc(var(--motion-index, 0) * var(--motion-stagger-step) * -1);
  transition: filter 600ms var(--motion-ease-calm);
}

.mood-btn:nth-child(1) .doodle-icon,
.mood-btn-wrapper:nth-child(1) .doodle-icon  { --motion-index: 0; }
.mood-btn-wrapper:nth-child(2) .doodle-icon  { --motion-index: 1; }
.mood-btn-wrapper:nth-child(3) .doodle-icon  { --motion-index: 2; }
.mood-btn-wrapper:nth-child(4) .doodle-icon  { --motion-index: 3; }
.mood-btn-wrapper:nth-child(5) .doodle-icon  { --motion-index: 4; }
.mood-btn-wrapper:nth-child(6) .doodle-icon  { --motion-index: 5; }
.mood-btn-wrapper:nth-child(7) .doodle-icon  { --motion-index: 6; }
.mood-btn-wrapper:nth-child(8) .doodle-icon  { --motion-index: 7; }
.mood-btn-wrapper:nth-child(9) .doodle-icon  { --motion-index: 8; }
.mood-btn-wrapper:nth-child(10) .doodle-icon { --motion-index: 9; }
.mood-btn-wrapper:nth-child(11) .doodle-icon { --motion-index: 10; }
.mood-btn-wrapper:nth-child(12) .doodle-icon { --motion-index: 11; }

/* Selected mood: slightly deeper breath + soft glow in the doodle's own hue.
   The drop-shadow color stays neutral here because the splat color lives
   inside the SVG; tinted glow per-mood can be added later via inline style. */
.mood-btn.active .doodle-icon {
  animation-name: doodle-breath-selected;
  filter: drop-shadow(0 0 var(--space-2) rgba(95, 106, 211, 0.25));
}

/* Hover: take over the per-button scale (was on .mood-btn, which clipped the
   doodle's own breath). Move it to the inner element so transforms compose. */
.mood-btn:hover {
  transform: none; /* override existing scale(1.1) from dashboard.css */
}
.mood-btn:hover .doodle-icon {
  animation-play-state: paused;
  transform: scale(1.06);
  transition: transform 320ms var(--motion-ease-calm);
}

/* Previous-day moods don't breathe — they're memory, not present state. */
.mood-btn.previous-day .doodle-icon {
  animation: none;
  opacity: 0.6;
}

/* Accessibility: honor reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .mood-btn .doodle-icon,
  .mood-btn.active .doodle-icon {
    animation: none;
  }
  .mood-btn:hover .doodle-icon {
    transform: none;
  }
}