:root {
  --paper: #1b1a19;
  --ink: #403e3b;
  --outline: #57534f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.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;
}

main {
  height: 100%;
}

.echo-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  padding: clamp(24px, 5vw, 80px);
  overflow: hidden;
  isolation: isolate;
}

.echo-mark {
  position: relative;
  display: grid;
  width: min(78vw, 1080px);
  place-items: center;
}

.echo-layer {
  grid-area: 1 / 1;
  display: block;
  color: transparent;
  font: 900 clamp(120px, 24vw, 380px)/0.78 Arial, Helvetica, sans-serif;
  letter-spacing: -0.13em;
  white-space: nowrap;
  opacity: 0;
  -webkit-text-stroke: clamp(1px, 0.1vw, 1.6px) var(--outline);
  transform: translate3d(0, 0, 0) scale(0.985);
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 800ms ease;
  will-change: transform;
}

.echo-layer:nth-child(1),
.echo-layer:nth-child(6) { --layer-opacity: 0.2; }

.echo-layer:nth-child(2),
.echo-layer:nth-child(5) { --layer-opacity: 0.3; }

.echo-layer:nth-child(3),
.echo-layer:nth-child(4) { --layer-opacity: 0.42; }

.echo-mark.is-ready .echo-layer { opacity: var(--layer-opacity); }

.echo-layer--lead {
  z-index: 2;
  color: var(--ink);
  opacity: 0;
  -webkit-text-stroke: 0;
}

.echo-mark.is-ready .echo-layer--lead { opacity: 0.88; }

@media (max-width: 600px) {
  .echo-mark { width: 88vw; }
  .echo-layer { font-size: 40vw; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}