/* ============================================================
   ROSEVOW — Premium Jewellery E-Commerce
   Animations & Transitions
   ============================================================
   Table of Contents:
   1. Keyframe Definitions
   2. Scroll Animation Classes
   3. Stagger Delay Utilities
   4. Gold Shimmer Text Effect
   5. Shimmer Loading Background
   6. Utility Animation Classes
   7. Hover Transition Utilities
   8. Page Transitions
   9. Reduced Motion Preference
   ============================================================ */

/* ==========================================================
   1. KEYFRAME DEFINITIONS
   ========================================================== */

/* Continuous horizontal ticker (e.g. marquee banners) */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Simple opacity fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Directional slide entrances */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

/* Scale entrance */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Gentle floating motion (decorative elements) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Subtle pulse (draw attention) */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Gold shimmer sweep for premium text */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Sparkle pop (decorative accents) */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%      { opacity: 1; transform: scale(1); }
}

/* Elastic bounce entrance */
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Horizontal shake (error / attention) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Continuous rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton-loader shimmer */
@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

/* Hero image Ken Burns zoom */
@keyframes heroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}


/* ==========================================================
   2. SCROLL ANIMATION CLASSES
   ========================================================== */

/* Base: hidden until revealed by IntersectionObserver */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: slide from left */
.animate-on-scroll.slide-left {
  transform: translateX(-30px);
}

.animate-on-scroll.slide-left.visible {
  transform: translateX(0);
}

/* Variant: slide from right */
.animate-on-scroll.slide-right {
  transform: translateX(30px);
}

.animate-on-scroll.slide-right.visible {
  transform: translateX(0);
}

/* Variant: scale entrance */
.animate-on-scroll.scale-in {
  transform: scale(0.9);
}

.animate-on-scroll.scale-in.visible {
  transform: scale(1);
}


/* ==========================================================
   3. STAGGER DELAY UTILITIES
   ========================================================== */

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }


/* ==========================================================
   4. GOLD SHIMMER TEXT EFFECT
   ========================================================== */

.gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent-light) 25%,
    var(--color-accent) 50%,
    var(--color-accent-light) 75%,
    var(--color-accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}


/* ==========================================================
   5. SHIMMER LOADING BACKGROUND
   ========================================================== */

.shimmer-bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
}


/* ==========================================================
   6. UTILITY ANIMATION CLASSES
   ========================================================== */

.animate-fade-in   { animation: fadeIn 0.6s ease forwards; }
.animate-slide-up  { animation: slideUp 0.6s ease forwards; }
.animate-slide-down { animation: slideDown 0.6s ease forwards; }
.animate-scale-in  { animation: scaleIn 0.4s ease forwards; }
.animate-bounce-in { animation: bounceIn 0.6s ease forwards; }
.animate-float     { animation: float 3s ease-in-out infinite; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }
.animate-spin      { animation: spin 1s linear infinite; }
.animate-shake     { animation: shake 0.5s ease; }


/* ==========================================================
   7. HOVER TRANSITION UTILITIES
   ========================================================== */

/* Lift on hover — cards, buttons */
.hover-lift {
  transition: transform var(--transition-base, 0.3s ease),
              box-shadow var(--transition-base, 0.3s ease);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Scale on hover — thumbnails, icons */
.hover-scale {
  transition: transform var(--transition-base, 0.3s ease);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Glow on hover — CTAs, accent elements */
.hover-glow {
  transition: box-shadow var(--transition-base, 0.3s ease);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(232, 93, 117, 0.3);
}


/* ==========================================================
   8. PAGE TRANSITIONS
   ========================================================== */

.page-enter {
  animation: fadeIn 0.4s ease;
}

.page-exit {
  animation: fadeOut 0.3s ease forwards;
}


/* ==========================================================
   9. REDUCED MOTION PREFERENCE
   Respects users who prefer minimal motion for accessibility.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}