/* Flick cards. Measured from truus.co's work showcase (Osmo "flick cards", teardown 10-01), rewritten with our names.
   A fanned deck of portrait cards; drag sideways and the whole deck re-fans around the next card, following the
   pointer, then springs into place on release. Captions live in a second list and swap by CSS from the status
   attribute part.js mirrors onto them.
   Markup: .flick > .flick__stage > (.flick__list > .flick__card*N > .flick__media) + .flick__dragger
                  + .flick__captions > .flick__caption*N        (N >= 7) */
.flick {
  --flick-card-w: 23.75em;      /* card width */
  --flick-card-ratio: 2 / 3;    /* portrait */
  --flick-stage-w: 47em;        /* drag area, 4:3 */
  --flick-radius: 1.25em;
  --flick-border: 0.375em solid #f3efe6;
  --flick-dim: 0.5;             /* media opacity of every card but the active one */
  --flick-card-bg: #111;        /* what the dimmed media fades towards: match the section */
  --flick-bounce: 0.6s cubic-bezier(0.35, 1.75, 0.6, 1);   /* captions: CSS-only overshoot (y2 1.75) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}
.flick__stage {
  position: relative;
  width: var(--flick-stage-w);
  max-width: 100%;
  aspect-ratio: 4 / 3;
}
.flick__list { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.flick__card {
  position: absolute;
  width: var(--flick-card-w);
  aspect-ratio: var(--flick-card-ratio);
  border-radius: var(--flick-radius);
  border: var(--flick-border);
  background: var(--flick-card-bg);
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  will-change: transform, opacity;
}
.flick__media { position: absolute; inset: 0; opacity: var(--flick-dim); transition: opacity 0.2s ease; }
.flick__card[data-flick-status="active"] .flick__media { opacity: 1; }
.flick__dragger {
  position: absolute;
  inset: 0;
  z-index: 100;
  touch-action: pan-y;          /* vertical page scroll still works on touch */
  user-select: none;
  cursor: grab;
}
.flick[data-flick-drag="grabbing"] .flick__dragger { cursor: grabbing; }
.flick__dragger:focus-visible { outline: 2px solid currentColor; outline-offset: 0.5em; border-radius: var(--flick-radius); }
.flick__captions { position: relative; width: 20em; height: 9em; display: grid; place-items: center; }
.flick__caption {
  position: absolute;
  width: 100%;
  text-align: center;
  transform-origin: bottom;
  transition: var(--flick-bounce);
  opacity: 0;
  visibility: hidden;
  transform: translateX(0%);
}
/* the caption swings in from the side its card comes from */
.flick__caption[data-flick-status="before-1"] { transform: translateX(-25%) rotate(-8deg); }
.flick__caption[data-flick-status="after-1"]  { transform: translateX(25%) rotate(8deg); }
.flick__caption[data-flick-status="active"]   { opacity: 1; visibility: visible; transform: translateX(0%) rotate(0.001deg) scale(1); }
@media (max-width: 767px) { .flick { --flick-card-w: 14em; --flick-stage-w: 27.5em; --flick-border: 0.25em solid #f3efe6; gap: 0.5em; } }
@media (prefers-reduced-motion: reduce) { .flick__caption { transition: opacity 0.2s ease, visibility 0.2s; } }