/* 
   Smooth Experience & Performance Enhancements 
   Ensures consistent smooth scrolling and interaction across all devices.
*/

/* 1. Global Smooth Scroll */
html {
    scroll-behavior: smooth !important;
    height: 100%;
    width: 100%;
}

/* 2. Font Smoothing for Crisp Text */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    height: 100%;
    width: 100%;
}

/* 3. Mobile Interaction Optimizations */
* {
    /* Remove default tap highlight on mobile for a native app feel */
    -webkit-tap-highlight-color: transparent;
    /* Prevent text selection on non-text elements if needed, but keep it accessible */
}

/* Improve touch response for interactive elements */
a, button, input, select, textarea, label {
    touch-action: manipulation; /* Removes 300ms tap delay on some older browsers */
}

/* 4. Selection Styling */
::selection {
    background: #8AA243; /* Brand color */
    color: #ffffff;
    text-shadow: none;
}

::-moz-selection {
    background: #8AA243;
    color: #ffffff;
    text-shadow: none;
}

/* 5. Scrollbar Styling (Webkit) for a polished look */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: #8AA243; /* Brand color on hover */
}

/* 6. Smooth Transitions for Common Interactive Elements */
a, button, .btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth ease-out */
}

/* 7. Image Rendering */
img {
    /* Prevent layout shifts */
    content-visibility: auto; 
    /* Smooth rendering */
    image-rendering: -webkit-optimize-contrast;
}

/* 8. Hardware Acceleration for Fixed Elements (like Topbar) */
.tv-topbar, .mobile-nav, .overlay {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.modal {
    /* Avoid transform on modal to prevent stacking context issues with fixed positioning */
    will-change: opacity;
}