/* ==========================================================================
   AL ARAFAH FRAGRANCE — ANIMATION STYLESHEET
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.06); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.anim-float { animation: floatSlow 5s ease-in-out infinite; }
.anim-glow { animation: pulseGlow 4s ease-in-out infinite; }

.hero-title,
.hero-eyebrow,
.hero-desc,
.hero-ctas {
  animation: fadeUp 0.9s var(--ease-lux) both;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero-title { animation-delay: 0.2s; }
.hero-desc { animation-delay: 0.35s; }
.hero-ctas { animation-delay: 0.5s; }
.hero-visual { animation: fadeIn 1.2s var(--ease-lux) 0.4s both; }

.loader-spin {
  border: 3px solid var(--color-line);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  width: 40px; height: 40px;
  animation: spin 0.9s linear infinite;
}

/* Magnetic button micro-interaction handled via JS transform; base transition here */
.btn-magnetic { transition: transform 0.2s var(--ease-lux); }

/* Gradient animated text/backgrounds */
.gradient-anim-bg {
  background: linear-gradient(270deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
  background-size: 400% 400%;
  animation: shimmer 6s ease infinite;
}

/* Image zoom on hover container */
.img-zoom { overflow: hidden; /* border-radius: var(--radius-md);*/ }
.img-zoom img { transition: transform 0.8s var(--ease-lux); }
.img-zoom:hover img { transform: scale(1.08); }

/* Page transition fade */
body.page-enter { animation: fadeIn 0.5s var(--ease-lux) both; }