:root {
  --anim-speed: 0.6s;
  --anim-ease: ease-in-out;
}
[data-anim] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
  will-change: opacity, transform; /* performance hint */
}

/* When element is visible */
[data-anim].animate {
  opacity: 1;
  transform: translate(0, 0);
}

/* Specific start positions */
[data-anim="zoom-in"] { transform: scale(0.8); }
[data-anim].animate[data-anim="zoom-in"] { transform: scale(1); }

[data-anim="slide-left"] { transform: translateX(-40px); }
[data-anim].animate[data-anim="slide-left"] { transform: translateX(0); }

[data-anim="slide-right"] { transform: translateX(40px); }
[data-anim].animate[data-anim="slide-right"] { transform: translateX(0); }

/* --- Hover Effects --- */
button, .btn, .card, .product-img, img {
  transition: transform 0.3s var(--anim-ease), box-shadow 0.3s var(--anim-ease);
  will-change: transform, box-shadow;
}

button:hover, .btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* --- Floating Logo / Icons --- */
.logo img {
  animation: float 5s ease-in-out infinite;
  will-change: transform;
}

.header-icons i:hover {
  animation: pulse 1.2s infinite;
}

/* --- Keyframes --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- Subtle Load Animation --- */
.fade-on-load {
  opacity: 0;
  animation: fadeIn 0.8s var(--anim-ease) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}