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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 18px 30px rgba(36, 21, 30, 0.16);
  }
  50% {
    box-shadow: 0 24px 40px rgba(123, 41, 63, 0.2);
  }
}

@keyframes dropSettle {
  0% {
    transform: translateY(18px) scale(0.94);
    opacity: 0;
  }
  60% {
    transform: translateY(-6px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes routeFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel-fade,
.landing-copy,
.suggestion-section,
.wardrobe-item,
.source-item {
  animation: fadeUp 500ms ease both;
}

.source-item,
.wardrobe-item {
  transition: all 0.2s ease;
}

.source-item:hover,
.wardrobe-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.mode-switcher-button:hover,
.pinterest-cta-button:hover,
.saved-look-card:hover,
.scope-button:hover {
  transform: translateY(-2px);
}

.mood-card:hover {
  transform: scale(1.02);
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.12),
    0 10px 20px rgba(0, 0, 0, 0.08);
}

.landing-mood-card:hover,
.feature-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 34px 62px rgba(35, 18, 25, 0.22);
}

.pinterest-cta-button:hover {
  background: var(--pinterest);
  color: #fff7f5;
}

.canvas-item {
  transition:
    left 140ms ease,
    top 140ms ease,
    transform 200ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease;
}

.canvas-item.is-new {
  animation:
    pulseGlow 500ms ease,
    dropSettle 460ms ease;
}