/* ==================================================================
   DIGI MOJO MARKETING — ANIMATION LIBRARY
   Keyframes + utility classes consumed by GSAP/AOS/CSS directly.
   ================================================================== */

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes floatX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
@keyframes floatRotate { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(4deg); } 100% { transform: translateY(0) rotate(0deg); } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blobMove { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-40px) scale(1.08); } 66% { transform: translate(-20px,20px) scale(.95); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes typewriterBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bounceArrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.float-anim { animation: floatY 5s ease-in-out infinite; }
.float-anim-slow { animation: floatY 8s ease-in-out infinite; }
.float-anim-x { animation: floatX 6s ease-in-out infinite; }
.float-anim-rotate { animation: floatRotate 7s ease-in-out infinite; }
.spin-slow { animation: spinSlow 18s linear infinite; }
.blob { animation: blobMove 14s ease-in-out infinite; }

.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .6s; }

/* Card hover tilt helper (JS sets rotateX/rotateY custom props) */
.tilt-card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; }

/* Button shine sweep */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
}
.btn-shine:hover::after { animation: shineSweep .9s ease; }
@keyframes shineSweep { from { left: -60%; } to { left: 130%; } }

/* Scroll-reveal base states (activated by JS adding .in-view) */
.reveal-up, .reveal-fade, .reveal-scale { transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium); }
.in-view.reveal-up { opacity: 1; transform: translateY(0); }
.in-view.reveal-fade { opacity: 1; }
.in-view.reveal-scale { opacity: 1; transform: scale(1); }

/* Stagger children helper */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Text reveal line mask (hero headline) */
.line-mask { overflow: hidden; display: inline-block; }
.line-mask > span { display: inline-block; transform: translateY(110%); }

/* Loading dots */
.dot-flashing { position: relative; width: 8px; height: 8px; border-radius: 5px; background-color: var(--color-accent); color: var(--color-accent); animation: dotFlashing 1s infinite linear alternate; animation-delay: .5s; display: inline-block; margin: 0 8px; }
.dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; width: 8px; height: 8px; border-radius: 5px; background-color: var(--color-accent); }
.dot-flashing::before { left: -14px; animation: dotFlashing 1s infinite alternate; animation-delay: 0s; }
.dot-flashing::after { left: 14px; animation: dotFlashing 1s infinite alternate; animation-delay: 1s; }
@keyframes dotFlashing { 0% { background-color: var(--color-accent); } 50%,100% { background-color: rgba(242,117,56,.25); } }

/* Marquee pause on hover */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* Ripple button click effect */
.ripple { position: relative; overflow: hidden; }
.ripple-circle { 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 support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}