/* ==========================================================================
   Scroll & UI Issue Fixes
   Addresses specific problems with scrolling behavior and visual issues
   ========================================================================== */

/* Prevent tutorial overlay from auto-triggering */
.tutorial-overlay {
    display: none !important;
}

.tutorial-overlay.manual-start {
    display: block !important;
}

/* Ensure smooth scrolling without breaking layouts */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    overflow-x: hidden;
    /* Prevent horizontal scroll issues */
}

/* Fix any floating elements that break on scroll */
.floating-element,
.sticky-element {
    will-change: transform;
    backface-visibility: hidden;
}

/* Prevent layout shifts during scroll */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    will-change: transform;
    transform: translateZ(0);
}

/* Fix tool card overflow issues */
.tool-card,
.small-tool-card {
    overflow: visible !important;
    /* Prevent tag clipping */
}

/* Fix grid container spacing for tags */
.featured-grid,
.all-tools-grid {
    padding: 12px;
    /* Account for absolutely positioned tags */
}

/* Ensure tags don't get clipped */
.tool-card {
    margin: 12px 12px 4px 4px;
    /* Space for tags */
}

/* Fix any scroll-triggered animations */
.fade-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* Prevent scroll-based animation issues */
}

/* Fix mobile scroll issues */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
        /* Smooth iOS scrolling */
    }

    .tool-card {
        margin: 8px 8px 2px 2px;
        /* Reduced spacing on mobile */
    }
}

/* Prevent quick start menu from appearing on scroll */
.tutorial-tooltip {
    display: none !important;
}

.tutorial-tooltip.user-requested {
    display: block !important;
}

/* Fix any z-index stacking issues */
.tutorial-overlay,
.modal,
.popup {
    z-index: 10000;
}

.header {
    z-index: 1000;
}

/* Fix scroll snap behavior */
.scroll-snap-container {
    scroll-snap-type: y mandatory;
}

.scroll-snap-item {
    scroll-snap-align: start;
}

/* Performance optimizations for scroll */
.geometric-background {
    position: fixed;
    will-change: auto;
    /* Remove unnecessary will-change */
}

/* Fix any parallax or transform issues */
.parallax-element {
    will-change: auto;
    transform: translateZ(0);
}

/* Ensure consistent spacing */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Fix button visibility issues */
.btn,
button {
    position: relative;
    z-index: 1;
    /* Ensure buttons stay clickable */
}

/* Fix any overlay positioning */
.overlay,
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

/* Prevent content jumping during scroll */
* {
    box-sizing: border-box;
}

/* Fix any animation performance issues */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fix intersection observer issues */
.fade-element {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure consistent dark theme across all scroll positions */
body,
html,
.main-content {
    background-color: #0a0a0b;
    color: #fafafa;
}

/* Fix any white flash issues */
.page-transition {
    background: #0a0a0b;
    color: #fafafa;
}