header {
  color: var(--white);
  position: fixed;
  
  left: 0;
  width: 100%;
  z-index: 10;
  /* padding-top: var(--spacing-md); */
  height: calc(var(--logo-size) * 5.5);

  transition-property: background-color, box-shadow, height;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;

  html:not(.no-landing) & {
    animation: headerReveal 1s 3s ease-in-out forwards;
    top: -200px;
  }

  &.scrolled {
    background-color: var(--primary-color);
    box-shadow: 0 1rem 1rem hsl(from var(--black) h s l / 0.15);
    height: calc(var(--logo-size) * 2);

    /* padding-inline: var(--spacing-md); */
    backdrop-filter: blur(8px);
    background: hsl(from var(--black) h s l / 0.65);
    background-image: radial-gradient(
      circle at 50% 900%,
      hsla(0, 100%, 100%, 0.5),
      transparent 100%
    );
    border-bottom: 1px solid hsl(from var(--gray-color) h s l / 0.1);
    /* box-shadow: 0 1rem 1rem hsl(from var(--black) h s l / 0.15); */
  }

  .header-navigation {
    height: 100%;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width: 768px) {
      align-items: center;
      justify-content: center;
      gap: var(--spacing-md);
    }
  }

  .logo {
    font-weight: 300;
    color: var(--white);
    text-shadow: 0 0.5px 0 hsl(from var(--accent-color) h s 50 / 1),
      0 2px 0.5rem hsl(from var(--accent-color) h s 50 / 0.15),
      0 0 2rem hsl(from var(--accent-color) h 200% l / 0.25);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.2;

    svg {
      opacity: 0;
      height: 48px;
      width: 48px;
      animation: logoReveal 0.1s 4s ease-in-out forwards;
      transition: height 0.3s ease, width 0.3s ease;
      .no-landing & {
        animation: none;
        opacity: 1;
      } 
      .scrolled & {
        height: 32px;
        width: 32px;
      }
    }

    .text {
      transition: opacity 0.3s 0.3s ease;
      opacity: 1;
      .scrolled & {
        transition: opacity 0.1s ease, width 0.3s ease;
        opacity: 0;
        max-width: 10ch;
        @media screen and (max-width: 768px) {
          display: none;
        }
      }
    }
  }
}

.main-navigation {
  font-size: 0.75rem;
  /* transition: font-size 0.3s ease;
    .scrolled & {
      font-size: 0.85rem;
    } */

  @media screen and (max-width: 768px) {
    display: none;
  }

  a {
    color: var(--white);
    text-decoration: none;
    font-weight: 300;
    &:hover {
      border-bottom: 2px solid var(--white);
    }
    &.dimmed {
      color: var(--color-dimmed);
    }
    
    &.flp {
      display: inline-block;
      padding: 0.5em 0.85em;
      background-color: var(--primary-color);
      border-radius: var(--radius-md);
      border: 1px solid hsl(from var(--accent-color) h s l / 0.5);

      color: var(--white);
      background: linear-gradient(
        45deg,
        hsl(from var(--accent-color) h s 32),
        hsl(from var(--accent-color) h s 45)
      );
      /* background-repeat: no-repeat, no-repeat; */

      display: inline-block;
      font-weight: 500;
      border: 1px solid hsl(from var(--accent-color) h s l / 0.5);
      text-decoration: none;

      box-shadow: var(--glowing-shadows);
      transition: box-shadow 0.15s ease;
      &:hover {
        box-shadow: var(--glowing-shadows-hover);
      }
    }
  }
}

.sztp-banner {
  position: absolute;
  top: 0%;
  left: 0;
  width: 160px;
  aspect-ratio: 3/1;
  transition: all 0.3s ease-in-out;
  transform-origin: top left;

  .scrolled & {
    top: 100%;
    width: 280px;
    @media screen and (max-width: 768px) {
      width: 160px;
    }
  }

  img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  &:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
}

@keyframes logoReveal {
  to {
    opacity: 1;
  }
}