/* View Transition API - Cross-document transitions */
/* This enables smooth transitions when navigating between the homepage and /ads page */
@view-transition {
    navigation: auto;
}

/* Customize the view transition animation */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade transition effect - smooth cross-fade between pages */
::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optional: Named transitions for specific elements that appear on both pages */
/* These create smoother transitions for shared elements */
.profile-container {
    view-transition-name: profile-container;
}

.ads-main-container {
    view-transition-name: main-content;
}

/* Language selector appears on both pages - smooth transition */
.language-selector {
    view-transition-name: language-selector;
}