/* ============================================
   Anima Studio Pro - Unified Stylesheet
   Merged from: styles-base.css, styles-tools.css, styles-features.css
   ============================================ */

/* ============================================
   Anima Studio Pro v3.1 - Refined Dark Theme
   Clean, consistent, drag-friendly
   ============================================ */

/* === PERFORMANCE OPTIMIZATIONS === */

/* === DRAG AND DROP LAYER MANAGEMENT === */
.layer-item.layer-dragging {
    opacity: 0.4;
}
.layer-item.layer-drop-above {
    border-top: 2px solid var(--accent) !important;
    margin-top: -1px;
}
.layer-item.layer-drop-below {
    border-bottom: 2px solid var(--accent) !important;
    margin-bottom: -1px;
}
.layer-item.layer-drop-into {
    background: rgba(99, 102, 241, 0.12) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 4px;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
#layersList .layer-drop-line {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 3px;
    background: var(--accent, #6366f1);
    z-index: 999;
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    transition: top 0.04s ease;
}
#layersList {
    position: relative;
}
.layer-item[draggable="true"] {
    cursor: grab;
}
.layer-item[draggable="true"]:active {
    cursor: grabbing;
}

/* Plugin notification animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* GPU-accelerated playhead (defined in styles-timeline.css) */

/* Reduce paint areas */
.viewport, .timeline-panel {
    contain: layout style paint;
}

/* Optimize font rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* Reduce layout thrashing in timeline */
.frames-track, .tracks-wrapper {
    contain: layout;
}

/* Smooth transitions only when needed */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Icon Size Control (Global) --- */
[data-lucide] svg,
i svg,
.btn-toolbar svg,
.tool-btn svg,
.header svg,
.group-header svg,
.group-content svg {
    width: 14px;
    height: 14px;
}
.tool-btn svg {
    width: 16px;
    height: 16px;
}
.btn-icon svg {
    width: 14px;
    height: 14px;
}
.header .logo + div ~ .btn-toolbar svg {
    width: 13px;
    height: 13px;
}