/**
 * GPS Webtonic Animations CSS
 * All keyframe animations and effects
 * Converted from Next.js to pure CSS
 */

/* ===================================
   FLOATING ANIMATIONS
   =================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-50px);
    }
}

@keyframes float1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -20px) rotate(2deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(-1deg);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-25px, 15px) rotate(-1deg);
    }
    50% {
        transform: translate(20px, -10px) rotate(1deg);
    }
    75% {
        transform: translate(-10px, -25px) rotate(-0.5deg);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(25px, -30px) rotate(1.5deg);
    }
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: translateY(-15px) rotateX(8deg) rotateY(8deg);
    }
    50% {
        transform: translateY(-25px) rotateX(0deg) rotateY(15deg);
    }
    75% {
        transform: translateY(-15px) rotateX(-8deg) rotateY(8deg);
    }
}

@keyframes floatY {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ===================================
   ROTATION ANIMATIONS
   =================================== */

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotateIcon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===================================
   PULSE ANIMATIONS
   =================================== */

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.05);
    }
}

@keyframes centerPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 25px 50px rgba(28, 117, 179, 0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 30px 60px rgba(28, 117, 179, 0.4);
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(13, 114, 239, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 12px 35px rgba(13, 114, 239, 0.5);
    }
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* ===================================
   DRIFT & MOVEMENT ANIMATIONS
   =================================== */

@keyframes drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(50px, -30px);
    }
    66% {
        transform: translate(-30px, 40px);
    }
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ===================================
   FADE IN ANIMATIONS
   =================================== */

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

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

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

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

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

/* ===================================
   TITLE & TEXT ANIMATIONS
   =================================== */

@keyframes titleGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(13, 114, 239, 0.3));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 30px rgba(13, 114, 239, 0.5));
    }
}

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

/* ===================================
   PARTICLE ANIMATIONS
   =================================== */

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(0);
        opacity: 0;
    }
}

/* ===================================
   WAVE ANIMATIONS
   =================================== */

@keyframes wave {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25%);
    }
}

@-webkit-keyframes wave {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25%);
    }
}

/* ===================================
   COUNT UP ANIMATION
   =================================== */

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

/* ===================================
   ZOOM ANIMATIONS
   =================================== */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ===================================
   BOUNCE ANIMATION
   =================================== */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* ===================================
   SHAKE ANIMATION
   =================================== */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ===================================
   LOADING SPINNER
   =================================== */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===================================
   RIPPLE EFFECT
   =================================== */

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===================================
   GRADIENT ANIMATION
   =================================== */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===================================
   APPLY ANIMATIONS TO ELEMENTS
   =================================== */

.animate-in {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.floating {
    animation: floating 5s ease-in-out infinite;
}

.floating-shape.shape-1 {
    animation: float1 8s ease-in-out infinite;
}

.floating-shape.shape-2 {
    animation: float2 10s ease-in-out infinite;
}

.floating-shape.shape-3 {
    animation: float3 9s ease-in-out infinite;
}

.geometric-sphere {
    animation: rotate 20s linear infinite;
}

.sphere-polygon {
    animation: pulse 3s ease-in-out infinite;
}

.blur1, .blur2 {
    animation: drift 15s linear infinite;
}

.blur2 {
    animation-delay: -7s;
}

.digital-icon.icon-seo {
    animation: rotateIcon 8s linear infinite;
}

.digital-icon.icon-social {
    animation: rotateIcon 6s linear infinite reverse;
}

.digital-icon.icon-ads {
    animation: rotateIcon 10s linear infinite;
}

.digital-icon.icon-analytics {
    animation: rotateIcon 12s linear infinite reverse;
}

.particle {
    animation: particleFloat 10s linear infinite;
}

.particle:nth-child(1) {
    animation-delay: 0s;
}
.particle:nth-child(2) {
    animation-delay: -2s;
}
.particle:nth-child(3) {
    animation-delay: -4s;
}
.particle:nth-child(4) {
    animation-delay: -6s;
}
.particle:nth-child(5) {
    animation-delay: -8s;
}
.particle:nth-child(6) {
    animation-delay: -1s;
}
.particle:nth-child(7) {
    animation-delay: -3s;
}
.particle:nth-child(8) {
    animation-delay: -5s;
}
.particle:nth-child(9) {
    animation-delay: -7s;
}

.hero-title {
    animation: titleGlow 4s ease-in-out infinite;
}

.btn-primary {
    animation: buttonPulse 4s ease-in-out infinite;
}

.service-card {
    animation: cardFloat 6s ease-in-out infinite;
}

.service-card:nth-child(2) {
    animation-delay: -1.5s;
}
.service-card:nth-child(3) {
    animation-delay: -3s;
}
.service-card:nth-child(4) {
    animation-delay: -4.5s;
}

.service-icon {
    animation: iconPulse 3s ease-in-out infinite;
}

.stat-number {
    animation: countUp 2s ease-out;
}

.section-title {
    opacity: 0;
    transform: translateY(30px);
    animation: titleReveal 1s ease forwards;
}

.whatsapp-float {
    animation: whatsapp-pulse 2s infinite;
}

/* ===================================
   HOVER EFFECTS
   =================================== */

.service-item:hover,
.service-card:hover {
    animation: none;
}

/* ===================================
   REDUCED MOTION
   =================================== */

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