:root {
  color-scheme: dark;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --ink: #ecece8;
  --muted: rgba(226, 229, 230, 0.46);
  --hairline: rgba(238, 240, 240, 0.14);
  --edge-x: clamp(1.5rem, 4.2vw, 4.75rem);
  --edge-y: clamp(1.45rem, 4.5vh, 3.75rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0c0e;
}

body {
  min-height: 100svh;
  color: var(--ink);
}

p,
h1 {
  margin: 0;
}

.surface {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 46%, rgba(75, 83, 89, 0.075), transparent 44%),
    linear-gradient(118deg, #0a0b0d 0%, #0d0e10 52%, #0a0b0c 100%);
}

.surface::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 10, 0.72) 0%, rgba(8, 9, 10, 0.16) 43%, transparent 68%),
    radial-gradient(ellipse at center, transparent 42%, rgba(4, 5, 6, 0.38) 100%);
  content: "";
  pointer-events: none;
}

.surface::after {
  position: absolute;
  z-index: 2;
  inset: -5%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  background-size: 145px 145px;
  content: "";
  opacity: 0.028;
  pointer-events: none;
  animation: grain 11s steps(2, end) infinite;
}

.field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.field.is-ready {
  opacity: 1;
}

.atmosphere {
  position: absolute;
  z-index: 0;
  top: 11%;
  right: 4%;
  width: min(70vw, 78rem);
  height: 79%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(151, 161, 167, 0.045), transparent 64%);
  filter: blur(45px);
  opacity: 0.65;
  pointer-events: none;
  animation: breathe 17s ease-in-out infinite alternate;
}

.identity,
.boundary {
  position: absolute;
  z-index: 3;
  right: var(--edge-x);
  left: var(--edge-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.identity {
  top: var(--edge-y);
}

.boundary {
  bottom: var(--edge-y);
}

.name,
.index,
.micro {
  text-transform: uppercase;
  white-space: nowrap;
}

.name {
  color: rgba(245, 245, 241, 0.86);
  font-size: 0.69rem;
  font-weight: 560;
  letter-spacing: 0.245em;
}

.index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: rgba(229, 231, 231, 0.52);
  font-size: 0.59rem;
  font-weight: 520;
  letter-spacing: 0.22em;
}

.index::before {
  display: block;
  width: 1.9rem;
  height: 1px;
  background: var(--hairline);
  content: "";
}

.micro {
  color: rgba(218, 221, 222, 0.28);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.49rem;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.statement-wrap {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--edge-x);
  transform: translateY(-48%);
}

.statement {
  color: rgba(239, 239, 235, 0.94);
  font-size: clamp(2.55rem, 5vw, 5.55rem);
  font-weight: 360;
  letter-spacing: -0.047em;
  line-height: 0.985;
  text-wrap: balance;
}

.statement span {
  display: block;
}

@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-1.5%, 1%, 0); }
  40% { transform: translate3d(1%, -1.5%, 0); }
  60% { transform: translate3d(1.5%, 1.5%, 0); }
  80% { transform: translate3d(-1%, -1%, 0); }
}

@keyframes breathe {
  from { opacity: 0.45; transform: scale(0.98) translate3d(0, 0, 0); }
  to { opacity: 0.72; transform: scale(1.025) translate3d(-1%, 0.5%, 0); }
}

@media (max-width: 720px) {
  :root {
    --edge-x: clamp(1.7rem, 9.5vw, 4rem);
    --edge-y: max(1.45rem, env(safe-area-inset-top));
  }

  .surface::before {
    background:
      linear-gradient(180deg, rgba(7, 8, 9, 0.55) 0%, transparent 28%, transparent 67%, rgba(5, 6, 7, 0.3) 100%),
      radial-gradient(ellipse at center, transparent 38%, rgba(4, 5, 6, 0.34) 100%);
  }

  .identity {
    top: max(3.75rem, calc(env(safe-area-inset-top) + 2.7rem));
  }

  .boundary {
    bottom: max(3.75rem, calc(env(safe-area-inset-bottom) + 2.7rem));
  }

  .micro--top {
    display: none;
  }

  .statement-wrap {
    top: 41.5%;
    right: var(--edge-x);
    left: var(--edge-x);
    transform: translateY(-50%);
  }

  .statement {
    font-size: clamp(1.72rem, 8.4vw, 3.75rem);
    font-weight: 370;
    letter-spacing: -0.038em;
    line-height: 1.14;
  }

  .index {
    gap: 0;
  }

  .index::before {
    display: none;
  }

  .atmosphere {
    top: 31%;
    right: -38%;
    width: 122vw;
    height: 61%;
  }
}

@media (max-width: 390px) {
  .micro--bottom {
    display: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --edge-y: 1.35rem;
  }

  .statement {
    font-size: clamp(2.25rem, 6.8vh, 3.35rem);
  }

  .micro--bottom {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surface::after,
  .atmosphere {
    animation: none;
  }

  .field {
    transition: none;
  }
}