/* Card 05 art, "spotlight in the dark": a dark shelf of products. A torch beam searches across it, then settles on one
   that lights up mint: the next opportunity worth going after. No real products or brands are shown. */
.art--spot { flex: 1; min-height: 196px; margin: 18px -8px 16px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; position: relative; }

/* the dark shelf */
.sl { position: relative; overflow: hidden; padding: 12px; border-radius: 15px; background: #0d0d0e;
  box-shadow: inset 0 0.5px 0 rgba(250, 250, 248, 0.1), inset 0 0 0 0.5px rgba(250, 250, 248, 0.06), 0 14px 30px -16px rgba(0, 0, 0, 0.95); }
.sl-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sl-t { aspect-ratio: 1 / 1; border-radius: 9px; display: grid; place-items: center; background: rgba(250, 250, 248, 0.045); }
.sl-t svg { width: 40%; height: auto; }
/* kept dim so the beam has something to reveal */
.sl-t:not(.sl-t--hit) { background: rgba(250, 250, 248, 0.03); }
.sl-t:not(.sl-t--hit) svg, .sl-off svg { opacity: .6; }

/* the one it finds */
.sl-t--hit { position: relative; z-index: 2; }
.sl-t--hit::before, .sl-t--hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.sl-t--hit::before { background: radial-gradient(70% 70% at 50% 40%, rgba(122, 244, 208, 0.42), rgba(122, 244, 208, 0.08));
  box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.75), 0 0 26px -2px rgba(122, 244, 208, 0.55); }
.sl-t--hit::after { box-shadow: 0 0 0 1px rgba(122, 244, 208, 0.6); }
.sl-t--hit svg { position: relative; z-index: 1; }
.sl-t--hit .sl-on { opacity: 0; }
.sl-t--hit svg { display: block; }
.sl-t--hit > span { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; }

/* the torch beam: a soft circle of light that brightens whatever it passes over (target at column 4, row 2) */
.sl-beam { position: absolute; z-index: 1; left: 12%; top: 18%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; opacity: 0;
  mix-blend-mode: screen; background: radial-gradient(circle, rgba(250, 250, 248, 0.3), rgba(250, 250, 248, 0.1) 42%, transparent 68%); }

.sl-tag { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--milk);
  background: linear-gradient(180deg, rgba(36, 58, 51, 0.8), rgba(24, 40, 35, 0.8));
  box-shadow: inset 0 0.5px 0 rgba(122, 244, 208, 0.5), inset 0 0 0 0.5px rgba(122, 244, 208, 0.28), 0 0 26px -12px rgba(122, 244, 208, 0.6); }
.sl-ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #9af8dc, #5fdcb8); }
.sl-ic svg { width: 11px; height: 11px; }

/* sequence, played once when the card is in view (script adds .play):
   the shelf appears, the beam searches, settles on one product, it lights up, the tag appears */
.art--spot .sl, .art--spot .sl-tag { opacity: 0; transform: translateY(8px) scale(.98); }
.art--spot.play .sl { animation: slIn .7s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.art--spot.play .sl-beam { animation: slSearch 2.6s cubic-bezier(.45, 0, .25, 1) .6s forwards, slDim .8s ease 3.4s forwards; }
.art--spot.play .sl-t--hit::before { animation: slFade .6s ease 3s forwards; }
.art--spot.play .sl-t--hit .sl-on { animation: slFade .6s ease 3s forwards; }
.art--spot.play .sl-t--hit .sl-off { animation: slOut .4s ease 3s forwards; }
.art--spot.play .sl-t--hit::after { animation: slPulse 1.2s ease-out 3.2s forwards; }
.art--spot.play .sl-tag { animation: slIn .7s cubic-bezier(.2, .8, .2, 1) 3.5s forwards; }
@keyframes slIn { to { opacity: 1; transform: none; } }
@keyframes slFade { to { opacity: 1; } }
@keyframes slOut { to { opacity: 0; } }
@keyframes slSearch {
  0% { opacity: 0; left: 12%; top: 18%; }
  10% { opacity: 1; }
  35% { left: 86%; top: 20%; }
  62% { left: 22%; top: 82%; }
  100% { opacity: 1; left: 70%; top: 50%; } }
@keyframes slDim { from { opacity: 1; left: 70%; top: 50%; } to { opacity: .55; left: 70%; top: 50%; } }
@keyframes slPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .art--spot .sl, .art--spot .sl-tag, .art--spot.play .sl, .art--spot.play .sl-tag { opacity: 1; transform: none; animation: none; }
  .art--spot .sl-beam, .art--spot.play .sl-beam { opacity: .55; left: 70%; top: 50%; animation: none; }
  .art--spot .sl-t--hit::before, .art--spot .sl-t--hit .sl-on { opacity: 1; animation: none; }
  .art--spot .sl-t--hit .sl-off { opacity: 0; animation: none; }
}
@media (max-width: 860px) {
  .art--spot { min-height: 200px; margin: 14px 0 16px; gap: 12px; }
  .sl { padding: 14px; } .sl-grid { gap: 8px; }
  .sl-beam { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .sl-tag { font-size: 13px; } .sl-ic { width: 20px; height: 20px; }
}