/* 
========================================================================
   PAK TECH BRAND WEBSITE - ANIMATION STYLE SHEET (animations.css)
========================================================================
   Custom CSS Keyframes and Animation Helper Classes
   Matches reference site animations and timings
========================================================================
*/

/* 1. KEYFRAME DEFINITIONS */

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotating shapes */
@keyframes rotateForever {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Radio waves / pulsing circles */
@keyframes glow-radio_wave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Float Animation for subtle vertical motion */
@keyframes subtleFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* 2. SCROLL TRIGGER ANIMATION UTILITY CLASSES */
/* These will be triggered via Javascript when elements enter viewport */

.paktech-animate {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.paktech-animate.animated {
    opacity: 1;
}

/* Animation variants */
.paktech-animate.fade-in-up.animated {
    animation-name: fadeInUp;
}

.paktech-animate.fade-in-down.animated {
    animation-name: fadeInDown;
}

.paktech-animate.fade-in-left.animated {
    animation-name: fadeInLeft;
}

.paktech-animate.fade-in-right.animated {
    animation-name: fadeInRight;
}

.paktech-animate.zoom-in.animated {
    animation-name: zoomIn;
}

/* Floating animation helper */
.decor-float-slow {
    animation: subtleFloat 6s ease-in-out infinite;
}

/* Rotate forever helper */
.rotate-forever-slow {
    animation: rotateForever 30s linear infinite;
}

/* 3. TRANSITION DELAYS (To match Elementor Delay offsets) */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }

/* 4. CARD HOVER MICRO-TRANSITIONS */
.card-hover-zoom {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-hover-zoom:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

/* Transition delays for staggered elements inside a container */
.stagger-container .paktech-animate {
    transition: opacity 0.8s ease, transform 0.8s ease;
}