/* New Premium Header Overrides */
header {
transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease, border-color 0.5s ease !important;
}
header.scrolled {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
height: 70px !important;
}
header.scrolled #header-bg {
opacity: 1 !important;
}
#header .nav-links {
gap: clamp(12px, 1.5vw, 20px);
}
#header .nav-links a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
color: #a0a0aa;
font-size: 13px;
text-decoration: none;
white-space: nowrap;
transition: color 0.25s ease;
}
#header .nav-links a::after {
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 1px;
background: #33D2FF;
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
#header .nav-links a:hover,
#header .nav-links a:focus-visible {
color: #fff;
}
#header .nav-links a:hover::after,
#header .nav-links a:focus-visible::after {
transform: scaleX(1);
}
section[id] {
scroll-margin-top: 90px;
}
/* Mobile Menu Animations */
.menu-open {
overflow: hidden;
}
.menu-open #mobile-menu-btn span:nth-child(1) {
transform: translateY(0) rotate(45deg) !important;
background-color: #33D2FF;
}
.menu-open #mobile-menu-btn span:nth-child(2) {
opacity: 0;
}
.menu-open #mobile-menu-btn span:nth-child(3) {
transform: translateY(0) rotate(-45deg) !important;
background-color: #33D2FF;
}
.menu-open #mobile-menu {
opacity: 1;
pointer-events: auto;
}
.menu-open .mobile-link {
opacity: 1;
transform: translateY(0);
}
.menu-open .mobile-cta {
opacity: 1;
transform: translateY(0);
}
.mobile-link { transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, padding-left 0.3s ease; }
.mobile-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-link:nth-child(5) { transition-delay: 0.3s; }
.mobile-cta { transition-duration: 0.5s; transition-delay: 0.3s; transition-property: opacity, transform; }
#header .nav-links a:focus-visible,
.mobile-link:focus-visible,
#mobile-menu-btn:focus-visible {
outline: 2px solid #33D2FF;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
#mobile-menu,
.mobile-link,
.mobile-cta,
#mobile-menu-btn span {
transition: none !important;
}
}