/* TechFlow Master Stylesheet */

body {
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
}

.organic-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transition: border-radius 8s ease-in-out infinite alternate, background-color 0.8s ease;
}

.organic-shape:hover { 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
}

.kinetic-card { 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

.kinetic-card:hover { 
    transform: translateY(-8px) scale(1.01); 
}

.kinetic-pill { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.kinetic-pill:active { 
    transform: scale(0.95); 
}

::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}

.dark ::-webkit-scrollbar-thumb { 
    background: #334155; 
}

.search-wrapper:focus-within { 
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); 
}

/* Modal Transitions */
.modal-active { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
}

.modal-active .modal-bubble { 
    transform: scale(1) !important; 
}

/* Flash animation for configuration switches */
@keyframes configFlash {
    0% { opacity: 0.7; transform: scale(0.995); filter: brightness(1.08); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.config-flash-anim {
    animation: configFlash 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile Navigation Breakpoint (680px) */
@media (max-width: 680px) {
    .nav-island { display: none !important; }
    .nav-hamburger { display: flex !important; }
}

@media (min-width: 681px) {
    .nav-island { display: flex !important; }
    .nav-hamburger { display: none !important; }
}