/* cri-swatches: 3 rows x 15 dots, HTML + inline colours. Timing: 12 s loop, rows and dots staggered via --i / --r. */
/* backdrop = the page colour (Owen 2026-10-30): the dots sit on the page itself, no lighter box */
.feat-media.feat-cri-swatches { background: var(--bg); }
.feat-cri-swatches .board {
  position: absolute; inset: 0; padding: 6% 5.5% 5%; display: grid; grid-template-rows: 1fr 1fr 1fr auto; row-gap: 2%;
  font-family: var(--font-ui); color: var(--fg);
}
.feat-cri-swatches .row { display: grid; grid-template-rows: auto 1fr; align-content: center; row-gap: clamp(4px, .7vw, 10px); min-height: 0; }
.feat-cri-swatches .head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.feat-cri-swatches .k { font: 500 clamp(9px, .9vw, 12px)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.feat-cri-swatches .n { font-family: var(--font-display); font-weight: 340; font-size: clamp(15px, 1.9vw, 26px); line-height: 1; letter-spacing: -.01em; }
.feat-cri-swatches .n i { font-style: normal; color: var(--fg-dim); padding: 0 .1em; }
.feat-cri-swatches [data-lamp="mulb"] .n { color: var(--maple); }

.feat-cri-swatches .dots { display: grid; grid-template-columns: repeat(15, 1fr); column-gap: 2.2%; align-items: center; min-height: 0; }
.feat-cri-swatches .dot {
  aspect-ratio: 1; border-radius: 50%; background: var(--c); max-height: 100%;
  box-shadow: inset 0 -0.18em 0.3em rgba(0,0,0,.28), inset 0 0.12em 0.2em rgba(255,255,255,.14);
  opacity: 0; transform: scale(.9);
  animation: cs-dot 12s var(--ease) infinite; animation-delay: calc(var(--i) * 70ms + var(--r) * 600ms); will-change: opacity, transform;
}
/* 12 s: 0-1.2 fade in (then offset by stagger), hold, R9 lifts 4.5-6 s, holds, back; all fade out 10.5-11.5 s */
@keyframes cs-dot {
  0% { opacity: 0; transform: scale(.9) } 9% { opacity: 1; transform: scale(1) }
  80% { opacity: 1; transform: scale(1) } 90% { opacity: 0; transform: scale(.98) } 100% { opacity: 0; transform: scale(.98) }
}
.feat-cri-swatches .dot.r9 { animation-name: cs-r9; z-index: 1; position: relative; }
@keyframes cs-r9 {
  0% { opacity: 0; transform: scale(.9) } 9% { opacity: 1; transform: scale(1) }
  36% { transform: scale(1) } 44% { transform: scale(1.32) } 72% { transform: scale(1.32) } 80% { opacity: 1; transform: scale(1) }
  90% { opacity: 0; transform: scale(.98) } 100% { opacity: 0; transform: scale(.98) }
}
.feat-cri-swatches .head { opacity: 0; animation: cs-head 12s var(--ease) infinite; animation-delay: calc(var(--r) * 600ms); will-change: opacity; }
@keyframes cs-head { 0% { opacity: 0 } 8% { opacity: 1 } 82% { opacity: 1 } 90% { opacity: 0 } 100% { opacity: 0 } }

/* footer: "R9, the red test" sits under column 9 */
.feat-cri-swatches .foot { display: grid; grid-template-columns: repeat(15, 1fr); column-gap: 2.2%; padding-top: 1%; }
.feat-cri-swatches .foot-r9 {
  grid-column: 9; justify-self: center; white-space: nowrap; text-align: center;
  font: 400 clamp(9px, .9vw, 12px)/1.3 var(--font-ui); letter-spacing: .08em; color: var(--fg-dim);
  opacity: 0; animation: cs-foot 12s var(--ease) infinite; will-change: opacity;
}
@keyframes cs-foot { 0%,38% { opacity: 0 } 46% { opacity: 1 } 80% { opacity: 1 } 88%,100% { opacity: 0 } }

@media (max-width: 640px) {
  .feat-cri-swatches .board { padding: 5% 5% 4%; }
  .feat-cri-swatches .dot { box-shadow: inset 0 -0.14em 0.2em rgba(0,0,0,.28), inset 0 0.08em 0.14em rgba(255,255,255,.14); }
}
.feat-cri-swatches:not(.is-visible) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .feat-cri-swatches .dot, .feat-cri-swatches .head, .feat-cri-swatches .foot-r9 { animation: none; opacity: 1; transform: none; }
}