/* Rising deck. Measured from melius.com (home personas pile), rewritten. Motion lives in part.js (springs and the
   cycling logic); this file is the pile's geometry plus the front card's chips.
   Every card sits on the same spot (first card in flow, the rest absolute on top of it); part.js writes each card's
   translateY / translateZ / scaleY, opacity and z-index every frame while anything moves. */
[data-rdeck] { --rdeck-w: min(90vw, 25rem); }
.rdeck__pile {
  position: relative;
  width: var(--rdeck-w);
  margin-inline: auto;
  perspective: var(--rdeck-perspective, 30rem);
}
.rdeck__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rdeck-w);
  cursor: pointer;
  opacity: 0;                       /* hidden until the intro, also when JS is missing for a moment */
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.rdeck__card:first-child { position: relative; }

/* chips on the FRONT card fade in one by one (source: delayChildren .35s, stagger .1s, .6s easeOutCubic) and leave
   in reverse order (.05s apart, .3s) when the card stops being the front */
.rdeck__chips > * {
  opacity: 0;
  transition: opacity var(--rdeck-chip-out, .3s) cubic-bezier(.33, 1, .68, 1);
  transition-delay: calc((var(--rdeck-chips, 3) - 1 - var(--i, 0)) * var(--rdeck-chip-stagger-out, .05s));
}
.rdeck__card.is-front .rdeck__chips > * {
  opacity: 1;
  transition-duration: var(--rdeck-chip-in, .6s);
  transition-delay: calc(var(--rdeck-chip-delay, .35s) + var(--i, 0) * var(--rdeck-chip-stagger, .1s));
}
.rdeck__chips > :nth-child(2) { --i: 1; } .rdeck__chips > :nth-child(3) { --i: 2; } .rdeck__chips > :nth-child(4) { --i: 3; }

@media (prefers-reduced-motion: reduce) {
  .rdeck__chips > *, .rdeck__card.is-front .rdeck__chips > * { transition-duration: 0s; transition-delay: 0s; }
}