/* AONOMA Projects — image fragment assembly reveal.
   The real image stays visible until JS starts the effect near the viewport center.
   Then fragments gather into place, and the real image settles back on top. */
.aonoma-recruit #aonoma-projects article figure {
  position: relative;
  overflow: hidden;
  background: #dce7ef;
}

.aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready > img {
  opacity: 1;
  filter: none;
}

.aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready.is-piece-visible > img {
  animation: aonoma-piece-base-image-in 4800ms cubic-bezier(0.18, 0.74, 0.22, 1) 80ms both;
}

.aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready.is-piece-complete > img {
  opacity: 1;
  filter: none;
  animation: none;
}

.aonoma-piece-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
}

.aonoma-piece {
  position: absolute;
  left: var(--piece-left);
  top: var(--piece-top);
  width: calc(var(--piece-width) + 0.75px);
  height: calc(var(--piece-height) + 0.75px);
  background-image: var(--piece-image);
  background-size: var(--piece-bg-size);
  background-position: var(--piece-bg-position);
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-rotate)) scale(0.72);
  filter: blur(8px) saturate(0.76) contrast(0.9);
  box-shadow: 0 12px 34px -28px rgba(7, 17, 28, 0.52);
  will-change: opacity, transform, filter;
}

.aonoma-piece::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.72) 0 1.35px, transparent 2px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 48%, rgba(104, 216, 255, 0.12));
  opacity: 0;
  mix-blend-mode: screen;
  animation: none;
}

.aonoma-piece-ready.is-piece-visible .aonoma-piece {
  animation: aonoma-piece-gather 4400ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  animation-delay: var(--piece-delay);
}

.aonoma-piece-ready.is-piece-visible .aonoma-piece::after {
  animation: aonoma-piece-spark 4400ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  animation-delay: var(--piece-delay);
}

.aonoma-piece-ready.is-piece-complete .aonoma-piece-layer {
  opacity: 0;
  transition: opacity 620ms ease;
}

@keyframes aonoma-piece-gather {
  0% {
    opacity: 0;
    transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-rotate)) scale(0.68);
    filter: blur(9px) saturate(0.7) contrast(0.86);
  }
  16% {
    opacity: 0.92;
  }
  46% {
    transform: translate3d(calc(var(--piece-x) * 0.28), calc(var(--piece-y) * 0.28), 0) rotate(calc(var(--piece-rotate) * 0.42)) scale(0.98);
    filter: blur(3.2px) saturate(0.88) contrast(0.94);
  }
  76% {
    opacity: 1;
    transform: translate3d(calc(var(--piece-x) * 0.04), calc(var(--piece-y) * 0.04), 0) rotate(calc(var(--piece-rotate) * 0.08)) scale(1.012);
    filter: blur(0.8px) saturate(1) contrast(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0) saturate(1) contrast(1);
  }
}

@keyframes aonoma-piece-spark {
  0% {
    opacity: 0.78;
    transform: scale(1.12);
  }
  42% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes aonoma-piece-base-image-in {
  0% {
    opacity: 1;
    filter: none;
  }
  8%, 78% {
    opacity: 0;
    filter: blur(7px) saturate(0.78) contrast(0.92);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1) contrast(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready > img,
  .aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready.is-piece-visible > img,
  .aonoma-recruit #aonoma-projects article figure.aonoma-piece-ready.is-piece-complete > img {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .aonoma-piece-layer {
    display: none !important;
  }
}