/* ============================================
   ENTRANCE ANIMATIONS - CSS
   ============================================
   Add these classes to any element to create
   beautiful entrance animations on scroll
   ============================================ */

/* Base Animation Styles */
.animate-on-scroll {
    opacity: 0;
    animation-fill-mode: forwards;
}

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

/* Fade In Only */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

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

/* ============================================
   SLIDE UP ANIMATIONS
   ============================================ */

/* Slide Up */
.slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

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

/* Slide Up Large */
.slide-up-large {
    animation: slideUpLarge 1s ease-out forwards;
}

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

/* ============================================
   SLIDE IN ANIMATIONS
   ============================================ */

/* Slide In Left */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

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

/* Slide In Right */
.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

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

/* ============================================
   SCALE & ZOOM ANIMATIONS
   ============================================ */

/* Zoom In */
.zoom-in {
    animation: zoomIn 0.8s ease-out forwards;
}

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

/* Scale Up */
.scale-up {
    animation: scaleUp 0.8s ease-out forwards;
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Rotate In */
.rotate-in {
    animation: rotateIn 0.8s ease-out forwards;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) translateY(20px);
    }
    to {
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

/* ============================================
   BOUNCE ANIMATIONS
   ============================================ */

/* Bounce In */
.bounce-in {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

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

/* ============================================
   STAGGERED/DELAYED ANIMATIONS
   ============================================ */

/* Delay Classes for Sequential Animations */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* Duration Classes */
.duration-fast { animation-duration: 0.5s; }
.duration-normal { animation-duration: 0.8s; }
.duration-slow { animation-duration: 1.2s; }
.duration-slower { animation-duration: 1.5s; }

/* ============================================
   COMBINED ANIMATIONS
   ============================================ */

/* Fade + Slide Up */
.fade-slide-up {
    animation: fadeSlideUp 0.8s ease-out forwards;
}

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

/* Fade + Slide Up Large */
.fade-slide-up-large {
    animation: fadeSlideUpLarge 1s ease-out forwards;
}

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

/* ============================================
   ICON ANIMATIONS
   ============================================ */

/* Icon Pop */
.icon-pop {
    animation: iconPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes iconPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Icon Swing */
.icon-swing {
    animation: iconSwing 0.8s ease-out forwards;
    transform-origin: top center;
}

@keyframes iconSwing {
    from {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0);
    }
}

/* ============================================
   HEADING ANIMATIONS
   ============================================ */

/* Heading with Underline */
.heading-underline {
    position: relative;
    display: inline-block;
}

.heading-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: #27ae60;
    animation: expandWidth 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (max-width: 768px) {
    .slide-up,
    .slide-up-large {
        animation-duration: 0.6s;
    }
    
    .slide-in-left,
    .slide-in-right {
        animation: slideUp 0.6s ease-out forwards;
    }
    
    .zoom-in,
    .scale-up {
        animation-duration: 0.6s;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

/* Disable animations on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in,
    .slide-up,
    .slide-up-large,
    .slide-in-left,
    .slide-in-right,
    .zoom-in,
    .scale-up,
    .rotate-in,
    .bounce-in,
    .fade-slide-up,
    .fade-slide-up-large,
    .icon-pop,
    .icon-swing,
    .heading-underline::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}