/* ============================================
   PERFORMANS OPTİMİZASYONU: CSS KATMANI
   ============================================
   
   Forced reflow'u önlemek için:
   - transform/opacity kullanımı (GPU-accelerated)
   - will-change hint'leri
   - contain property ile layout isolation
   ============================================ */

/* Rating Preview - GPU-accelerated animation */
#ratingPreview {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
    pointer-events: none;
}

#ratingPreview.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Star Rating - Optimized hover states */
.star-btn {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    contain: layout style paint;
}

.star-btn.hover,
.star-btn.active {
    /* CSS-only animation, no JS style manipulation */
    color: #ffd700;
}

.star-btn:not(.disabled):hover {
    transform: scale(1.1);
}

/* Mini Star Rating */
.mini-star {
    transition: transform 0.12s ease;
    will-change: transform;
    contain: layout style paint;
}

.mini-star.hover,
.mini-star.active {
    color: #ffd700;
}

/* Rating Label Highlight */
#ratingLabel.highlight,
#miniLabel.highlight {
    color: #ffd700;
    font-weight: 600;
    transition: color 0.2s ease;
}

/* Skeleton Loader - GPU-accelerated transition */
#watchSkeleton {
    opacity: 1;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

#watchSkeleton.hidden {
    opacity: 0;
    pointer-events: none;
}

#watchContent {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: opacity, transform;
}

#watchContent.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Rating Bar - Smooth width animation */
#ratingBar {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* Comment Slide-in Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Layout Containment - Prevent reflow propagation */
.comment-item {
    contain: layout style paint;
}

.rating-section {
    contain: layout style;
}

/* Dropdown - GPU-accelerated */
#listDropdown,
#pickerDropdown {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    will-change: opacity, transform;
}

#listDropdown.active,
#pickerDropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Picker Item Selection */
.picker-item {
    transition: background-color 0.15s ease;
    contain: layout style paint;
}

.picker-item.selected {
    background-color: rgba(46, 204, 113, 0.1);
    border-left: 3px solid #2ecc71;
}

/* Button Micro-interactions */
.btn-vote,
.action-btn {
    transition: transform 0.1s ease;
    will-change: transform;
}

.btn-vote:active,
.action-btn:active {
    transform: scale(0.95);
}

/* Toast Animations */
@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Performance Hints */
.star-rating-container {
    /* Isolate rating section from rest of page */
    contain: layout style;
}

/* Reduce paint area during animations */
.comment-list {
    contain: layout;
}

/* Prevent layout shift during image load */
.comment-avatar img {
    aspect-ratio: 1;
    object-fit: cover;
}