/* ============================================================
   MEDIAPATH — partners / data / research
   Categorized logo wall + research capability cards.
   Token-based: works on the homepage and the partners page.
   Swap the .logo-chip text for <img class="logo-chip__img"> later.
   ============================================================ */

/* ---- tab filter ---- */
.lw-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,4vh,44px) 0 clamp(28px,4vh,40px);}
.lw-tab{font:inherit;font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--ink-mut);
  background:transparent;border:1.4px solid var(--line);border-radius:999px;padding:10px 20px;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease);}
.lw-tab:hover{color:var(--ink);border-color:var(--ink-faint);transform:translateY(-2px);}
.lw-tab.is-on{color:#fff;background:var(--v-500);border-color:transparent;}

/* ---- the wall ---- */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px;}
@media(max-width:560px){.logowall{grid-template-columns:repeat(2,1fr);gap:10px;}}
.logo-chip{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:104px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--void-2,#141416),var(--void-1,#0A0A0A));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--ink-mut);font-size:15px;font-weight:500;letter-spacing:-0.01em;line-height:1.25;
  transition:transform .45s var(--ease),border-color .3s,color .3s,background .3s,box-shadow .45s var(--ease);overflow:hidden;}
/* cursor-tracked spotlight ring, tinted by the chip's category colour */
.logo-chip::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%), var(--cc,#FAA474), transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;}
.logo-chip:hover::before{opacity:.95;}
.logo-chip::after{background:linear-gradient(90deg,var(--cc,#FAA474),transparent 140%) !important;}
.band-paper .logo-chip{background:rgba(10,10,10,.03);}
.logo-chip::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--iri);background-size:200%;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.logo-chip:hover{transform:translateY(-5px) scale(1.015);border-color:transparent;background:#F3F1EA;box-shadow:0 26px 60px -26px rgba(0,0,0,.85), 0 8px 22px -10px var(--cc,rgba(250,164,116,.45));}
.logo-chip:hover::after{transform:scaleX(1);}
.logo-chip__cat{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);transition:color .3s;}
.logo-chip__cat::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--cc,#FAA474);opacity:.8;}
.logo-chip:hover .logo-chip__cat{color:rgba(10,10,10,.55);}
/* Real logos: uniform ghost-white at rest (grayscale+invert needs transparent/SVG art),
   full brand colour revealed on the light hover card so dark marks stay legible too. */
/* Dual-bound contain: square symbols become height-bound (~52px → read large),
   wide wordmarks stay width-bound (120px) — the wall self-balances, no per-logo tagging. */
.logo-chip__img{max-width:120px;max-height:52px;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);opacity:.72;
  transition:filter .4s var(--ease),opacity .4s var(--ease);}
.logo-chip:hover .logo-chip__img{filter:none;opacity:1;}
/* optical tiers (set at runtime from intrinsic aspect): squares carry mass, so they get a
   tighter cap; long wordmarks get more width. Lit pills keep their own padded geometry. */
.logo-chip__img.lg-sq:not(.logo-chip__img--lit){max-height:42px;}
.logo-chip__img.lg-md:not(.logo-chip__img--lit){max-height:48px;max-width:124px;}
.logo-chip__img.lg-wide:not(.logo-chip__img--lit){max-height:30px;max-width:132px;}
/* Iconic / filled-art marks (Target bullseye, Twitch, eyeota, Microsoft…) can't survive a flat
   white knockout — shown full-colour on a soft light pill so they stay legible & on-brand. */
.logo-chip__img--lit{max-width:130px;max-height:54px;filter:none;opacity:1;
  padding:9px 15px;background:#F2F0E9;border-radius:11px;box-shadow:0 3px 16px -7px rgba(0,0,0,.6);}
.logo-chip:hover .logo-chip__img--lit{filter:none;opacity:1;}
.logo-chip.is-hidden{display:none;}
.lw-note{margin-top:clamp(24px,3.5vh,36px);font-size:14px;font-weight:300;color:var(--ink-faint);}


/* ---- homepage teaser (auto-scrolling marquee) ---- */
.pt-marquee{position:relative;overflow:hidden;margin-top:clamp(34px,5vh,56px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.pt-track{display:flex;gap:14px;width:max-content;animation:ptPan 42s linear infinite;}
.pt-marquee:hover .pt-track{animation-play-state:paused;}
@keyframes ptPan{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.pt-track .logo-chip{flex:none;width:clamp(150px,15vw,190px);}
@media(prefers-reduced-motion:reduce){
  .pt-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .pt-track .pt-dup{display:none;}
}

/* ---- research rows (paper ledger) ---- */
.rrows{margin-top:clamp(28px,4vh,44px);}
.rrow{position:relative;display:grid;grid-template-columns:48px minmax(0,.8fr) 1.2fr;gap:clamp(16px,3vw,42px);align-items:center;
  padding:clamp(20px,3vh,30px) 6px;border-top:1px solid rgba(10,10,10,.14);overflow:hidden;}
.rrow:last-child{border-bottom:1px solid rgba(10,10,10,.14);}
.rrow::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rg);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
.rrow:hover::after{transform:scaleX(1);}
.rrow h3{font-size:clamp(19px,1.9vw,26px);font-weight:700;letter-spacing:-0.025em;line-height:1.05;color:#16151A;margin:0;}
.rrow p{font-size:15px;font-weight:300;color:rgba(22,21,26,.64);line-height:1.55;margin:0;}
@media(max-width:760px){
  .rrow{grid-template-columns:clamp(40px,11vw,56px) 1fr;}
  .rrow p{grid-column:2;}
}

/* ---- wall entrance cascade ---- */
@media(prefers-reduced-motion:no-preference){
  .logowall.reveal .logo-chip{opacity:0;}
  .logowall.reveal.in .logo-chip{animation:chipIn .55s var(--ease) both;animation-delay:calc(var(--i,0)*24ms);}
  @keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}
}

/* ---- the stack v2: specimen-ledger grid (partners page only — .lc) ----
   No cards: hairline cells on the void. Hover = the partner's category identity
   (gradient wash + mono tag + colored base sweep). Filters DIM the grid instead
   of collapsing it — the wall holds its shape while the category lights up. */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);}
@media(max-width:560px){.logowall{grid-template-columns:repeat(2,1fr);}}
.lc{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--void,#000);aspect-ratio:2.05/1;overflow:hidden;cursor:default;
  opacity:0;transform:translateY(14px);animation:lcIn .7s var(--ease) forwards;
  animation-delay:calc(var(--i,0)*22ms);
  transition:opacity .45s var(--ease),filter .45s var(--ease);}
@keyframes lcIn{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.lc{animation:none;opacity:1;transform:none;}}
.lc::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,var(--cc,#FAA474),transparent 72%);
  transition:opacity .4s var(--ease);}
.lc:hover::before{opacity:.15;}
.lc::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--cc,#FAA474);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.lc:hover::after{transform:scaleX(1);}
.lc__cat{position:absolute;top:10px;left:13px;font-size:9.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cc,#FAA474);
  opacity:0;transform:translateY(-4px);font-style:normal;
  transition:opacity .35s var(--ease),transform .35s var(--ease);}
.lc:hover .lc__cat{opacity:.95;transform:none;}
/* one standard: every mark white, in an identical optical box (the tvmarq recipe) —
   per-src transform corrections balance ink mass without touching layout */
.lc__img{width:122px;height:40px;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);opacity:.62;
  transition:opacity .35s,transform .45s var(--ease);}
.lc:hover .lc__img{opacity:1;transform:scale(1.06);}
.lc__img[src*="espn"]{transform:scale(.8);}
.lc__img[src*="pandora"]{transform:scale(.85);}
.lc__img[src*="hulu"]{transform:scale(.85);}
.lc__img[src*="roku"]{transform:scale(.85);}
.lc__img[src*="netflix"]{transform:scale(.92);}
.lc__img[src*="samsung"]{transform:scale(1.1);}
.lc__img[src*="siriusxm"]{transform:scale(.9);}
.lc__img[src*="spotify"]{transform:scale(.9);}
.lc__img[src*="meta"]{transform:scale(.9);}
.lc__img[src*="paramount"]{transform:scale(1.06);}
.lc__img[src*="york"]{transform:scale(1.32);}
.lc__img[src*="comscore"]{transform:scale(1.15);}
.lc__img[src*="moat"]{transform:scale(1.18);}
.lc:hover .lc__img[src*="espn"]{transform:scale(.85);}
.lc:hover .lc__img[src*="samsung"]{transform:scale(1.16);}
.lc:hover .lc__img[src*="york"]{transform:scale(1.38);}
.lc:hover .lc__img[src*="comscore"]{transform:scale(1.21);}
.lc:hover .lc__img[src*="moat"]{transform:scale(1.24);}
/* filtering dims, never collapses (!important outranks the lcIn forwards fill) —
   on phones the dim reads as a broken wall of ghosts, so ≤760px collapses instead
   (padWall re-runs on toggle to keep the last row filled) */
.lc.is-hidden{opacity:.06!important;filter:grayscale(1);pointer-events:none;}
@media(max-width:760px){.lc.is-hidden{display:none;}}
/* runtime filler cells complete the final row so the lattice backing never
   shows as a slab — plain void cells, no entrance anim, no hover identity */
.lc.lc--pad{animation:none;opacity:1;transform:none;pointer-events:none;}

/* site-wide logo color policy (2026-06-10): white-mono everywhere, no color reveals */
.pt-track .logo-chip__img--lit{filter:grayscale(1) brightness(0) invert(1)!important;background:none!important;padding:0!important;box-shadow:none!important;}
/* homepage marquee: plain chips, zero hover behavior (user 2026-06-10) —
   pointer-events off kills the lift/card/sweep/spotlight in one move;
   the marquee itself still pauses on container hover */
.pt-track .logo-chip{pointer-events:none;}

/* partner NAME on hover (user 2026-06-11: symbols alone aren't identifiable) —
   bottom-left, paired with the category tag top-left; always faintly on for touch */
.lc__nm{position:absolute;left:13px;bottom:9px;z-index:2;font-family:var(--font-display);font-size:12.5px;font-weight:600;
  letter-spacing:-0.01em;color:#fff;opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;max-width:calc(100% - 26px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc:hover .lc__nm{opacity:.95;transform:none;}
@media(hover:none){.lc__nm{opacity:.7;transform:none;}}