.header{display:flex;position:sticky;top:0;background-color:var(--secondary-dark);z-index:var(--zindex-header);color:var(--bg);transition:var(--transition);&.header-scrolled,.contact-page &{box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:var(--bg);.header-link{color:var(--secondary-dark);&:hover{color:var(--bg)}}}}.header-link,.header-logo{color:var(--pink)}.header-link{display:block;text-transform:uppercase;position:relative;overflow:hidden;transition:var(--transition)}.header-link:hover{color:var(--bg-darken)}.directional-btn{position:relative;overflow:hidden}.directional-btn .bg{position:absolute;background:var(--secondary-light);width:100%;height:100%;left:0;top:0;transition:transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none;transform:translateX(0) translateY(0)}.directional-btn:not(.hovered) .bg{transform:translateX(101%) translateY(0)}.directional-btn.preparing .bg{transition:none;will-change:transform}.directional-btn.enter-top .bg{transform:translateY(-101%)}.directional-btn.enter-bottom .bg{transform:translateY(101%)}.directional-btn.enter-left .bg{transform:translateX(-101%)}.directional-btn.enter-right .bg{transform:translateX(101%)}.directional-btn.hovered .bg{opacity:1;transform:translateX(0) translateY(0)}.directional-btn.exit-top .bg{transform:translateY(-101%)}.directional-btn.exit-bottom .bg{transform:translateY(101%)}.directional-btn.exit-left .bg{transform:translateX(-101%)}.directional-btn.exit-right .bg{transform:translateX(101%)}.link-text{position:relative;padding:1.5rem 2rem;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.header-link .hover-bg,.header-link.enter .hover-bg{opacity:1}.header-logo{margin-right:auto}