/* ==========================================================================
   Mood Space Component
   Transform buttons into immersive spaces you enter
   ========================================================================== */

/* Breathing animation - subtle ambient pulse (applied to inner wrapper in physics mode) */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

/* Expansion animation - mood fills viewport */
@keyframes expand-to-fill {
  0% {
    transform: scale(1);
    border-radius: var(--radius-xl);
    z-index: 1;
  }
  100% {
    transform: scale(5);
    border-radius: 0;
    z-index: 100;
    opacity: 0;
  }
}

/* ==========================================================================
   Base Mood Space
   ========================================================================== */

.mood-space {
  position: relative;
  width: var(--mood-size-mobile);
  height: var(--mood-size-mobile);
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);

  /* Breathing animation (non-physics fallback) */
  animation: breathe var(--duration-ambient) ease-in-out infinite;

  /* Smooth transitions for hover */
  transition: box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

/* ==========================================================================
   Physics Mode
   When galaxy physics is active, orbs are absolutely positioned by JS.
   Breathing moves to inner wrapper to avoid transform conflict.
   ========================================================================== */

.mood-galaxy--physics .mood-space {
  position: absolute;
  top: 0;
  left: 0;
  /* Size driven by JS via --orb-size custom property */
  width: var(--orb-size, var(--mood-size-mobile));
  height: var(--orb-size, var(--mood-size-mobile));
  /* JS controls transform for positioning — no CSS animation on outer */
  animation: none;
  /* Prevent transition on transform (JS updates every frame) */
  transition: box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  will-change: transform;
}

/* Inner wrapper: carries breathing animation in physics mode */
.mood-space__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.mood-galaxy--physics .mood-space__inner {
  animation: breathe var(--duration-ambient) ease-in-out infinite;
}

/* ==========================================================================
   Mood Colors
   ========================================================================== */

.mood-space[data-mood="focus"] {
  background: linear-gradient(135deg, var(--color-focus) 0%, var(--color-focus-dim) 100%);
}

.mood-space[data-mood="calm"] {
  background: linear-gradient(135deg, var(--color-calm) 0%, var(--color-calm-dim) 100%);
  animation-duration: 6s; /* Slower breathing for calm */
}

.mood-space[data-mood="late_night"] {
  background: linear-gradient(135deg, var(--color-late-night) 0%, var(--color-late-night-dim) 100%);
  animation-duration: 5s;
}

.mood-space[data-mood="energize"] {
  background: linear-gradient(135deg, var(--color-energize) 0%, var(--color-energize-dim) 100%);
  animation-duration: 3s; /* Faster breathing for energize */
}

/* Physics mode: breathing durations move to inner wrapper */
.mood-galaxy--physics .mood-space[data-mood="calm"] .mood-space__inner {
  animation-duration: 6s;
}

.mood-galaxy--physics .mood-space[data-mood="late_night"] .mood-space__inner {
  animation-duration: 5s;
}

.mood-galaxy--physics .mood-space[data-mood="energize"] .mood-space__inner {
  animation-duration: 3s;
}

/* ==========================================================================
   Play Icon Overlay
   ========================================================================== */

.mood-space::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-2xl);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Hover / Focus States
   ========================================================================== */

.mood-space:hover,
.mood-space:focus-visible {
  box-shadow: var(--shadow-glow);
  animation-play-state: paused; /* Pause breathing on hover (non-physics) */
  transform: scale(1.08); /* Lift effect (non-physics fallback) */
}

/* In physics mode, JS controls transform — no CSS scale on outer element */
.mood-galaxy--physics .mood-space:hover,
.mood-galaxy--physics .mood-space:focus-visible {
  transform: none;
}

/* In physics mode, pause inner wrapper breathing on hover */
.mood-galaxy--physics .mood-space:hover .mood-space__inner,
.mood-galaxy--physics .mood-space:focus-visible .mood-space__inner {
  animation-play-state: paused;
}

.mood-space:hover::after,
.mood-space:focus-visible::after {
  opacity: 0.9;
}

/* Active press state */
.mood-space:active {
  opacity: 0.9;
}

/* ==========================================================================
   Expansion State
   ========================================================================== */

.mood-space--expanding {
  animation: expand-to-fill var(--duration-normal) var(--ease-out) forwards;
  pointer-events: none;
  z-index: 100;
  transform-origin: center center;
}

.mood-space--expanding .mood-space__inner {
  animation: none;
}

.mood-space--expanding::after {
  opacity: 0;
}

/* ==========================================================================
   Inactive Dimming
   When a mood is being selected, dim the others
   ========================================================================== */

.mood-galaxy--selecting .mood-space:not(.mood-space--expanding) {
  opacity: 0.3;
  pointer-events: none;
  animation-play-state: paused;
}

.mood-galaxy--selecting .mood-space:not(.mood-space--expanding) .mood-space__inner {
  animation-play-state: paused;
}

/* ==========================================================================
   Responsive (non-physics fallback sizing)
   ========================================================================== */

/* Tablet */
@media (min-width: 768px) {
  .mood-space {
    width: var(--mood-size-tablet);
    height: var(--mood-size-tablet);
    font-size: var(--text-xl);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .mood-space {
    width: var(--mood-size-desktop);
    height: var(--mood-size-desktop);
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mood-space {
    animation: none;
  }

  .mood-space__inner {
    animation: none;
  }

  .mood-space--expanding {
    animation: none;
    opacity: 0;
  }
}