/* Visibility & AOS Overrides */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Exclude expertise cards from transform overrides */
.expertise-card [data-aos],
.expertise-card-inner [data-aos],
.expertise-card-front [data-aos],
.expertise-card-back [data-aos] {
    transform: inherit !important;
    transition: inherit !important;
}

/* Expertise cards should maintain their transform capabilities */
.expertise-card,
.expertise-card-inner,
.expertise-card-front,
.expertise-card-back {
    transform: unset !important;
    transition: unset !important;
}

html.aos-initialized [data-aos]:not(.aos-animate) {
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.8s, opacity 0.8s;
}
section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.flip-card,
.bg-gray-800,
.container {
    opacity: 1 !important;
    transform: none !important;
}

/* Enhanced Scroll Indicator Styles */
.scroll-indicator-container {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(17, 24, 39, 0.35);
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.scroll-indicator-container:hover {
    background: rgba(17, 24, 39, 0.5);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) scale(1.05) !important;
}

.pulse-highlight {
    color: #3B82F6 !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.7) !important;
    font-weight: 600 !important;
}

.mouse-wheel-container {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3), inset 0 0 6px rgba(6, 182, 212, 0.15) !important;
    transition: all 0.3s ease !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

.scroll-indicator-container:hover .mouse-wheel-container {
    border-color: rgba(6, 182, 212, 0.7) !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.6), inset 0 0 8px rgba(6, 182, 212, 0.3) !important;
}

.scroll-indicator-wheel {
    background: #06B6D4 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.6) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
}

.hand-swipe-container {
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4)) !important;
}

.swipe-animated-path {
    stroke-width: 2 !important;
    stroke: #06B6D4 !important;
    filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.5)) !important;
}

/* Apply to non-mobile-touch-explore thumbprint containers only */
.thumbprint-container:not(.mobile-touch-explore .thumbprint-container) {
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4)) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

/* Apply to non-mobile-touch-explore fingerprint icons only */
.fingerprint-icon:not(.mobile-touch-explore .fingerprint-icon) {
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.3)) !important;
}

.fingerprint-animated-path {
    stroke-width: 2 !important;
    stroke: #06B6D4 !important;
    filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.5)) !important;
    will-change: transform, opacity !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

.touch-indication {
    filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.7)) !important;
    will-change: opacity, r !important;
    transform-style: preserve-3d !important;
    animation: pulse-touch 1.5s ease-in-out infinite !important;
}

@keyframes pulse-touch {
    0% { opacity: 0.3; r: 0.5; }
    50% { opacity: 1; r: 1.5; }
    100% { opacity: 0.3; r: 0.5; }
}

/* Mobile and Small Screen Optimizations */
@media (max-width: 767px) {
    .scroll-indicator-container {
        bottom: max(15px, env(safe-area-inset-bottom, 15px)) !important;
        padding: 0.35rem 0.6rem !important;
    }
    
    #home {
        min-height: calc(100vh - env(safe-area-inset-bottom, 0px)) !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        padding-bottom: max(60px, env(safe-area-inset-bottom, 60px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .scroll-indicator-container {
        bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    }
    
    #home {
        min-height: calc(100vh - env(safe-area-inset-bottom, 0px)) !important;
        height: calc(var(--vh, 1vh) * 100) !important;
    }
}

@media (min-width: 1024px) {
    .scroll-indicator-container {
        bottom: 25px !important;
    }
    
    #home {
        min-height: 100vh !important;
        height: 100vh !important;
    }
}

/* Very Small Height Screens */
@media (max-height: 580px) {
    .scroll-indicator-container {
        transform: translateX(-50%) scale(0.8) !important;
        bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    }
    
    #home {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
}