.hero {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(112px, 16vh, 180px);
  background: var(--tone-abyss);
  color: var(--ink);
  isolation: isolate;
}

.hero-mist {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-mist-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.hero-mist-blob:nth-child(1) {
  top: -10vh;
  left: -20vw;
  width: 90vw;
  height: 60vh;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--platinum) 14%, transparent),
    transparent 70%
  );
  animation: hero-drift-one 120s linear infinite alternate;
}

.hero-mist-blob:nth-child(2) {
  top: 30vh;
  right: -25vw;
  width: 70vw;
  height: 55vh;
  background: radial-gradient(
    closest-side,
    color-mix(
      in srgb,
      color-mix(in srgb, var(--platinum) 40%, var(--tone-night)) 20%,
      transparent
    ),
    transparent 70%
  );
  animation: hero-drift-two 95s linear infinite alternate;
}

.hero-mist-blob:nth-child(3) {
  bottom: -18vh;
  left: -10vw;
  width: 100vw;
  height: 50vh;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--tone-night) 60%, transparent),
    transparent 75%
  );
  animation: hero-drift-three 140s linear infinite alternate;
}

/* The drifting cluster — window crops of the app floating over the mist,
   layered like the approved reference: front/mid overlapping upper right,
   a low plate chained beneath, one small ember lower left. The engine in
   js/plates.js drives the drift; these are the resting positions, which
   is also the no-JS / reduced-motion composition. */
.hero-plates {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.hero-plate {
  position: absolute;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: 0 40px 90px rgb(10 6 4 / 0.55);
}

/* Veil per depth: the type must always win over the plates. */
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--tone-abyss) 20%, transparent);
  pointer-events: none;
}

.hero-plate--front {
  top: 22vh;
  right: 8vw;
  z-index: 3;
  width: clamp(230px, 19vw, 300px);
  aspect-ratio: 10 / 13;
}

.hero-plate--mid {
  top: 9vh;
  right: 21vw;
  z-index: 2;
  width: clamp(170px, 14vw, 230px);
  aspect-ratio: 10 / 12;
}

.hero-plate--mid::after {
  background: color-mix(in srgb, var(--tone-abyss) 34%, transparent);
}

.hero-plate--back {
  top: 60vh;
  right: 3vw;
  z-index: 1;
  width: clamp(150px, 12vw, 190px);
  aspect-ratio: 10 / 12;
}

.hero-plate--back::after {
  background: color-mix(in srgb, var(--tone-abyss) 44%, transparent);
}

.hero-plate--ember {
  top: 70vh;
  left: 5vw;
  z-index: 1;
  width: clamp(120px, 10vw, 160px);
  aspect-ratio: 10 / 11;
}

.hero-plate--ember::after {
  background: color-mix(in srgb, var(--tone-abyss) 50%, transparent);
}

@media (max-width: 1199px) {
  .hero-plate--mid,
  .hero-plate--ember {
    display: none;
  }

  .hero-plate--front {
    top: 24vh;
    right: 6vw;
  }

  .hero-plate--back {
    top: 62vh;
    right: -4vw;
  }

  .hero-plate--back::after {
    background: color-mix(in srgb, var(--tone-abyss) 52%, transparent);
  }
}

@media (max-width: 819px) {
  .hero-plate--back {
    display: none;
  }

  .hero-plate--front {
    top: 20vh;
    right: -6vw;
    width: 40vw;
  }

  .hero-plate--front::after {
    background: color-mix(in srgb, var(--tone-abyss) 46%, transparent);
  }
}

@media (max-width: 599px) {
  .hero-plate--front {
    top: 16vh;
    right: -10vw;
    width: 50vw;
  }

  .hero-plate--front::after {
    background: color-mix(in srgb, var(--tone-abyss) 56%, transparent);
  }
}

.hero-thread {
  position: absolute;
  top: 58%;
  right: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
}

.hero-thread path {
  opacity: 0.85;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-stage {
  position: relative;
  z-index: 2;
}

.hero-quiet {
  max-width: 640px;
}

.hero-title {
  letter-spacing: 0.01em;
}

.hero-subline {
  max-width: none;
  margin-top: 26px;
  color: var(--muted);
  letter-spacing: 0.3em;
}

@keyframes hero-drift-one {
  to {
    transform: translate(14vw, 6vh);
  }
}

@keyframes hero-drift-two {
  to {
    transform: translate(-12vw, -8vh);
  }
}

@keyframes hero-drift-three {
  to {
    transform: translate(9vw, -5vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mist-blob {
    animation: none;
    transform: none;
    will-change: auto;
  }
}