/* Motion + photo strip for the "What Are You Looking for at The J?" band (see js/findband.js) */
.findband{position:relative;overflow:hidden}
.findband .search{position:relative;z-index:2}

/* glow while a sample prompt is typing */
.search .field{transition:box-shadow .5s ease,border-color .5s ease}
@keyframes findGlow{0%,100%{box-shadow:0 0 0 4px rgba(212,0,88,.10),0 0 0 0 rgba(212,0,88,0)}50%{box-shadow:0 0 0 6px rgba(212,0,88,.16),0 0 28px 2px rgba(212,0,88,.22)}}
.search .field.is-typing{border-color:var(--pink);animation:findGlow 2.4s ease-in-out infinite}
.search .field:focus-within{animation:none;border-color:var(--purple)}

/* chips stagger in once the card is on screen */
.chip.chip-anim{opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),background .2s,border-color .2s}
.search.is-seen .chip.chip-anim{opacity:1;transform:none}

/* dim photo strip under the search card, fading into the margins */
.find-strip{position:relative;z-index:1;margin:34px 0 0;height:170px;opacity:.55;transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.find-rail{display:flex;width:max-content;animation:findScroll 110s linear infinite}
.find-track{display:flex;gap:14px;padding-right:14px}
.find-track span{display:block;width:230px;height:170px;border-radius:18px;overflow:hidden;background:var(--purple-tint);flex:none}
.find-track img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
@keyframes findScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.findband.no-motion .find-rail{animation:none}

/* results float over the strip, which fades back further */
.findband.has-strip .results{position:relative;z-index:3;margin-top:-120px}
.findband.results-open .find-strip{opacity:.22}
.findband.has-strip .results[hidden]{display:none}
.findband.has-strip .results-inner{padding:22px 24px 26px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--r-card);border:1px solid rgba(64,1,134,.08)}
.findband.has-strip .results:not([hidden])+*{margin-top:0}

@media (max-width:720px){.find-strip{height:120px;margin-top:24px}.find-track span{width:160px;height:120px}.findband.has-strip .results{margin-top:-80px}}
@media (prefers-reduced-motion:reduce){.find-rail{animation:none}.search .field.is-typing{animation:none}.chip.chip-anim{opacity:1;transform:none;transition:none}}