/* Geometry changes once; WAAPI moves the original controls and text between it. */
:is(.site-header, .project-header).has-compositor-motion :is(.site-header-inner, .project-header-inner) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none;
  transition: none !important;
  will-change: auto;
  isolation: isolate;
  top: 0;
}
:is(.site-header, .project-header).has-compositor-motion.is-scrolled :is(.site-header-inner, .project-header-inner) { top: 8px; }
:is(.site-header, .project-header).has-compositor-motion :is(.site-header-inner, .project-header-inner)::after { display: none; }
.header-motion-running :is(.site-header-inner, .project-header-inner) * { transition: none !important; }
.header-motion-surface {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-color: rgba(10, 14, 12, .94);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 70%);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .26);
  clip-path: polygon(var(--pixel-cut) 0, calc(100% - var(--pixel-cut)) 0,
    calc(100% - var(--pixel-cut)) var(--pixel-cut), 100% var(--pixel-cut),
    100% calc(100% - var(--pixel-cut)), calc(100% - var(--pixel-cut)) calc(100% - var(--pixel-cut)),
    calc(100% - var(--pixel-cut)) 100%, var(--pixel-cut) 100%,
    var(--pixel-cut) calc(100% - var(--pixel-cut)), 0 calc(100% - var(--pixel-cut)),
    0 var(--pixel-cut), var(--pixel-cut) var(--pixel-cut));
}
.header-motion-blur {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-motion-surface::after {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0; height: 1px;
  background: rgba(207, 229, 214, .04);
}
.is-scrolled .header-motion-surface {
  background-color: rgba(13, 18, 15, .96);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}
@media (max-width: 720px) {
  .site-header.has-compositor-motion.is-scrolled .site-header-inner { top: 4px; }
}
@media (max-width: 760px) {
  .project-header.has-compositor-motion.is-scrolled .project-header-inner { top: 4px; }
}
@media (max-width: 520px) {
  .site-header.has-compositor-motion.is-scrolled .site-header-inner { top: 3px; }
  .project-header.has-compositor-motion.is-scrolled .project-header-inner { top: 3px; }
}