/* Equal-height toy silhouettes; motion belongs to each slot, not its image layers. */
[data-season][data-page="index"] #collection .collection-toy{--offset:-16px;position:relative;display:block;width:100%;aspect-ratio:294/693;transform-origin:50% 100%;animation:collection-squish 16s linear infinite paused;will-change:transform}
[data-season][data-page="index"] #collection .collection-toy:nth-child(n+5){--offset:16px}
/* Eight phases rather than four, handed out in a scrambled order. Four phases
   across eight slots puts two toys in unison; handing the eight out left to
   right produces a Mexican wave. Neither reads as a shelf of separate things. */
[data-season][data-page="index"] #collection .collection-toy:nth-child(2){animation-delay:-6s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(3){animation-delay:-12s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(4){animation-delay:-4s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(5){animation-delay:-10s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(6){animation-delay:-2s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(7){animation-delay:-14s}
[data-season][data-page="index"] #collection .collection-toy:nth-child(8){animation-delay:-8s}
[data-season][data-page="index"] #collection .fanrow .collection-toy img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:contain;transform:none;animation:none;transition:none;filter:brightness(var(--exposure,.97)) saturate(.92) contrast(.96) drop-shadow(0 10px 6px #0009)}
[data-season][data-page="index"] #collection.collection-in-view .collection-toy{animation-play-state:running}

/* SQUISH.

   Slow-rise memory foam does three things in order, and the animation now
   does them in the same order over a 16 second cycle:

       DEEP    0.8s   pressed to 80% of full height at 114% of full width
       hold    1.1s   held there, which is what makes the depth readable
       LONG    1.9s   released, and it comes back up THROUGH its own height
                      to 109% - tall and narrow, the stretch half of squash
                      and stretch
       hold    1.1s   stretched
       BEND    1.4s   one soft lean, skewed from the base rather than rotated
       settle  3.2s   back down to rest

   The bend is a skew, not a rotation. A rotation swings the whole wrapper
   like a bottle tipping; a skew from the base leaves the foot planted and
   carries the top over, which is what something soft does. It happens ONCE -
   an earlier version put four swings here and it read as a wobble, and the
   eye follows swinging and stops seeing the squeeze.

   Every keyframe lists translate, skewX, rotate and scale in that order even
   where a value is zero. A transform list only interpolates component by
   component when the functions match; drop one from a keyframe and the
   browser falls back to interpolating the matrices, which sends the toy
   through a shear on the way.

   Each leg declares its own easing and the animation itself is linear - one
   shared curve cannot make the press fast, the holds still, and the stretch
   and the settle slow.

   transform-origin is the BOTTOM of the slot: a squash there plants the toy
   and only the top moves, and the skew bends from the foot. */
@keyframes collection-squish{
  /* idle - a slow breath, so a toy waiting its turn is not dead still */
  0%   {transform:translate(var(--offset),0)    skewX(0deg)    rotate(-.4deg) scale(1.005,.995);
        animation-timing-function:ease-in-out}
  16%  {transform:translate(var(--offset),-6px) skewX(0deg)    rotate(.3deg)  scale(.994,1.009);
        animation-timing-function:ease-in-out}
  32%  {transform:translate(var(--offset),-2px) skewX(0deg)    rotate(-.1deg) scale(1.003,.998);
        animation-timing-function:ease-in-out}
  40%  {transform:translate(var(--offset),0)    skewX(0deg)    rotate(0deg)   scale(1,1);
        animation-timing-function:cubic-bezier(.3,0,.6,1)}
  /* DEEP */
  45%  {transform:translate(var(--offset),0)    skewX(0deg)    rotate(0deg)   scale(1.145,.80);
        animation-timing-function:linear}
  52%  {transform:translate(var(--offset),0)    skewX(0deg)    rotate(0deg)   scale(1.138,.808);
        animation-timing-function:cubic-bezier(.35,0,.25,1)}
  /* LONG - up through its own height and out the other side */
  64%  {transform:translate(var(--offset),0)    skewX(0deg)    rotate(0deg)   scale(.925,1.09);
        animation-timing-function:linear}
  71%  {transform:translate(var(--offset),0)    skewX(-.4deg)  rotate(0deg)   scale(.938,1.078);
        animation-timing-function:cubic-bezier(.4,0,.35,1)}
  /* BEND - once, from the foot */
  80%  {transform:translate(var(--offset),0)    skewX(-2.4deg) rotate(.5deg)  scale(.985,1.028);
        animation-timing-function:cubic-bezier(.45,.05,.3,1)}
  /* and down to rest */
  92%  {transform:translate(var(--offset),0)    skewX(-.3deg)  rotate(-.2deg) scale(1.002,.999);
        animation-timing-function:ease-in-out}
  100% {transform:translate(var(--offset),0)    skewX(0deg)    rotate(-.4deg) scale(1.005,.995)}
}
[data-season][data-page="index"].motion-off #collection .collection-toy,[data-season][data-page="index"].motion-hidden #collection .collection-toy{animation-play-state:paused}
@media(max-width:700px){[data-season][data-page="index"] #collection .collection-toy{--offset:-5px}[data-season][data-page="index"] #collection .collection-toy:nth-child(n+5){--offset:5px}}
@media(prefers-reduced-motion:reduce){[data-season][data-page="index"] #collection .collection-toy{animation:none;transform:translateX(var(--offset))}}