_header.html

<!-- ============================================================
     HEADER v2 — Ultra-Premium Canonical Template
     New features over v1:
       • Shimmer / glint animation on progress bar
       • Typing "Available for work" ticker in utility bar
       • Magnetic "Let's Talk" button effect
       • Spotlight glow that follows mouse on nav pill
       • Active nav pill animates in with scale
       • Mega dropdown with description sub-text for each item
       • Nav link hover underline slide-in micro-animation
       • Animated availability pulse badge in utility bar
       • Smooth "scroll-hide utility bar" (hides on scroll down, shows on up)
       • Staggered mobile menu item entrance animations
       • Notification badge on "More" button
       • Profile avatar ring pulse on hover
     ============================================================ -->

<!-- ── Scroll Progress Bar (shimmer variant) ── -->
<div id="scrollProgressBar"
  class="fixed top-0 left-0 z-[100] h-[3px] transition-all duration-100 ease-out overflow-hidden"
  style="width:0%">
  <div class="h-full bg-gradient-to-r from-primary via-rose-400 to-indigo-500 w-full relative">
    <div id="progressShimmer" class="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent translate-x-[-100%]"></div>
  </div>
</div>

<!-- ── Top Utility Bar (hides on scroll-down, shows on scroll-up) ── -->
<div id="utilityBar"
  class="fixed top-0 left-0 right-0 z-[65] bg-slate-900 border-b border-white/5 text-xs font-medium tracking-wide transition-transform duration-300">
  <div class="container mx-auto flex items-center justify-between px-4 py-2 sm:px-6 lg:px-8">

    <!-- Left: contact + animated availability badge -->
    <div class="flex items-center gap-4 text-slate-400">
      <!-- Availability badge (animated) -->
      <div class="hidden sm:flex items-center gap-2 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
        </span>
        <span id="availTyper" class="text-[11px] font-semibold"></span>
      </div>

      <span class="hidden sm:block w-px h-3 bg-white/10"></span>

      <a href="mailto:rishvinreddy@gmail.com"
        class="hidden md:flex items-center gap-1.5 hover:text-white transition-colors duration-200 group" aria-label="Email">
        <svg class="w-3.5 h-3.5 text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>rishvinreddy@gmail.com</span>
      </a>

      <a href="tel:+919848723235"
        class="hidden lg:flex items-center gap-1.5 hover:text-white transition-colors duration-200 group" aria-label="Call">
        <svg class="w-3.5 h-3.5 text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>+91 98487 23235</span>
      </a>
    </div>

    <!-- Right: Social icons + GitHub star count -->
    <div class="flex items-center gap-1">
      <a class="w-7 h-7 flex items-center justify-center rounded-full text-slate-400 hover:text-[#25d366] hover:bg-white/10 transition-all duration-200"
        href="https://wa.me/message/J4P3MRT5HOAZH1" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.52 3.48A11.89 11.89 0 0012 0C5.373 0 .01 5.373.01 12.001 0 14.24.6 16.3 1.71 18.03L0 24l6.21-1.62A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12 0-3.2-1.24-6.2-3.48-8.52z"/></svg>
      </a>
      <a class="w-7 h-7 flex items-center justify-center rounded-full text-slate-400 hover:text-pink-400 hover:bg-white/10 transition-all duration-200"
        href="https://www.instagram.com/rishvin.reddy?igsh=Ym85aDhsOXpqeXdx&utm_source=qr" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.17.055 1.8.24 2.222.403.55.21.945.462 1.36.876.415.415.667.81.877 1.36.163.422.348 1.053.403 2.223.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.055 1.17-.24 1.8-.403 2.222-.21.55-.462.945-.876 1.36-.415.415-.667.81-.877 1.36-.163.422-.348 1.053-.403 2.223C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.055-1.17.24-1.8.403-2.222.21-.55.462-.945.876-1.36.415-.415.81-.667 1.36-.877.422-.163 1.053-.348 2.223-.403C8.416 2.175 8.796 2.163 12 2.163zm0 1.838c-3.162 0-3.534.012-4.78.069-1 .05-1.54.216-1.896.36-.48.19-.822.415-1.183.776-.36.36-.587.703-.776 1.183-.144.356-.31.896-.36 1.896-.057 1.246-.069 1.618-.069 4.78s.012 3.534.069 4.78c.05 1 .216 1.54.36 1.896.19.48.415.822.776 1.183.36.36.703.587 1.183.776.356.144.896.31 1.896.36 1.246.057 1.618.069 4.78.069s3.534-.012 4.78-.069c1-.05 1.54-.216 1.896-.36.48-.19.822-.415 1.183-.776.36-.36.587-.703.776-1.183.144-.356.31-.896.36-1.896.057-1.246.069-1.618.069-4.78s-.012-3.534-.069-4.78c-.05-1-.216-1.54-.36-1.896-.19-.48-.415-.822-.776-1.183-.36-.36-.703-.587-1.183-.776-.356-.144-.896-.31-1.896-.36-1.246-.057-1.618-.069-4.78-.069zM12 6.838a5.162 5.162 0 100 10.324 5.162 5.162 0 000-10.324zm0 8.324a3.162 3.162 0 110-6.324 3.162 3.162 0 010 6.324zm6.406-9.844a1.2 1.2 0 11-2.4 0 1.2 1.2 0 012.4 0z"/></svg>
      </a>
      <a class="w-7 h-7 flex items-center justify-center rounded-full text-slate-400 hover:text-[#0077b5] hover:bg-white/10 transition-all duration-200"
        href="https://www.linkedin.com/in/rishvinreddy" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.025-3.037-1.853-3.037-1.854 0-2.137 1.447-2.137 2.943v5.663H8.352V9h3.414v1.561h.049c.476-.9 1.637-1.853 3.369-1.853 3.602 0 4.268 2.37 4.268 5.455v6.289zM5.337 7.433a2.064 2.064 0 110-4.128 2.064 2.064 0 010 4.128zM7.119 20.452H3.554V9h3.565v11.452z"/></svg>
      </a>
      <a class="hidden sm:flex w-7 h-7 items-center justify-center rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-all duration-200"
        href="https://github.com/RishvinReddy" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
      </a>
    </div>
  </div>
</div>

<!-- ── Main Floating Pill Header ── -->
<header id="siteHeader"
  class="fixed left-0 right-0 z-50 transition-all duration-300 pt-3 pb-2"
  style="top: 2.25rem">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- The nav pill itself -->
    <div id="mainNav"
      class="mx-auto max-w-5xl rounded-full px-5 py-2.5 flex items-center justify-between transition-all duration-300 bg-white/75 backdrop-blur-lg border border-white/30 shadow-lg shadow-slate-200/30">

      <!-- ── Logo / Avatar ── -->
      <a class="flex items-center gap-2.5 group shrink-0" href="index.html">
        <div class="relative">
          <!-- Pulse ring on hover -->
          <div class="absolute inset-0 rounded-full bg-primary/30 scale-110 opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-300"></div>
          <div class="relative w-9 h-9 overflow-hidden rounded-full border-2 border-white/80 shadow-md group-hover:scale-105 transition-transform duration-300">
            <img src="https://i.postimg.cc/nz2684jj/PHOTO-2025-11-11-12-05-06.jpg"
              alt="Rishvin Reddy" class="w-full h-full object-cover">
          </div>
        </div>
        <span class="text-base font-extrabold tracking-tight bg-gradient-to-r from-slate-900 via-slate-700 to-slate-500 group-hover:from-primary group-hover:via-rose-500 group-hover:to-indigo-600 bg-clip-text text-transparent transition-all duration-500">
          Rishvin
        </span>
      </a>

      <!-- ── Desktop Navigation ── -->
      <nav class="hidden md:flex items-center gap-0.5" style="position:relative">
        <!-- Gliding spotlight indicator — moved by JS -->
        <div id="navSpotlight" class="absolute inset-y-0 rounded-full bg-primary/8 transition-all duration-200 ease-out pointer-events-none opacity-0"></div>

        <a class="nav-pill relative px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200 hover:text-primary group"
          href="index.html" data-page="index">
          <span class="relative z-10">Home</span>
          <span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary rounded-full group-hover:w-4 transition-all duration-300"></span>
        </a>
        <a class="nav-pill relative px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200 hover:text-primary group"
          href="About_page.html" data-page="about">
          <span class="relative z-10">About</span>
          <span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary rounded-full group-hover:w-4 transition-all duration-300"></span>
        </a>
        <a class="nav-pill relative px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200 hover:text-primary group"
          href="Portfolio_page.html" data-page="portfolio">
          <span class="relative z-10">Work</span>
          <span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary rounded-full group-hover:w-4 transition-all duration-300"></span>
        </a>
        <a class="nav-pill relative px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200 hover:text-primary group"
          href="IDE.html" data-page="ide">
          <span class="relative z-10 flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            IDE
          </span>
          <span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary rounded-full group-hover:w-4 transition-all duration-300"></span>
        </a>
        <a class="nav-pill relative px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200 hover:text-primary group"
          href="Services_page.html" data-page="services">
          <span class="relative z-10">Services</span>
          <span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary rounded-full group-hover:w-4 transition-all duration-300"></span>
        </a>

        <!-- ── Mega Dropdown ── -->
        <div class="relative group ml-1">
          <button class="relative flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-slate-600 rounded-full hover:text-primary hover:bg-primary/5 transition-all duration-200">
            More
            <!-- Notification dot -->
            <span class="absolute top-1.5 right-2 w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
            <svg class="w-3 h-3 group-hover:rotate-180 transition-transform duration-300 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path d="M19 9l-7 7-7-7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>

          <!-- Mega dropdown panel -->
          <div class="absolute right-0 top-full mt-3 w-64 origin-top-right bg-white/97 backdrop-blur-2xl rounded-2xl shadow-2xl shadow-slate-300/20 border border-slate-100/80 p-2 invisible opacity-0 translate-y-2 scale-95 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 group-hover:scale-100 transition-all duration-250">
            <!-- Header label -->
            <p class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-1">More Pages</p>

            <a class="mega-link flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-all duration-150 group/item" href="Resume_page.html">
              <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500 group-hover/item:scale-110 transition-transform">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-slate-700 group-hover/item:text-primary transition-colors">Resume</p>
                <p class="text-[11px] text-slate-400 leading-tight">Download CV & experience</p>
              </div>
            </a>
            <a class="mega-link flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-all duration-150 group/item" href="Skills_page.html">
              <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-500 group-hover/item:scale-110 transition-transform">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-slate-700 group-hover/item:text-primary transition-colors">Skills & Certs</p>
                <p class="text-[11px] text-slate-400 leading-tight">Tech stack & certifications</p>
              </div>
            </a>
            <a class="mega-link flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-all duration-150 group/item" href="Awards_page.html">
              <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500 group-hover/item:scale-110 transition-transform">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-slate-700 group-hover/item:text-primary transition-colors">Awards</p>
                <p class="text-[11px] text-slate-400 leading-tight">Honours & achievements</p>
              </div>
            </a>
            <a class="mega-link flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-all duration-150 group/item" href="Blog_page.html">
              <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-pink-50 flex items-center justify-center text-pink-500 group-hover/item:scale-110 transition-transform">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-slate-700 group-hover/item:text-primary transition-colors">Blog</p>
                <p class="text-[11px] text-slate-400 leading-tight">Articles & insights</p>
              </div>
            </a>
            <a class="mega-link flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-all duration-150 group/item" href="FAQ_page.html">
              <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center text-violet-500 group-hover/item:scale-110 transition-transform">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-slate-700 group-hover/item:text-primary transition-colors">FAQ</p>
                <p class="text-[11px] text-slate-400 leading-tight">Common questions answered</p>
              </div>
            </a>

            <!-- Bottom CTA strip -->
            <div class="mt-2 pt-2 border-t border-slate-100 px-1">
              <a href="CTA_page.html"
                class="flex items-center justify-center gap-2 w-full py-2 text-xs font-bold text-primary hover:bg-primary/5 rounded-xl transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Start a conversation →
              </a>
            </div>
          </div>
        </div>
      </nav>

      <!-- ── Right Actions ── -->
      <div class="flex items-center gap-2 shrink-0">
        

        <!-- Magnetic "Let's Talk" CTA -->
        <a id="letsTalkBtn" href="CTA_page.html"
          class="hidden md:inline-flex items-center gap-2 px-5 py-2 text-sm font-bold text-white rounded-full bg-gradient-to-r from-slate-900 to-slate-800 hover:from-primary hover:to-rose-500 shadow-md hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 hover:scale-105 transition-all duration-300 relative overflow-hidden group">
          <!-- Shine sweep -->
          <span class="absolute inset-0 -translate-x-full skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-out pointer-events-none"></span>
          <span class="relative z-10 flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            Let's Talk
          </span>
        </a>

        <!-- Mobile hamburger toggle -->
        <button id="mobileToggle"
          class="md:hidden w-9 h-9 flex items-center justify-center text-slate-600 hover:bg-slate-100 rounded-full transition-all duration-200"
          aria-label="Open menu" aria-expanded="false">
          <svg id="menuIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- ── Mobile Menu (staggered entrance) ── -->
  <div id="mobileMenu"
    class="absolute top-full left-3 right-3 mt-2 p-4 bg-white/97 backdrop-blur-2xl rounded-3xl shadow-2xl shadow-slate-300/20 border border-white/40 flex flex-col gap-1 origin-top scale-95 opacity-0 invisible transition-all duration-300">

    <p class="px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-0.5">Navigate</p>

    <a href="index.html" class="mobile-nav-link flex items-center gap-3 px-3 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-all group" data-page="index">
      <span class="w-7 h-7 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-primary/10 group-hover:text-primary transition-all">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      Home
    </a>
    <a href="About_page.html" class="mobile-nav-link flex items-center gap-3 px-3 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-all group" data-page="about">
      <span class="w-7 h-7 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-primary/10 group-hover:text-primary transition-all">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      About
    </a>
    <a href="Portfolio_page.html" class="mobile-nav-link flex items-center gap-3 px-3 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-all group" data-page="portfolio">
      <span class="w-7 h-7 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-primary/10 group-hover:text-primary transition-all">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      Portfolio
    </a>
    <a href="IDE.html" class="mobile-nav-link flex items-center gap-3 px-3 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-all group" data-page="ide">
      <span class="w-7 h-7 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-primary/10 group-hover:text-primary transition-all">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      IDE
    </a>
    <a href="Services_page.html" class="mobile-nav-link flex items-center gap-3 px-3 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-all group" data-page="services">
      <span class="w-7 h-7 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-primary/10 group-hover:text-primary transition-all">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      Services
    </a>

    <div class="border-t border-slate-100 my-1.5"></div>
    <p class="px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">More</p>

    <div class="grid grid-cols-2 gap-1.5">
      <a href="IDE.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors col-span-2">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Projects IDE
      </a>
      <a href="Resume_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Resume
      </a>
      <a href="Skills_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Skills
      </a>
      <a href="Awards_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Awards
      </a>
      <a href="Blog_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Blog
      </a>
      <a href="FAQ_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> FAQ
      </a>
      <a href="Testimonials_page.html" class="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-slate-600 bg-slate-50 rounded-xl hover:text-primary transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Reviews
      </a>
    </div>

    <div class="border-t border-slate-100 mt-1.5 pt-2">
      <a href="CTA_page.html"
        class="flex items-center justify-center gap-2 w-full py-3 text-sm font-bold text-white bg-gradient-to-r from-primary to-rose-500 rounded-2xl shadow-lg shadow-primary/30 hover:shadow-xl hover:shadow-primary/40 hover:scale-[1.02] transition-all duration-200 relative overflow-hidden group">
        <span class="absolute inset-0 -translate-x-full skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
        <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
        Contact Me — I'm Available
      </a>
    </div>
  </div>
</header>

<!-- ── Header v2 Scripts ── -->
<script>
(function () {
  /* ─── Scroll Progress Bar + shimmer ─── */
  const progressBar = document.getElementById('scrollProgressBar');
  const shimmer = document.getElementById('progressShimmer');
  let shimmerRunning = false;

  function updateProgress() {
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
    if (progressBar) progressBar.style.width = pct + '%';
    // Shimmer every 15% milestone
    if (shimmer && pct > 0 && Math.round(pct) % 15 === 0 && !shimmerRunning) {
      shimmerRunning = true;
      shimmer.style.transitionDuration = '600ms';
      shimmer.style.transform = 'translateX(100%)';
      setTimeout(function() {
        shimmer.style.transitionDuration = '0ms';
        shimmer.style.transform = 'translateX(-100%)';
        setTimeout(function() { shimmerRunning = false; }, 50);
      }, 650);
    }
  }

  /* ─── Utility bar scroll-hide ─── */
  const utilityBar = document.getElementById('utilityBar');
  const siteHeader = document.getElementById('siteHeader');
  const mainNav = document.getElementById('mainNav');
  let lastScrollY = window.scrollY;
  const UTILITY_H = 36; // px — approx height of utility bar

  function updateHeader() {
    const scrollY = window.scrollY;
    const scrolledDown = scrollY > lastScrollY && scrollY > 60;
    const scrolledFar = scrollY > 40;

    // Hide/show utility bar
    if (utilityBar) {
      utilityBar.style.transform = scrolledDown ? 'translateY(-100%)' : 'translateY(0)';
    }
    // Move main header up when utility bar hides
    if (siteHeader) {
      const headerTop = scrolledDown ? 0 : UTILITY_H;
      siteHeader.style.top = headerTop + 'px';
      siteHeader.style.paddingTop = scrolledFar ? '0.4rem' : '0.65rem';
      siteHeader.style.paddingBottom = scrolledFar ? '0.2rem' : '0.4rem';
    }
    // Glass deepen on scroll
    if (mainNav) {
      if (scrolledFar) {
        mainNav.classList.add('bg-white/90','shadow-xl','shadow-slate-200/30');
        mainNav.classList.remove('bg-white/75');
      } else {
        mainNav.classList.remove('bg-white/90','shadow-xl');
        mainNav.classList.add('bg-white/75');
      }
    }
    lastScrollY = scrollY;
    updateProgress();
  }

  window.addEventListener('scroll', updateHeader, { passive: true });
  updateHeader();

  /* ─── Availability typer ─── */
  const typerEl = document.getElementById('availTyper');
  if (typerEl) {
    const phrases = ['Open to full-time roles', 'Available for freelance', 'Remote · Ready now'];
    let pi = 0, ci = 0, deleting = false;
    function type() {
      const phrase = phrases[pi];
      typerEl.textContent = deleting ? phrase.slice(0, ci--) : phrase.slice(0, ci++);
      if (!deleting && ci > phrase.length) { deleting = true; setTimeout(type, 1600); return; }
      if (deleting && ci < 0) { deleting = false; pi = (pi + 1) % phrases.length; ci = 0; setTimeout(type, 400); return; }
      setTimeout(type, deleting ? 40 : 70);
    }
    type();
  }

  /* ─── Active Link ─── */
  const currentPath = window.location.pathname.split('/').pop() || 'index.html';
  const pageMap = {
    'index.html': 'index', '': 'index',
    'About_page.html': 'about',
    'Portfolio_page.html': 'portfolio',
    'Services_page.html': 'services',
    'IDE.html': 'ide',
    'Resume_page.html': 'resume',
    'Skills_page.html': 'skills',
    'Awards_page.html': 'awards',
    'Blog_page.html': 'blog',
    'FAQ_page.html': 'faq',
    'CTA_page.html': 'cta',
    'Contact_page.html': 'contact',
    'Case_study_page.html': 'case-study',
    'Testimonials_page.html': 'testimonials'
  };
  const activePage = pageMap[currentPath];
  if (activePage) {
    document.querySelectorAll('.nav-pill[data-page="' + activePage + '"]').forEach(function(el) {
      el.classList.add('text-primary', 'font-bold');
      const line = el.querySelector('span:last-child');
      if (line) { line.classList.remove('w-0'); line.classList.add('w-4'); }
    });
    document.querySelectorAll('.mobile-nav-link[data-page="' + activePage + '"]').forEach(function(el) {
      el.classList.add('text-primary', 'bg-primary/5', '');
      var icon = el.querySelector('span');
      if (icon) { icon.classList.add('bg-primary/10','text-primary'); }
    });
  }

  /* ─── Mobile Menu ─── */
  const mobileToggle = document.getElementById('mobileToggle');
  const mobileMenu = document.getElementById('mobileMenu');
  const menuIcon = document.getElementById('menuIcon');
  let mobileOpen = false;

  function setMobile(open) {
    mobileOpen = !!open;
    if (mobileMenu) {
      if (mobileOpen) {
        mobileMenu.classList.remove('invisible', 'opacity-0', 'scale-95');
        mobileMenu.classList.add('visible', 'opacity-100', 'scale-100');
      } else {
        mobileMenu.classList.add('invisible', 'opacity-0', 'scale-95');
        mobileMenu.classList.remove('visible', 'opacity-100', 'scale-100');
      }
    }
    if (mobileToggle) mobileToggle.setAttribute('aria-expanded', String(mobileOpen));
    if (menuIcon) {
      menuIcon.innerHTML = mobileOpen
        ? '<path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
        : '<path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
    }
  }

  if (mobileToggle && mobileMenu) {
    mobileToggle.addEventListener('click', function(e) { e.stopPropagation(); setMobile(!mobileOpen); });
    document.addEventListener('click', function(e) {
      if (!mobileMenu.contains(e.target) && !mobileToggle.contains(e.target)) setMobile(false);
    });
    mobileMenu.querySelectorAll('a').forEach(function(l) { l.addEventListener('click', function() { setMobile(false); }); });
    window.addEventListener('resize', function() { if (window.innerWidth >= 768) setMobile(false); });
  }

  })();
</script>