/* ═══════════════════════════════════════════════════════════════
   Hoppi Homepage — enhancements
   - 6 hero icons with distinct Hoppi brand colors
   - Team member hover animations
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero 6-icon color variants ───────────────────────────── */
.icon-container.hoppi-ic-charcoal,
.icon-container.hoppi-ic-pink,
.icon-container.hoppi-ic-peach,
.icon-container.hoppi-ic-air,
.icon-container.hoppi-ic-latte,
.icon-container.hoppi-ic-pink-dark {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;
  will-change: transform;
}
.icon-container.hoppi-ic-charcoal:hover,
.icon-container.hoppi-ic-pink:hover,
.icon-container.hoppi-ic-peach:hover,
.icon-container.hoppi-ic-air:hover,
.icon-container.hoppi-ic-latte:hover,
.icon-container.hoppi-ic-pink-dark:hover {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: 0 16px 32px rgba(40, 83, 107, 0.14);
}

.icon-container.hoppi-ic-charcoal  { background: #28536B !important; }
.icon-container.hoppi-ic-pink      { background: #EEB1D5 !important; }
.icon-container.hoppi-ic-peach     { background: #F7E3AF !important; }
.icon-container.hoppi-ic-air       { background: #C9EDFF !important; }
.icon-container.hoppi-ic-latte     { background: #FFF5E1 !important; }
.icon-container.hoppi-ic-pink-dark { background: #D97BB4 !important; }

/* Icons colored to match bg — charcoal SVG → white on dark bg, charcoal on light bg */
.icon-container.hoppi-ic-charcoal  img.icon,
.icon-container.hoppi-ic-pink-dark img.icon {
  filter: brightness(0) invert(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-container.hoppi-ic-pink    img.icon,
.icon-container.hoppi-ic-peach   img.icon,
.icon-container.hoppi-ic-air     img.icon,
.icon-container.hoppi-ic-latte   img.icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(20%) saturate(1345%) hue-rotate(165deg) brightness(94%) contrast(86%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-container.hoppi-ic-charcoal:hover img.icon,
.icon-container.hoppi-ic-pink:hover img.icon,
.icon-container.hoppi-ic-peach:hover img.icon,
.icon-container.hoppi-ic-air:hover img.icon,
.icon-container.hoppi-ic-latte:hover img.icon,
.icon-container.hoppi-ic-pink-dark:hover img.icon {
  transform: rotate(8deg) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .icon-container.hoppi-ic-charcoal,
  .icon-container.hoppi-ic-pink,
  .icon-container.hoppi-ic-peach,
  .icon-container.hoppi-ic-air,
  .icon-container.hoppi-ic-latte,
  .icon-container.hoppi-ic-pink-dark,
  .icon-container[class*="hoppi-ic-"] img.icon {
    transition: none !important;
  }
}

/* ─── Team member hover animations ─────────────────────────── */
.team-member-info {
  position: relative;
  padding: 8px;
  border-radius: 20px;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.team-member-info:hover {
  background: linear-gradient(135deg, #FFF5E1 0%, #FFE3EE 100%);
  transform: translateY(-3px);
}
.team-member-medium {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border 0.3s ease;
  border: 3px solid transparent;
  box-shadow: 0 2px 6px rgba(40, 83, 107, 0.08);
}
.team-member-info:hover .team-member-medium {
  transform: scale(1.08) rotate(-3deg);
  border-color: #EEB1D5;
  box-shadow: 0 12px 28px rgba(40, 83, 107, 0.14), 0 0 0 6px rgba(238, 177, 213, 0.18);
}
.team-member-info h4 {
  transition: color 0.25s ease, transform 0.25s ease;
}
.team-member-info:hover h4 {
  color: #D97BB4;
  transform: translateX(2px);
}
.team-member-info .text-gray {
  transition: color 0.25s ease;
}
.team-member-info:hover .text-gray {
  color: #28536B;
}

@media (prefers-reduced-motion: reduce) {
  .team-member-info,
  .team-member-medium,
  .team-member-info h4,
  .team-member-info .text-gray {
    transition: none !important;
  }
  .team-member-info:hover,
  .team-member-info:hover .team-member-medium,
  .team-member-info:hover h4 {
    transform: none !important;
  }
}