/**
 * Recent Topics Marker Extension for phpBB.
 * @copyright (c) 2023 Extension Author
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

/* Base styles for the icon */
.recenttopics-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    vertical-align: middle;
    overflow: visible;
    transition: transform 0.2s ease-out; /* Smooth transition for hover effects */
    position: relative; /* Per il posizionamento relativo al titolo */
    top: -1px; /* Piccolo aggiustamento verticale per allineamento con il testo */
}

/* Ensure SVG fits properly */
.recenttopics-icon svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    transition: all 0.2s ease; /* Smooth transition */
    display: inline-block; /* Garantisce che si comporti come testo inline */
}

/* Tier-specific styling with improved colors for better accessibility */
.recenttopics-icon.tier-1 {
    color: #ff4500; /* Very recent - bright orange/red */
}

.recenttopics-icon.tier-2 {
    color: #ff9900; /* Medium recent - amber */
}

.recenttopics-icon.tier-3 {
    color: #d68100; /* Less recent - darker amber */
}

/* Hover effect for better interaction */
.recenttopics-icon:hover {
    transform: scale(1.1);
}

/* Animation styles - optimized for performance */
@keyframes recenttopics-pulse-tier1 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.9; }
}

@keyframes recenttopics-pulse-tier2 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

@keyframes recenttopics-pulse-tier3 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.95; }
}

.recenttopics-icon.animate.tier-1 {
    animation: recenttopics-pulse-tier1 1.5s ease-in-out infinite;
}

.recenttopics-icon.animate.tier-2 {
    animation: recenttopics-pulse-tier2 2s ease-in-out infinite;
}

.recenttopics-icon.animate.tier-3 {
    animation: recenttopics-pulse-tier3 2.5s ease-in-out infinite;
}

/* Mobile optimizations - better display on small screens */
@media (max-width: 768px) {
    .recenttopics-icon {
        margin-right: 4px;
    }
    
    .recenttopics-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* Reduced animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .recenttopics-icon.animate {
        animation: none !important;
        transition: none !important;
    }
}