/* CrowdShots live-slideshow demo — faithful mini-version of the real /tv engine.
   Blurred cover backdrop + contained sharp image + slow Ken Burns + crossfade +
   live caption bar + QR badge. Driven by csdemo.js from data-* attributes. */
.csdemo{position:relative;width:100%;aspect-ratio:16/9;background:#0b1116;overflow:hidden;
  border-radius:16px;box-shadow:0 24px 60px rgba(38,51,60,.35);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.csdemo.fill{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:9px;box-shadow:none}
.csdemo.fill .cs-title{display:none}  /* occluded by phone mockup in hero; event name already shown on phone */
.csdemo .cs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;z-index:1}
.csdemo .cs-slide.show{opacity:1}
.csdemo .cs-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(30px) brightness(.46) saturate(1.15);transform:scale(1.16)}
.csdemo .cs-fg{position:absolute;inset:0;background-size:contain;background-position:center;
  background-repeat:no-repeat;will-change:transform}
.csdemo .cs-fg.kb-in{animation:cskbIn 8s ease-out both}
.csdemo .cs-fg.kb-out{animation:cskbOut 8s ease-out both}
.csdemo .cs-fg.pan-l{animation:cspanL 9s ease-in-out both}
.csdemo .cs-fg.pan-r{animation:cspanR 9s ease-in-out both}
.csdemo .cs-fg.still{animation:none}
@keyframes cskbIn{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes cskbOut{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes cspanL{from{transform:scale(1.08) translateX(2%)}to{transform:scale(1.08) translateX(-2%)}}
@keyframes cspanR{from{transform:scale(1.08) translateX(-2%)}to{transform:scale(1.08) translateX(2%)}}

/* live pill top-left */
.csdemo .cs-live{position:absolute;left:4.5%;top:6%;z-index:6;display:flex;align-items:center;gap:7px;
  background:rgba(11,17,22,.55);backdrop-filter:blur(4px);border:1px solid rgba(248,244,236,.25);
  color:#f8f4ec;font-size:clamp(.6rem,1.5cqw,.8rem);font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:999px}
.csdemo .cs-live .dot{width:8px;height:8px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 0 0 rgba(255,90,90,.7);
  animation:cspulse 1.8s ease-out infinite}
@keyframes cspulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,.6)}70%{box-shadow:0 0 0 9px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}

/* transient "new photo from X" toast */
.csdemo .cs-toast{position:absolute;left:50%;top:8%;transform:translateX(-50%) translateY(-14px);z-index:7;
  background:rgba(248,244,236,.96);color:#26333c;font-weight:700;font-size:clamp(.6rem,1.5cqw,.82rem);
  padding:8px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.3,1);pointer-events:none;white-space:nowrap}
.csdemo .cs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.csdemo .cs-toast b{color:#345d7c}

/* caption bar */
.csdemo .cs-cap{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);max-width:78%;z-index:5;
  background:rgba(38,51,60,.72);border:1px solid rgba(216,204,184,.3);border-radius:12px;
  padding:9px 20px;text-align:center;opacity:0;transition:opacity .8s ease}
.csdemo .cs-cap.show{opacity:1}
.csdemo .cs-cap .t{color:#f8f4ec;font-size:clamp(.8rem,2.4cqw,1.5rem);font-weight:600;line-height:1.25}
.csdemo .cs-cap .w{color:#dcc17a;font-size:clamp(.6rem,1.6cqw,1rem);font-weight:700;margin-top:2px}

/* event title bottom-left */
.csdemo .cs-title{position:absolute;left:4.5%;bottom:6%;z-index:5}
.csdemo .cs-title .n{color:#f8f4ec;font-size:clamp(.75rem,2cqw,1.25rem);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.csdemo .cs-title .c{color:#d8ccb8;font-size:clamp(.55rem,1.4cqw,.9rem);text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* QR badge bottom-right */
.csdemo .cs-qr{position:absolute;right:4%;bottom:6%;z-index:6;background:#fff;border-radius:12px;
  padding:clamp(6px,1.3cqw,12px);text-align:center;box-shadow:0 0 0 3px rgba(220,193,122,.45),0 10px 30px rgba(0,0,0,.4);
  animation:csqrpulse 2.8s ease-in-out infinite}
@keyframes csqrpulse{0%,100%{box-shadow:0 0 0 3px rgba(220,193,122,.4),0 8px 22px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 4px rgba(220,193,122,.75),0 10px 30px rgba(0,0,0,.5)}}
.csdemo .cs-qr img{display:block;width:clamp(42px,8cqw,86px);height:clamp(42px,8cqw,86px);border-radius:4px}
.csdemo .cs-qr b{display:block;font-size:clamp(.42rem,1cqw,.62rem);color:#345d7c;font-weight:800;margin-top:3px;letter-spacing:.04em}

/* collage overlay — a grid of shots fills the screen for a few seconds */
.csdemo .cs-collage{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.2cqw;padding:6cqw 4cqw 4cqw;background:radial-gradient(circle at 50% 35%,#1b2831,#05090c);
  opacity:0;transition:opacity 1s ease;pointer-events:none}
.csdemo .cs-collage.show{opacity:1}
.csdemo .cs-collage .cct{position:absolute;top:2.4cqw;left:0;right:0;text-align:center;color:#f8f4ec;
  font-size:clamp(.7rem,2.4cqw,1.4rem);font-weight:800;letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.csdemo .cs-collage i{background-size:cover;background-position:center;border-radius:2cqw;
  box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.5)}
.csdemo{container-type:inline-size}
@media(prefers-reduced-motion:reduce){
  .csdemo .cs-fg{animation:none!important}
  .csdemo .cs-slide{transition:opacity .01s}
}