/**
 * navbar-premium.css - REWRITTEN
 * Apple-level premium navbar animations
 * FIXES: Timing, easing, hover effects
 */

/* ========================================
   NAVBAR SCROLL - OPTIMIZED TIMING
   ======================================== */

.site-header {
    /* Separate transitions for natural feel */
    transition:
        background-color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
        backdrop-filter 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Scrolled state - smooth enhancement */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(200%) blur(30px);
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ========================================
   NAV LINKS - SUBTLE PREMIUM HOVER
   ======================================== */

.main-nav a {
    transition:
        transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
        color 0.3s ease-out;
    position: relative;
}

/* Hover - FIXED: Color change instead of opacity */
.main-nav a:hover {
    transform: translateY(-1px);
    color: rgba(29, 29, 31, 0.85);
    /* Subtle darkening */
}

/* Active state underline - ELASTIC BOUNCE */
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 80%;
    height: 2px;
    background: var(--primary-color);
    /* Elastic bounce Apple */
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
    border-radius: 1px;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Active link - no opacity change */
.main-nav a.active {
    color: var(--text-dark);
    font-weight: 500;
}

/* ========================================
   ICON BUTTONS - REFINED
   ======================================== */

.icon-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.icon-btn:hover {
    transform: scale(1.08);
    color: var(--primary-color);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Cart count badge */
.cart-count {
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cart-count.updated {
    animation: badgePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* ========================================
   MEGA MENU - IMPROVED TRANSITIONS
   ======================================== */

.megamenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    /* No initial translation */
    /* Fast open, delayed close */
    transition:
        opacity 0.25s ease-out 0s,
        visibility 0s 0s,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}

.has-megamenu:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Delayed close for better UX */
.has-megamenu:not(:hover) .megamenu {
    transition-delay: 0.15s, 0.15s, 0s;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
    .site-header {
        transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
}

/* ========================================
   PERFORMANCE - GPU ACCELERATION
   ======================================== */

.site-header,
.main-nav a,
.icon-btn,
.megamenu {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Remove will-change when not animating */
.site-header.animation-complete,
.main-nav a:not(:hover),
.icon-btn:not(:hover) {
    will-change: auto;
}