/* ==========================================================================
   Header + menu drawer
   The bar holds the logo, a "Work with us" pill and the menu button. The
   links live in a white drawer that slides in from the right over a light
   scrim. Everything moves on transform and opacity only. The CTA and the
   menu button have no transform transitions: the intro flies them in
   with GSAP (hero.js), and a CSS transition would drag every frame.
   ========================================================================== */

/* The header stays on screen (fixed). Once the work section climbs up under
   it, it compacts onto a frosted bone bar with a hairline (header.js), so the
   logo and buttons never sit on top of type or pictures (as on Atelier North).
   The header's own height never changes (the hero and the ribbon lay out
   from it): the bar is shorter and the contents rise to its middle on
   `translate`, which leaves `transform` free for the intro's flights. The box
   is taller than the bar, so only its contents take the pointer. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--header-compact);
  background: rgb(247 245 242 / 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 550ms var(--ease-out);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
  transition: translate 600ms var(--ease-out);
}

.site-header.is-compact::before {
  opacity: 1;
}

.site-header.is-compact > * {
  translate: 0 calc((var(--header-compact) - var(--header-h)) / 2);
}

/* Without JS nothing compacts it: it stays with the hero, as before. */
.no-js .site-header {
  position: absolute;
}

.site-header__logo {
  flex: none;
  display: block;
  margin-right: auto;
}

.site-header__logo img {
  width: clamp(120px, 8vw, 146px);
  height: auto;
  transform-origin: 0 50%;
  transition: scale 600ms var(--ease-out);
}

.site-header.is-compact .site-header__logo img {
  scale: 0.74;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 28px);
}

/* Text roll: the label slides up and an identical copy follows it in. */
.roll {
  display: inline-grid;
  overflow: hidden;
  vertical-align: top;
}

.roll > span {
  grid-area: 1 / 1;
  transition: transform 420ms var(--ease-out);
}

.roll > span + span {
  transform: translateY(105%);
}

@media (hover: hover) and (pointer: fine) {
  a:hover > .roll > span:first-child {
    transform: translateY(-105%);
  }

  a:hover > .roll > span + span {
    transform: none;
  }
}

a:focus-visible > .roll > span:first-child {
  transform: translateY(-105%);
}

a:focus-visible > .roll > span + span {
  transform: none;
}

/* ------------------------------------------------------------------ CTA */

.btn-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 27px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  transition:
    background-color 300ms ease,
    scale 240ms var(--ease-out);
}

.btn-cta__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition:
    translate 420ms var(--ease-out),
    rotate 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover {
    background: #262626;
  }

  .btn-cta:hover .btn-cta__arrow {
    translate: 3px 0;
  }

  /* "Work with us" opens the enquiry where you are: its arrow turns down into
     the page instead of nudging on (after spinta.co.uk). */
  .btn-cta--enquiry:hover .btn-cta__arrow {
    translate: none;
    rotate: 45deg;
  }
}

.btn-cta:active {
  scale: 0.97;
}

/* ------------------------------------------------------------------ menu button */

.burger {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -11px; /* the lines, not the hit area, meet the gutter */
  color: var(--ink);
  transition: scale 240ms var(--ease-out);
}

.burger:active {
  scale: 0.92;
}

.burger__lines {
  position: relative;
  display: block;
  width: 24px;
  height: 14px;
}

.burger__lines > span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: width 420ms var(--ease-out);
}

.burger__lines > span:nth-child(1) {
  top: 0;
}

.burger__lines > span:nth-child(2) {
  top: calc(50% - 0.75px);
  width: 64%;
}

.burger__lines > span:nth-child(3) {
  bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .burger:hover .burger__lines > span:nth-child(2) {
    width: 100%;
  }

  .burger:hover .burger__lines > span:nth-child(3) {
    width: 64%;
  }
}

/* ------------------------------------------------------------------ drawer */

/* Always rendered (off-screen and `inert` while closed), never
   visibility:hidden: the first open has nothing to lay out or paint, so
   its first frame is as smooth as the rest. */
.menu {
  --menu-in: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint: gentle start, long settle */
  --menu-out: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  pointer-events: none;
}

.menu.is-open {
  pointer-events: auto;
}

.menu__scrim {
  position: absolute;
  inset: 0;
  background: rgb(17 17 17 / 0.24);
  opacity: 0;
  transition: opacity 520ms var(--menu-out);
  will-change: opacity;
}

.menu.is-open .menu__scrim {
  opacity: 1;
  transition: opacity 800ms var(--menu-in);
}

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  padding: clamp(24px, 4vh, 40px) clamp(28px, 3.2vw, 52px) max(clamp(28px, 4.4vh, 48px), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: 20px 0 0 20px;
  box-shadow: -30px 0 90px rgb(17 17 17 / 0.12);
  transform: translate3d(104%, 0, 0);
  transition: transform 640ms var(--menu-out);
  will-change: transform;
  backface-visibility: hidden;
}

.menu.is-open .menu__panel {
  transform: translate3d(0, 0, 0);
  transition: transform 920ms var(--menu-in);
}

/* Close: a long, thin X that draws itself in once the panel lands. */
.menu__close {
  flex: none;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 56px;
  height: 48px;
  margin: -4px -8px 0 0;
  color: var(--ink);
  transition: scale 240ms var(--ease-out);
}

.menu__close svg {
  width: 40px;
  height: 24px;
  overflow: visible;
}

.menu__close path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  transition: stroke-dashoffset 300ms var(--ease-out);
}

.menu.is-open .menu__close path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease-out) 260ms;
}

@media (hover: hover) and (pointer: fine) {
  .menu__close:hover {
    scale: 0.9;
  }
}

.menu__close:active {
  scale: 0.84;
}

.menu__nav {
  margin-top: clamp(20px, 5vh, 56px);
}

.menu__list {
  display: grid;
  gap: clamp(6px, 1.8vh, 18px);
}

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.menu__arrow {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  opacity: 0;
  translate: -10px 0;
  transition:
    opacity 300ms ease,
    translate 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .menu__link:hover .menu__arrow {
    opacity: 1;
    translate: 0 0;
  }
}

.menu__link:focus-visible .menu__arrow {
  opacity: 1;
  translate: 0 0;
}

/* The page you're on: a small ink dot before its name. */
.menu__link[aria-current="page"]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: -2px;
  border-radius: 50%;
  background: currentColor;
}

.menu__foot {
  display: grid;
  gap: clamp(28px, 6vh, 60px);
  margin-top: auto;
  padding-top: clamp(32px, 6vh, 64px);
}

.menu__contact {
  display: grid;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.menu__mail {
  justify-self: start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 480ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .menu__mail:hover {
    background-size: 100% 1px;
  }
}

.menu__label {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.menu__icons {
  display: flex;
  gap: 10px;
  margin-left: -10px;
}

.menu__icons a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  transition:
    background-color 300ms ease,
    scale 240ms var(--ease-out);
}

.menu__icons svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  .menu__icons a:hover {
    background: var(--bone-deep);
  }
}

.menu__icons a:active {
  scale: 0.9;
}

/* Arrival: links and foot slide in from the right behind the panel, one
   after another; on close they fade quickly so the panel leaves clean. */
.menu__list > li,
.menu__foot > * {
  opacity: 0;
  transform: translate3d(44px, 0, 0);
  transition:
    opacity 240ms ease,
    transform 0s linear 280ms;
  will-change: transform, opacity;
}

.menu.is-open .menu__list > li,
.menu.is-open .menu__foot > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 640ms var(--menu-in),
    transform 1100ms var(--menu-in);
  transition-delay: calc(150ms + var(--i, 0) * 50ms);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 600px) {
  .btn-cta {
    height: 46px;
    padding: 0 18px 0 21px;
    font-size: 0.9375rem;
  }

  .menu__panel {
    border-radius: 0;
  }
}

/* Small phones (360–389px): a touch smaller logo and gap so the bar keeps
   all three pieces inside the 20px gutters. */
@media (max-width: 389px) {
  .site-header__logo img {
    width: 108px;
  }

  .site-header__actions {
    gap: 12px;
  }
}

@media (max-width: 359px) {
  .btn-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header > *,
  .site-header__logo img {
    transition: none;
  }

  .menu__panel,
  .menu.is-open .menu__panel {
    transform: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .menu.is-open .menu__panel {
    opacity: 1;
  }

  .menu__list > li,
  .menu__foot > *,
  .menu.is-open .menu__list > li,
  .menu.is-open .menu__foot > * {
    transform: none;
    transition: opacity 200ms ease;
    transition-delay: 0s;
  }

  .menu__close path,
  .menu.is-open .menu__close path {
    stroke-dashoffset: 0;
    transition: none;
  }
}