@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #000;
  --foreground: #ebeff5;
  --edge: 20px;
  --type-size: 12px;
  --mark-gap: 22px;
  font-family: "Geist Mono", "Courier New", monospace;
  color: var(--foreground);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color 350ms ease, color 350ms ease;
}

:root.easter-egg {
  --background: #250642;
  --foreground: #dfb8ff;
  --effect-filter: brightness(.8) sepia(1) saturate(4) hue-rotate(215deg);
}

:root.easter-egg[data-egg-color="green"] {
  --background: #082f19;
  --foreground: #c0ffd5;
  --effect-filter: brightness(.95) sepia(1) saturate(4) hue-rotate(75deg);
}

:root.easter-egg[data-egg-color="yellow"] {
  --background: #403500;
  --foreground: #fff2ad;
  --effect-filter: brightness(1) sepia(1) saturate(3);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-inline-size: 240px; isolation: isolate; }
::selection { background: var(--foreground); color: var(--background); }

.ascii-trail {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  user-select: none;
}

.ascii-trail[hidden] { display: none; }

.landing {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding-block: max(70px, env(safe-area-inset-top)) max(70px, env(safe-area-inset-bottom));
  padding-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right));
}

.orbital-scene {
  position: absolute;
  inset-block-start: calc(50% - 3.00635vh);
  inset-block-start: calc(50% - 3.00635dvh);
  inset-inline-start: 50%;
  inline-size: min(800px, 96vw, 88vh);
  inline-size: min(800px, 96vw, 88dvh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 350ms ease;
}

.orbital-poster,
.orbital-player {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.orbital-poster { display: block; -webkit-user-drag: none; }
.orbital-poster text {
  font-family: "Geist Mono", "Courier New", monospace;
  font-size: var(--lottie-type-size, 12px);
  font-weight: 500;
  letter-spacing: -.02em;
}
.orbital-player { visibility: hidden; }
.orbital-scene.is-ready .orbital-player { visibility: visible; }
.orbital-scene.is-ready .orbital-poster { visibility: hidden; }
.orbital-player svg { display: block; inline-size: 100%; block-size: 100%; }

.identity {
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mark-gap);
  inline-size: min(383px, 100%);
  transform: translateY(-3.00635vh);
  transform: translateY(-3.00635dvh);
}

.identity-mark { display: block; flex: none; -webkit-user-drag: none; transition: filter 350ms ease; }
.easter-egg .identity-mark,
.easter-egg .orbital-scene { filter: var(--effect-filter); }

.identity-copy {
  inline-size: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--type-size);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 500;
}

.identity-copy h1,
.identity-copy p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.identity-copy h1 { font-weight: 700; }

.corner-row {
  position: absolute;
  z-index: 1;
  inset-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
}

.corner-row--top { inset-block-start: max(var(--edge), env(safe-area-inset-top)); }
.corner-row--bottom { inset-block-end: max(var(--edge), env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  :root {
    --edge: 16px;
    --type-size: 10px;
    --mark-gap: 20px;
  }
  .corner-row { font-size: 1.125rem; }
}

@media (max-width: 390px) {
  .identity-mark { inline-size: 28px; block-size: auto; }
}

@media (max-height: 440px) and (orientation: landscape) {
  :root { --mark-gap: 16px; }
  .landing {
    padding-block: max(48px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-bottom));
  }
  .identity { transform: none; }
  .orbital-scene { inset-block-start: 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  .orbital-scene { animation: fade-in 1200ms 200ms ease-out both; }
  .corner-row { animation: fade-in 650ms ease-out both; }
  .identity-mark { animation: fade-in 700ms 80ms ease-out both; }
  .identity-copy h1 { animation: fade-in 620ms 180ms ease-out both; }
  .identity-copy p:first-of-type { animation: fade-in 620ms 260ms ease-out both; }
  .identity-copy p:last-of-type { animation: fade-in 620ms 340ms ease-out both; }

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

@media (prefers-reduced-motion: reduce) {
  :root, .identity-mark, .orbital-scene { transition: none; }
}