/* ==========================================================================
   CommerceHub — Animation Library
   Scroll reveals, floating shapes, gradient motion, micro-interactions
   ========================================================================== */

[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal="zoom"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-18px);} }
.float{ animation:floatY 5s ease-in-out infinite; }
.float-slow{ animation:floatY 8s ease-in-out infinite; }
.float-delay{ animation-delay:1.2s; }

@keyframes rotateSlow{ to{ transform:rotate(360deg);} }
.spin-slow{ animation:rotateSlow 18s linear infinite; }

@keyframes gradientShift{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
.animated-gradient{ background-size:200% 200%; animation:gradientShift 8s ease infinite; }

@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }
.fade-in-up{ animation:fadeInUp .8s var(--ease-premium) both; }

@keyframes scaleIn{ from{ opacity:0; transform:scale(.85);} to{ opacity:1; transform:scale(1);} }
.scale-in{ animation:scaleIn .5s var(--ease-premium) both; }

@keyframes shimmerText{ 0%{ background-position:-200% 0;} 100%{ background-position:200% 0;} }
.shimmer-text{
  background:linear-gradient(90deg, var(--gray-900) 0%, var(--color-red-500) 50%, var(--gray-900) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerText 4s linear infinite;
}

/* Marquee for trust logos / testimonials strip */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marqueeScroll 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Glow orb backgrounds */
.orb-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); }

/* Counter pop */
@keyframes countPop{ 0%{ transform:scale(.8); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
.count-pop{ animation:countPop .5s var(--ease-premium) both; }

/* Button ripple micro interaction handled via JS adding .ripple span */
.ripple-span{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:rippleAnim .6s linear; pointer-events:none; }
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}