/* ================================================================
   css/animations.css — Quality Accessories Modern Animations
   ================================================================
   Modern scroll-driven card reveals with stagger, scale,
   slide, and fade effects. GPU-accelerated via transform/opacity.
   ================================================================ */

/* ─── Keyframes ─────────────────────────────────────────────── */

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

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

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

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

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

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.75); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

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

/* ─── Hero entrance ─────────────────────────────────────────── */
.hero-tag      { animation: fadeDown 0.5s cubic-bezier(.22,.68,0,1.2) both; animation-delay: 0.05s; }
.hero-title    { animation: fadeUp  0.6s cubic-bezier(.22,.68,0,1.1)  both; animation-delay: 0.18s; }
.hero-subtitle { animation: fadeUp  0.6s cubic-bezier(.22,.68,0,1.1)  both; animation-delay: 0.30s; }
.hero-cta      { animation: fadeUp  0.6s cubic-bezier(.22,.68,0,1.2)  both; animation-delay: 0.44s; }
.hero-trust    { animation: fadeUp  0.5s ease                          both; animation-delay: 0.58s; }

/* ─── Base reveal state (before JS adds .visible) ───────────── */
/* Every .reveal element starts invisible & shifted down */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  /* Long transition so even fast scrollers see the motion */
  transition:
    opacity  0.55s cubic-bezier(.22,.68,0,1.1),
    transform 0.55s cubic-bezier(.22,.68,0,1.1);
  will-change: opacity, transform;
}

/* Triggered by IntersectionObserver in main.js (adds .revealed class) */
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Card-specific reveal: scale + fade ────────────────────── */
/* Product cards, feature cards, beach cards get this variant */
.product-card.reveal,
.feature-card.reveal,
.beach-card.reveal,
.testimonial-card.reveal,
.stat-card.reveal,
.buyer-card.reveal,
.panel-card.reveal {
  opacity: 0;
  transform: scale(0.93) translateY(20px);
  transition:
    opacity   0.5s cubic-bezier(.22,.68,0,1.15),
    transform 0.5s cubic-bezier(.22,.68,0,1.15);
}

.product-card.reveal.revealed,
.feature-card.reveal.revealed,
.beach-card.reveal.revealed,
.testimonial-card.reveal.revealed,
.stat-card.reveal.revealed,
.buyer-card.reveal.revealed,
.panel-card.reveal.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─── Stagger grid: each child gets an auto delay ───────────── */
/* Applied to the grid wrapper; JS sets --stagger-i on each child */
.products-grid .product-card,
.features-grid .feature-card,
#featured-products .product-card {
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}

/* ─── Stagger reveal (section headings, lists) ──────────────── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.45s cubic-bezier(.22,.68,0,1.1),
    transform 0.45s cubic-bezier(.22,.68,0,1.1);
}

.reveal-stagger.revealed > *:nth-child(1)  { opacity:1; transform:none; transition-delay: 0.00s; }
.reveal-stagger.revealed > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 0.07s; }
.reveal-stagger.revealed > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 0.14s; }
.reveal-stagger.revealed > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 0.21s; }
.reveal-stagger.revealed > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 0.28s; }
.reveal-stagger.revealed > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 0.35s; }
.reveal-stagger.revealed > *:nth-child(7)  { opacity:1; transform:none; transition-delay: 0.42s; }
.reveal-stagger.revealed > *:nth-child(8)  { opacity:1; transform:none; transition-delay: 0.49s; }
.reveal-stagger.revealed > *:nth-child(9)  { opacity:1; transform:none; transition-delay: 0.56s; }
.reveal-stagger.revealed > *:nth-child(10) { opacity:1; transform:none; transition-delay: 0.63s; }

/* ─── Slide-in variants ─────────────────────────────────────── */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity  0.55s cubic-bezier(.22,.68,0,1.1),
    transform 0.55s cubic-bezier(.22,.68,0,1.1);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity  0.55s cubic-bezier(.22,.68,0,1.1),
    transform 0.55s cubic-bezier(.22,.68,0,1.1);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ─── Pop-in (icons, badges, small chips) ───────────────────── */
.reveal-pop {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity  0.4s cubic-bezier(.22,.68,0,1.3),
    transform 0.4s cubic-bezier(.22,.68,0,1.3);
}
.reveal-pop.visible { opacity:1; transform:scale(1); }

/* ─── Image shimmer loading placeholder ─────────────────────── */
.img-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-stripe) 25%,
    rgba(255,255,255,0.06) 50%,
    var(--color-stripe) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

/* ─── Card hover micro-interactions ────────────────────────────
   These work on top of the reveal animation.
   Hover = lift + subtle shadow deepening.                       */
.product-card {
  transition:
    transform 0.28s cubic-bezier(.22,.68,0,1.2),
    box-shadow 0.28s ease,
    border-color 0.2s ease;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28), 0 4px 12px rgba(45,107,228,0.12);
}

/* ─── Product card image zoom on hover ──────────────────────── */
.product-card-image { overflow: hidden; }
.product-card-image img {
  transition: transform 0.5s cubic-bezier(.22,.68,0,1.1);
}
.product-card:hover .product-card-image img {
  transform: scale(1.07);
}

/* ─── Button press feel ─────────────────────────────────────── */
.btn:active {
  transform: scale(0.97);
}

/* ─── Page-level loading bar ────────────────────────────────── */
#page-loader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #60a5fa, var(--color-accent));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
#page-loader.hidden { opacity: 0; pointer-events: none; }

/* ─── Mobile nav drawer slide-down ─────────────────────────── */
.navbar-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(.22,.68,0,1.1), opacity 0.3s ease;
  opacity: 0;
  display: flex !important;   /* always in DOM, hidden via max-height */
  flex-direction: column;
}
.navbar-mobile.open {
  max-height: 400px;
  opacity: 1;
}

/* ─── Stat counter pop ──────────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0.3; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1;   transform: translateY(0)   scale(1); }
}
.stat-number { animation: countUp 0.4s cubic-bezier(.22,.68,0,1.2) both; }

/* ─── Reduce motion: respect user preference ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-stagger > *,
  .reveal-left,
  .reveal-right,
  .reveal-pop {
    opacity: 1 !important;
    transform: none !important;
  }
}