/* 
* IdealystiC Website Animations - Enhanced
*/
/* ===== Animation Keyframes ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    80% {
        opacity: 1;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.2);
    }
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(2deg);
    }
    50% {
        transform: translateY(-12px) rotate(0deg);
    }
    75% {
        transform: translateY(-8px) rotate(-2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

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

/* ===== Animation Classes ===== */
@media screen and (min-width: 769px) {
    .fade-in {
        opacity: 0;
        animation: fadeIn var(--transition-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    
    .slide-up {
        opacity: 0;
        animation: slideUp var(--transition-medium) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    
    .slide-down {
        opacity: 0;
        animation: slideDown var(--transition-medium) ease-out forwards;
    }
    
    .slide-left {
        opacity: 0;
        animation: slideLeft var(--transition-medium) ease-out forwards;
    }
    
    .slide-right {
        opacity: 0;
        animation: slideRight var(--transition-medium) ease-out forwards;
    }
    
    .scale-up {
        opacity: 0;
        animation: scaleUp var(--transition-medium) ease-out forwards;
    }
    
    .pulse {
        animation: pulse 2s ease-in-out infinite;
    }
    
    .float {
        animation: float 3s ease-in-out infinite;
    }
    
    .rotate {
        animation: rotate 4s linear infinite;
    }
}

@media screen and (max-width: 768px) {
    .fade-in,
    .slide-up,
    .slide-down,
    .slide-left,
    .slide-right,
    .scale-up,
    .pulse,
    .float,
    .rotate {
        animation: none !important;
        transition: none !important;
    }
}

/* Animation delays for staggered effects */
[data-delay="0"] {
    animation-delay: 0s;
}

[data-delay="200"] {
    animation-delay: 0.2s;
}

[data-delay="400"] {
    animation-delay: 0.4s;
}

[data-delay="600"] {
    animation-delay: 0.6s;
}

[data-delay="800"] {
    animation-delay: 0.8s;
}

/* ===== Scroll Animation Classes ===== */
/* These classes will be added via JavaScript when elements come into view */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 1s, transform 1s;
}

.animate-on-scroll.fade-in-visible {
    opacity: 1;
}

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

.animate-on-scroll.slide-left-visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.slide-right-visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.scale-up-visible {
    opacity: 1;
    transform: scale(1);
}

/* Initial states for scroll animations */
.animate-on-scroll.fade-in-initial {
    opacity: 0;
}

.animate-on-scroll.slide-up-initial {
    opacity: 0;
    transform: translateY(50px);
}

.animate-on-scroll.slide-left-initial {
    opacity: 0;
    transform: translateX(50px);
}

.animate-on-scroll.slide-right-initial {
    opacity: 0;
    transform: translateX(-50px);
}

.animate-on-scroll.scale-up-initial {
    opacity: 0;
    transform: scale(0.8);
}

/* ===== Special Animation Effects ===== */

/* Button hover effects */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Modern button hover effect with ripple */
.btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
    z-index: -1;
}

.btn:hover:before {
    width: 300%;
    height: 300%;
}

/* Shine effect for buttons */
.btn:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transition: left 0.5s;
    z-index: 1;
}

.btn:hover:after {
    left: 100%;
}

/* Service card hover animation */
.service-card {
    position: relative;
    z-index: 1;
}

.service-card:before {
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color);
    z-index: -1;
    transition: width 0.3s ease-out;
}

.service-card:hover:before {
    width: 100%;
}

/* Feature item hover animation */
.feature-icon, .value-icon, .offering-icon {
    transition: all 0.5s ease;
}

.feature-item:hover .feature-icon,
.value-item:hover .value-icon,
.offering-item:hover .offering-icon {
    transform: rotateY(360deg);
}

/* Timeline animation */
.timeline-dot {
    position: relative;
}

.timeline-dot:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    background-color: rgba(74, 84, 175, 0.3);
    z-index: -1;
    animation: pulse 2s infinite;
}

/* ===== Particle Animation ===== */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Add a subtle pulsing glow to particles */
@keyframes particleGlow {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

#particles-js {
    animation: particleGlow 8s infinite ease-in-out;
}

@keyframes wave-animation {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 1000px;
    }
}

@keyframes wave-animation-reverse {
    0% {
        background-position-x: 1000px;
    }
    100% {
        background-position-x: 0;
    }
}

/* ===== Media Queries for Animations ===== */
@media (max-width: 768px) {
    /* Simplify or reduce animations on mobile */
    .hero-title, 
    .hero-subtitle, 
    .page-title, 
    .page-subtitle {
        animation-duration: 0.8s;
    }
    
    .service-card:hover,
    .team-member:hover,
    .value-item:hover {
        transform: translateY(-5px);
    }
    
    .timeline-dot:after {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Remove animations for users who prefer reduced motion */
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    
    .fade-in,
    .slide-up,
    .slide-down,
    .slide-left,
    .slide-right,
    .scale-up {
        opacity: 1;
        transform: none;
    }
    
    .pulse,
    .float,
    .rotate {
        animation: none;
    }
    
    .service-card:hover,
    .team-member:hover,
    .value-item:hover,
    .btn:hover {
        transform: none;
    }
    
    .feature-item:hover .feature-icon,
    .value-item:hover .value-icon,
    .offering-item:hover .offering-icon {
        transform: none;
    }
}