:root { color-scheme: dark; --white: #fff; --black: #000; }
* { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; color: var(--white); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--black); min-height: 100svh; isolation: isolate; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--white); outline-offset: 7px; }
::selection { color: var(--black); background: var(--white); }
.binary-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.binary-field::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 310px 300px at 50% 50%, #000 25%, rgb(0 0 0 / .94) 50%, transparent 100%); }
#binary { display: block; width: 100%; height: 100%; }
.masthead { position: absolute; inset: 0 0 auto; padding: 32px 40px; }
.wordmark { font-size: 17px; font-weight: 400; letter-spacing: .035em; }
main { min-height: 100svh; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 112px 24px; }
.logo { width: clamp(130px, 19vh, 182px); aspect-ratio: 490 / 452; position: relative; margin-bottom: 45px; }
.logo svg { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.logo-final { filter: invert(1); animation: resolve 1.1s 4.65s both; }
.logo-strokes { animation: dissolve .6s 5.15s both; }
.stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(.2s + var(--order) * .6s); }
.message { margin: 0; color: rgb(255 255 255 / .85); font-size: 18px; line-height: 1.8; font-weight: 300; }
.contact { margin-top: 34px; }
.contact p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; color: rgb(255 255 255 / .65); }
.email { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 5px 0 10px; border-bottom: 1px solid rgb(255 255 255 / .4); font-size: 17px; font-weight: 400; transition: border-color .2s; }
.email:hover { border-color: var(--white); }
.email svg { transition: transform .2s; }
.email:hover svg { transform: translate(2px, -2px); }
.motion { position: fixed; bottom: 22px; right: 28px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(0 0 0 / .65); color: rgb(255 255 255 / .7); cursor: pointer; }
.motion[hidden], .play-icon, .paused .pause-icon { display: none; }
.paused .play-icon { display: block; }
.motion:hover { color: var(--white); border-color: var(--white); }
body.paused * { animation-play-state: paused !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes resolve { from { opacity: 0; } to { opacity: 1; } }
@keyframes dissolve { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 600px) {
  .masthead { padding: 26px 24px; }
  .wordmark { font-size: 16px; }
  main { padding: 100px 22px; }
  .logo { width: 142px; margin-bottom: 34px; }
  .message { font-size: 16px; max-width: 360px; }
  .contact { margin-top: 28px; }
  .contact p { font-size: 13px; }
  .email { font-size: 16px; gap: 14px; }
  .binary-field::after { background: radial-gradient(ellipse 230px 300px at 50% 50%, #000 20%, rgb(0 0 0 / .9) 50%, transparent 100%); }
  .motion { bottom: 18px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo-strokes, .motion { display: none; }
  .logo-final { opacity: 1; }
}