/* ------------------------------------------------------------------
   The lightbox, shared by every grid of small pictures on the site:
   the WowRate socials, the TOKEN poster directions, the FreeState
   feed. A thumbnail is a button, and the cursor carries the invitation
   so the grid itself stays clean.
   ------------------------------------------------------------------ */

/* the grid: anything carrying data-lb becomes clickable */
[data-lb] { cursor: none; }
@media (hover: none) { [data-lb] { cursor: zoom-in; } }

/* the hint that rides the cursor */
#lbhint {
  position: fixed; left: 0; top: 0; z-index: 420; pointer-events: none;
  background: var(--wine, #2D120D); color: var(--chiptx, #CDE3E8);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; line-height: 14px;
  text-transform: uppercase; padding: 5px 10px 4px; white-space: nowrap;
  opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.92);
  transition: opacity .18s var(--e, ease), scale .18s var(--e, ease);
}
#lbhint.on { opacity: 1; }
@media (hover: none) { #lbhint { display: none; } }

/* the stage */
#lbx {
  position: fixed; inset: 0; z-index: 430; display: none;
  background: rgba(16, 14, 11, .93);
  align-items: center; justify-content: center;
}
#lbx.on { display: flex; }
#lbx .sheet {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
#lbx img {
  display: block; max-width: none; max-height: none; width: auto; height: auto;
  object-fit: contain; opacity: 0; transform: scale(.985);
  transition: opacity .22s var(--e, ease), transform .22s var(--e, ease);
}
#lbx img.in { opacity: 1; transform: none; }

/* the furniture */
#lbx .bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px); pointer-events: none;
}
#lbx .cap, #lbx .count {
  color: var(--chiptx, #CDE3E8); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; line-height: 14px; text-transform: uppercase;
}
#lbx .cap { opacity: .74; max-width: 60vw; }
#lbx .count { opacity: .5; font-variant-numeric: tabular-nums; }

#lbx .lbn {
  position: fixed; top: 50%; width: 46px; height: 46px; margin-top: -23px;
  background: none; border: 1px solid rgba(255,250,216, .26); padding: 0;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .18s var(--e, ease), background .18s var(--e, ease);
}
#lbx .lbn:hover { border-color: rgba(255,250,216, .7); background: rgba(255,250,216, .08); }
#lbx .lbn svg { display: block; }
#lbx .prev { left: 60px; }
#lbx .next { right: 60px; }
#lbx .shut {
  position: fixed; top: clamp(14px, 2.4vw, 28px); right: clamp(14px, 2.4vw, 28px);
  width: 46px; height: 46px; background: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,250,216, .26); display: grid; place-items: center;
  transition: border-color .18s var(--e, ease), background .18s var(--e, ease);
}
#lbx .shut:hover { border-color: rgba(255,250,216, .7); background: rgba(255,250,216, .08); }
#lbx .one .lbn { display: none; }

@media (max-width: 760px) {
  #lbx .lbn { width: 38px; height: 38px; margin-top: -19px; }
  #lbx .bar { height: 62px; }
  #lbx .cap { max-width: 52vw; }
}

/* on a phone: no arrows, the thumb walks the set; dots under the picture */
#lbx .dots { display: none; }
#lbx .tip { display: none; }
#lbx.touch .lbn { display: none; }
#lbx.touch .bar { flex-direction: column; justify-content: center; gap: 12px; height: auto;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
#lbx.touch .cap { max-width: 86vw; text-align: center; }
#lbx.touch .count { display: none; }
#lbx.touch .dots { display: flex; gap: 7px; order: -1; }
#lbx.touch .dots i { width: 6px; height: 6px; border-radius: 50%; background: #FFFAD8; opacity: .3;
  transition: opacity .25s var(--e, ease), transform .25s var(--e, ease); }
#lbx.touch .dots i.on { opacity: 1; transform: scale(1.15); }
#lbx.touch .tip { position: fixed; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 18px 22px 14px; background: rgba(16, 14, 11, .72);
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .3s var(--e, ease); }
#lbx.touch .tip.on { opacity: 1; }
#lbx.touch .tip svg { animation: lbtip 1.6s var(--e, ease) infinite; }
#lbx.touch .tip span { color: #FFFAD8; font-size: 11px; font-weight: 500; letter-spacing: .18em;
  line-height: 14px; text-transform: uppercase; }
@keyframes lbtip { 0%, 100% { transform: translateX(-8px) } 50% { transform: translateX(8px) } }
#lbx.touch img { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  #lbx img, #lbhint { transition: none; }
}

/* ------------------------------------------------------------------
   The badge that sits on a case hero and goes to the live site.
   ------------------------------------------------------------------ */
.livecta {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px;
  background: var(--wine, #2D120D); color: var(--eyetx, #CDE3E8);
  font-size: 14px; font-weight: 400; letter-spacing: -.01em; line-height: 17px;
  text-transform: uppercase; padding: 2px 8px; text-decoration: none;
  transition: background .2s var(--e, ease);
  will-change: transform;
  animation: lcbob 3.2s ease-in-out infinite;
}
/* at rest it floats a little; under the cursor it follows the cursor */
@keyframes lcbob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -5px } }
.livecta.follow { animation: none; }
.lchost { cursor: pointer; }
.livecta:hover, .livecta.follow { background: var(--ink, #2D120D); }
.livecta i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  flex: none; animation: lbpulse 2.4s var(--e, ease) infinite;
}
@keyframes lbpulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .livecta i, .livecta { animation: none } }

/* ------------------------------------------------------------------
   The film player, the same furniture as the pictures.
   ------------------------------------------------------------------ */
#vpx{position:fixed;inset:0;z-index:440;display:none;background:rgba(16,14,11,.94);align-items:center;justify-content:center}
#vpx.on{display:flex}
#vpx .vpsheet{position:relative;background:#000}
#vpx video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
#vpx .vpn,#vpx .vpshut{position:fixed;width:46px;height:46px;background:none;padding:0;cursor:pointer;
  border:1px solid rgba(255,250,216,.26);display:grid;place-items:center;
  transition:border-color .18s var(--e,ease),background .18s var(--e,ease)}
#vpx .vpn{top:50%;margin-top:-23px}
#vpx .vpn:hover,#vpx .vpshut:hover{border-color:rgba(255,250,216,.7);background:rgba(255,250,216,.08)}
#vpx .prev{left:60px}
#vpx .next{right:60px}
#vpx .vpshut{top:28px;right:28px}
#vpx.one .vpn{display:none}
#vpx .vpbar{position:fixed;left:0;right:0;bottom:0;height:78px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);pointer-events:none}
#vpx .cap,#vpx .count{color:var(--chiptx,#CDE3E8);font-size:11px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase}
#vpx .cap{opacity:.74}
#vpx .dots{display:none}
#vpx.touch .vpn{display:none}
#vpx.touch .vpbar{flex-direction:column;justify-content:center;gap:12px;height:auto;padding:0 16px calc(22px + env(safe-area-inset-bottom,0px))}
#vpx.touch .count{display:none}
#vpx.touch .dots{display:flex;gap:7px;order:-1}
#vpx.touch .dots i{width:6px;height:6px;border-radius:50%;background:#FFFAD8;opacity:.3}
#vpx.touch .dots i.on{opacity:1}
#vpx .count{opacity:.5}
@media (max-width:760px){
  #vpx .vpn{width:38px;height:38px;margin-top:-19px}
  #vpx .prev{left:12px} #vpx .next{right:12px}
  #vpx .vpshut{top:14px;right:14px}
}

/* a film on a phone: the poster, tap to play large */
.mfilm2{position:relative;display:block;aspect-ratio:4/5;background:#3A1A14;overflow:hidden;cursor:pointer}
.mfilm2 img{width:100%;height:100%;object-fit:cover}
.mfilm2 .pl{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid #CDE3E8;background:rgba(45,18,13,.25)}
.mfilm2 .pl::after{content:"";position:absolute;left:17px;top:14px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #CDE3E8}
.mfilm2 .mft{position:absolute;left:10px;bottom:9px;right:10px;font-size:11px;font-weight:500;letter-spacing:.06em;line-height:14px;text-transform:uppercase;color:#CDE3E8;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* the caption and the count are laid out by the bar, never by a page's
   own .cap or .count rules */
#lbx .bar > .cap,#lbx .bar > .count,#vpx .vpbar > .cap,#vpx .vpbar > .count,#cfx .cfbar > .cap,#cfx .cfbar > .count{
  position:static !important;left:auto;top:auto;width:auto;margin:0}