/* ========================================
   EK FOUNDATION - ANIMATIONS CSS
   ========================================
   Author: EK Foundation
   Description: Animation effects for website elements
   Version: 1.0.0
   ======================================== */

/* ========================================
   TABLE OF CONTENTS
   ========================================
   1. Keyframe Animations
   2. Fade Animations
   3. Slide Animations
   4. Zoom Animations
   5. Rotate Animations
   6. Bounce Animations
   7. Special Effects
   8. Hover Animations
   9. Scroll Triggered Animations (AOS)
   10. Loading Animations
   11. Button Animations
   12. Card Animations
   13. Text Animations
   14. Icon Animations
   15. Utility Animation Classes
   16. Animation Delays
   17. Animation Durations
   ======================================== */

/* ========================================
   1. KEYFRAME ANIMATIONS
   ======================================== */

/* Fade Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@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 fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Slide Animations */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        visibility: visible;
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        visibility: visible;
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        visibility: visible;
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        visibility: visible;
    }
    to {
        transform: translateX(0);
    }
}

/* Zoom Animations */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
    to {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1) translateY(0);
    }
}

/* Rotate Animations */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes rotateOut {
    from {
        opacity: 1;
        transform: rotate(0);
    }
    to {
        opacity: 0;
        transform: rotate(180deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bounce Animations */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-30px);
    }
    70% {
        transform: translateY(-15px);
    }
    90% {
        transform: translateY(-5px);
    }
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
        transform: scale3d(1.05, 1.05, 1.05);
    }
    70% {
        transform: scale3d(0.95, 0.95, 0.95);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(44, 95, 45, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(44, 95, 45, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(44, 95, 45, 0);
    }
}

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

/* Wobble Animation */
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-15%);
    }
    30% {
        transform: translateX(10%);
    }
    45% {
        transform: translateX(-8%);
    }
    60% {
        transform: translateX(5%);
    }
    75% {
        transform: translateX(-3%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Flip Animation */
@keyframes flip {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

/* Flash Animation */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

/* Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Float Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Shine Effect */
@keyframes shine {
    0% {
        left: -100%;
    }
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Blink Animation */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Typing Animation */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--primary-color);
    }
}

/* Gradient Shift Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   2. FADE ANIMATION CLASSES
   ======================================== */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

.fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

/* ========================================
   3. SLIDE ANIMATION CLASSES
   ======================================== */
.slide-in-up {
    animation: slideInUp 0.5s ease forwards;
}

.slide-in-down {
    animation: slideInDown 0.5s ease forwards;
}

.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

/* ========================================
   4. ZOOM ANIMATION CLASSES
   ======================================== */
.zoom-in {
    animation: zoomIn 0.5s ease forwards;
}

.zoom-out {
    animation: zoomOut 0.5s ease forwards;
}

.zoom-in-up {
    animation: zoomInUp 0.6s ease forwards;
}

/* ========================================
   5. ROTATE ANIMATION CLASSES
   ======================================== */
.rotate-in {
    animation: rotateIn 0.6s ease forwards;
}

.rotate-out {
    animation: rotateOut 0.6s ease forwards;
}

.spin {
    animation: spin 1s linear infinite;
}

.spin-slow {
    animation: spinSlow 3s linear infinite;
}

.spin-on-hover:hover {
    animation: spin 0.5s linear;
}

/* ========================================
   6. BOUNCE ANIMATION CLASSES
   ======================================== */
.bounce {
    animation: bounce 1s ease infinite;
}

.bounce-on-hover:hover {
    animation: bounce 0.8s ease;
}

.bounce-in {
    animation: bounceIn 0.8s ease forwards;
}

/* ========================================
   7. SPECIAL EFFECT CLASSES
   ======================================== */
.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.pulse-on-hover:hover {
    animation: pulse 0.5s ease;
}

.shake {
    animation: shake 0.5s ease;
}

.shake-on-hover:hover {
    animation: shake 0.4s ease;
}

.wobble {
    animation: wobble 0.8s ease;
}

.flip {
    animation: flip 0.8s ease forwards;
}

.flash {
    animation: flash 1s ease;
}

.flash-on-hover:hover {
    animation: flash 0.5s ease;
}

/* ========================================
   8. HOVER ANIMATIONS
   ======================================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-down:hover {
    transform: scale(0.95);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(44, 95, 45, 0.3);
}

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-slide-left {
    transition: transform 0.3s ease;
}

.hover-slide-left:hover {
    transform: translateX(-5px);
}

.hover-slide-right {
    transition: transform 0.3s ease;
}

.hover-slide-right:hover {
    transform: translateX(5px);
}

/* Ripple Effect on Buttons */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Shine Effect */
.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.shine:hover::before {
    left: 100%;
}

/* Float Animation */
.float {
    animation: float 3s ease-in-out infinite;
}

.float-on-hover:hover {
    animation: float 1s ease-in-out;
}

/* ========================================
   9. SCROLL TRIGGERED ANIMATIONS (AOS Overrides)
   ======================================== */
[data-aos] {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-30px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(-30px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(30px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

[data-aos="flip-left"] {
    transform: perspective(2500px) rotateY(-100deg);
}

[data-aos="flip-left"].aos-animate {
    transform: perspective(2500px) rotateY(0);
}

/* ========================================
   10. LOADING ANIMATIONS
   ======================================== */
.loader {
    width: 50px;
    height: 50px;
    border: 3px solid var(--light-gray);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-sm {
    width: 30px;
    height: 30px;
    border-width: 2px;
}

.loader-lg {
    width: 70px;
    height: 70px;
    border-width: 4px;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   11. BUTTON ANIMATIONS
   ======================================== */
.btn-animate {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-animate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.btn-animate:hover::after {
    width: 100%;
}

.btn-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.btn-pulse:hover {
    animation: none;
}

.btn-float {
    animation: float 2s ease-in-out infinite;
}

/* ========================================
   12. CARD ANIMATIONS
   ======================================== */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.card-glow {
    transition: all 0.3s ease;
}

.card-glow:hover {
    box-shadow: 0 0 30px rgba(44, 95, 45, 0.2);
}

/* ========================================
   13. TEXT ANIMATIONS
   ======================================== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 3s ease infinite;
}

.text-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--primary-color);
    animation: typing 3s steps(40, end), blinkCursor 0.75s step-end infinite;
}

.text-highlight {
    position: relative;
    display: inline-block;
}

.text-highlight::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(44, 95, 45, 0.2);
    z-index: -1;
    transition: height 0.3s ease;
}

.text-highlight:hover::before {
    height: 100%;
}

/* ========================================
   14. ICON ANIMATIONS
   ======================================== */
.icon-bounce {
    animation: bounce 1s ease infinite;
}

.icon-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.icon-spin {
    animation: spin 2s linear infinite;
}

.icon-float {
    animation: float 2s ease-in-out infinite;
}

/* ========================================
   15. UTILITY ANIMATION CLASSES
   ======================================== */
.animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

.animated-fast {
    animation-duration: 0.3s;
}

.animated-slow {
    animation-duration: 1s;
}

.animated-infinite {
    animation-iteration-count: infinite;
}

/* ========================================
   16. ANIMATION DELAYS
   ======================================== */
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }
.delay-9 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1s; }

/* ========================================
   17. ANIMATION DURATIONS
   ======================================== */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.6s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 1.5s; }

/* ========================================
   PAGE TRANSITION ANIMATIONS
   ======================================== */
.page-enter {
    animation: fadeInUp 0.5s ease forwards;
}

.page-exit {
    animation: fadeOut 0.3s ease forwards;
}

/* ========================================
   MODAL ANIMATIONS
   ======================================== */
.modal-enter {
    animation: zoomIn 0.3s ease forwards;
}

.modal-exit {
    animation: zoomOut 0.3s ease forwards;
}

/* ========================================
   TOAST NOTIFICATION ANIMATIONS
   ======================================== */
.toast-enter {
    animation: slideInRight 0.3s ease forwards;
}

.toast-exit {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   REDUCED MOTION PREFERENCE
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animated,
    [data-aos] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .hover-lift:hover,
    .hover-scale:hover,
    .card-hover:hover,
    .btn-animate:hover {
        transform: none !important;
    }
}