/* Non-critical CSS - Animations, hover effects, responsive styles */
@keyframes fadeInBody{0%{opacity:0}100%{opacity:1}}
@keyframes slideInDown{0%{transform:translateY(-100px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes slideInUp{0%{transform:translateY(50px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes fadeInUp{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
body{animation:fadeInBody 0.6s ease-out}
header{animation:slideInDown 0.8s ease-out}
header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.1) 50%,transparent 70%);animation:shimmer 3s ease-in-out infinite;pointer-events:none}
header h1{animation:fadeInUp 1s ease-out 0.2s both}
header p{animation:fadeInUp 1s ease-out 0.4s both}
main{animation:fadeInUp 1s ease-out 0.6s both}
.tool-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 24px var(--shadow-medium)}
.tool-card .btn:hover{transform:translateX(4px);box-shadow:0 4px 8px var(--shadow-medium)}
.status-badge{position:absolute;top:1rem;right:1rem;padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;transform-origin:center}
.status-badge.available{background:linear-gradient(135deg,#10b981,#34d399);color:white}
.status-badge.beta{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:white}
.status-badge.in-development{background:linear-gradient(135deg,#6b7280,#9ca3af);color:white}
.status-badge.active{background:linear-gradient(135deg,#22c55e,#16a34a);color:white;animation:pulse 2s ease-in-out infinite}
.tool-card:hover .status-badge{transform:scale(1.1) rotate(-2deg)}
.btn.disabled{background:var(--text-light);cursor:not-allowed;transform:none}
footer{background:transparent;color:white;text-shadow:0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5);text-align:center;padding:2rem 0;margin-top:4rem;animation:slideInUp 1s ease-out 0.8s both}
@media (min-width:480px){.container{padding:0 2rem}.tool-grid{grid-template-columns:1fr}header h1{font-size:2.5rem}header p{font-size:1.1rem}.tools h2{font-size:2rem}}
@media (min-width:768px){.container{padding:0 3rem}.tool-grid{grid-template-columns:repeat(2,1fr)}header{padding:3rem 0}header h1{font-size:3rem}header p{font-size:1.2rem}.tools h2{font-size:2.2rem}.tool-card{padding:2rem}.tool-card h3{font-size:1.3rem}.tool-card p{font-size:1rem}}
@media (min-width:1024px){.tool-grid{grid-template-columns:repeat(3,1fr)}header{padding:4rem 0}header h1{font-size:3.5rem}.tools h2{font-size:2.5rem}}
@media (min-width:1200px){.container{padding:0 4rem}}
@media (prefers-contrast:high){:root{--shadow-light:rgba(0,0,0,0.3);--shadow-medium:rgba(0,0,0,0.4);--shadow-heavy:rgba(0,0,0,0.6)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.tool-card:hover{transform:none}.tool-card .btn:hover{transform:none}}
@media print{*{box-shadow:none!important;text-shadow:none!important}body{background:transparent!important;color:black!important}header{background:transparent!important;color:black!important}.btn{display:none!important}.status-badge{display:none!important}}

/* Extra small mobile devices (≤320px) */
@media (max-width:320px){
    .container{padding:0 1rem}
    header{padding:1.5rem 0}
    header h1{font-size:1.8rem;line-height:1.2}
    header p{font-size:0.9rem}
    .tools h2{font-size:1.5rem;margin-bottom:1.5rem}
    .tool-card{padding:1rem;margin-bottom:1rem}
    .tool-card h3{font-size:1.1rem;margin-bottom:0.5rem}
    .tool-card p{font-size:0.85rem;line-height:1.4;margin-bottom:1rem}
    .tool-card .btn{padding:0.6rem 1rem;font-size:0.85rem}
    .status-badge{font-size:0.7rem;padding:0.2rem 0.5rem;top:0.75rem;right:0.75rem}
    .logo{width:100px;height:auto}
}

/* Ultra small screens (≤280px) */
@media (max-width:280px){
    .container{padding:0 0.75rem}
    header h1{font-size:1.6rem}
    header p{font-size:0.85rem}
    .tools h2{font-size:1.3rem}
    .tool-card{padding:0.875rem}
    .tool-card h3{font-size:1rem}
    .tool-card p{font-size:0.8rem}
    .tool-card .btn{padding:0.5rem 0.875rem;font-size:0.8rem}
    .status-badge{font-size:0.65rem;padding:0.15rem 0.4rem}
}

/* Fix potential layout issues on very small screens */
@media (max-width:320px){
    /* Ensure touch targets are at least 44px */
    .tool-card .btn{min-height:44px;display:flex;align-items:center;justify-content:center}
    .tool-card{position:relative;overflow:hidden}
    
    /* Prevent horizontal scrolling */
    body{overflow-x:hidden}
    
    /* Better spacing for small screens */
    .tool-grid{gap:1rem}
    
    /* Optimize animations for low-end devices */
    *{animation-duration:0.3s!important}
    
    /* Ensure status badges don't overlap content */
    .status-badge{position:absolute;top:0.5rem;right:0.5rem;z-index:10}
}

/* Touch device optimizations */
.touch-device .tool-card:hover {
    transform: none;
    box-shadow: 0 4px 6px var(--shadow-light);
}

/* Low performance device optimizations */
.low-performance * {
    animation: none !important;
    transition: none !important;
}

/* Safe area insets for modern mobile browsers */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Fix for iOS Safari viewport height issue */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: 100vh;
        min-height: calc(100vh - env(safe-area-inset-bottom));
    }
}

/* Enhanced focus states for better accessibility */
@media (hover: none) and (pointer: coarse) {
    .tool-card:focus,
    .btn:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* Prevent zoom on double tap for better UX */
.tool-card .btn {
    touch-action: manipulation;
}

/* Better text rendering on mobile */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
    }
}