/* ═══════════════════════════════════════════════════════════
   NECTUS · spin.css — the garment turns

   A single photograph is not a 3D model, so a full 360° spin is
   not honestly available: halfway round, a flat plane goes edge-on
   and then shows its own mirror image. What reads as a garment
   turning under a light — and what this does — is a slow swing
   through a shallow arc, lit so the highlight travels across the
   cloth as it moves. Perspective does the rest.
   ═══════════════════════════════════════════════════════════ */

/* the card becomes a stage with depth */
.item{
  perspective:1100px;
  perspective-origin:50% 45%;
}

/* the garment sits on its own plane inside that stage */
.item-img,
.item-mk{
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
}

.item.spin .item-img,
.item.spin .item-mk{
  animation:garmentTurn 9s cubic-bezier(.45,0,.55,1) infinite;
  transform-origin:50% 55%;
}

/* each card starts at a different point in the swing, so a row of
   them does not move as one block */
.item.spin:nth-child(2n) .item-img,
.item.spin:nth-child(2n) .item-mk{ animation-delay:-2.2s }
.item.spin:nth-child(3n) .item-img,
.item.spin:nth-child(3n) .item-mk{ animation-delay:-4.6s }
.item.spin:nth-child(4n) .item-img,
.item.spin:nth-child(4n) .item-mk{ animation-delay:-6.9s }

@keyframes garmentTurn{
  0%   { transform:rotateY(-21deg) rotateX(1.5deg) scale(1.015) }
  50%  { transform:rotateY( 21deg) rotateX(-1.5deg) scale(1.015) }
  100% { transform:rotateY(-21deg) rotateX(1.5deg) scale(1.015) }
}

/* the light that travels over the cloth as it turns */
.item.spin::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,
    transparent 34%,
    rgba(221,227,233,.055) 47%,
    rgba(221,227,233,.11) 50%,
    rgba(221,227,233,.055) 53%,
    transparent 66%);
  animation:garmentSheen 9s cubic-bezier(.45,0,.55,1) infinite;
  mix-blend-mode:screen;
}
.item.spin:nth-child(2n)::after{ animation-delay:-2.2s }
.item.spin:nth-child(3n)::after{ animation-delay:-4.6s }
.item.spin:nth-child(4n)::after{ animation-delay:-6.9s }

@keyframes garmentSheen{
  0%   { transform:translateX(-46%) }
  50%  { transform:translateX( 46%) }
  100% { transform:translateX(-46%) }
}

/* the ground shadow shifts with the swing, which is most of what
   sells the movement as rotation rather than a flat skew */
.item.spin .item-img{
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.65));
}

/* Hovering hands the garment to the cursor: the animation pauses
   and it follows the pointer instead, which is what anyone tries
   to do the moment they see something turning. */
.item.spin:hover .item-img,
.item.spin:hover .item-mk{
  animation-play-state:paused;
  transform:rotateY(calc(var(--turn, 0) * 1deg)) rotateX(calc(var(--tilt, 0) * 1deg)) scale(1.04);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.item.spin:hover::after{ animation-play-state:paused }

/* a photographed piece needs no mark behind it */
.item.haspic .item-mk{ display:none }

/* Someone who has asked for less movement gets a still garment at a
   flattering angle rather than nothing at all. */
@media (prefers-reduced-motion:reduce){
  .item.spin .item-img,
  .item.spin .item-mk{
    animation:none;
    transform:rotateY(-9deg) scale(1.01);
  }
  .item.spin::after{ animation:none; opacity:.4 }
}