@font-face {
  font-family: Bricolage;
  src: url("assets/fonts/BricolageGrotesque.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --plum: #38243f;
  --apricot: #f1a066;
  --cream: #fff0d7;
  --quiet: #c0abc1;
  --lean-x: 0px;
  --lean-y: 0px;
  --ease-settle: cubic-bezier(.18, .85, .22, 1);
  font-family: Bricolage, Georgia, serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--plum); }
body { margin: 0; min-height: 100svh; color: var(--cream); background: var(--plum); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("assets/grain.svg");
  opacity: .035;
  z-index: 2;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button[hidden] { display: none; }
button:focus-visible { outline: 2px solid var(--cream); outline-offset: 9px; }

.parked {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 100px 7vw 145px;
}
.brand-stage { width: min(100%, 1110px); text-align: center; }
.logo-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
  transform: translate3d(var(--lean-x), var(--lean-y), 0);
  transition: transform 700ms var(--ease-settle);
}
.monogram { position: relative; width: 27.1%; flex: 0 0 27.1%; }
.brand-mark { display: block; width: 100%; height: auto; overflow: visible; }
.monogram-trigger {
  position: absolute;
  inset: -12px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  cursor: pointer;
}
.brand-lettering { flex: 1; min-width: 0; }
.brand-wordmark { display: block; width: 100%; height: auto; }
.brand-games { display: block; width: 40.8%; height: auto; margin: clamp(12px, 1.35vw, 21px) auto 0; }

.studio-note { margin-top: clamp(38px, 5vw, 65px); }
.tagline { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 450; letter-spacing: -.035em; line-height: 1.35; }
.coming-soon { margin: 12px 0 0; color: var(--quiet); font-size: clamp(13px, 1.05vw, 15px); font-weight: 400; line-height: 1.6; letter-spacing: .01em; }

.page-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 25px 38px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--quiet);
  font-size: 11px;
  letter-spacing: .035em;
  line-height: 1.5;
}
.motion-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  padding: 8px 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: color 200ms;
}
.motion-toggle:hover { color: var(--cream); }
.motion-icon { flex: 0 0 16px; overflow: visible; }
.pause-icon { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.play-icon { display: none; fill: currentColor; }
[data-motion="paused"] .pause-icon { display: none; }
[data-motion="paused"] .play-icon { display: block; }
.footer-note { margin-left: auto; }

.route-tail { fill: none; stroke: var(--cream); stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.traveller-halo { fill: var(--cream); opacity: .1; }
.traveller-light { fill: var(--cream); }

.is-building .build-strip { animation: assemble 1000ms var(--ease-settle) both; }
.is-building .strip-two { animation-delay: 80ms; }
.is-building .strip-three { animation-delay: 160ms; }
.is-building .brand-wordmark { animation: lettering-arrives 1000ms 300ms var(--ease-settle) both; }
.is-building .brand-games { animation: note-arrives 850ms 650ms var(--ease-settle) both; }
.is-building .tagline { animation: note-arrives 900ms 950ms var(--ease-settle) both; }
.is-building .coming-soon { animation: note-arrives 900ms 1100ms var(--ease-settle) both; }

@keyframes assemble {
  from { transform: translateY(325px); }
  to { transform: translateY(0); }
}
@keyframes lettering-arrives {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes note-arrives {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 1600px) {
  .brand-stage { width: 1140px; }
}
@media (max-width: 620px) {
  .parked { padding: 70px 28px 120px; }
  .logo-lockup { flex-direction: column; gap: 32px; }
  .monogram { width: clamp(138px, 42vw, 222px); flex-basis: auto; }
  .brand-lettering { width: min(100%, 420px); flex-basis: auto; }
  .brand-games { margin-top: 14px; }
  .studio-note { margin-top: 36px; }
  .tagline { font-size: clamp(19px, 5vw, 25px); }
  .coming-soon { font-size: 12px; }
  .page-footer { padding: 18px 24px 22px; gap: 16px; font-size: 10px; }
}
@media (max-width: 360px) {
  .parked { padding-left: 23px; padding-right: 23px; }
  .page-footer { padding-left: 20px; padding-right: 20px; }
  .footer-note { max-width: 92px; text-align: right; }
}
@media (max-height: 580px) and (min-width: 621px) {
  .parked { padding-top: 65px; padding-bottom: 100px; }
  .brand-stage { width: min(100%, 760px); }
  .studio-note { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo-lockup { transform: none; }
}