/* Love Kelham extras: venue spotlight video, homepage logo reel, partners banner, trusted traders.
   Loaded after the main stylesheets. */

/* ---------- Venue pages: deals sit first in the feed ---------- */
.venue-feed > #venue-deals{margin-top:0}
.venue-feed > #venue-deals[hidden] + .spotlight{margin-top:0}
.venue-feed > #venue-deals:not([hidden]) + .venue-events,.venue-feed > .spotlight + .venue-events{margin-top:var(--space-6)}

/* ---------- Venue Spotlight (Instagram reel, loads on tap) ---------- */
.spotlight{margin-top:var(--space-6)}
.spotlight h2{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.spotlight__frame{position:relative;max-width:360px;border:2.5px solid var(--ink);border-radius:var(--radius-md);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-stamp)}
.spotlight__poster{display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:var(--ink) center/cover no-repeat;cursor:pointer;position:relative;color:var(--paper);font:inherit}
.spotlight__poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65))}
.spotlight__play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast)}
.spotlight__play svg{width:30px;height:30px;margin-left:5px}
.spotlight__poster:hover .spotlight__play{transform:translate(-50%,-50%) scale(1.08)}
.spotlight__label{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:var(--space-3);text-align:left;font-family:var(--font-display);font-weight:800;font-size:var(--step-1);line-height:1.1}
.spotlight__label small{display:block;font-family:var(--font-mono);font-weight:700;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin-bottom:.3em}
.spotlight__frame iframe{display:block;width:100%;height:640px;border:0;background:#fff}
.spotlight__note{margin-top:var(--space-2);font-size:var(--step--1);opacity:.75}

/* ---------- Homepage: logo reel ---------- */
@media(min-width:881px){.hero__inner{align-items:start;grid-template-columns:1.12fr .88fr;gap:var(--space-4)}}
.hero__art{align-self:start;margin-top:calc(var(--space-2) * -1)}
.lk-reel{position:relative;width:min(100%,600px);margin-left:auto;aspect-ratio:1/1;border-radius:var(--radius-lg);isolation:isolate;--x:50%;--y:50%}
.lk-reel__slide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.lk-reel__slide.is-on{opacity:1;z-index:1;pointer-events:auto}
.lk-reel__slide.is-in{opacity:1;z-index:2}
.lk-reel__logo{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:var(--radius-lg)}
.lk-reel__logo img{width:104%;max-width:none;height:auto;animation:lk-float 7s ease-in-out infinite,lk-flicker 6.5s linear infinite;transform-origin:50% 55%}
.lk-reel__photo{border:2.5px solid var(--ink);border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.lk-reel__photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05)}
.lk-reel__photo.is-on img,.lk-reel__photo.is-in img{animation:lk-pan 6s ease-out forwards}
.lk-reel__photo figcaption{position:absolute;left:var(--space-2);bottom:var(--space-2);z-index:2;font-family:var(--font-mono);font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.3em .85em}
.lk-reel__slide.is-in figcaption{animation:lk-tag .6s .55s cubic-bezier(.2,1.4,.4,1) both}
/* --- transitions (picked in turn by js/hero-reel.js) --- */
/* 1. iris: the next slide bursts out of a circle with a coral shockwave ring */
.lk-reel[data-fx="iris"] .is-in{animation:lk-iris .95s cubic-bezier(.75,0,.2,1) both}
.lk-fx-ring{position:absolute;z-index:3;left:var(--x);top:var(--y);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:10px solid var(--coral);pointer-events:none;animation:lk-ring .95s cubic-bezier(.75,0,.2,1) both}
/* 2. slices: the next slide arrives in staggered strips from alternate sides */
.lk-fx-strip{position:absolute;inset:0;z-index:3;pointer-events:none}
.lk-fx-strip > .lk-reel__slide{opacity:1;animation:lk-slice .75s cubic-bezier(.8,0,.15,1) both;animation-delay:calc(var(--i) * 55ms)}
.lk-fx-strip:nth-child(even) > .lk-reel__slide{--from:105%}
/* 3. sweep: a coral blade cuts across and drags the next slide in behind it */
.lk-reel[data-fx="sweep"] .is-in{animation:lk-sweep .9s cubic-bezier(.75,0,.2,1) both}
.lk-fx-blade{position:absolute;z-index:3;top:-20%;bottom:-20%;left:0;width:22%;background:var(--coral);border-left:3px solid var(--ink);border-right:3px solid var(--ink);transform:skewX(-14deg) translateX(-160%);pointer-events:none;animation:lk-blade .9s cubic-bezier(.75,0,.2,1) both}
/* 4. dots: the next slide appears through a halftone of growing coral dots */
.lk-reel[data-fx="dots"] .is-in{-webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + 1px)) 0 0/34px 34px;mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + 1px)) 0 0/34px 34px;animation:lk-dots 1s cubic-bezier(.6,0,.3,1) both}
/* RGB split on every arrival, for a bit of grit */
.lk-reel__photo.is-in img{filter:drop-shadow(5px 0 0 rgba(255,143,144,.9)) drop-shadow(-5px 0 0 rgba(60,220,230,.7))}
.lk-reel__photo.is-on img{transition:filter .35s}
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes lk-dots{from{--r:0px}to{--r:26px}}
@keyframes lk-iris{from{clip-path:circle(0% at var(--x) var(--y))}to{clip-path:circle(150% at var(--x) var(--y))}}
@keyframes lk-ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(26);opacity:0;border-width:2px}}
@keyframes lk-slice{from{transform:translateX(var(--from,-105%))}to{transform:translateX(0)}}
@keyframes lk-sweep{from{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}to{clip-path:polygon(0 0,140% 0,110% 100%,-30% 100%)}}
@keyframes lk-blade{from{transform:skewX(-14deg) translateX(-160%)}to{transform:skewX(-14deg) translateX(560%)}}
@keyframes lk-tag{from{transform:translateY(16px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes lk-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-10px) rotate(1.2deg)}}
@keyframes lk-flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1;filter:drop-shadow(0 0 18px rgba(255,143,144,.55))}
  20%,24%{opacity:.35;filter:none}55%{opacity:.6;filter:drop-shadow(0 0 30px rgba(255,143,144,.9))}}
@keyframes lk-pan{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.lk-reel__ctrl{position:absolute;right:var(--space-2);top:var(--space-2);z-index:4;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity var(--t-fast)}
.lk-reel:hover .lk-reel__ctrl,.lk-reel__ctrl:focus-visible{opacity:1}
@media(hover:none){.lk-reel__ctrl{opacity:.85}}
@media(prefers-reduced-motion:reduce){.lk-reel__logo img,.lk-reel__photo.is-on img{animation:none!important}}

/* ---------- Homepage: partners banner ---------- */
.partners{padding-block:var(--space-6);border-top:2.5px solid var(--ink);background:var(--paper);overflow:hidden}
.partners__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.partners__head h2{font-size:var(--step-3);margin-top:.3em}
.partners__track{display:flex;gap:var(--space-3);width:max-content;animation:lk-marquee 60s linear infinite}
.partners__viewport{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partners__viewport:hover .partners__track,.partners__viewport:focus-within .partners__track{animation-play-state:paused}
.partner{flex:0 0 auto;width:190px;height:110px;display:flex;align-items:center;justify-content:center;padding:var(--space-2);border:2.5px solid var(--ink);border-radius:var(--radius-md);background:#fff;text-decoration:none;color:var(--ink);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.partner:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-stamp)}
.partner img{max-width:100%;max-height:76px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.partner.is-white img{filter:brightness(0)}
.partner.is-white:hover img{filter:brightness(0)}
.partner__name{font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1.05;text-align:center}
.partner__name small{display:block;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-top:.35em}
@keyframes lk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.partners__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.partners__viewport{-webkit-mask-image:none;mask-image:none}.partners__track [aria-hidden="true"]{display:none}}
@media(max-width:640px){.partner{width:150px;height:92px}.partner img{max-height:54px}}

/* ---------- Report page: women & girls' safety ---------- */
.rp-card.rp-card--safety{background:var(--coral-tint)}
.rp-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-4)}
@media(max-width:640px){.rp-cols{grid-template-columns:1fr}}

/* ---------- Trusted traders ---------- */
.tt-wrap{max-width:var(--container);margin:0 auto}
.tt-gate{max-width:520px;margin:0 auto;border:2.5px solid var(--ink);border-radius:var(--radius-md);background:var(--paper);padding:var(--space-4);box-shadow:var(--shadow-stamp)}
.tt-err{display:none;margin-bottom:var(--space-3);padding:.7em 1em;border:2px solid #b00020;border-radius:var(--radius-sm);background:#fdecef;color:#7a0016;font-weight:600}
.tt-bar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.tt-filters{display:flex;gap:var(--space-2);flex-wrap:wrap;flex:1 1 420px}
.tt-filters input,.tt-filters select{padding:.75em 1em;border:2.5px solid var(--ink);border-radius:var(--radius-sm);background:var(--paper);font:inherit;min-width:0}
.tt-filters input{flex:2 1 220px}.tt-filters select{flex:1 1 160px}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--space-3)}
.tt-card{position:relative;display:flex;flex-direction:column;gap:.6em;padding:var(--space-3);border:2.5px solid var(--ink);border-radius:var(--radius-md);background:var(--paper)}
.tt-card.is-featured{background:var(--coral-tint);box-shadow:var(--shadow-stamp)}
.tt-card h3{font-size:var(--step-1);line-height:1.15}
.tt-card__top{display:flex;gap:.4em;flex-wrap:wrap}
.tt-card p{font-size:var(--step--1);opacity:.9}
.tt-card__contact{margin-top:auto;display:flex;flex-direction:column;gap:.25em;font-size:var(--step--1);padding-top:.6em;border-top:1px solid var(--line)}
.tt-card__contact a{font-weight:700;word-break:break-word}
.tt-card__rec{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.tt-empty{padding:var(--space-4);border:2.5px dashed var(--ink);border-radius:var(--radius-md);text-align:center}
.tt-cta{margin-top:var(--space-6);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-4);align-items:center;padding:var(--space-4);border:2.5px solid var(--ink);border-radius:var(--radius-lg);background:var(--ink);color:var(--paper)}
.tt-cta h2{color:var(--paper);font-size:var(--step-2);margin-bottom:.4em}
.tt-cta ul{display:grid;gap:.5em}
.tt-cta li::before{content:'✓ ';color:var(--coral);font-weight:700}
@media(max-width:760px){.tt-cta{grid-template-columns:1fr}}
.tt-who{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--step--1)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the reel has no built-in size, so give the hero art column a width on phones */
@media(max-width:880px){.hero__art{width:100%;max-width:380px;margin:0 auto}.lk-reel{width:100%;margin:0}}
@media(min-width:881px){.lk-reel{width:calc(100% + 48px);max-width:none;margin-right:-48px}}