/* ============================================================
   Aromates Spices — animations.css
   Keyframes, transitions, AOS supplements, hover effects
   ============================================================ */

/* ── 1. Keyframes ────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes subtleZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50%       { box-shadow: 0 4px 32px rgba(37, 211, 102, 0.7), 0 0 0 8px rgba(37, 211, 102, 0.08); }
}

@keyframes counterUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. Utility Animation Classes ────────────────────────── */

.animate-fade-in      { animation: fadeIn      0.6s ease both; }
.animate-fade-in-up   { animation: fadeInUp    0.6s ease both; }
.animate-fade-in-down { animation: fadeInDown  0.6s ease both; }
.animate-zoom-in      { animation: zoomIn      0.6s ease both; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── 3. Scroll-Reveal (.reveal parent / JS adds .revealed) ──
   IMPORTANT: Only the PARENT wrapper uses .reveal or
   .reveal-stagger. Individual cards should NOT carry these
   classes directly — they'll stay invisible if the observer
   misses them. For individual cards use data-aos instead.
   ─────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.from-left  { transform: translateX(-28px); }
.reveal.from-right { transform: translateX(28px); }
.reveal.zoom       { transform: scale(0.94); }

.reveal.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered children — parent wrapper gets .reveal-stagger */
.reveal-stagger {
  /* No opacity on the parent itself — it stays visible */
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.revealed > *:nth-child(1)  { transition-delay:   0ms; }
.reveal-stagger.revealed > *:nth-child(2)  { transition-delay:  80ms; }
.reveal-stagger.revealed > *:nth-child(3)  { transition-delay: 160ms; }
.reveal-stagger.revealed > *:nth-child(4)  { transition-delay: 240ms; }
.reveal-stagger.revealed > *:nth-child(5)  { transition-delay: 320ms; }
.reveal-stagger.revealed > *:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger.revealed > *:nth-child(7)  { transition-delay: 480ms; }
.reveal-stagger.revealed > *:nth-child(8)  { transition-delay: 560ms; }

.reveal-stagger.revealed > * {
  opacity: 1 !important;
  transform: none !important;
}

/* Safety: if JS never fires, show everything after 2s via CSS */
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}

.reveal:not(.revealed) {
  animation: revealFallback 0.7s 2.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-stagger:not(.revealed) > * {
  animation: revealFallback 0.6s 2.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 4. Hero Text Entrance ───────────────────────────────── */

.hero-badge    { animation: fadeInDown 0.7s 0.2s ease both; }
.hero-heading  { animation: fadeInUp   0.8s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-subtitle { animation: fadeInUp   0.8s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-actions  { animation: fadeInUp   0.8s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── 5. AOS safety overrides ─────────────────────────────── */

[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

/* After 3s, force-show any AOS element that never animated
   (catches cases where AOS offset skips in-viewport elements) */
@keyframes aosForceShow {
  to { opacity: 1; transform: none; }
}

[data-aos]:not(.aos-animate) {
  animation: aosForceShow 0.5s 3s ease both;
}

/* ── 6. Card Hover Effects ───────────────────────────────── */

.hover-zoom img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-zoom:hover img { transform: scale(1.08); }

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.hover-gold-border {
  border: 1px solid rgba(77, 70, 53, 0.1);
  transition: border-color 0.3s ease;
}
.hover-gold-border:hover {
  border-color: rgba(242, 202, 80, 0.35);
}

/* ── 7. Button Micro-Interactions ────────────────────────── */

.btn {
  transition:
    transform     0.2s ease,
    box-shadow    0.2s ease,
    background    0.3s ease,
    color         0.3s ease,
    border-color  0.3s ease;
}

.btn:active { transform: scale(0.97); }

/* Shimmer sweep on .btn-solid */
.btn-solid {
  position: relative;
  overflow: hidden;
}
.btn-solid::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn-solid:hover::after { left: 160%; }

/* ── 8. Process Step Icon ────────────────────────────────── */

.process-step__icon {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.process-step:hover .process-step__icon {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 6px rgba(242, 202, 80, 0.08);
  transform: scale(1.08);
}

/* ── 9. Preloader ────────────────────────────────────────── */

#preloader {
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-brand  { animation: fadeIn 0.5s ease; }
.preloader-spinner { animation: spin 0.8s linear infinite; }

/* ── 10. WhatsApp Pulse ──────────────────────────────────── */

.whatsapp-btn {
  animation: waPulse 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.whatsapp-btn:hover {
  transform: scale(1.12);
  animation-play-state: paused;
}

/* ── 11. Scroll-to-Top ───────────────────────────────────── */

.scroll-top {
  transition:
    opacity    0.35s ease,
    visibility 0.35s ease,
    transform  0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease;
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── 12. Shimmer Text ────────────────────────────────────── */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--clr-primary) 0%,
    var(--clr-primary-fixed) 40%,
    var(--clr-primary) 60%,
    var(--clr-primary-fixed) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ── 13. Form Interactions ───────────────────────────────── */

.form-group:focus-within label,
.form-group:focus-within .form-label {
  color: var(--clr-primary);
}

/* ── 14. Stat Counter ────────────────────────────────────── */

.stat-card {
  transition: border-color 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-card.counted {
  animation: counterUp 0.6s ease both;
}

/* ── 15. Parallax Perf ───────────────────────────────────── */

.parallax-bg {
  will-change: transform;
  backface-visibility: hidden;
}

/* ── 16. Arrow Link ──────────────────────────────────────── */

.arrow-link .arrow-icon {
  display: inline-block;
  transition: transform 0.25s ease;
}
.arrow-link:hover .arrow-icon { transform: translateX(6px); }

/* ── 17. Reduce Motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .parallax-bg { transform: none !important; }
  .whatsapp-btn { animation: none; }
  .preloader-spinner { animation: spin 2s linear infinite; }
  .reveal,
  .reveal-stagger > *,
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}