/* Custom Styles for ASTD Tier List */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Navigation Styles */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-300 flex items-center px-3 py-2 rounded-md text-sm font-medium;
}

.nav-link.active {
    @apply text-astd-accent bg-astd-secondary;
}

.nav-link:hover {
    @apply bg-astd-secondary/50;
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Tier Badge Styles */
.tier-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide;
}

.tier-meta {
    @apply bg-red-500 text-white;
}

.tier-s {
    @apply bg-orange-500 text-white;
}

.tier-a {
    @apply bg-yellow-500 text-black;
}

.tier-b {
    @apply bg-green-500 text-white;
}

.tier-c {
    @apply bg-blue-500 text-white;
}

.tier-d {
    @apply bg-gray-500 text-white;
}

/* Unit Card Styles */
.unit-card {
    @apply bg-astd-secondary rounded-lg p-4 hover:bg-astd-primary transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg;
}

.unit-card:hover {
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
}

/* Rarity Styles */
.rarity-unbound {
    background: linear-gradient(45deg, #8b5cf6, #a855f7);
    @apply text-white;
}

.rarity-5star {
    background: linear-gradient(45deg, #f59e0b, #eab308);
    @apply text-black;
}

.rarity-4star {
    background: linear-gradient(45deg, #8b5cf6, #7c3aed);
    @apply text-white;
}

.rarity-3star {
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    @apply text-white;
}

/* Element Styles */
.element-red {
    @apply bg-red-500 text-white;
}

.element-blue {
    @apply bg-blue-500 text-white;
}

.element-green {
    @apply bg-green-500 text-white;
}

.element-orange {
    @apply bg-orange-500 text-white;
}

.element-purple {
    @apply bg-purple-500 text-white;
}

/* FAQ Styles */
.faq-toggle {
    transition: all 0.3s ease;
}

.faq-toggle:hover {
    background-color: rgba(55, 65, 81, 0.8);
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-toggle.active .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.faq-content.show {
    max-height: 500px;
}

/* Button Styles */
.btn-primary {
    @apply bg-astd-accent text-white px-6 py-3 rounded-lg font-bold hover:bg-orange-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg;
}

.btn-secondary {
    @apply bg-transparent border-2 border-astd-accent text-astd-accent px-6 py-3 rounded-lg font-bold hover:bg-astd-accent hover:text-white transition-all duration-300;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-3 bg-astd-primary border border-gray-600 rounded-lg text-white focus:outline-none focus:border-astd-accent focus:ring-2 focus:ring-astd-accent focus:ring-opacity-50 transition-all duration-300;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Table Styles */
.tier-table {
    @apply w-full bg-astd-secondary rounded-lg overflow-hidden;
}

.tier-table thead {
    @apply bg-astd-primary;
}

.tier-table th {
    @apply px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
}

.tier-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
}

.tier-table tbody tr:nth-child(even) {
    @apply bg-gray-700;
}

.tier-table tbody tr:nth-child(odd) {
    @apply bg-gray-600;
}

.tier-table tbody tr:hover {
    @apply bg-gray-500 transition-colors duration-200;
}

/* Loading Animation */
.loading-spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-astd-accent rounded-full;
    animation: spin 1s linear infinite;
}

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

/* Tooltip Styles */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-black rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-300;
}

.tooltip.show {
    @apply opacity-100;
}

/* Scrollbar Styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #f59e0b;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d97706;
}

/* Mobile Menu Animation */
.mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

.mobile-menu.open {
    max-height: 300px;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(45deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Hover Effects */
.feature-card {
    @apply transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl;
}

.feature-card:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
}

/* Social Media Hover Effects */
.social-link {
    @apply transform transition-all duration-300 hover:scale-110 hover:rotate-12;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .tier-table {
        @apply text-xs;
    }
    
    .tier-table th,
    .tier-table td {
        @apply px-2 py-2;
    }
    
    .container {
        @apply px-4;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .tier-table {
        @apply bg-white border border-gray-300;
    }
    
    .tier-table th,
    .tier-table td {
        @apply border-b border-gray-300 text-black;
    }
}

/* Focus Styles for Accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-astd-accent ring-opacity-50;
}

/* Dark Mode Utilities */
.dark-mode-toggle {
    @apply fixed bottom-4 right-4 bg-astd-accent text-white p-3 rounded-full shadow-lg hover:bg-orange-600 transition-colors duration-300 z-50;
}

/* Custom Checkbox Styles */
.custom-checkbox {
    @apply appearance-none w-5 h-5 border-2 border-gray-400 rounded bg-transparent checked:bg-astd-accent checked:border-astd-accent relative cursor-pointer;
}

.custom-checkbox:checked::after {
    content: '✓';
    @apply absolute inset-0 flex items-center justify-center text-white text-xs font-bold;
}

/* Notification Styles */
.notification {
    @apply fixed top-4 right-4 bg-astd-accent text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50;
}

.notification.show {
    @apply translate-x-0;
}

.notification.success {
    @apply bg-green-500;
}

.notification.error {
    @apply bg-red-500;
}

.notification.warning {
    @apply bg-yellow-500 text-black;
}

/* Back to Top Button */
.back-to-top {
    @apply fixed bottom-4 left-4 bg-astd-secondary text-white p-3 rounded-full shadow-lg hover:bg-astd-primary transition-all duration-300 opacity-0 pointer-events-none z-50;
}

.back-to-top.show {
    @apply opacity-100 pointer-events-auto;
}

/* Search Styles */
.search-input {
    @apply w-full px-4 py-2 bg-astd-secondary border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-astd-accent;
}

.search-results {
    @apply absolute top-full left-0 right-0 bg-astd-secondary border border-gray-600 rounded-b-lg max-h-64 overflow-y-auto z-50;
}

.search-result-item {
    @apply px-4 py-2 hover:bg-astd-primary cursor-pointer transition-colors duration-200;
}

/* Tier List Specific Styles */
.tier-header {
    @apply flex items-center justify-between p-4 rounded-t-lg;
}

.tier-content {
    @apply bg-astd-secondary rounded-b-lg overflow-hidden;
}

.unit-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4;
}

.unit-item {
    @apply flex items-center space-x-3 p-3 rounded-lg hover:bg-astd-primary transition-colors duration-200;
}

/* Performance Optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .tier-badge {
        @apply border-2 border-current;
    }
    
    .nav-link:hover {
        @apply border border-current;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}