/* Lightweight movement system: entrances, shuffling project cards and case reveals. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.motion-ready) header,
  body:not(.motion-ready) .hero h1,
  body:not(.motion-ready) .hero-orbit,
  body:not(.motion-ready) .hero-bottom {
    opacity: 0;
    transform: translateY(20px);
  }

  body.motion-ready header { animation: landing-in .7s .05s cubic-bezier(.22,.8,.2,1) both; }
  body.motion-ready .hero h1 { animation: landing-in .9s .14s cubic-bezier(.22,.8,.2,1) both; }
  body.motion-ready .hero-orbit { animation: landing-in .75s .32s cubic-bezier(.22,.8,.2,1) both, spin 18s .32s linear infinite; }
  body.motion-ready .hero-bottom { animation: landing-in .7s .42s cubic-bezier(.22,.8,.2,1) both; }

  body.motion-ready .project {
    opacity: 0;
    transform: translateY(48px) scale(.985);
    transition: opacity .75s cubic-bezier(.22,.8,.2,1), transform .75s cubic-bezier(.22,.8,.2,1), color .45s;
  }

  body.motion-ready .project.is-visible {
    opacity: 1;
    transform: none;
  }
}

.project-deck {
  position: absolute;
  z-index: 1 !important;
  right: clamp(18px, 5vw, 96px);
  top: 50%;
  width: clamp(120px, 17vw, 250px);
  aspect-ratio: .76;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.project-deck span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--black);
  box-shadow: 0 0 0 1px rgba(239,239,233,.42), 12px 12px 0 rgba(16,16,17,.32);
  transform: rotate(var(--card-angle)) translate(var(--card-x), var(--card-y));
  transition: transform .72s cubic-bezier(.22,.8,.2,1), box-shadow .5s ease;
}

.project-deck span:nth-child(1) { --card-angle: -8deg; --card-x: -10%; --card-y: 8%; }
.project-deck span:nth-child(2) { --card-angle: 5deg; --card-x: 6%; --card-y: -4%; }
.project-deck span:nth-child(3) { --card-angle: -2deg; --card-x: 0; --card-y: 0; }
.project-deck img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.06); }

.project-cover { z-index: 0 !important; }
.project:hover .project-deck,
.project:focus-visible .project-deck { opacity: 1; }
.project:hover .project-deck span:nth-child(1),
.project:focus-visible .project-deck span:nth-child(1) { transform: rotate(-15deg) translate(-35%, 14%); }
.project:hover .project-deck span:nth-child(2),
.project:focus-visible .project-deck span:nth-child(2) { transform: rotate(13deg) translate(30%, -12%); }
.project:hover .project-deck span:nth-child(3),
.project:focus-visible .project-deck span:nth-child(3) { transform: rotate(-3deg) translate(-2%, -3%); box-shadow: 18px 18px 0 var(--hot); }

.case.open .case-top > *,
.case.open .motion-label,
.case.open .case-motion video,
.case.open .case-gallery figure {
  animation: landing-in .75s cubic-bezier(.22,.8,.2,1) both;
}
.case.open .case-top h3 { animation-delay: .09s; }
.case.open .case-description { animation-delay: .18s; }
.case.open .case-meta { animation-delay: .25s; }
.case.open .motion-label { animation-delay: .16s; }
.case.open .case-motion video { animation-delay: .22s; }
.case.open .case-gallery figure:nth-of-type(1) { animation-delay: .04s; }
.case.open .case-gallery figure:nth-of-type(2) { animation-delay: .10s; }
.case.open .case-gallery figure:nth-of-type(3) { animation-delay: .16s; }
.case.open .case-gallery figure:nth-of-type(4) { animation-delay: .22s; }
.case.open .case-gallery figure:nth-of-type(5) { animation-delay: .28s; }
.case.open .case-gallery figure:nth-of-type(6) { animation-delay: .34s; }
.case.open .case-gallery figure:nth-of-type(n + 7) { animation-delay: .4s; }

@keyframes landing-in {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .project-deck { width: 38vw; right: 9vw; opacity: .34; }
  .project-deck span:nth-child(1) { transform: rotate(-11deg) translate(-20%, 10%); }
  .project-deck span:nth-child(2) { transform: rotate(8deg) translate(16%, -7%); }
}

@media (prefers-reduced-motion: reduce) {
  .project-deck { display: none; }
}