/* AOS (Animate On Scroll) Animations */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[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.8);
}

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

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

[data-aos="zoom-out"].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);
}

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

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

/* Custom Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

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

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

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-rotate {
    animation: rotate 2s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200px 100%;
    animation: shimmer 2s infinite;
}

/* Staggered Animations */
.stagger-animation > * {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

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

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

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

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

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

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

/* Loading Animations */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

.loading-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}

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

.loading-dots > div:nth-child(1) { animation-delay: -0.32s; }
.loading-dots > div:nth-child(2) { animation-delay: -0.16s; }

/* Text Animations */
.text-reveal {
    overflow: hidden;
}

.text-reveal > span {
    display: inline-block;
    animation: slideInFromBottom 0.6s ease-out forwards;
    opacity: 0;
}

.text-reveal > span:nth-child(1) { animation-delay: 0.1s; }
.text-reveal > span:nth-child(2) { animation-delay: 0.2s; }
.text-reveal > span:nth-child(3) { animation-delay: 0.3s; }
.text-reveal > span:nth-child(4) { animation-delay: 0.4s; }
.text-reveal > span:nth-child(5) { animation-delay: 0.5s; }

/* Background Animations */
.animated-bg {
    background: linear-gradient(-45deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-dark));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* Parallax Effect */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Scroll-triggered animations */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Button Animations */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

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

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Card Flip Animation */
.card-flip {
    perspective: 1000px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-flip-back {
    transform: rotateY(180deg);
}

/* Typing Animation */
.typing-animation {
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    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-color); }
}

/* Glitch Effect */
.glitch {
    position: relative;
    animation: glitch 1s linear infinite;
}

@keyframes glitch {
    2%, 64% {
        transform: translate(2px, 0) skew(0deg);
    }
    4%, 60% {
        transform: translate(-2px, 0) skew(0deg);
    }
    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

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

.glitch:before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch:after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
    }
    4.166666666666666% {
        clip: rect(47px, 9999px, 29px, 0);
    }
    8.333333333333332% {
        clip: rect(91px, 9999px, 43px, 0);
    }
    12.5% {
        clip: rect(16px, 9999px, 78px, 0);
    }
    16.666666666666668% {
        clip: rect(85px, 9999px, 61px, 0);
    }
    20.833333333333336% {
        clip: rect(52px, 9999px, 37px, 0);
    }
    25% {
        clip: rect(73px, 9999px, 95px, 0);
    }
    29.166666666666668% {
        clip: rect(28px, 9999px, 19px, 0);
    }
    33.33333333333333% {
        clip: rect(64px, 9999px, 82px, 0);
    }
    37.5% {
        clip: rect(39px, 9999px, 55px, 0);
    }
    41.66666666666667% {
        clip: rect(97px, 9999px, 13px, 0);
    }
    45.83333333333333% {
        clip: rect(22px, 9999px, 67px, 0);
    }
    50% {
        clip: rect(76px, 9999px, 31px, 0);
    }
    54.166666666666664% {
        clip: rect(43px, 9999px, 89px, 0);
    }
    58.333333333333336% {
        clip: rect(19px, 9999px, 25px, 0);
    }
    62.5% {
        clip: rect(88px, 9999px, 73px, 0);
    }
    66.66666666666666% {
        clip: rect(34px, 9999px, 47px, 0);
    }
    70.83333333333334% {
        clip: rect(61px, 9999px, 91px, 0);
    }
    75% {
        clip: rect(25px, 9999px, 16px, 0);
    }
    79.16666666666666% {
        clip: rect(79px, 9999px, 64px, 0);
    }
    83.33333333333334% {
        clip: rect(46px, 9999px, 28px, 0);
    }
    87.5% {
        clip: rect(13px, 9999px, 85px, 0);
    }
    91.66666666666666% {
        clip: rect(67px, 9999px, 52px, 0);
    }
    95.83333333333334% {
        clip: rect(31px, 9999px, 97px, 0);
    }
    100% {
        clip: rect(73px, 9999px, 22px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 119px, 0);
    }
    5.882352941176471% {
        clip: rect(52px, 9999px, 71px, 0);
    }
    11.76470588235294% {
        clip: rect(14px, 9999px, 99px, 0);
    }
    17.647058823529413% {
        clip: rect(28px, 9999px, 55px, 0);
    }
    23.529411764705884% {
        clip: rect(83px, 9999px, 73px, 0);
    }
    29.411764705882355% {
        clip: rect(73px, 9999px, 27px, 0);
    }
    35.294117647058826% {
        clip: rect(23px, 9999px, 85px, 0);
    }
    41.17647058823529% {
        clip: rect(54px, 9999px, 84px, 0);
    }
    47.058823529411764% {
        clip: rect(45px, 9999px, 47px, 0);
    }
    52.94117647058824% {
        clip: rect(37px, 9999px, 20px, 0);
    }
    58.82352941176471% {
        clip: rect(25px, 9999px, 47px, 0);
    }
    64.70588235294117% {
        clip: rect(82px, 9999px, 38px, 0);
    }
    70.58823529411765% {
        clip: rect(54px, 9999px, 27px, 0);
    }
    76.47058823529412% {
        clip: rect(28px, 9999px, 99px, 0);
    }
    82.35294117647058% {
        clip: rect(83px, 9999px, 73px, 0);
    }
    88.23529411764706% {
        clip: rect(73px, 9999px, 27px, 0);
    }
    94.11764705882352% {
        clip: rect(23px, 9999px, 85px, 0);
    }
    100% {
        clip: rect(54px, 9999px, 84px, 0);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [data-aos],
    .animate-float,
    .animate-pulse,
    .animate-bounce,
    .animate-rotate,
    .animate-shimmer,
    .stagger-animation > *,
    .text-reveal > span,
    .animated-bg,
    .typing-animation,
    .glitch {
        animation: none !important;
        transition: none !important;
    }
    
    .scroll-fade-in {
        opacity: 1;
        transform: none;
    }
}