/*
  Header structure and spacing come directly from the Figma "Navbar" component's
  auto-layout (node 6558:663 / 6557:646 / 6557:640) — real gap/padding values, not
  copied x/y coordinates. Desktop sizing is fluid: clamp(min, value-at-current-viewport,
  value-at-1920) so it renders pixel-for-pixel like Figma at the 1920px reference width
  and scales down proportionally on narrower desktop/laptop widths instead of overflowing.
  The sub-768px breakpoint further down switches to fixed mobile values.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 2.92vw, 56px) clamp(20px, 3.54vw, 68px) clamp(20px, 2.92vw, 56px) clamp(14px, 2.08vw, 40px);
  background-color: transparent;
  transition: background-color 0.3s var(--ease-standard), backdrop-filter 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard);
}

/* Scroll-triggered "frosted glass" state — toggled by assets/js/header-scroll.js
   once the visitor scrolls past roughly one viewport height. Values match the
   second "Navbar" instance (node 6558:733) in Figma. */
.site-header.is-scrolled {
  background-color: rgba(31, 42, 42, 0.02);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: inset 0 -2px 4px rgba(24, 35, 35, 0.2), inset 0 2px 4px rgba(24, 35, 35, 0.4);
  border: 0.5px solid rgba(24, 35, 35, 0.05);
}

/* On the frosted-glass background the cream link color is hard to read, so it
   switches to dark — only in the scrolled state, the transparent top state stays
   cream. */
.site-header.is-scrolled .site-header__links a {
  color: #182323;
}

.site-header__logo {
  position: relative;
  flex-shrink: 0;
}

.site-header__logo {
  --logo-w: clamp(60px, 7.28vw, 139.821px);
}

.site-header__logo-img,
.site-header__logo-mask {
  width: var(--logo-w);
  height: clamp(28px, 3.34vw, 64.034px);
}

.site-header__logo-img {
  transition: opacity 0.3s var(--ease-standard);
}

/*
  Header with the pink/green logo (= not the frosted "is-scrolled" state and not a
  light-theme section) gets a solid --color-bg bar: it's the exact background baked
  into the logo animation, so the animated canvas blends into the bar seamlessly.
*/
.site-header:not(.is-scrolled):not([data-theme="light"]) {
  background-color: var(--color-bg);
}

/* Project pages: no bar behind the pink/green logo (and no logo animation —
   header-logo.js skips them). */
[data-page="project"] .site-header:not(.is-scrolled):not([data-theme="light"]) {
  background-color: transparent;
}

/*
  Animated logo canvas. AnimacionLogo.mp4 crops to x 136–1056 / y 189–921 (the
  area the morph ever covers); the final "DM" frame (x 184–920 / y 414–751, 736px
  wide) must land exactly on the static logo, so the canvas is the crop scaled by
  logo-width / 736 and offset by the crop's distance from the final logo.
*/
.site-header__logo-anim {
  --s: calc(var(--logo-w) / 736);
  position: absolute;
  left: calc(-48 * var(--s));
  top: calc(-225 * var(--s));
  width: calc(920 * var(--s));
  height: calc(732 * var(--s));
  opacity: 0;
  pointer-events: none;
  /* cross-fades with the static logo when the animation ends (tiny tone/AA
     differences between the last video frame and the SVG) */
  transition: opacity 0.3s var(--ease-standard);
}
.site-header__logo-anim.is-playing { opacity: 1; transition: none; }
.site-header__logo.is-animating .site-header__logo-img,
.site-header__logo.is-animating .site-header__logo-mask { opacity: 0 !important; transition: none; }

/*
  The logo art itself is two-tone (pink/green) and stays that way normally. In the
  scrolled/frosted state it should match the dark link color instead — rather than
  fight the source SVG's own colors, the shape is reused as a mask over a solid
  fill, so it's an exact color regardless of what's baked into the artwork, and the
  two versions cross-fade.
*/
.site-header__logo-mask {
  position: absolute;
  inset: 0;
  background-color: #182323;
  -webkit-mask-image: url("/assets/img/logo-header.svg");
  mask-image: url("/assets/img/logo-header.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

.site-header.is-scrolled .site-header__logo-img {
  opacity: 0;
}

.site-header.is-scrolled .site-header__logo-mask {
  opacity: 1;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.site-header__toggle-bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-cream);
  transition: transform 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 15.57vw, 299px);
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 8.75vw, 168px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__links a {
  display: inline-block;
  padding: 10px;
  font-family: var(--font-light);
  font-size: clamp(14px, 1.354vw, 26px);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/*
  Contrast-adaptive theme, set by assets/js/header-theme.js from the
  data-header-theme of the section behind the header (pages that opt in only).
  light → dark logo + dark links; dark → original pink/green logo + white links.
*/
.site-header[data-theme] .site-header__links a {
  transition: color 0.3s var(--ease-standard);
}
.site-header[data-theme="light"] .site-header__logo-img { opacity: 0; }
.site-header[data-theme="light"] .site-header__logo-mask { opacity: 1; background-color: #1f2a2a; }
.site-header[data-theme="light"] .site-header__toggle-bar { background-color: #1f2a2a; }
.site-header[data-theme="dark"] .site-header__logo-img { opacity: 1; }
.site-header[data-theme="dark"] .site-header__logo-mask { opacity: 0; }
.site-header[data-theme="dark"] .site-header__toggle-bar { background-color: #fff; }
@media (min-width: 768px) {
  .site-header[data-theme="light"] .site-header__links a { color: #1f2a2a; }
  .site-header[data-theme="dark"] .site-header__links a { color: #fff; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .site-header {
    padding: 16px 20px;
  }

  .site-header__logo { --logo-w: 105px; }

  .site-header__logo-img,
  .site-header__logo-mask {
    width: 105px;
    height: 48px;
  }

  .site-header__toggle {
    display: flex;
  }

  .site-header__nav {
    position: fixed;
    inset: 0;
    top: 72px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    background-color: var(--color-bg);
    transform: translateX(100%);
    transition: transform 0.25s var(--ease-standard);
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  .site-header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .site-header__links a {
    padding: 0;
    font-size: 1.4rem;
    letter-spacing: normal;
  }

  .site-header.is-open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.is-open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header.is-open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}