/* Fade-in and reveal animations */
.reveal,
.fade-in,
.intersection-observer {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active,
.fade-in.active,
.intersection-observer.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations */
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.2s; }
.reveal:nth-child(3) { transition-delay: 0.3s; }
.reveal:nth-child(4) { transition-delay: 0.4s; }

/* Hover animations */
.hover-animate {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-animate:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Parallax elements */
.parallax {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Additional animation classes */
.slide-in-left {
    transform: translateX(-50px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right {
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left.active,
.slide-in-right.active {
    transform: translateX(0);
    opacity: 1;
}

/* Scale animation */
.scale-in {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.active {
    transform: scale(1);
    opacity: 1;
}

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

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

/* Gradient text animation */
.gradient-text {
    background: linear-gradient(90deg, #4F46E5, #9333EA, #4F46E5);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradient 8s linear infinite;
}

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

/* Custom Cursor Styles */
.custom-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    display: none; /* Hide by default */
}

body.custom-cursor-active .custom-cursor {
    display: block; /* Show only when active */
}

.cursor-inner,
.cursor-outer {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out;
}

.cursor-inner {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    z-index: 10000;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.cursor-outer {
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff;
    z-index: 9999;
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.1);
}

.cursor-hover .cursor-inner {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #ffffff;
}

.cursor-hover .cursor-outer {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(255, 255, 255, 0.2);
}

/* Ensure navigation links are clickable */
nav a, 
nav button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Show default cursor alongside custom cursor */
body.custom-cursor-active * {
    cursor: auto !important;
}

/* Hide custom cursor on mobile devices */
@media (max-width: 768px) {
    .custom-cursor {
        display: none !important;
    }
}

/* Particle animations */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 15s infinite linear;
    z-index: 1; /* Ensure particles stay above background but below content */
}

.particle-lg {
    width: 20px;
    height: 20px;
    background: rgba(147, 51, 234, 0.1);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
}

.particle-md {
    width: 12px;
    height: 12px;
    background: rgba(79, 70, 229, 0.1);
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.2);
}

.particle-sm {
    width: 6px;
    height: 6px;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(50px, -50px) rotate(90deg);
    }
    50% {
        transform: translate(100px, 0) rotate(180deg);
    }
    75% {
        transform: translate(50px, 50px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Ensure particles container stays above background */
}

/* Update custom cursor styles to work with particles */
body.custom-cursor-active .particles {
    z-index: 1; /* Keep particles visible */
}

body.custom-cursor-active .particle {
    pointer-events: none;
    z-index: 1;
}

/* Custom Circle Cursor */
.circle,
.circle-follow {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 99999;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.circle {
    width: 8px;
    height: 8px;
    background: #9333EA;
    mix-blend-mode: normal;
}

.circle-follow {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #9333EA;
    transition: all 0.3s ease-out;
}

/* Hover effects for circle cursor */
.circle.circle-hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: #9333EA;
}

.circle-follow.circle-hover {
    width: 20px;
    height: 20px;
    background: rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.6);
}

/* Hide cursor on mobile */
@media (max-width: 768px) {
    .circle,
    .circle-follow {
        display: none;
    }
}

/* Ensure cursor stays visible on interactive elements */
a, button, input, textarea, select {
    cursor: pointer !important;
    outline: none !important;
}