/* ==========================================================================
    ARITTH - Advanced Animations
    ========================================================================== */

    /* ==========================================================================
    KEYFRAME ANIMATIONS
    ========================================================================== */

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

    /* Bounce Animation */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-15px);
        }
        60% {
            transform: translateY(-7px);
        }
    }

    /* Pulse Animation */
    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        }
        50% {
            box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }
    }

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

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

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

    /* Slide In Left */
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Slide In Right */
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Scale In */
    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

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

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

    /* Glow */
    @keyframes glow {
        0%, 100% {
            box-shadow: 0 0 5px rgba(95, 108, 78, 0.5);
        }
        50% {
            box-shadow: 0 0 20px rgba(95, 108, 78, 0.8), 0 0 30px rgba(122, 155, 109, 0.6);
        }
    }

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

    /* Wave */
    @keyframes wave {
        0%, 100% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(20deg);
        }
        75% {
            transform: rotate(-15deg);
        }
    }

    /* Flip */
    @keyframes flip {
        from {
            transform: perspective(400px) rotateY(0);
        }
        to {
            transform: perspective(400px) rotateY(360deg);
        }
    }

    /* ==========================================================================
    UTILITY ANIMATION CLASSES
    ========================================================================== */

    /* Fade Animations */
    .fade-in {
        animation: fadeInUp 0.8s ease-out;
    }

    .fade-in-down {
        animation: fadeInDown 0.8s ease-out;
    }

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

    .slide-in-right {
        animation: slideInRight 0.8s ease-out;
    }

    /* Scale Animation */
    .scale-in {
        animation: scaleIn 0.6s ease-out;
    }

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

    /* Continuous Animations */
    .float-continuous {
        animation: float 3s ease-in-out infinite;
    }

    .pulse-continuous {
        animation: pulse 2s infinite;
    }

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

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

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

    /* Lift Effect */
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    /* Grow Effect */
    .hover-grow {
        transition: transform 0.3s ease;
    }

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

    /* Shrink Effect */
    .hover-shrink {
        transition: transform 0.3s ease;
    }

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

    /* Rotate Effect */
    .hover-rotate {
        transition: transform 0.3s ease;
    }

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

    /* Shake Effect */
    .hover-shake:hover {
        animation: shake 0.5s;
    }

    /* Glow Effect */
    .hover-glow {
        transition: box-shadow 0.3s ease;
    }

    .hover-glow:hover {
        box-shadow: 0 0 20px rgba(95, 108, 78, 0.6), 0 0 30px rgba(122, 155, 109, 0.4);
    }

    /* Border Grow Effect */
    .hover-border-grow {
        position: relative;
        overflow: hidden;
    }

    .hover-border-grow::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--primary-green);
        transform: scale(0);
        transition: transform 0.3s ease;
        border-radius: inherit;
    }

    .hover-border-grow:hover::before {
        transform: scale(1);
    }

    /* Underline Effect */
    .hover-underline {
        position: relative;
        display: inline-block;
    }

    .hover-underline::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -5px;
        left: 0;
        background-color: var(--primary-green);
        transition: width 0.3s ease;
    }

    .hover-underline:hover::after {
        width: 100%;
    }

    /* Slide In Border */
    .hover-slide-border {
        position: relative;
        overflow: hidden;
    }

    .hover-slide-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-green), var(--secondary-green));
        transition: left 0.4s ease;
    }

    .hover-slide-border:hover::before {
        left: 0;
    }

    /* Background Slide */
    .hover-bg-slide {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .hover-bg-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
        transition: left 0.4s ease;
        z-index: -1;
    }

    .hover-bg-slide:hover::before {
        left: 0;
    }

    /* ==========================================================================
    TEXT EFFECTS
    ========================================================================== */

    /* Gradient Text Animation */
    .text-gradient-animated {
        background: linear-gradient(90deg, var(--primary-green), var(--secondary-green), var(--primary-green));
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradientShift 3s ease infinite;
    }

    /* Typing Effect */
    .typing-effect {
        overflow: hidden;
        border-right: 3px solid var(--primary-green);
        white-space: nowrap;
        animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    }

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

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

    /* Glitch Effect */
    .glitch-effect {
        position: relative;
    }

    .glitch-effect::before,
    .glitch-effect::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .glitch-effect::before {
        animation: glitch-anim 2s infinite;
        color: var(--primary-green);
        z-index: -1;
    }

    .glitch-effect::after {
        animation: glitch-anim 3s infinite reverse;
        color: var(--secondary-green);
        z-index: -2;
    }

    @keyframes glitch-anim {
        0%, 100% {
            transform: translate(0);
        }
        20% {
            transform: translate(-2px, 2px);
        }
        40% {
            transform: translate(-2px, -2px);
        }
        60% {
            transform: translate(2px, 2px);
        }
        80% {
            transform: translate(2px, -2px);
        }
    }

    /* ==========================================================================
    LOADING ANIMATIONS
    ========================================================================== */

    /* Dots Loading */
    .loading-dots {
        display: inline-flex;
        gap: 5px;
    }

    .loading-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--primary-green);
        animation: loading-dots-anim 1.4s infinite ease-in-out both;
    }

    .loading-dots span:nth-child(1) {
        animation-delay: -0.32s;
    }

    .loading-dots span:nth-child(2) {
        animation-delay: -0.16s;
    }

    @keyframes loading-dots-anim {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Spinner Loading */
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid rgba(95, 108, 78, 0.2);
        border-top-color: var(--primary-green);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* Bar Loading */
    .loading-bar {
        width: 100%;
        height: 4px;
        background-color: rgba(95, 108, 78, 0.2);
        overflow: hidden;
        position: relative;
    }

    .loading-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--primary-green), var(--secondary-green));
        animation: loading-bar-anim 1.5s infinite;
    }

    @keyframes loading-bar-anim {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }

    /* ==========================================================================
    SCROLL ANIMATIONS
    ========================================================================== */

    /* Fade In On Scroll */
    .aos-fade-in {
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .aos-fade-in.aos-animate {
        opacity: 1;
    }

    /* Slide Up On Scroll */
    .aos-slide-up {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .aos-slide-up.aos-animate {
        opacity: 1;
        transform: translateY(0);
    }

    /* Scale On Scroll */
    .aos-scale {
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .aos-scale.aos-animate {
        opacity: 1;
        transform: scale(1);
    }

    /* ==========================================================================
    PARALLAX EFFECTS
    ========================================================================== */

    .parallax-slow {
        transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
    }

    .parallax-medium {
        transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    }

    .parallax-fast {
        transition: transform 0.1s cubic-bezier(0, 0, 0, 1);
    }

    /* ==========================================================================
    STAGGER ANIMATIONS
    ========================================================================== */

    .stagger-item {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }

    .stagger-item:nth-child(1) { animation-delay: 0.1s; }
    .stagger-item:nth-child(2) { animation-delay: 0.2s; }
    .stagger-item:nth-child(3) { animation-delay: 0.3s; }
    .stagger-item:nth-child(4) { animation-delay: 0.4s; }
    .stagger-item:nth-child(5) { animation-delay: 0.5s; }
    .stagger-item:nth-child(6) { animation-delay: 0.6s; }

    /* ==========================================================================
    PERFORMANCE OPTIMIZATION
    ========================================================================== */

    /* Use GPU acceleration for smoother animations */
    .gpu-accelerated {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }