/* =========================================================
   SHARED SITE HEADER
   One header system for Home / Works / Music / About / Contact
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px;
  background: transparent;
}

/* Only the homepage header participates in the showreel reveal/hide logic. */
.site-header.home-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

.site-header.home-header.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-logo {
  display: block;
  width: 150px;
  flex: 0 0 auto;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}

.site-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.site-logo:hover { transform: rotate(-2deg); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #F6F5F1;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.nav-link > span {
  display: inline-block;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), color 180ms ease;
}

.nav-link.tilt-left:hover > span { transform: rotate(-4deg); }
.nav-link.tilt-right:hover > span { transform: rotate(4deg); }
.nav-link.current-page > span { color: #3269FF; }

.imdb-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}

.imdb-link:hover { transform: rotate(-3deg); }

.imdb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 20px;
  padding: 0 5px;
  border-radius: 3px;
  background: #F5C518;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

/* Contact sits on the light paper background. */
.site-header.header-on-light .nav-link { color: #1C2445; }
.site-header.header-on-light .site-logo img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(17%) saturate(1549%) hue-rotate(193deg) brightness(91%) contrast(94%);
}

@media (max-width: 700px) {
  .site-header { padding: 18px 20px; }
  .site-logo { width: 108px; }
  .site-nav { gap: 13px; }
  .nav-link { font-size: 12px; }
  .imdb-badge { min-width: 34px; height: 18px; font-size: 12px; }
}

@media (max-width: 520px) {
  .site-header { padding: 16px; }
  .site-logo { width: 92px; }
  .site-nav { gap: 9px; }
  .nav-link { font-size: 10.5px; }
  .imdb-badge { min-width: 31px; height: 17px; font-size: 11px; }
}

/* Works begins below the fixed site header. */
.work-page { padding-top: 118px; }

@media (max-width: 700px) {
  .work-page { padding-top: 94px; }
}