/**
 * Trivia Section Styles
 * Optimized for performance with GPU-accelerated animations
 *
 * @package TeenSerie
 */

/* GPU-accelerated card animations */
.trivia-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trivia-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Icon watermark with optimized transform */
.trivia-icon-watermark {
    opacity: 0.1;
    transform: rotate(12deg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.dark .trivia-icon-watermark {
    opacity: 0.05;
}

.trivia-card:hover .trivia-icon-watermark {
    transform: rotate(0deg) scale(1.1);
}

/* SVG icon sizing */
.trivia-icon-svg {
    width: 160px;
    height: 160px;
}

/* Spoiler button animation */
.trivia-spoiler-btn {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: trivia-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.trivia-spoiler-btn:hover {
    transform: scale(1.05);
}

@keyframes trivia-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Bottom decoration animation */
.trivia-decoration {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.trivia-card:hover .trivia-decoration {
    opacity: 1;
}

/* Optimize dark mode transitions - only specific properties */
.trivia-card,
.trivia-card h3,
.trivia-card p {
    transition-property: transform, box-shadow, color, background-color,
                         border-color, filter, opacity;
}

/* Prevent layout shift while icons load */
.trivia-icon-watermark i[data-lucide] {
    display: block;
    min-width: 160px;
    min-height: 160px;
}

/* Optimize repaints - create new layer for animated elements */
.trivia-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.trivia-icon-watermark {
    will-change: transform, opacity;
}

/* Remove will-change after animation to free memory */
.trivia-card:not(:hover) {
    will-change: auto;
}