/* Shake phone ring keyframes */
@keyframes phone-shake {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-1px) rotate(-12deg); }
  20%  { transform: translateX(2px) rotate(12deg); }
  30%  { transform: translateX(-2px) rotate(-8deg); }
  40%  { transform: translateX(2px) rotate(8deg); }
  50%  { transform: translateX(-1px) rotate(-4deg); }
  60%  { transform: translateX(1px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Kích hoạt khi hover hoặc focus (keyboard) trên nút */
.group:hover .phone-icon,
.group:focus .phone-icon,
.group:focus-visible .phone-icon {
  animation: phone-shake 0.8s linear infinite;
  transform-origin: center;
}

/* Giảm chuyển động cho người dùng chọn reduced motion */
@media (prefers-reduced-motion: reduce) {
  .group:hover .phone-icon,
  .group:focus .phone-icon,
  .group:focus-visible .phone-icon {
    animation: none;
  }
}

/* slow floating for leaves in about page */
@keyframes float-slow {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(-6px) rotate(2deg); }
  60%  { transform: translateY(3px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .leaf-float { animation: float-slow 6s ease-in-out infinite; transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf-float { animation: none !important; }
}

/* subtle drop shadow for svg shapes (better on all browsers) */
.leaf-shadow { filter: drop-shadow(0 6px 10px rgba(6,95,70,0.08)); }

/* make sure svg don't capture pointer events */
.decor-leaf { pointer-events: none; }