/* Voice deck: a testimonial card deck. Top card is clicked or dragged away, the stack moves up one place.
   Every number below is DUNA's (v2-voices); change behaviour through these knobs only. */
.vdeck {
  --vdeck-dx: 18px;                         /* each card behind sits this much further right ... */
  --vdeck-dy: 16px;                         /* ... this much further down ... */
  --vdeck-rot: 2.6deg;                      /* ... and turned this much more */
  --vdeck-off-x: 44px;                      /* resting pose of the hidden cards (4th onward) */
  --vdeck-off-y: 40px;
  --vdeck-off-rot: 6.5deg;
  --vdeck-dur: .64s;                        /* stack move (CSS fallback; the JS move reads it too) */
  --vdeck-fade: .42s;                       /* opacity changes */
  --vdeck-ease: cubic-bezier(.22, 1, .36, 1);
  --vdeck-spin-dur: .48s;                   /* the draw button's spark: one full turn per draw */
  --vdeck-radius: 24px;                     /* outer card */
  --vdeck-radius-inner: 12px;               /* inner panel */
  --vdeck-frame: 16px;                      /* coloured rim around the inner panel */
  --vdeck-c0: #e7dcc6;                      /* rim colour by place in the stack: top / 2nd / 3rd + hidden */
  --vdeck-c1: #cdbd9e;                      /* (the rim darkens as a card sinks: that is what reads as depth) */
  --vdeck-c2: #7d705a;
  --vdeck-panel: #1f1d1a;                   /* inner panel + its text */
  --vdeck-panel-ink: #f1e9d8;
  --vdeck-ink: #111;                        /* tabs + focus ring */
  --vdeck-paper: #fff;
  --vdeck-line: rgba(0, 0, 0, .14);
  --vdeck-accent: #111;                     /* draw button */
  --vdeck-accent-ink: #fff;
  --vdeck-numeral-font: Georgia, "Times New Roman", serif;
}

/* ---- controls ---- */
.vdeck, .vdeck *, .vdeck *::before, .vdeck *::after { box-sizing: border-box; }
.vdeck { overflow-x: clip; }   /* a card flung off the side never widens the page */
.vdeck__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.vdeck__controls[hidden] { display: none; }
.vdeck__draw {
  display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer;
  padding: 6px 6px 6px 26px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  background: var(--vdeck-accent); color: var(--vdeck-accent-ink);
  transition: opacity .2s var(--vdeck-ease), transform .2s var(--vdeck-ease);
}
.vdeck__draw:hover { opacity: .88; }
.vdeck__draw:active { transform: scale(.96); }
.vdeck__draw:focus-visible { outline: 2px solid var(--vdeck-ink); outline-offset: 3px; }
.vdeck__chip {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vdeck-accent-ink); color: var(--vdeck-accent);
}
.vdeck__spark {
  width: 14px; height: 20px;
  transform: rotate(calc(var(--vdeck-spins, 0) * 360deg));
  transition: transform var(--vdeck-spin-dur) var(--vdeck-ease);
}
.vdeck__tabs { display: flex; gap: 6px; }
.vdeck__tab {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--vdeck-line); background: none; color: var(--vdeck-ink);
  font: 400 20px/1 var(--vdeck-numeral-font);
  transition: background-color .2s, color .2s, border-color .2s;
}
.vdeck__tab[aria-selected="true"] { border-color: var(--vdeck-ink); background: var(--vdeck-ink); color: var(--vdeck-paper); }
.vdeck__tab:focus-visible { outline: 2px solid var(--vdeck-ink); outline-offset: 3px; }

/* ---- the deck ---- */
.vdeck__stage { position: relative; padding: 0 var(--vdeck-off-x) var(--vdeck-off-y) 0; }
.vdeck__deck { position: relative; display: grid; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none; }
.vdeck__deck:focus-visible { outline: 2px solid var(--vdeck-ink); outline-offset: 6px; border-radius: var(--vdeck-radius); }
.vdeck__card {
  grid-area: 1 / 1; position: relative; margin: 0; padding: var(--vdeck-frame);
  border-radius: var(--vdeck-radius); background: var(--vdeck-c2); pointer-events: none;
  transition: transform var(--vdeck-dur) var(--vdeck-ease), opacity var(--vdeck-fade) var(--vdeck-ease), background-color .3s linear;
}
.vdeck__card[data-vdeck-pos="0"] { z-index: 5; opacity: 1; cursor: pointer; pointer-events: auto; background: var(--vdeck-c0); transform: translate(0, 0) rotate(0deg); }
.vdeck__card[data-vdeck-pos="1"] { z-index: 4; opacity: 1; background: var(--vdeck-c1); transform: translate(var(--vdeck-dx), var(--vdeck-dy)) rotate(var(--vdeck-rot)); }
.vdeck__card[data-vdeck-pos="2"] { z-index: 3; opacity: 1; background: var(--vdeck-c2); transform: translate(calc(var(--vdeck-dx) * 2), calc(var(--vdeck-dy) * 2)) rotate(calc(var(--vdeck-rot) * 2)); }
.vdeck__card[data-vdeck-pos="off"] { z-index: 1; opacity: 0; background: var(--vdeck-c2); transform: translate(var(--vdeck-off-x), var(--vdeck-off-y)) rotate(var(--vdeck-off-rot)); }
/* while a finger/mouse holds the top card, or a scripted move is running, CSS transitions stand down */
.vdeck__deck.is-moving .vdeck__card, .vdeck__deck.is-dragging .vdeck__card { transition: none; }
/* while dragging, only the held card and the one it reveals are shown */
.vdeck__deck.is-dragging .vdeck__card:not([data-vdeck-pos="0"]):not([data-vdeck-preview]) { opacity: 0; }

.vdeck__inner {
  height: 100%; display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 3vw, 40px);
  border-radius: var(--vdeck-radius-inner); background: var(--vdeck-panel); color: var(--vdeck-panel-ink);
}
.vdeck__top { display: flex; justify-content: space-between; align-items: center; }
.vdeck__numeral { font: 400 40px/1 var(--vdeck-numeral-font); }
.vdeck__label { font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.vdeck__quote { margin: 0; font-weight: 300; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.vdeck__quote p { margin: 0; }
.vdeck__caption { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.vdeck__name { font-weight: 600; font-size: 16px; line-height: 1.2; }
.vdeck__role { font-size: 14px; line-height: 1.3; opacity: .75; }

/* reduced motion: places snap, only colour/opacity fade */
@media (prefers-reduced-motion: reduce) {
  .vdeck__card { transition: opacity .2s linear, background-color .2s linear; }
  .vdeck__spark { transition: none; }
}
/* no JS: a plain column of quotes */
.vdeck:not(.is-enhanced) .vdeck__deck { display: flex; flex-direction: column; gap: 16px; }
.vdeck:not(.is-enhanced) .vdeck__card { transform: none; opacity: 1; pointer-events: auto; background: var(--vdeck-c0); }
.vdeck:not(.is-enhanced) .vdeck__stage { padding: 0; }