/* ============================================================
   Arc Card Carousel — cards tangent to a 1576px wheel whose
   centre sits well below the frame. Measured numbers are custom
   properties.
   ============================================================ */

.acc {
  --acc-w: 325px;          /* measured */
  --acc-h: 460px;          /* measured */
  --acc-r: 1576px;         /* measured */
  --acc-top: 295px;        /* measured: centre of the top card */
  --acc-dur: 520ms;
  --acc-ease: cubic-bezier(.22, .61, .36, 1);
  --acc-radius: 4px;                              /* measured */
  --acc-shadow: 0 20px 40px rgba(0, 0, 0, .12);   /* measured */
  --acc-ink: #0f172a;      /* measured */
  --acc-muted: #9ca3af;    /* measured */
  --acc-bg: #fff;

  position: relative;
  width: 100%;
  height: 700px;           /* the reference frame */
  background: var(--acc-bg);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--acc-ink);
}
.acc.is-dragging { cursor: grabbing; }

/* The wheel centre is one point: the top of the arc plus the radius. Every
   card's box is centred on it, so each card's own transform-origin is that
   same point and `rotate()` swings it round the wheel with no extra maths. */
.acc__wheel { position: absolute; inset: 0; }

.acc__card {
  position: absolute;
  left: 50%;
  top: calc(var(--acc-top) + var(--acc-r));
  width: var(--acc-w);
  height: var(--acc-h);
  margin-left: calc(var(--acc-w) / -2);
  margin-top: calc(var(--acc-h) / -2);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Nothing eases while the hand is down — the reference tracks the pointer
   exactly. The transition is only here for the keyboard step. */
.acc.is-easing .acc__card {
  transition: transform var(--acc-dur) var(--acc-ease),
              opacity var(--acc-dur) var(--acc-ease);
}

.acc__shot {
  height: calc(var(--acc-h) - 34px);
  border-radius: var(--acc-radius);
  overflow: hidden;
  box-shadow: var(--acc-shadow);
  background: #eef1f5;
}
.acc__shot > img,
.acc__shot > .acc__art { display: block; width: 100%; height: 100%; object-fit: cover; }

.acc__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 12px;
}
.acc__title { font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -.14px; }
.acc__num   { font-size: 13px; line-height: 15.6px; font-weight: 400; color: var(--acc-muted); }

/* ---- the caption under the arc ---- */
.acc__caption {
  position: absolute;
  left: 0; right: 0; bottom: 76px;
  text-align: center;
  z-index: 200;
}
.acc__kicker {
  margin: 0 0 8px;
  font-size: 12px; line-height: 12px; font-weight: 500;
  letter-spacing: .96px;                 /* measured */
  color: var(--acc-muted);
}
.acc__heading {
  margin: 0;
  font-size: 26px; line-height: 28.6px; font-weight: 600;
  letter-spacing: -.52px;                /* measured */
}

@media (prefers-reduced-motion: reduce) {
  .acc.is-easing .acc__card { transition-duration: 1ms; }
}