@import url("./global.built.css");


.header-container {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(60px + 32px);
}

.header-container-blur {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.header {
    position: fixed;
    top: 16px;
    z-index: 9999;
    min-width: 256px;
    max-width: 256px;
    width: 100%;
    height: 60px;
    background: var(--appearance-material-ultrathick);
    border-radius: var(--border-radius-large);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    overflow: hidden;
    transition: width 500ms var(--ease-in-out-circ), min-width 500ms var(--ease-in-out-circ), max-width 500ms var(--ease-in-out-circ), height 500ms var(--ease-in-out-circ) 125ms, background 500ms var(--ease-in-out-circ);
    box-shadow: var(--depth-floating), 0 0 0 0.5px var(--appearance-fill-neutral-variant);
}

.header.expanded {
    background: var(--appearance-material-idle);
    min-width: 256px;
    max-width: calc(256px + 128px + 64px + 32px);
    width: 100%;
    height: calc(60px + calc(48px * 5) + 12px);
}

.header-content {
    position: relative;
}

.header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 20px 20px;
}

.header-logo {
    color: var(--appearance-glyph-neutral);
    fill: var(--appearance-glyph-neutral);
    text-decoration: none;
    position: relative;
    width: 20px;
    height: 20px;
}

.header-logo-icon {
    width: 20px;
    height: 20px;
}

.header-control {
    --glyph-height: var(--scale-20);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--font-family-content);
    font-size: var(--font-size-xxxsmall);
    font-weight: var(--font-weight-medium);
    line-height: var(--glyph-height);
    letter-spacing: var(--font-tracking-wide);
    color: var(--appearance-glyph-neutral);
    cursor: pointer;
    transition: color 250ms var(--ease-in-out-circ);
}

.header-control:hover {
    color: var(--appearance-glyph-neutral);
}

.header-control:hover .header-control-icon-path {
    background: var(--appearance-glyph-neutral);
}

.header-control .header-control-icon {
    width: var(--glyph-height);
    height: var(--glyph-height);
    position: relative;
}

.header-control-icon-path {
    width: 2.4px;
    height: 2.4px;
    background: var(--appearance-glyph-neutral);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-circle);
    transition: width 250ms var(--ease-in-out-circ), height 250ms var(--ease-in-out-circ), background 250ms var(--ease-in-out-circ);
}

.header.expanded .header-control-icon-path {
    width: 9.6px;
    height: 1.2px;
}

.header-navigation {
    position: relative;
}

.header-navigation-content {
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity 125ms var(--ease-linear), visibility 125ms var(--ease-linear), transform 125ms var(--ease-linear);
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header.expanded .header-navigation-content {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 250ms var(--ease-linear) 250ms, visibility 250ms var(--ease-linear) 250ms, transform 250ms var(--ease-linear) 250ms;
}

.header-navigation-link {
    width: 100%;
    padding: 8px;
    font-family: var(--font-family-content);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: var(--font-leading-medium);
    letter-spacing: var(--font-tracking-none);
    color: var(--appearance-glyph-neutral);
    border-radius: var(--border-radius-small);
    text-decoration: none;
    transition: background 250ms var(--ease-in-out-circ), color 250ms var(--ease-in-out-circ);
}

.header-navigation-link:hover {
    background: var(--appearance-fill-variant);
}

.header-navigation-link.active {
    color: var(--appearance-glyph-brand-variant);
    pointer-events: none;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    .header-container {
        height: calc(60px + 0px);
    }

    .header {
        top: 0;
        right: 0;
        left: 0;
        border-radius: var(--border-radius-sharp);
        min-width: 100%;
        max-width: 100%;
        box-shadow: var(--depth-baseline);
    }

    .header.expanded {
        min-width: 100%;
        max-width: 100%;
    }

}




  /* <div class="header-container">
    <div class="header-container-blur">
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 1; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); pointer-events: none; backdrop-filter: blur(0.390625px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 2; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%); pointer-events: none; backdrop-filter: blur(0.78125px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 3; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); pointer-events: none; backdrop-filter: blur(1.5625px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 4; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); pointer-events: none; backdrop-filter: blur(3.125px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 5; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); pointer-events: none; backdrop-filter: blur(6.25px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 6; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); pointer-events: none; backdrop-filter: blur(12.5px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 7; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); pointer-events: none; backdrop-filter: blur(25px); will-change: auto;">
      </div>
      <div
        style="opacity: 1; position: absolute; inset: 0px; z-index: 8; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); pointer-events: none; backdrop-filter: blur(50px); will-change: auto;">
      </div>
    </div>
    <nav class="header">
      <div class="header-content">
        <div class="header-actions">
          <a href="/" class="header-logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 28" class="header-logo-icon">
              <path d="M12.32 0L24.64 7V21L12.32 28L0 21V7L12.32 0Z" fill-opacity="0.5"></path>
              <path d="M0 7L12.32 13.3V28L0 21V7Z" fill-opacity="0.75"></path>
              <path d="M24.64 7L12.32 13.3V28L24.64 21V7Z" fill-opacity="1"></path>
            </svg>
          </a>
          <div class="header-control">
            Explore
            <div class="header-control-icon">
              <span class="header-control-icon-path"></span>
            </div>
          </div>
        </div>
        <nav class="header-navigation">
          <div class="header-navigation-content">
            <a class="header-navigation-link" href="https://x.com/madebyraj__" target="_blank"
              aria-label="Click Here to connect with me on X (Twitter)">Twitter</a>
            <a class="header-navigation-link" href="https://www.instagram.com/madebyraj__/" target="_blank"
              aria-label="Click Here to connect with me on Instagram">Instagram</a>
            <a class="header-navigation-link" href="https://www.linkedin.com/in/madebyraj" target="_blank"
              aria-label="Click Here to connect with me on LinkedIn">LinkedIn</a>
            <a class="header-navigation-link" href="mailto:hi.madebyraj@gmail.com" target="_blank"
              aria-label="Click Here to connect with me through mail">Mail</a>
            <a class="header-navigation-link"
              href="https://drive.google.com/file/d/1X_XBJ3qEVbgszznd8boW7VWUfITJwApi/view?usp=sharing"
              target="_blank">Resume</a>
          </div>
        </nav>
      </div>
    </nav>
  </div> */