/* =========================================================================
   CleanPro Plus — Animation primitives
   Scroll-reveal base states (driven by GSAP/ScrollTrigger in animations.js)
   plus lightweight CSS keyframes for ambient background effects.
   ========================================================================= */

/* Scroll reveal base state: JS adds .is-visible when triggered.
   If JS fails to load, content is still visible (progressive enhancement). */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js-anim-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}
.js-anim-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              transform 0.9s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.js-anim-ready [data-reveal="fade"] { transform: none; }
.js-anim-ready [data-reveal="zoom"] { transform: scale(0.94); }
.js-anim-ready [data-reveal="zoom"].is-visible { transform: scale(1); }
.js-anim-ready [data-reveal="left"] { transform: translateX(-36px); }
.js-anim-ready [data-reveal="left"].is-visible { transform: translateX(0); }
.js-anim-ready [data-reveal="right"] { transform: translateX(36px); }
.js-anim-ready [data-reveal="right"].is-visible { transform: translateX(0); }

/* Ambient bubble / sparkle drift used in hero + section backgrounds */
@keyframes cpp-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -18px, 0); }
}
@keyframes cpp-float-slow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6px, -26px, 0) scale(1.06); }
}
@keyframes cpp-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes cpp-sparkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes cpp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cpp-pulse-ring {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

.bg-decor { position: absolute; pointer-events: none; z-index: 0; }
.bg-decor.bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(8,185,234,0.18));
  border: 1px solid rgba(255,255,255,0.5);
  animation: cpp-float 7s ease-in-out infinite;
}
.bg-decor.sparkle { animation: cpp-sparkle 2.6s ease-in-out infinite; }
.bg-decor.blob {
  filter: blur(60px);
  opacity: 0.55;
  animation: cpp-float-slow 12s ease-in-out infinite;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  animation: cpp-marquee 28s linear infinite;
}
@keyframes cpp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bg-decor, .marquee-track { animation: none !important; }
}