/* Gallery Hero Styles */
.gallery-hero {
    position: relative;
    background: #ffffff;
}

.gallery-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

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

/* Custom scale class for subtle hover effect */
.scale-102 {
    transform: scale(1.02);
}

/* Custom backdrop blur for older browsers */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Slower bounce animation for scroll indicator */
.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

@keyframes bounce-slow {
    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transform: translate3d(0, -8px, 0);
    }

    70% {
        transform: translate3d(0, -4px, 0);
    }

    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Responsive text scaling (Smaller) */
@media (max-width: 768px) {
    .gallery-hero h1 {
        font-size: 2rem;
        line-height: 1.1;
    }
}

@media (max-width: 640px) {
    .gallery-hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

/* Image Viewer Styles */
#overlay-image-viewer {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: transparent;
}

#overlay-image-viewer.active {
    opacity: 1;
}

#overlay-image-viewer-image {
    transition: opacity 0.3s ease-in-out;
}

#overlay-background {
    transition: opacity 0.3s ease-in-out;
}

/* Share Overlay Styles */
#shareOverlay {
    opacity: 1;
}

#shareOverlay.closing {
    opacity: 0;
}

/* Button hover animations */
.gallery-hero button {
    transition: all 0.3s ease;
}

.gallery-hero button:hover {
    transform: translateY(-2px);
}

/* Parallax effect for background */
@media (prefers-reduced-motion: no-preference) {
    .gallery-hero {
        background-attachment: fixed;
    }
}

/* Gallery Image Hover Effects */
.gallery-item {
    position: relative;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    transition: transform 0.3s ease;
}

/* Custom hover animation for icons */
.gallery-item .group:hover .like-btn:nth-child(1) {
    transition-delay: 0.3s;
}

.gallery-item .group:hover .share-btn:nth-child(2) {
    transition-delay: 0.3s;
}

/* Icon button effects */
.like-btn.liked i {
    color: #ef4444 !important;
    animation: heartbeat 0.6s ease-in-out;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Feedback animations */
@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -10px) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -20px) scale(1);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.8);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -5px) scale(1);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -5px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -10px) scale(0.8);
    }
}

/* Progressive Image Loading - Smooth crossfade for mobile */
#overlay-image-viewer-image {
    /* Hardware acceleration for smoother rendering on mobile */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent image from flashing/flickering during src swap */
    image-rendering: auto;
    /* Ensure consistent rendering */
    -webkit-font-smoothing: antialiased;
}

/* Ensure overlay container clips overflow */
#overlay-image-viewer .relative {
    overflow: hidden;
}

/* Fullscreen Image Viewer Styles */
#fullscreen-image-viewer {
    cursor: none;
}

#fullscreen-image-viewer:hover {
    cursor: default;
}

.fullscreen-nav-btn {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    pointer-events: auto;
}

#fullscreen-image {
    /* Hardware acceleration for smoother rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
    transition: opacity 0.3s ease-out;
}

/* Fullscreen loading spinner animation */
#fullscreen-loading-spinner .animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Fullscreen slideshow active indicator */
#fullscreen-slideshow-btn.active i {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}