/* ========================================
   TORNADO AMXX HUB - PAGE ANIMATIONS
   ======================================== */

/* Fade-in animation - quick appearance with gentle movement */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in from top - smooth slow movement */
@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in from bottom - smooth slow movement */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale up animation - smooth slow scaling */
@keyframes scaleUpVertical {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Bounce in animation - slow graceful bounce */
@keyframes bounceInVertical {
    0% {
        opacity: 0;
        transform: translateY(-45px) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(8px) scale(1.03);
    }
    70% {
        transform: translateY(-3px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Glow pulse animation - more subtle */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    }
}

/* Typing effect for text */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

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

/* ========================================
   MAIN PAGE ANIMATIONS
   ======================================== */


@media (max-width: 1400px) {  
    /* Body container animation - quick appearance, slow movement */
    .body-container {
        animation: fadeInOnly 0.8s ease-out;
    }

    @keyframes fadeInOnly {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

@media (min-width: 1400px) { 
    .body-container {
        animation: fadeIn 0.8s ease-out;
    }
}

/* Header animation - quick appearance from top with slow movement */
header {
    animation: slideInTop 0.8s ease-out;
}

/* Navigation items staggered animation - quick cascade with slow movement */
nav ul li:not(.nav-divider) {
    opacity: 0;
    animation: slideInTop 0.6s ease-out forwards;
}

nav ul li:nth-child(1) { animation-delay: 0.1s; }
nav ul li:nth-child(2) { animation-delay: 0.15s; }
nav ul li:nth-child(3) { animation-delay: 0.2s; }
nav ul li:nth-child(4) { animation-delay: 0.25s; }
nav ul li:nth-child(5) { animation-delay: 0.3s; }
nav ul li:nth-child(6) { animation-delay: 0.35s; }
nav ul li:nth-child(7) { animation-delay: 0.4s; }
nav ul li:nth-child(8) { animation-delay: 0.45s; }

/* Profile section animation - quick appearance with slow movement */
.profile {
    animation: slideInTop 0.7s ease-out;
}

/* Main content sections - quick appearance with slow smooth movement */
.hero {
    animation: slideInBottom 0.9s ease-out 0.2s both;
}

.plugins {
    animation: slideInBottom 0.8s ease-out 0.3s both;
}

.plugins h1 {
    animation: slideInTop 0.7s ease-out 0.4s both;
}

/* ========================================
   WIDGET ANIMATIONS
   ======================================== */

/* Widget containers - add stability */
.discord-widget,
.steam-widget,
.amxx-widget {
    opacity: 0;
    position: relative;
    transition: all 0.3s ease;
    will-change: transform;
}

/* Discord widget - quick appearance with slow smooth bounce */
.discord-widget {
    animation: bounceInVertical 0.9s ease-out 0.3s both;
}

/* Steam widget - quick appearance with slow smooth scaling */
.steam-widget {
    animation: scaleUpVertical 0.8s ease-out 0.4s both;
}

/* AMXX widget - quick appearance with slow smooth slide */
.amxx-widget {
    animation: slideInBottom 0.8s ease-out 0.5s both;
}

/* Widget hover effects - enhanced vertical lift */
.discord-widget:hover,
.steam-widget:hover,
.amxx-widget:hover {
    transform: translateY(-8px);
    transition: transform 0.3s ease;
}

/* ========================================
   WIDGET STABILITY FIXES
   ======================================== */

/* Ensure widgets don't disappear on hover */
.widgets > div {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Prevent layout shifts */
.discord-widget .discord-card,
.steam-widget .steam-card,
.amxx-widget .amxx-card {
    transform-origin: center center;
    backface-visibility: hidden;
}

/* Smooth transitions for all interactive elements */
.discord-widget,
.steam-widget,
.amxx-widget,
.plugin-card {
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   PLUGIN CARDS ANIMATIONS
   ======================================== */

.plugin-card {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.plugin-card:nth-child(1) { animation-delay: 0.1s; }
.plugin-card:nth-child(2) { animation-delay: 0.2s; }
.plugin-card:nth-child(3) { animation-delay: 0.3s; }
.plugin-card:nth-child(4) { animation-delay: 0.4s; }

.plugin-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ========================================
   FORM ANIMATIONS
   ======================================== */

.login-form,
.register-form,
.contact-form {
    animation: scaleUpVertical 0.8s ease-out 0.2s both;
}

.form-group {
    opacity: 0;
    animation: slideInBottom 0.6s ease-out forwards;
}

.form-group:nth-child(1) { animation-delay: 0.3s; }
.form-group:nth-child(2) { animation-delay: 0.4s; }
.form-group:nth-child(3) { animation-delay: 0.5s; }
.form-group:nth-child(4) { animation-delay: 0.6s; }

/* Button animations - smooth slow transitions */
.btn-primary,
.discord-join-btn,
.steam-visit-btn,
.amxx-visit-btn {
    transition: all 0.5s ease;
}

.btn-primary:hover,
.discord-join-btn:hover,
.steam-visit-btn:hover,
.amxx-visit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ========================================
   FOOTER ANIMATIONS - SLOW SMOOTH MOVEMENT
   ======================================== */

footer {
    animation: slideInBottom 0.9s ease-out 0.6s both;
}

footer .title {
    animation: slideInBottom 0.8s ease-out 0.7s both;
}

footer .links {
    animation: slideInBottom 0.8s ease-out 0.8s both;
}

footer .socials {
    animation: slideInBottom 0.8s ease-out 0.9s both;
}

/* ========================================
   SPECIAL ANIMATIONS
   ======================================== */

/* Logo floating effect */
.logo img {
    animation: floating 3s ease-in-out infinite;
}

/* Admin badge glow - more stable */
.admin-badge {
    animation: glowPulse 3s ease-in-out infinite;
    display: inline-block;
}

/* Notification animations */
.notification {
    animation: slideInRight 0.5s ease-out;
}

.notification.success {
    border-left: 4px solid #28a745;
}

.notification.error {
    border-left: 4px solid #dc3545;
}

/* Loading spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00ffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE ANIMATIONS
   ======================================== */

/* Optimize specific animations on mobile while keeping others at normal speed */
@media (max-width: 768px) {
    /* Only optimize navigation staggered animations for faster mobile loading */
    nav ul li {
        animation-duration: 0.4s !important;
        animation-delay: 0.05s !important;
    }
    
    /* Set explicit animation speed for page entry animations on mobile */
    .body-container,
    header,
    .hero,
    .plugins,
    footer,
    .discord-widget,
    .steam-widget,
    .amxx-widget {
        animation-duration: 0.6s !important;
        animation-delay: 0s !important;
    }
    
    /* Reduce only form field stagger delays slightly */
    .form-group {
        animation-delay: 0.1s !important;
    }
    
    .form-group:nth-child(1) { animation-delay: 0.15s !important; }
    .form-group:nth-child(2) { animation-delay: 0.2s !important; }
    .form-group:nth-child(3) { animation-delay: 0.25s !important; }
    .form-group:nth-child(4) { animation-delay: 0.3s !important; }
}

/* Honor user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PAGE TRANSITION EFFECTS
   ======================================== */

/* Page fade out on link click */
.page-transition {
    transition: opacity 0.3s ease-out;
}

.page-transition.fade-out {
    opacity: 0;
}

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

/* ========================================
   INTERACTIVE ELEMENTS
   ======================================== */

/* Hover effects for interactive elements */
a, button, .clickable {
    transition: all 0.3s ease;
}

a:hover, button:not(#sliderButton):hover, .clickable:hover {
    transform: translateY(-1px);
}

/* Focus animations for accessibility */
input:focus, textarea:focus, select:focus {
    animation: glowPulse 0.5s ease-out;
}

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

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
}

.animate-slideInTop {
    animation: slideInTop 0.6s ease-out;
}

.animate-slideInBottom {
    animation: slideInBottom 0.6s ease-out;
}

.animate-scaleUpVertical {
    animation: scaleUpVertical 0.6s ease-out;
}

.animate-bounceInVertical {
    animation: bounceInVertical 0.8s ease-out;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* ========================================
   PAGE-SPECIFIC ANIMATIONS
   ======================================== */

/* My Purchases Page */
.purchases-container,
.purchases-grid {
    animation: slideInBottom 0.6s ease-out 0.2s both;
}

.purchase-item {
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
}

.purchase-item:nth-child(1) { animation-delay: 0.3s; }
.purchase-item:nth-child(2) { animation-delay: 0.35s; }
.purchase-item:nth-child(3) { animation-delay: 0.4s; }
.purchase-item:nth-child(4) { animation-delay: 0.45s; }
.purchase-item:nth-child(5) { animation-delay: 0.5s; }

/* My Reviews Page */
.reviews-container,
.reviews-grid {
    animation: slideInBottom 0.6s ease-out 0.2s both;
}

.review-item {
    opacity: 0;
    animation: slideInBottom 0.4s ease-out forwards;
}

.review-item:nth-child(1) { animation-delay: 0.3s; }
.review-item:nth-child(2) { animation-delay: 0.35s; }
.review-item:nth-child(3) { animation-delay: 0.4s; }
.review-item:nth-child(4) { animation-delay: 0.45s; }

/* Plugin Detail Pages (Rank/Skins Ultimate) */
.plugin-showcase,
.plugin-details {
    animation: scaleUpVertical 0.6s ease-out 0.2s both;
}

.feature-list,
.plugin-features {
    animation: slideInBottom 0.5s ease-out 0.4s both;
}

.feature-item {
    opacity: 0;
    animation: slideInBottom 0.3s ease-out forwards;
}

.feature-item:nth-child(1) { animation-delay: 0.5s; }
.feature-item:nth-child(2) { animation-delay: 0.55s; }
.feature-item:nth-child(3) { animation-delay: 0.6s; }
.feature-item:nth-child(4) { animation-delay: 0.65s; }
.feature-item:nth-child(5) { animation-delay: 0.7s; }

/* Thank You Page */
.thank-you-container,
.download-section {
    animation: bounceInVertical 0.8s ease-out 0.2s both;
}

.download-info {
    animation: slideInBottom 0.5s ease-out 0.6s both;
}

.download-button {
    animation: scaleUpVertical 0.4s ease-out 0.8s both;
}

/* Password Reset Pages */
.password-form,
.reset-container {
    animation: scaleUpVertical 0.6s ease-out 0.2s both;
}

.password-message,
.reset-message {
    animation: slideInTop 0.4s ease-out 0.4s both;
}

/* Profile Page Enhancements */
.profile-section,
.profile-info {
    animation: slideInBottom 0.5s ease-out 0.3s both;
}

.profile-avatar {
    animation: scaleUpVertical 0.6s ease-out 0.2s both;
}

.profile-stats {
    animation: slideInBottom 0.4s ease-out 0.5s both;
}

/* Generic content containers */
.content-section,
.main-content {
    animation: slideInBottom 0.6s ease-out 0.2s both;
}

.section-header {
    animation: slideInTop 0.4s ease-out 0.3s both;
}

.content-grid {
    animation: fadeIn 0.5s ease-out 0.4s both;
}

/* ========================================
   EMAIL VERIFICATION PAGE
   ======================================== */

.verification-container {
    animation: scaleUpVertical 0.6s ease-out 0.2s both;
}

.success-message {
    animation: bounceInVertical 0.7s ease-out 0.4s both;
}

.error-message {
    animation: slideInTop 0.5s ease-out 0.4s both;
}

.verification-buttons {
    animation: slideInBottom 0.5s ease-out 0.6s both;
}

.verification-info {
    animation: fadeIn 0.5s ease-out 0.5s both;
}

/* ========================================