/* =========================================================
   header2.css — Smooth enhancement layer for header2.php
   Loaded ON TOP of header_styles.css — no duplicate rules.
   ========================================================= */

/* Self-hosted fonts */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ── Header enhanced transitions ──────────────────── */
.header {
    transition:
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    will-change: height, background;
}

/* Subtle top glow that fades in on scroll */
.header.scrolled::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(108, 92, 231, 0.5) 50%,
            transparent 100%);
    animation: h2-glow-slide 3s ease-in-out infinite;
}

@keyframes h2-glow-slide {

    0%,
    100% {
        opacity: 0.4;
        left: 20%;
        right: 20%;
    }

    50% {
        opacity: 1;
        left: 5%;
        right: 5%;
    }
}

/* ── Logo smooth hover ────────────────────────────── */
.h2-logo {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.h2-logo:hover {
    transform: scale(1.05);
}

.h2-logo img {
    transition: filter 0.3s ease, height 0.3s ease;
}

.h2-logo:hover img {
    filter: drop-shadow(0 0 18px rgba(108, 92, 231, 0.7));
}

.header.scrolled .h2-logo img {
    height: 36px;
}

/* ── Nav links smoother underline ─────────────────── */
.nav-links a {
    transition: color 0.25s ease;
}

.nav-links a::after {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    opacity: 1;
}

/* ── Balance pill skeleton loading ────────────────── */
.h2-balance .h2-balance-amt {
    transition: opacity 0.4s ease;
}

.h2-balance.loading .h2-balance-amt {
    opacity: 0.4;
}

/* ── Avatar pill — press effect ───────────────────── */
.avatar-pill-mobile {
    transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.avatar-pill-mobile:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.3);
}

.avatar-pill-mobile:active {
    transform: scale(0.93);
}

/* ── Drawer — smoother slide + spring feel ─────────── */
.mobile-drawer {
    transition: right 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: right;
}

/* Drawer link — smooth left indent on hover ─────── */
.drawer-link {
    position: relative;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}

.drawer-link:hover,
.drawer-link.active {
    padding-left: 20px;
}

/* ── Bottom nav — smooth icon bounce on active ─────── */
.bottom-nav-item {
    transition: color 0.2s ease, background 0.2s ease;
}

.bottom-nav-item i {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, filter 0.2s ease;
}

.bottom-nav-item.active i {
    transform: translateY(-2px) scale(1.15);
}

.bottom-nav-item:not(.active):hover i {
    transform: scale(1.1);
}

/* ── Contact btn glow pulse ───────────────────────── */
.btn-contact {
    position: relative;
    overflow: hidden;
}

.btn-contact::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-contact:hover::after {
    opacity: 1;
}

/* ── WhatsApp float — smoother animation ──────────── */
.whatsapp-float {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.whatsapp-float:hover {
    transform: scale(1.14) translateY(-2px);
}

/* ── h2 balance pill wrapper ──────────────────────── */
.h2-pill-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1;
}