/* ==========================================================================
   Rosary project-card preview (sibling of .vo-preview)
   Markup: .project-card-media.rosary-preview > .rp-strand > 7 spans
     .rp-cross, .rp-bead.rp-lg, .rp-bead x3, .rp-bead.rp-lg, .rp-medal
   A sideways crucifix and the Rosary pendant. Beads fill one per second in
   prayer order, hold, fade, and loop. Pure CSS, theme variables only.
   ========================================================================== */

.rosary-preview {
  container-type: inline-size;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  --rp-fill: color-mix(in srgb, var(--brand) 70%, var(--accent));
  --rp-dim: color-mix(in srgb, var(--brand) 22%, var(--bg-deep));
  --rp-line: color-mix(in srgb, var(--brand) 38%, var(--border));
  --rp-glow: color-mix(in srgb, var(--brand) 30%, transparent);
}

.rp-strand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.9cqi;
}

/* the chain the beads hang on */
.rp-strand::before {
  content: "";
  position: absolute;
  left: 8cqi;
  right: 4cqi;
  top: 50%;
  height: max(1px, 0.5cqi);
  transform: translateY(-50%);
  background: var(--rp-line);
  border-radius: 1px;
}

.rp-strand > span {
  position: relative;
  flex: none;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* beads: outlined and dim until prayed */
.rp-bead {
  width: 8.5cqi;
  height: 8.5cqi;
  border-radius: 50%;
  background: var(--rp-dim);
  border: max(1px, 0.5cqi) solid var(--rp-line);
}

.rp-bead.rp-lg {
  width: 12.2cqi;
  height: 12.2cqi;
}

/* sideways crucifix: long beam to the left, head touching the chain on the right */
.rp-cross {
  width: 21cqi;
  height: 13.6cqi;
  color: var(--rp-dim);
}

.rp-cross::before,
.rp-cross::after {
  content: "";
  position: absolute;
  background: currentColor;
  border: max(1px, 0.45cqi) solid var(--rp-line);
  border-radius: 1px;
  box-sizing: border-box;
}

.rp-cross::before { /* beam */
  left: 0;
  right: 0;
  top: 50%;
  height: 4.25cqi;
  transform: translateY(-50%);
}

.rp-cross::after { /* crossbar, near the head */
  right: 5.1cqi;
  top: 0;
  bottom: 0;
  width: 4.25cqi;
}

/* centre medal: small oval at the end of the pendant */
.rp-medal {
  width: 9.7cqi;
  height: 12.5cqi;
  border-radius: 50%;
  background: var(--rp-dim);
  border: max(1px, 0.5cqi) solid var(--rp-line);
}

.rp-medal::before,
.rp-medal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--rp-line);
}
.rp-medal::before { width: max(1px, 0.5cqi); height: 6.3cqi; }
.rp-medal::after { width: 4.25cqi; height: max(1px, 0.5cqi); margin-top: -0.85cqi; }

.rp-strand > span:nth-child(2) { animation-name: rp-fill-2; }
.rp-strand > span:nth-child(3) { animation-name: rp-fill-3; }
.rp-strand > span:nth-child(4) { animation-name: rp-fill-4; }
.rp-strand > span:nth-child(5) { animation-name: rp-fill-5; }
.rp-strand > span:nth-child(6) { animation-name: rp-fill-6; }
.rp-strand > span:nth-child(7) { animation-name: rp-fill-7; }

.rp-strand > .rp-cross { animation-name: rp-cross; }

@keyframes rp-fill-2 {
  0%, 16% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  20% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  26%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-fill-3 {
  0%, 26% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  30% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  36%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-fill-4 {
  0%, 36% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  40% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  46%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-fill-5 {
  0%, 46% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  50% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  56%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-fill-6 {
  0%, 56% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  60% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  66%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-fill-7 {
  0%, 66% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
  70% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
  76%, 86% { background-color: var(--rp-fill); border-color: var(--rp-fill); box-shadow: 0 0 0 0 transparent; }
  94%, 100% { background-color: var(--rp-dim); border-color: var(--rp-line); box-shadow: 0 0 0 0 transparent; }
}
@keyframes rp-cross {
  0%, 6% { color: var(--rp-dim); filter: none; }
  10% { color: var(--rp-fill); filter: drop-shadow(0 0 1.7cqi var(--rp-glow)); }
  16%, 86% { color: var(--rp-fill); filter: none; }
  94%, 100% { color: var(--rp-dim); filter: none; }
}

/* Medal: its cross mark shows through once filled */
.rp-medal::before, .rp-medal::after { animation: rp-mark 10s ease-in-out infinite; }
@keyframes rp-mark {
  0%, 66% { background: var(--rp-line); }
  70%, 86% { background: var(--surface); }
  94%, 100% { background: var(--rp-line); }
}

/* Reduced motion: no animation; a still frame with the crucifix and first beads prayed */
@media (prefers-reduced-motion: reduce) {
  .rp-strand > span,
  .rp-medal::before,
  .rp-medal::after {
    animation: none !important;
  }
  .rp-cross { color: var(--rp-fill); }
  .rp-strand > .rp-bead:nth-child(-n+4) { background: var(--rp-fill); border-color: var(--rp-fill); }
  .rp-strand > .rp-bead:nth-child(4) { box-shadow: 0 0 0 2.2cqi var(--rp-glow); }
}