@font-face {
  font-family: "Borna";
  src: url("assets/borna-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #090909;
  --white: #ffffff;
  --accent: #ffe500;
  --edge-x: clamp(24px, 5.208vw, 100px);
  --edge-y: clamp(24px, 9.259vh, 100px);
  color-scheme: dark;
  font-family: "Borna", sans-serif;
  font-synthesis: none;
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

body {
  color: var(--white);
  font-family: "Borna", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.paper-background {
  position: absolute;
  z-index: -2;
  inset: -10vh -14px;
  background-image: url("assets/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(var(--paper-x, 0), var(--paper-y, 0), 0) scale(1.012);
  transform-origin: center;
  will-change: transform;
}

.paper-background::after {
  position: absolute;
  content: "";
  inset: 0;
  background: rgb(0 0 0 / 30%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.site-header,
.site-footer {
  position: absolute;
  z-index: 10;
  right: var(--edge-x);
  left: var(--edge-x);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1;
}

.site-header {
  top: var(--edge-y);
  align-items: flex-start;
}

.site-footer {
  bottom: var(--edge-y);
  align-items: flex-end;
}

.studio-label,
.coordinates {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coordinates {
  align-items: flex-end;
  text-align: right;
}

.contact,
.coordinates,
.about-toggle,
.about-contact {
  position: relative;
  outline: none;
}

.contact::after,
.coordinates::after,
.about-toggle::after,
.about-contact::after {
  position: absolute;
  content: "";
  inset: -12px;
}

.contact:focus-visible,
.coordinates:focus-visible,
.about-toggle:focus-visible,
.about-contact:focus-visible {
  color: var(--accent);
}

.about-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.chrome {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}

.site-shell.is-live .chrome {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.main-stage,
.logo-stage,
.type-stage,
.about-stage {
  position: absolute;
  inset: 0;
}

.logo-stage,
.type-stage {
  display: grid;
  place-items: center;
}

.logo-stack {
  position: relative;
  width: var(--logo-width);
  aspect-ratio: var(--logo-ratio);
  will-change: transform, opacity, filter;
}

.logo-stack::before,
.logo-stack::after {
  position: absolute;
  content: "";
  inset: 0;
  background-image: var(--logo-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  pointer-events: none;
}

.logo-base,
.logo-slice {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}

.logo-base {
  opacity: 0;
}

.logo-slice {
  opacity: 0;
  will-change: transform, opacity;
}

.logo-stack.is-entering .logo-base {
  animation: logo-enter 190ms steps(2, end) forwards;
}

.logo-stack.is-entering .logo-slice {
  animation: slice-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--slice-delay) both;
}

.logo-stack.is-entering::before {
  animation: ghost-left 180ms steps(2, end) both;
}

.logo-stack.is-entering::after {
  animation: ghost-right 150ms steps(2, end) 24ms both;
}

.logo-stack.is-stable .logo-base {
  opacity: 1;
}

.logo-stack.micro-jolt .logo-base {
  animation: micro-jolt 80ms steps(2, end);
}

.logo-stack.is-exiting .logo-base {
  animation: logo-exit 150ms steps(3, end) both;
}

.logo-stack.is-exiting .logo-slice {
  animation: slice-exit 145ms cubic-bezier(0.6, 0, 1, 0.5) var(--slice-delay) both;
}

.logo-stack.is-exiting::before {
  animation: ghost-exit-left 140ms steps(2, end) both;
}

.logo-stack.is-exiting::after {
  animation: ghost-exit-right 140ms steps(2, end) 12ms both;
}

@keyframes logo-enter {
  0%, 38% { opacity: 0; filter: brightness(3); transform: scaleX(1.06) skewX(-2deg); }
  39%, 62% { opacity: 1; filter: brightness(2); transform: scaleX(0.985); }
  63%, 78% { opacity: 0.35; filter: brightness(1.4); transform: translateX(2px); }
  79%, 100% { opacity: 1; filter: none; transform: none; }
}

@keyframes slice-enter {
  0% { opacity: 0; transform: translateX(var(--slice-offset)) scaleX(1.05); }
  18% { opacity: 1; }
  52% { opacity: 0.9; transform: translateX(var(--slice-mid)); }
  76% { opacity: 0.55; transform: translateX(var(--slice-end)); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes ghost-left {
  0%, 18% { opacity: 0; transform: translateX(-18px); }
  19%, 48% { opacity: 0.35; transform: translateX(-7px); }
  49%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes ghost-right {
  0%, 12% { opacity: 0; transform: translateX(22px); }
  13%, 44% { opacity: 0.25; transform: translateX(8px); }
  45%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes micro-jolt {
  0%, 100% { opacity: 1; transform: none; }
  25% { opacity: 0.5; transform: translateX(-2px) skewX(-1deg); }
  50% { opacity: 1; transform: translateX(3px); }
  75% { opacity: 0.7; transform: translateX(-1px); }
}

@keyframes logo-exit {
  0% { opacity: 1; filter: none; transform: none; clip-path: inset(0); }
  28% { opacity: 1; filter: brightness(2.5); transform: scaleX(1.025); }
  48% { opacity: 0.6; transform: translateX(-4px); clip-path: inset(22% 0 30% 0); }
  70% { opacity: 1; transform: translateX(7px); clip-path: inset(46% 0 38% 0); }
  100% { opacity: 0; filter: brightness(4); transform: scaleX(0.7); clip-path: inset(50% 0 49% 0); }
}

@keyframes slice-exit {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 1; }
  62% { opacity: 0.85; transform: translateX(var(--slice-out)); }
  100% { opacity: 0; transform: translateX(var(--slice-far)) scaleX(1.08); }
}

@keyframes ghost-exit-left {
  0% { opacity: 0; transform: translateX(0); }
  20%, 55% { opacity: 0.45; transform: translateX(-9px); }
  100% { opacity: 0; transform: translateX(-28px); }
}

@keyframes ghost-exit-right {
  0% { opacity: 0; transform: translateX(0); }
  20%, 55% { opacity: 0.3; transform: translateX(8px); }
  100% { opacity: 0; transform: translateX(31px); }
}

.type-stage {
  opacity: 0;
  transition: opacity 160ms linear;
  pointer-events: none;
}

.type-stage.is-visible {
  opacity: 1;
}

.about-stage {
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms linear;
  pointer-events: none;
}

.about-stage.is-visible {
  opacity: 1;
}

.about-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(779px, calc(100vw - 48px));
  height: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}

.about-copy {
  margin: 0;
  font-size: clamp(23px, 1.875vw, 36px);
  font-weight: 400;
  line-height: 1;
  white-space: pre-wrap;
  overflow-wrap: normal;
  user-select: none;
}

.about-cursor,
.about-contact-arrow {
  color: var(--accent);
}

.about-cursor {
  display: inline-block;
  animation: cursor-blink 820ms steps(1, end) infinite;
}

.about-contact-arrow {
  display: inline-block;
  animation: cursor-blink 820ms steps(1, end) infinite;
}

.about-stage.is-writing .about-cursor {
  animation: none;
  opacity: 1;
}

.about-stage.is-showing-contact .about-cursor {
  animation: none;
  opacity: 0;
}

.about-contact {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: max-content;
  min-height: 1em;
  margin: 1em auto 0;
  font-size: clamp(23px, 1.875vw, 36px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}

.about-contact.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.type-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  max-width: calc(100vw - 40px);
  margin: 0;
  font-size: clamp(23px, 1.875vw, 36px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.typed-accent,
.typed-cursor {
  color: var(--accent);
}

.typed-base,
.typed-accent {
  white-space: pre;
}

.typed-cursor {
  display: inline-block;
  animation: cursor-blink 820ms steps(1, end) infinite;
}

.type-stage.is-writing .typed-cursor {
  animation: none;
  opacity: 1;
}

@keyframes cursor-blink {
  0%, 47% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

.mouse-cursor {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  width: 20px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
  will-change: transform;
}

.mouse-cursor.is-visible {
  opacity: 1;
}

.cursor-arm {
  position: absolute;
  display: block;
  background: var(--accent);
  transition: transform 170ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.cursor-arm--top,
.cursor-arm--bottom {
  left: 9.5px;
  width: 1px;
  height: 8px;
}

.cursor-arm--left,
.cursor-arm--right {
  top: 9.5px;
  width: 8px;
  height: 1px;
}

.cursor-arm--top { top: 2px; }
.cursor-arm--bottom { top: 10px; }
.cursor-arm--left { left: 2px; }
.cursor-arm--right { left: 10px; }

.mouse-cursor.is-expanded .cursor-arm--top { transform: translateY(-4px); }
.mouse-cursor.is-expanded .cursor-arm--right { transform: translateX(4px); }
.mouse-cursor.is-expanded .cursor-arm--bottom { transform: translateY(4px); }
.mouse-cursor.is-expanded .cursor-arm--left { transform: translateX(-4px); }

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

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button {
    cursor: none;
  }

  .mouse-cursor {
    display: block;
  }
}

@media (max-width: 640px) {
  :root {
    --edge-x: 24px;
    --edge-y: 28px;
  }

  .site-header,
  .site-footer {
    font-size: 10px;
  }

  .site-header {
    display: block;
  }

  .coordinates {
    align-items: flex-start;
    margin-top: 12px;
    text-align: left;
  }

  .site-footer {
    inset: var(--edge-y) var(--edge-x);
    display: block;
    pointer-events: none;
  }

  .site-shell.is-live .site-footer {
    pointer-events: none;
  }

  .site-footer .about-toggle {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: auto;
  }

  .site-footer .contact {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: auto;
  }

  .type-line {
    font-size: clamp(20px, 6vw, 28px);
  }

  .about-content {
    width: calc(100vw - 48px);
    height: auto;
    transform: translate(-50%, -50%);
  }

  .about-copy,
  .about-contact {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.05;
  }

  .about-contact {
    margin-top: 1.05em;
  }
}

@media (max-height: 520px) {
  :root {
    --edge-y: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}