*:focus {
    outline: none !important;
}

@keyframes twinkle { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.15; } }
@keyframes float-msp { 50% { transform: translate3d(-8px, -16px, 0) rotate(3deg); } }
@keyframes float-msp-mini { 50% { transform: translate3d(-4px, -8px, 0) rotate(2deg); } }
@keyframes shine { 
    0% { transform: translateX(-100%) skewX(-25deg); opacity: 0; }
    5%, 95% { opacity: 0.9; }
    100% { transform: translateX(300%) skewX(-25deg); opacity: 0; }
}
@keyframes float-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pattern-shift { 
    0% { transform: translate(0); }
    100% { transform: translate(-32px, -32px); }
}

.balanced-title h1 { animation: float-subtle 6s ease-in-out infinite; }
.balanced-title pattern { animation: pattern-shift 20s linear infinite; }
.msp-float { animation: float-msp 8s ease-in-out infinite; }
.msp-float-mini { animation: float-msp-mini 6s ease-in-out infinite; }
.animate-twinkle { animation: twinkle 8s ease-in-out infinite; }

.shine-effect::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s infinite;
}

.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
    opacity: 1;
}

.tools-nav-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    /* Removed backdrop-filter: blur(8px) for better performance */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tools-nav-btn.active .text-white\/50 { color: rgba(255, 255, 255, 0.7); }
.tools-nav-btn.active span:first-child { color: white; }
.tools-nav-btn.active span:last-child { color: rgba(255, 255, 255, 0.8); }
.tools-nav-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.1); }

[data-tab], .nav-btn, .tools-nav-btn, .interactive-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

[data-tab].active {
    background: rgba(59, 130, 246, 0.08);
}

[data-tab].active span { color: #2563eb; }
[data-tab].active div { background: rgba(59, 130, 246, 0.2); }

[data-tab]::after,
[data-tab]::before,
.nav-btn::before,
.tools-nav-btn::before,
.interactive-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

[data-tab]::after { background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), transparent); }
[data-tab]::before { background: linear-gradient(45deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.08), rgba(59, 130, 246, 0.08)); }
[data-tab]:hover::after, [data-tab]:hover::before { opacity: 1; }
[data-tab]:active { transform: translateY(1px); }
[data-tab]:active svg { transform: scale(0.95); }

[data-tab] svg,
.nav-btn svg,
.tools-nav-btn svg,
.interactive-btn svg {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-tab]:hover svg,
.nav-btn:hover svg,
.tools-nav-btn:hover svg,
.interactive-btn:hover svg {
    transform: scale(1.15);
}

.nav-btn.active {
    background: rgb(59 130 246 / 0.1);
    color: rgb(37 99 235);
}

.nav-btn:active,
.tools-nav-btn:active,
[data-tab]:active,
.interactive-btn:active {
    transform: translateY(1px);
}

.shine-effect {
    position: relative;
    overflow: hidden;
}

.nav-btn::after,
.tools-nav-btn::after,
[data-tab]::after,
.interactive-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
}

.nav-btn:hover::after,
.tools-nav-btn:hover::after,
[data-tab]:hover::after,
.interactive-btn:hover::after {
    animation: shine 1s ease-out;
}

.nav-btn:focus-visible,
.tools-nav-btn:focus-visible,
[data-tab]:focus-visible,
.interactive-btn:focus-visible {
    outline: 2px solid rgb(59, 130, 246);
    outline-offset: 2px;
}