/* Wrapper */
.sla-2382-wrapper {
    display: inline-block;
    vertical-align: middle;
    position: relative; 
}

/* Debug Tooltip - Fixed Position for Reliability */
.sla-2382-debug-tooltip {
    position: fixed; /* FIXED positioning to escape containers */
    background: #000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    pointer-events: none;
    z-index: 2147483647; /* MAX Z-Index */
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.sla-2382-debug-tooltip.active {
    opacity: 1;
}

/* Icon base styles */
.sla-2382-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, transform 0.3s;
    line-height: 1;
}

.sla-2382-icon svg,
.sla-2382-icon img.replaced-svg {
    width: 1em;
    height: 1em;
    overflow: visible; 
}

/* Transform Box for SVG Parts */
.sla-2382-icon svg * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Stroke Fixes */
.sla-2382-icon svg path,
.sla-2382-icon svg rect,
.sla-2382-icon svg circle,
.sla-2382-icon svg line,
.sla-2382-icon svg polyline,
.sla-2382-icon svg polygon,
.sla-2382-icon svg ellipse {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: currentColor; 
}

/* Animation Classes */
.sla-2382-anim { animation-fill-mode: both; }
.sla-2382-infinite { animation-iteration-count: infinite; }

/* Existing Animations */
.sla-2382-pulse { animation-name: sla-2382-pulse; }
@keyframes sla-2382-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

.sla-2382-rotate { animation-name: sla-2382-rotate; animation-timing-function: linear; }
@keyframes sla-2382-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.sla-2382-bounce { animation-name: sla-2382-bounce; }
@keyframes sla-2382-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } }

.sla-2382-shake { animation-name: sla-2382-shake; }
@keyframes sla-2382-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }

.sla-2382-flip { animation-name: sla-2382-flip; }
@keyframes sla-2382-flip { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } }

.sla-2382-swing { animation-name: sla-2382-swing; transform-origin: top center; }
@keyframes sla-2382-swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }

.sla-2382-wobble { animation-name: sla-2382-wobble; }
@keyframes sla-2382-wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } }

.sla-2382-fade-in { animation-name: sla-2382-fade-in; }
@keyframes sla-2382-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.sla-2382-zoom-in { animation-name: sla-2382-zoom-in; }
@keyframes sla-2382-zoom-in { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.sla-2382-slide-up { animation-name: sla-2382-slide-up; }
@keyframes sla-2382-slide-up { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* NEW ANIMATIONS */
.sla-2382-equalizer { animation-name: sla-2382-equalizer; }
@keyframes sla-2382-equalizer {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
}

.sla-2382-floating { animation-name: sla-2382-floating; }
@keyframes sla-2382-floating {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px, -5px); }
    50% { transform: translate(-5px, 5px); }
    75% { transform: translate(-5px, -5px); }
    100% { transform: translate(0, 0); }
}

.sla-2382-fade-rotate { animation-name: sla-2382-fade-rotate; }
@keyframes sla-2382-fade-rotate {
    0% { opacity: 0; transform: rotate(-90deg); }
    100% { opacity: 1; transform: rotate(0); }
}

.sla-2382-typewriter {
    /* Typewriter effect handled mostly via JS stroke manipulation, but we can add cursor effect here if needed later */
}