/* ==========================================================
   Q-MAX — Animation Keyframes & Classes
   ========================================================== */

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(36px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-9px); }
}
@keyframes spinSlow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(212,160,23,.45); }
  50%     { box-shadow:0 0 0 14px rgba(212,160,23,0); }
}
@keyframes navIn {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes ripple {
  to { transform:scale(4); opacity:0; }
}
@keyframes filterFade {
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ── Hero Entrance Sequence ─────────────────────────────── */
.hero-badge   { animation:fadeInUp .6s ease .2s both; }
.hero-title   { animation:fadeInUp .7s ease .35s both; }
.hero-tagline { animation:fadeInUp .7s ease .5s both; }
.hero-desc    { animation:fadeInUp .65s ease .6s both; }
.hero-flags   { animation:fadeInUp .6s ease .7s both; }
.hero-actions { animation:fadeInUp .6s ease .82s both; }
.scroll-hint  { animation:fadeIn .8s ease 1.3s both; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar { animation:navIn .5s ease both; }

/* ── Shimmer Gold Text ──────────────────────────────────── */
.shimmer-text {
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 30%,var(--gold-bright) 50%,var(--gold-light) 70%,var(--gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 3.5s linear infinite;
}

/* ── Floating logo ──────────────────────────────────────── */
.about-logo-float { animation:none; }

/* ── Button Ripple ──────────────────────────────────────── */
.btn-ripple-el {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.28); transform:scale(0);
  animation:ripple .6s linear; pointer-events:none;
}

/* ── Stagger delays for grid items ─────────────────────── */
/* Products grid */
.products-grid .product-card:nth-child(1)  { transition-delay:.04s; }
.products-grid .product-card:nth-child(2)  { transition-delay:.08s; }
.products-grid .product-card:nth-child(3)  { transition-delay:.12s; }
.products-grid .product-card:nth-child(4)  { transition-delay:.16s; }
.products-grid .product-card:nth-child(5)  { transition-delay:.20s; }
.products-grid .product-card:nth-child(6)  { transition-delay:.24s; }
.products-grid .product-card:nth-child(7)  { transition-delay:.28s; }
.products-grid .product-card:nth-child(8)  { transition-delay:.32s; }
.products-grid .product-card:nth-child(9)  { transition-delay:.36s; }
.products-grid .product-card:nth-child(10) { transition-delay:.40s; }
.products-grid .product-card:nth-child(11) { transition-delay:.44s; }
.products-grid .product-card:nth-child(12) { transition-delay:.48s; }
.products-grid .product-card:nth-child(13) { transition-delay:.52s; }
.products-grid .product-card:nth-child(14) { transition-delay:.56s; }
.products-grid .product-card:nth-child(15) { transition-delay:.60s; }
.products-grid .product-card:nth-child(16) { transition-delay:.64s; }

/* Feature cards */
.features-grid .feature-card:nth-child(1) { transition-delay:.06s; }
.features-grid .feature-card:nth-child(2) { transition-delay:.13s; }
.features-grid .feature-card:nth-child(3) { transition-delay:.20s; }
.features-grid .feature-card:nth-child(4) { transition-delay:.27s; }

/* ── Filtered card appear ───────────────────────────────── */
.product-card.filter-show {
  animation:filterFade .32s ease both;
}

/* ── Mobile menu slide ──────────────────────────────────── */
.nav-links.open {
  animation:fadeInUp .25s ease both;
}

/* ── Glow button pulse on hover ─────────────────────────── */
.btn-primary:hover { animation:glowPulse 1.6s ease infinite; }

/* ── Oil float for page hero images ─────────────────────── */
@keyframes oilFloat {
  0%   { transform: translateY(0px) rotate(0deg) scale(1); }
  33%  { transform: translateY(-12px) rotate(1.5deg) scale(1.02); }
  66%  { transform: translateY(-6px) rotate(-1deg) scale(1.01); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* ── Reduced motion override ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}