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

html,
body {
  background: #000;
  color: #fff;
}

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  /* nothing to scroll; let fingers drive the ripple and the DEV reveal */
  touch-action: none;
  overflow: hidden;
}

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

/* the phone's recorded loop (main.js), cropped to fill any phone */
#film {
  object-fit: cover;
  background: #000;
}

.content {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: clamp(16px, 4vw, 56px);
  text-align: left;
  pointer-events: none;
  /* --stack (0 -> 1, set by main.js) collapses the wordmark's echoes onto
     its first line; the links below ride up with them */
  --stack: 0;
  --wm-size: clamp(2.5rem, 10vw, 8.5rem);
}

.wordmark {
  position: relative;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: var(--wm-size);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #f3f1ec;
  /* thin warm/cool fringe, like a slightly misaligned print */
  text-shadow:
    -0.012em 0 0 rgba(255, 170, 60, 0.55),
    0.012em 0 0 rgba(70, 110, 255, 0.55),
    0 0 0.6em rgba(0, 0, 0, 0.6);
  /* hovering opens a circle round the cursor where APPARITION gives way to
     DEV; main.js clips both layers */
  contain: layout;
  /* a long press reveals DEV rather than selecting the text */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  --spread: 0.035em;
}

/* own layers, so moving the hover circle only re-clips them instead of
   repainting the blurred text shadow every frame */
.wordmark h1 {
  font: inherit;
  will-change: transform;
}

.wordmark .reveal {
  position: absolute;
  inset: 0;
  clip-path: circle(0);
  will-change: transform;
}

.wordmark .line {
  display: block;
  height: 0.9em;
}

/* DEV is resized by main.js to span the same width as APPARITION */
.reveal .line {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Each echo is a little fainter, like a ghosted reprint. Scrolling
   (--stack 0 -> 1, set by main.js) slides the echoes up onto the first line,
   each landing a hair to the side so the edges stay layered. --spread
   widens the offsets during glitch bursts. */
.wordmark .line {
  transform: translate(
    calc(var(--dx, 0) * var(--spread) * var(--stack)),
    calc(var(--i, 0) * -0.9em * var(--stack))
  );
}

.wordmark .line:nth-child(2) { --i: 1; --dx: -1; opacity: 0.8; }
.wordmark .line:nth-child(3) { --i: 2; --dx: 0.4; opacity: 0.6; }
.wordmark .line:nth-child(4) { --i: 3; --dx: 1; opacity: 0.4; }

/* set like the wordmark, sized so the pair spans about as wide */
.links {
  display: flex;
  gap: 0.3em;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: calc(var(--wm-size) * 0.5);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.links a {
  pointer-events: auto;
  text-decoration: none;
  color: #f3f1ec;
  opacity: 0.55;
  text-shadow: 0 0 0.6em rgba(0, 0, 0, 0.8);
  transition: opacity 0.2s;
}

/* dimmer than the links, so it reads as punctuation */
.links .sep {
  color: #f3f1ec;
  opacity: 0.25;
}

.links a:hover,
.links a:focus-visible {
  opacity: 1;
  outline: none;
}

.copyright {
  position: fixed;
  left: clamp(16px, 4vw, 56px);
  bottom: clamp(14px, 3vw, 32px);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #f3f1ec;
  opacity: 0.4;
  text-shadow: 0 0 0.6em rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* phones: the type fills the width, with the geometry and wave below */
@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  .content {
    --wm-size: 15vw;
    gap: 0.9rem;
    padding: max(20px, env(safe-area-inset-top)) 20px 20px;
  }

  .copyright {
    left: 20px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}