/* Animations for Swoul - Minecraft Account Market */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Out Animation */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Fade In From Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In From Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pulse Animation for Buttons */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(111, 182, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(111, 182, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(111, 182, 246, 0);
    }
}

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

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

/* Soft Scale Animation */
@keyframes softScale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Glow Animation */
@keyframes glow {
    0% {
        filter: drop-shadow(0 0 5px rgba(111, 182, 246, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(111, 182, 246, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 5px rgba(111, 182, 246, 0.5));
    }
}

/* Soft Loading Animation */
@keyframes softLoading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Ripple Animation */
@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/* Slide In Animation */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply Animations to Elements */

/* Animated Background */
.background {
    animation: gradientShift 15s ease infinite;
    background-size: 200% 200%;
}

/* Hero Content Animation */
.hero-content {
    animation: fadeIn 1.2s ease-out;
}

/* Section Headers Animation */
.section-header h2 {
    animation: fadeIn 1s ease-out 0.2s both;
}

.section-header p {
    animation: fadeIn 1s ease-out 0.4s both;
}

/* Feature Animation */
.feature {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    transition: transform 0.3s ease;
}

.feature:hover .feature-icon {
    animation: float 3s ease infinite;
}

/* Step Number Animation */
.step-number {
    animation: pulse 2s infinite;
}

/* Button Animations */
.btn-primary, .btn-secondary {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, 
                background-color 0.3s ease, 
                box-shadow 0.3s ease;
}

.btn-primary:hover {
    animation: pulse 1.5s infinite;
}

.btn-primary:active, .btn-secondary:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Ripple Effect for Buttons */
.btn-primary:after, .btn-secondary:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.btn-primary:focus:not(:active)::after, 
.btn-secondary:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

/* Navigation Link Animation */
.main-nav a {
    transition: color 0.3s ease;
}

.main-nav a:after {
    transition: width 0.3s ease;
}

/* Logo Animation */
.logo h1 {
    transition: color 0.3s ease;
}

.logo:hover h1 {
    animation: glow 2s ease-in-out infinite;
}

/* Form Input Animation */
input, textarea, select {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

input:focus, textarea:focus, select:focus {
    transform: translateY(-2px);
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: softLoading 1s ease-in-out infinite;
    margin-right: 8px;
}

/* Notification Animation */
.notification {
    animation: slideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
               fadeOut 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 3s forwards;
}

/* Theme Toggle Animation */
.toggle-track {
    transition: background-color 0.3s ease;
}

.toggle-indicator {
    transition: transform 0.3s ease;
}

/* Scroll Animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Add animate-on-scroll class to elements */
.feature, .step, .section-header, .footer-column {
    opacity: 0;
}

/* Staggered Animation for Features */
.features .feature:nth-child(1) {
    animation: fadeIn 0.6s ease-out 0.1s forwards;
}

.features .feature:nth-child(2) {
    animation: fadeIn 0.6s ease-out 0.3s forwards;
}

.features .feature:nth-child(3) {
    animation: fadeIn 0.6s ease-out 0.5s forwards;
}

.features .feature:nth-child(4) {
    animation: fadeIn 0.6s ease-out 0.7s forwards;
}

/* Staggered Animation for Steps */
.steps .step:nth-child(1) {
    animation: fadeIn 0.6s ease-out 0.2s forwards;
}

.steps .step:nth-child(2) {
    animation: fadeIn 0.6s ease-out 0.4s forwards;
}

.steps .step:nth-child(3) {
    animation: fadeIn 0.6s ease-out 0.6s forwards;
}

.steps .step:nth-child(4) {
    animation: fadeIn 0.6s ease-out 0.8s forwards;
}

/* Page Transition */
body {
    transition: background-color 0.5s ease;
}

/* Smooth Theme Transition */
:root {
    transition: all 0.5s ease;
}

/* Hover Card Animation */
.account-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.account-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(111, 182, 246, 0.2);
}