/* "Why Buy Direct?" card-emoji hover animations.
   Hover triggers on the whole card rectangle, not just the emoji.
   Wrapped in prefers-reduced-motion so accessibility users see static icons. */
.why-card { overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.why-icon { display: inline-block; transform-origin: 50% 50%; }
.icon-money { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .why-card:hover { border-color: var(--color-brand); transform: translateY(-2px); }

  /* Money — soft golden pulse + 3 sparkles at the original 1.4s cadence.
     ::before peaks at t=0.7s and t=2.1s.
     ::after  peaks at t=1.4s.
     Glow runs as a single 2.1s pulse, finishing with the last spark.
     opacity:0 base on the pseudos = invisible once the animation ends. */
  .why-card:hover .icon-money {
    animation: money-shine 2.1s ease-in-out 1;
  }
  .why-card:hover .icon-money::before,
  .why-card:hover .icon-money::after {
    content: "✨";
    position: absolute;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    animation-name: sparkle;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
  }
  .why-card:hover .icon-money::before { top: -4px;  right: -12px; animation-iteration-count: 2; }
  .why-card:hover .icon-money::after  { bottom: -4px; left: -12px; animation-iteration-count: 1; animation-delay: 0.7s; }
  @keyframes money-shine {
    0%, 100% { filter: drop-shadow(0 0 4px  rgba(245, 196, 35, 0.30)); }
    50%      { filter: drop-shadow(0 0 18px rgba(245, 196, 35, 0.85)); }
  }
  @keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(15deg); }
  }

  /* Truck — drives off the right edge, reappears from the left, returns to center. */
  .why-card:hover .icon-truck {
    animation: truck-drive 1.6s ease-in-out 1;
  }
  @keyframes truck-drive {
    0%      { transform: translateX(0); }
    45%     { transform: translateX(-700%); }
    45.01%  { transform: translateX(700%); }
    100%    { transform: translateX(0); }
  }

  /* Phone — ring shake, exactly 3 rings then stops (~1.65s total). */
  .why-card:hover .icon-phone {
    animation: phone-ring 0.55s ease-in-out 3;
  }
  @keyframes phone-ring {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-15deg); }
    40%      { transform: rotate(15deg); }
    60%      { transform: rotate(-10deg); }
    80%      { transform: rotate(10deg); }
  }

  /* Returns — single 360° clockwise spin. */
  .why-card:hover .icon-returns {
    animation: returns-spin 0.8s ease-in-out 1;
  }
  @keyframes returns-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}