/* Page Transitions Styles for BuzzNest */

/* Base transition styles */
.is-transitioning {
    overflow: hidden;
}

/* Page transition overlay */
.page-transition-overlay {
    background-color: rgba(30, 30, 30, 0.7);
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    z-index: 9990;
}

.is-transitioning .page-transition-overlay {
    opacity: 1;
    pointer-events: all;
}

/* Transition logo */
.transition-logo {
    left: 50%;
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 9991;
}

.is-transitioning .transition-logo {
    animation: pulse 1s infinite alternate;
    opacity: 1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Honeycomb transition overlay effect */
.transition-overlay-honeycomb {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f0ad4e' fill-opacity='0.4'%3E%3Cpath d='M50 50.9c-16.8 0-30.5-13.7-30.5-30.5S33.2-10.1 50-10.1 80.5 3.6 80.5 20.4 66.8 50.9 50 50.9zm0 1c-17.4 0-31.5-14.1-31.5-31.5S32.6-11.1 50-11.1 81.5 3 81.5 20.4 67.4 51.9 50 51.9zm0 80c-16.8 0-30.5-13.7-30.5-30.5S33.2 70.9 50 70.9s30.5 13.7 30.5 30.5-13.7 30.5-30.5 30.5zm0 1c-17.4 0-31.5-14.1-31.5-31.5S32.6 69.9 50 69.9s31.5 14.1 31.5 31.5-14.1 31.5-31.5 31.5zm80-81c-16.8 0-30.5-13.7-30.5-30.5S113.2-10.1 130-10.1s30.5 13.7 30.5 30.5-13.7 30.5-30.5 30.5zm0 1c-17.4 0-31.5-14.1-31.5-31.5S112.6-11.1 130-11.1s31.5 14.1 31.5 31.5-14.1 31.5-31.5 31.5zm0 80c-16.8 0-30.5-13.7-30.5-30.5s13.7-30.5 30.5-30.5 30.5 13.7 30.5 30.5-13.7 30.5-30.5 30.5zm0 1c-17.4 0-31.5-14.1-31.5-31.5s14.1-31.5 31.5-31.5 31.5 14.1 31.5 31.5-14.1 31.5-31.5 31.5zm-40-41c-16.8 0-30.5-13.7-30.5-30.5S73.2 20.9 90 20.9s30.5 13.7 30.5 30.5-13.7 30.5-30.5 30.5zm0 1c-17.4 0-31.5-14.1-31.5-31.5S72.6 19.9 90 19.9s31.5 14.1 31.5 31.5-14.1 31.5-31.5 31.5zm-80 0c-16.8 0-30.5-13.7-30.5-30.5S-6.8 20.9 10 20.9s30.5 13.7 30.5 30.5-13.7 30.5-30.5 30.5zm0 1C-7.4 51.9-21.5 37.8-21.5 20.4S-7.4-11.1 10-11.1s31.5 14.1 31.5 31.5S27.4 51.9 10 51.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Content animation classes */
.animate-on-load {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* Staggered animation for lists and card groups */
.animate-stagger-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Page content animation for different transitions */
.fade-transition-enter {
    opacity: 0;
}

.fade-transition-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.slide-transition-enter {
    opacity: 0;
    transform: translateX(30px);
}

.slide-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.zoom-transition-enter {
    opacity: 0;
    transform: scale(0.95);
}

.zoom-transition-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.flip-transition-enter {
    opacity: 0;
    transform: rotateY(-10deg);
}

.flip-transition-enter-active {
    opacity: 1;
    transform: rotateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Special animation for cards */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}