/* ============================================================
   PAGE: Comika Management — talent roster / agency
   Art direction: editorial roster w/ name-marquee motif + filters.
   DNA (tokens, footer, topbar) shared; layout unique.
============================================================ */

/* ---- hero ---- */
.mgmt-hero{position:relative;overflow:hidden}
.mgmt-hero .container{position:relative;z-index:2}
/* faint giant scrolling names behind the title = signature motif */
.name-river{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:.1em;
  pointer-events:none;overflow:hidden;opacity:.05;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.name-river .row{display:flex;gap:.5em;width:max-content;font-family:var(--f-h);font-size:clamp(3rem,9vw,7rem);
  line-height:1;color:var(--ink2);white-space:nowrap;text-transform:uppercase}
.name-river .row.a{animation:river 38s linear infinite}
.name-river .row.b{animation:river 50s linear infinite reverse}
@keyframes river{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.name-river .row{animation:none}}

.mgmt-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,3.5rem);margin-top:2.4rem}
.mgmt-stats .st b{font-family:var(--f-h);font-size:clamp(1.8rem,4vw,2.8rem);color:var(--ink2);display:block;line-height:1}
.mgmt-stats .st span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- talent grid (centered; incomplete last row stays centered) ---- */
.talent-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-bottom:2rem}
.talent-grid .tcard{flex:0 0 clamp(200px,22vw,242px)}
@media(max-width:520px){.talent-grid{gap:.8rem}.talent-grid .tcard{flex-basis:calc(50% - .4rem)}}
.tcard{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--bg3);
  border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .3s,opacity .4s,filter .4s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(31,140,206,.4)}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tcard:hover img{transform:scale(1.07)}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,28,.92) 0%,rgba(4,10,28,.15) 48%,transparent 75%)}
.tcard .idx{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--f-h);font-size:.8rem;color:rgba(255,255,255,.7)}
.tcard .cat{position:absolute;top:12px;right:12px;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#04122a;background:var(--cy);padding:.25rem .5rem;border-radius:5px;opacity:0;transform:translateY(-6px);transition:.35s var(--ease)}
.tcard:hover .cat{opacity:1;transform:none}
.tcard .info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1rem;text-align:center}
.tcard .info h3{font-family:var(--f-h);font-size:1.05rem;color:#fff;line-height:1.1}
.tcard .info .ig{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.74rem;line-height:1.3;color:rgba(255,255,255,.78);margin-top:.3rem}
/* filtered-out state */
.tcard.hide{display:none}

/* ---- activity photo marquee (2 rows, opposite directions) ---- */
.acts{margin-top:clamp(3.5rem,8vw,6rem);overflow:hidden}
.acts-head{margin-bottom:1.6rem}
.acts-head h2{font-family:var(--f-h);font-size:clamp(1.5rem,3.5vw,2.4rem);color:var(--ink2);margin-top:.4rem}
.act-row{display:flex;gap:14px;width:max-content;padding-bottom:14px}
.act-row.a{animation:actL 48s linear infinite}
.act-row.b{animation:actR 60s linear infinite}
.act-row:hover{animation-play-state:paused}
@keyframes actL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes actR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.act-row{animation:none}}
.act-item{flex:0 0 auto;width:clamp(230px,26vw,360px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg3);margin:0}
.act-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.act-item:hover img{transform:scale(1.05)}
@media(max-width:560px){
  .act-item{width:clamp(168px,60vw,230px)}
  .act-row{gap:10px}
}

/* CTA → komponen .cta-band di shared.css */