html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

canvas { display: block; }

a { color: #fff; }
a:hover { color: rgba(255, 255, 255, .7); }

.stage {
  position: fixed;
  inset: 0;
  background: #000;
}

/* ---------- menu page (behind the sheet) ---------- */

.menu-page {
  position: absolute;
  inset: 0;
  background: #edeae4;
}

.menu {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* while closed the menu is invisible but still laid out — without this it
     keeps swallowing hovers and clicks meant for the reel behind it */
  pointer-events: none;
  transition: opacity .6s ease;
}

.menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .35s;
}

.menu-list {
  position: absolute;
  top: 92px;
  left: 6vw;
  right: 4vw;
}

.menu-list__label {
  font-size: 9px;
  letter-spacing: .3em;
  font-weight: 600;
  color: rgba(20, 20, 20, .45);
  margin-bottom: 14px;
}

.menu-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 36px;
  row-gap: 10px;
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.menu-item:hover { transform: translateY(-4px); }

.menu-item__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(20, 20, 20, .4);
  transition: color .35s ease;
}

.menu-item:hover .menu-item__num { color: rgba(20, 20, 20, .75); }

.menu-item__title {
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1;
  letter-spacing: .05em;
  color: #141414;
  transition: opacity .35s ease;
}

.menu-item:hover .menu-item__title { opacity: .55; }

/* underline wipes in from the left on hover */
.menu-item__title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: #141414;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.menu-item:hover .menu-item__title::after { transform: scaleX(1); }

.menu-nav {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-46%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.menu-nav__label {
  font-size: 9px;
  letter-spacing: .3em;
  font-weight: 600;
  color: rgba(20, 20, 20, .45);
}

.menu-nav__link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: .05em;
  color: #141414;
  text-decoration: none;
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.menu-nav__link:hover {
  color: #141414;
  transform: translateX(12px);
}

/* ---------- cloth sheet + video ---------- */

.sheet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.frames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0;
  transition: opacity .45s ease;
}

/* ---------- hud ---------- */

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.hud.is-hidden { opacity: 0; }

.hud__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0, 0, 0, .45));
}

.hud__footer {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 30px;
}

/* the only copy in the corner now */
.hud__tagline {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.hud__social {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* .hud is pointer-events:none so the sheet stays draggable — the links have
     to opt back in or they cannot be clicked */
  pointer-events: auto;
}

.hud__social-link {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* the reel runs to near-white skies; without this the ring and glyph vanish
     into them. drop-shadow rather than text-shadow so the ring is covered too */
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .55));
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.hud__social-link:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .85);
  transform: translateY(-2px);
  color: #fff;
}

.hud__social-link svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}

@media (max-width: 720px) {
  .hud__footer {
    left: 22px;
    right: 22px;
  }
  .hud__social { right: 16px; gap: 11px; }
  .hud__social-link { width: 34px; height: 34px; }
  .hud__social-link svg { width: 13px; height: 13px; }
  .topbar__nav { gap: 18px; }
  .topbar__link { font-size: 10px; letter-spacing: .16em; }
}

/* ---------- topbar ---------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 40px;
  mix-blend-mode: difference;
  pointer-events: none;
}

.topbar__mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .14em;
  color: #fff;
}

/* holds the slot open (so it can be measured) while the loader's mark flies in */
.topbar__mark.is-pending { visibility: hidden; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 38px;
  pointer-events: auto;
}

.topbar__link {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  font-weight: 600;
  color: #fff;
  /* styles.css sets a colour on `a` but no decoration reset, unlike site.css */
  text-decoration: none;
  transition: opacity .3s ease;
}

/* the bar is mix-blend-mode:difference, so fading is the only safe hover — a
   colour change reads as an arbitrary hue over the reel behind it */
.topbar__link:hover { color: #fff; opacity: .6; }

/* ---------- loader ---------- */

.loader {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  transition: opacity .8s ease;
}

.loader__progress {
  width: min(340px, 56vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loader__track {
  height: 1px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.loader__fill {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  /* driven by JS in discrete steps, so ease the gaps between them */
  transition: transform .5s cubic-bezier(.3, .8, .3, 1);
}

.loader__readout {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .28em;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

/* the mark flies to the topbar on its own — the bar just fades with the backdrop */
.loader.is-hidden .loader__progress { opacity: 0; transition: opacity .3s ease; }

.loader.is-hidden { opacity: 0; }
.loader.is-done { display: none; }

.loader__mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(70px, 14vw, 220px);
  letter-spacing: .05em;
  color: #fff;
}

/**
 * Mid-flight to the topbar. Lifted out of the loader and pinned to the viewport
 * so it survives the backdrop fading out from under it, and blended the same way
 * the topbar is so the handoff at the end is invisible.
 *
 * Position/size are animated as real properties rather than a transform scale:
 * the loader and topbar marks differ in letter-spacing, so a uniform scale would
 * land the word at the wrong width and pop on swap. The transition itself is set
 * from JS (see LOGO_FLIGHT_MS) to keep the duration in one place.
 */
.loader__mark.is-flying {
  position: fixed;
  margin: 0;
  z-index: 10;
  mix-blend-mode: difference;
}

/* ---------- preview mode (?preview) ---------- */

/* Embedded as the hover-preview panel in other pages' menus: sheet only, no
   chrome. The menu page behind it goes transparent so the host page's own
   background shows through instead of a cream slab. */
.is-preview .hud,
.is-preview .topbar,
.is-preview .frames,
.is-preview .menu-page { display: none; }

.is-preview .loader { background: transparent; }
.is-preview .loader__progress { display: none; }
.is-preview .stage { background: transparent; }

/* every layer down to the root, or the iframe paints its own page background
   over the host menu instead of compositing onto it */
.is-preview,
.is-preview body { background: transparent; }

/* ---------- returning this session ---------- */

/* The reel has already loaded once; the loading screen would only be a delay
   with a progress bar on it, so it never paints and the topbar mark is simply
   there rather than flying in. */
.is-returning .loader { display: none; }
.is-returning .topbar__mark.is-pending { visibility: visible; }