:root {
  --ink: #ece8df;
  --ink-dim: rgba(236, 232, 223, 0.46);
  --ink-faint: rgba(236, 232, 223, 0.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 3.2vw, 40px);
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Intro: the studio card */

.intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 1100ms var(--ease-out), filter 1100ms var(--ease-out);
}

.intro-logo {
  width: clamp(120px, 15vw, 200px);
  height: auto;
  color: var(--ink);
  overflow: visible;
}

.intro-mark,
.intro-letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.intro-mark {
  filter: blur(10px);
  transform: translateY(14px) scale(0.97);
  transition:
    opacity 1600ms var(--ease-cinema),
    transform 1800ms var(--ease-cinema),
    filter 1600ms var(--ease-cinema);
}

.intro-letter {
  transform: translateY(18px);
  transition:
    opacity 900ms var(--ease-out) calc(700ms + var(--i) * 70ms),
    transform 1100ms var(--ease-cinema) calc(700ms + var(--i) * 70ms);
}

.intro.is-on .intro-mark { opacity: 1; filter: blur(0); transform: none; }
.intro.is-on .intro-letter { opacity: 1; transform: none; }

.intro.is-out {
  opacity: 0;
  filter: blur(6px);
}

/* Stage: title under the creature */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--stage-top, 66%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}

.title {
  margin: 0;
  line-height: 0;
}

#title-art {
  width: calc(var(--cols, 67) * clamp(3px, 0.4vw, 5.5px));
  height: auto;
  fill: var(--ink);
  overflow: visible;
}

#title-art rect {
  opacity: 0;
  transition: opacity 90ms linear;
}

#title-art rect.is-on { opacity: 1; }

.tagline {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-left: 0.42em; /* balance trailing letter-spacing */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-cinema);
}

.is-titled .tagline { opacity: 1; transform: none; }

/* Footer */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 1600ms var(--ease-out);
}

.foot { pointer-events: none; }
.is-ready .foot { opacity: 1; pointer-events: auto; }

.foot-brand {
  justify-self: end;
  display: block;
  color: var(--ink-faint);
  transition: color 160ms var(--ease-out);
}

.foot-brand:hover,
.foot-brand:focus-visible { color: var(--ink); }

.foot-brand svg {
  display: block;
  height: 30px;
  width: auto;
}

.socials {
  display: flex;
  gap: 4px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--ink-faint);
  transition: color 160ms var(--ease-out);
}

.socials a:hover,
.socials a:focus-visible { color: var(--ink); }

.socials a:active svg { transform: scale(0.92); }

.socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 120ms var(--ease-out);
}

.sound {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -10px -12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}

.sound:hover,
.sound:focus-visible,
.sound[aria-pressed="true"] { color: var(--ink); }

.sound:active .sound-bars { transform: scale(0.92); }

:focus-visible {
  outline: 1px solid var(--ink-dim);
  outline-offset: 4px;
}

.sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  transition: transform 120ms var(--ease-out);
}

.sound-bars i {
  display: block;
  width: 2px;
  height: 10px;
  background: currentColor;
  transform-origin: 50% 100%;
  transform: scaleY(0.2);
}

.sound[aria-pressed="true"] .sound-bars i {
  animation: bar 1.4s var(--ease-out) infinite alternate;
}

.sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-duration: 1.1s; animation-delay: -0.4s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-duration: 1.7s; animation-delay: -0.9s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-duration: 1.25s; animation-delay: -0.2s; }

@keyframes bar {
  from { transform: scaleY(0.2); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .tagline,
  .foot { transition-duration: 1ms; }
  .sound[aria-pressed="true"] .sound-bars i { animation: none; transform: scaleY(0.6); }
}