/* ---------- base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  background: #1c1c1c;
  overflow: hidden; /* keep the drifting blobs from adding scrollbars */
  font-family: "Archivo Black", "Arial Black", system-ui, sans-serif;
}

/* ---------- animated blurred blobs (the "aurora / gradient blobs" effect) ---------- */
.blobs {
  position: fixed;
  /* slightly larger than the viewport so the blur halos fade off-screen
     instead of getting hard-clipped at the edges */
  inset: -160px;
  z-index: 0;
  filter: blur(90px);
  pointer-events: none;
}

.blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* screen blend makes overlapping circles glow/brighten like light */
  mix-blend-mode: screen;
  will-change: transform;
}

/* ---------- subtle sparkles near the centre ---------- */
.sparkles {
  position: fixed;
  inset: 0;
  z-index: 1; /* above the blobs, behind the guides + name */
  overflow: hidden;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55); /* tiny glow */
  opacity: 0; /* JS fades each one in based on distance from centre */
  will-change: transform, opacity;
}

/* ---------- dashed guide lines ---------- */
.guide {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  /* bigger, thicker dashes + bigger gaps than the default `dashed` border */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0 9px,
    transparent 9px 18px
  );
  z-index: 2;
  pointer-events: none;
}

.guide--left {
  left: 40px;
}

.guide--right {
  right: 40px;
}

/* ---------- centred name ---------- */
.content {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 44px;
}

.name {
  font-weight: 400; /* Archivo Black is already heavy */
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-align: center;

  /* outlined text: transparent fill + white stroke */
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.1vw, 1.5px) rgba(255, 255, 255, 0.85);

  /* scales with the viewport so it always stays on one line */
  font-size: min(8.5vw, 7.5rem);
}

/* ---------- email ---------- */
.email {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 3;

  /* a plain UI font for the email — not the heavy display face */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}

.email:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ---------- phone layout ---------- */
@media (max-width: 600px) {
  /* dashed lines sit closer to the screen edges */
  .guide--left {
    left: 18px;
  }
  .guide--right {
    right: 18px;
  }

  /* smaller blobs read better with a bit less blur */
  .blobs {
    filter: blur(55px);
  }

  .content {
    padding: 0 24px;
  }

  .name {
    white-space: normal;
    font-size: min(12.5vw, 4.5rem);
    line-height: 1.05;
  }

  /* first name and last name on separate rows */
  .name span {
    display: block;
  }

  /* email sits just under the name instead of at the footer */
  .email {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 1.5rem;
  }
}

/* respect users who prefer less motion — blobs stay put */
@media (prefers-reduced-motion: reduce) {
  .blob {
    transition: none !important;
  }
}