/* About page: prose centered in a square, circular thumbnails
   scattered around it. JS handles placement (position, size,
   rotation, stacking) at load; CSS handles base presentation.
   Reduced-motion users get the same random layout, just static. */

.about-scatter {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 3rem 0 4rem;
}

/* ---- centered text square ---- */

.about-text {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);

  width: clamp(300px, 62%, 360px);
  aspect-ratio: 1 / 1;
  padding: clamp(30px, 10%, 60px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6em;

  color: var(--text-color);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.08));
  font-size: 0.95rem;
  line-height: 1.5;
  z-index: 1;
}

.about-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: var(--background-color);
  border-radius: 16px;   /* fallback if mask fails */

  -webkit-mask-image: url("/assets/ultrabox.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("/assets/ultrabox.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

.about-text > * { position: relative; }
.about-text p   { margin: 0; }
.about-text a   { color: var(--artwork-text-color); }

/* ---- scattered circles ----
   JS overrides width, --rot, z-index, left, and top on each item at
   load. Rotation lives on the inner img, not on the item itself, so
   the item's box-shadow stays axis-aligned no matter how the img
   tilts. The circular clip on the item makes the two visually
   identical for the image content. */

.scatter-item {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  width: 16%;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
  z-index: 2;   /* above the text card (z-index: 1) */
}

.scatter-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.35s ease;
}

.scatter-item:hover,
.scatter-item:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 10;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
}

.scatter-item:hover img,
.scatter-item:focus-visible img {
  transform: rotate(0deg);
}

/* ---- narrow screens: shrink the card, give the container room ---- */

@media (max-width: 375px) {
  .about-text {
    width: clamp(2i0px, 80%, 300px);
  }
  .about-scatter {
    aspect-ratio: 3 / 4;
  }
}

/* ---- reduced motion: same layout, no transitions ---- */

@media (prefers-reduced-motion: reduce) {
  .scatter-item,
  .scatter-item img,
  .scatter-item:hover,
  .scatter-item:focus-visible,
  .scatter-item:hover img,
  .scatter-item:focus-visible img {
    transition: none;
  }
}