@font-face {
  font-family: "Suisse Intl Book";
  src: local("Suisse Intl Book"), local("SuisseIntl-Book");
}

/* Registered so the entry can grow the wordmark by animating the unit itself. */
@property --u {
  syntax: "<length>";
  inherits: true;
  initial-value: 0.6989px;
}

:root {
  /* The wordmark is drawn on a grid of --u units; the Figma frame uses 0.9979px. */
  --u-base: 0.6989px;
  --u: var(--u-base);
  --ink: #171717;
  --text: #292929;
  --paper: #f1f1f1;
  --bg-top: #ffffff;
  --bg-bottom: #f6f6f6;
  --font-sans: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-book: "Suisse Intl Book", var(--font-sans);
  --font-tm: "Ritmica", "Ritmica Trial", var(--font-sans);
  /* Joined pieces tuck this far under their neighbour so no hairline shows between them. */
  --bleed: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

html {
  color-scheme: light;
  background-color: var(--bg-bottom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* The gradient lives on a fixed layer that runs a full screen past both edges in its
   end colours, so overscroll and the strips under Safari's bars continue the page. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -100vh 0;
  background: linear-gradient(var(--bg-top) 100vh, var(--bg-bottom) calc(100% - 100vh));
}

.page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stack > .logo {
  margin: 80px 0;
}

.stack > .note--clients {
  margin-top: 40px;
}

.note {
  margin: 0;
  color: var(--text);
  font-family: var(--font-book);
  font-weight: 400;
  font-size: 10px;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}

.note--clients {
  line-height: 0.95;
}

/* As on eduardwieandt.com, a barely-there rectangle hugs each name at rest; on hover
   it inverts like the wordmark blocks. */
.note a {
  --link-bg: rgb(23 23 23 / 0.04);
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--link-bg), var(--link-bg)) 0 50% / 100% 0.9em no-repeat;
  transition: color 150ms ease-out;
}

@media (hover: hover) {
  .note a:hover {
    --link-bg: var(--ink);
    color: var(--paper);
  }
}

.note a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 1px;
}

/* Sizes derived from --u are declared here, not on :root, so they follow the unit
   while the entry animates it on the wordmark. */
.logo {
  --bar-w: calc(36 * var(--u));
  /* Height of a word block: 30u type at 0.95 leading plus 1u of padding. */
  --block-h: calc(29.5 * var(--u));
  /* How far right the wordmark starts so "serene" alone sits centered, on top of the
     half bar width the layout itself adds while the bar is closed. */
  --enter-shift: calc(47.6 * var(--u));
  position: relative;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  font-weight: inherit;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.logo__group {
  display: flex;
  align-items: flex-start;
}

.logo__dot {
  width: calc(6 * var(--u) + var(--bleed));
  height: calc(6 * var(--u));
  margin-right: calc(-1 * var(--bleed));
  background: var(--ink);
}

/* Words sit above the bar, dot and TM so those can tuck under their edges. */
.logo__word {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(2 * var(--u)) calc(1 * var(--u));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.logo__bar {
  width: calc(var(--bar-w) + 2 * var(--bleed));
  height: calc(6 * var(--u));
  margin: 0 calc(-1 * var(--bleed));
  background: var(--ink);
}

.logo__tm {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(-1 * var(--bleed));
  padding-left: var(--bleed);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-tm);
  font-weight: 500;
  font-size: calc(9 * var(--u));
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Entry: the wordmark grows in as one connected shape. "serene" unrolls, "studio"
   unrolls from its edge, the bar opens between them and pushes "studio" out, then the
   TM and the left square open from the corners they're attached to, then the copy
   fades in. Nothing moves by transform: the mark grows by animating --u, glides with
   left, and the bar changes its real width, so every frame is laid out and painted
   like the static page (no hairlines at the joints, no snap in height when the entry
   ends). Fills are backwards-only so nothing stays animated afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation:
      logo-grow 1450ms var(--ease-out) backwards,
      logo-center 1000ms var(--ease-glide) 450ms backwards;
  }

  .logo__word--serene {
    animation: unroll 500ms var(--ease-out) backwards;
  }

  .logo__word--studio {
    animation: unroll 450ms var(--ease-out) 450ms backwards;
  }

  /* While closed, the bar stands full height across the serene/studio joint so the
     two words read as one block; it shows once studio starts to unroll. */
  .logo__bar {
    animation:
      hidden 0s 480ms backwards,
      bar-join 370ms linear 480ms backwards,
      bar-open 600ms var(--ease-out) 850ms backwards;
  }

  .logo__tm {
    animation: open-from-top-left 400ms var(--ease-out) 1500ms backwards;
  }

  .logo__dot {
    animation: open-from-top-right 400ms var(--ease-out) 1650ms backwards;
  }

  .note {
    animation: fade-in 700ms ease-out backwards;
  }

  .note--acquired {
    animation-delay: 2100ms;
  }

  .note--tagline {
    animation-delay: 2200ms;
  }

  .note--clients {
    animation-delay: 2300ms;
  }
}

@keyframes logo-grow {
  from {
    --u: calc(var(--u-base) * 0.85);
  }
}

@keyframes logo-center {
  from {
    left: var(--enter-shift);
  }
}

/* Each reveal moves one or two clip edges; the others sit 2px outside the box so the
   clip never shaves the block's own pixel-snapped edges (which would make it look a
   touch shorter until the clip is removed). */
@keyframes unroll {
  from {
    clip-path: inset(-2px 100% -2px -2px);
  }

  to {
    clip-path: inset(-2px);
  }
}

@keyframes hidden {
  from {
    visibility: hidden;
  }
}

@keyframes bar-join {
  from,
  to {
    height: var(--block-h);
  }
}

@keyframes bar-open {
  from {
    width: calc(2 * var(--bleed));
  }
}

@keyframes open-from-top-left {
  from {
    clip-path: inset(-2px 100% 100% -2px);
  }

  to {
    clip-path: inset(-2px);
  }
}

@keyframes open-from-top-right {
  from {
    clip-path: inset(-2px -2px 100% 100%);
  }

  to {
    clip-path: inset(-2px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}