/* ================================================
   SMOOTH PAGE TRANSITIONS
   Play-Merciless Silk Road Online
   ================================================ */

/* Page transition wrapper */
.page-transition-wrapper {
    position: relative;
    min-height: 100vh;
}

/* Main content transition container */
main, .main-content, section {
    animation: fadeInUp 0.6s ease-out;
}

/* Fade in from bottom animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page exit animation (added via JavaScript) */
.page-exit {
    animation: fadeOutDown 0.4s ease-in forwards;
}

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

/* Smooth link transitions for navigation */
.nav-control a,
.mobile-nav-menu a,
.nav-right a {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle hover effect with underline */
.nav-control a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f6d365 0%, #fda085 50%, #c99b3b 100%);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-control a:hover::after,
.nav-control a.active::after {
    width: 80%;
}

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

/* Content sections fade in as they become visible */
.content-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.content-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Widget animations - stagger effect */
.widget {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

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

/* Blog post entrance animations */
.blog-post {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromLeft 0.6s ease-out forwards;
}

.blog-post:nth-child(1) { animation-delay: 0.1s; }
.blog-post:nth-child(2) { animation-delay: 0.2s; }
.blog-post:nth-child(3) { animation-delay: 0.3s; }

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

/* Card hover effects - smooth elevation */
.blog-post,
.widget,
.info-panel,
.down-block,
.download-box {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}

/* Button smooth transitions */
.btn,
.vote-notification-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Form input smooth focus transitions */
input, textarea, select {
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
}

/* Loading indicator for page transitions */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f6d365 0%, #fda085 50%, #c99b3b 100%);
    z-index: 99999;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease, opacity 0.2s ease;
}

.page-loading.active {
    opacity: 1;
    transform: scaleX(1);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .page-loading {
        display: none;
    }
}

/* Smooth opacity transitions for dynamic content */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}

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

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

/* Staggered content reveal */
.stagger-fade {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-fade:nth-child(1) { animation-delay: 0.05s; }
.stagger-fade:nth-child(2) { animation-delay: 0.1s; }
.stagger-fade:nth-child(3) { animation-delay: 0.15s; }
.stagger-fade:nth-child(4) { animation-delay: 0.2s; }
.stagger-fade:nth-child(5) { animation-delay: 0.25s; }
.stagger-fade:nth-child(6) { animation-delay: 0.3s; }
.stagger-fade:nth-child(7) { animation-delay: 0.35s; }
.stagger-fade:nth-child(8) { animation-delay: 0.4s; }

/* Modal entrance/exit animations */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: scale(0.9) translateY(-50px);
    opacity: 0;
}

.modal.fade.in .modal-dialog,
.modal.fade.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Smooth dropdown animations */
.dropdown-menu {
    animation: dropdownFadeIn 0.25s ease-out;
    transform-origin: top;
}

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

/* Table row hover transitions */
.table tbody tr {
    transition: background-color 0.2s ease,
                transform 0.2s ease;
}

/* Pagination smooth transitions */
.pagination li a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alert entrance animation */
.alert {
    animation: alertSlideIn 0.4s ease-out;
}

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

/* Breadcrumb smooth transitions */
.breadcrumb {
    animation: fadeInUp 0.5s ease-out;
}

/* Image lazy load fade in */
img {
    transition: opacity 0.3s ease;
}

img.lazy-loading {
    opacity: 0.5;
}

img.lazy-loaded {
    opacity: 1;
}