.hero {
  position: relative;
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

.mind-stage {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.mind-canvas,
.mind-gallery,
.mind-photo,
.mind-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mind-canvas {
  z-index: 1;
  opacity: .68;
}

.mind-gallery {
  z-index: 0;
  opacity: 1;
  transition: opacity 1.5s ease;
}

.mind-gallery img {
  position: absolute;
  width: clamp(80px, 10vw, 150px);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  object-fit: cover;
  opacity: .075;
  filter: grayscale(1) contrast(.88);
  mix-blend-mode: normal;
  animation: mind-photo-drift 13s ease-in-out infinite alternate;
}

.mind-gallery img:nth-child(1) { left: 6%; top: 18%; transform: rotate(-4deg); }
.mind-gallery img:nth-child(2) { right: 7%; top: 34%; transform: rotate(5deg); animation-delay: -4s; }
.mind-gallery img:nth-child(3) { left: 18%; bottom: 5%; transform: rotate(3deg); animation-delay: -8s; }

.mind-photo {
  z-index: 0;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(.8);
  transform: scale(1.04);
  mix-blend-mode: normal;
  transition: opacity 1.8s ease, transform 10s ease;
}

.mind-vignette {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(21,23,20,.96) 92%);
  transition: opacity 1.8s ease;
}

.mind-stage.has-photo .mind-photo {
  opacity: .3;
  transform: scale(1);
}

.mind-stage.has-photo .mind-gallery {
  opacity: .28;
}

.mind-stage[data-state="result"] .mind-gallery {
  opacity: 0;
}

.mind-stage.has-photo .mind-vignette {
  opacity: 1;
}

@keyframes mind-photo-drift {
  from { translate: 0 -4px; }
  to { translate: 0 8px; }
}

@media (max-width: 650px) {
  .mind-stage {
    height: 100%;
    min-height: 600px;
  }

  .mind-gallery img { width: 76px; border-radius: 12px; opacity: .065; }
  .mind-gallery img:nth-child(1) { left: 2%; top: 18%; }
  .mind-gallery img:nth-child(2) { right: 2%; top: 42%; }
  .mind-gallery img:nth-child(3) { left: 8%; bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .mind-photo,
  .mind-vignette,
  .mind-gallery img {
    animation: none;
    transition: none;
  }
}

/* Keep the concealed reveal over the portrait, beneath the page copy. */
.hero .mind-stage { z-index: -1; }
.mind-stage.has-photo { background: #151714; }
.mind-stage.has-photo .mind-photo { filter: grayscale(1) contrast(.95); }