/* Tay card back: the "Tay" drawer label does one slow Pilates rep per cycle.
   Rest, slow reach, hold the stretch, slow return, rest. Transform only.
   back-motion.js gives every label its own values on each page load;
   the defaults below are what you see without JS. */

.tay-back {
  position: relative;
  aspect-ratio: 1100 / 1900;
}

.tay-back__art {
  display: block;
  width: 100%;
  height: 100%;
}

.tay-back__label {
  position: absolute;
  /* Label center sits at 46.45% x 50% of the card,
     39px (3.5%) left of center on the 1100 x 1900 artwork. */
  left: 30.55%;
  top: 45.74%;
  width: 31.82%;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: var(--tay-ox, 50%) var(--tay-oy, 50%);
  transform: translate(0, 0) rotate(var(--tay-tilt, -1.5deg));
}

@media (prefers-reduced-motion: no-preference) {
  .tay-back__label.is-moving {
    will-change: transform;
    animation-name: tay-rep;
    animation-duration: var(--tay-dur, 8s);
    animation-delay: var(--tay-delay, 0s);
    animation-timing-function: var(--tay-ease, cubic-bezier(.42, 0, .38, 1));
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
}

@keyframes tay-rep {
  0%, 12% {   /* rest */
    transform: translate(0, 0) rotate(var(--tay-tilt, -1.5deg));
  }
  48%, 62% {  /* reach, then hold the stretch */
    transform: translate(var(--tay-dx, -2px), var(--tay-dy, 1px))
               rotate(calc(var(--tay-tilt, -1.5deg) + var(--tay-reach, 1deg)));
  }
  94%, 100% { /* back to rest */
    transform: translate(0, 0) rotate(var(--tay-tilt, -1.5deg));
  }
}