/* Talent Star Mark — category navigation and original micro-mascots. */
.category-explorer {
  position: relative;
  z-index: 2;
  padding: 22px 22px 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(4,7,17,.82), rgba(1,3,10,.52));
}
.category-explorer__inner {
  width: min(var(--page-width), 100%);
  margin: 0 auto;
}
.category-explorer__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.category-explorer__head p:last-child {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  text-align: right;
}
.category-navigation {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.category-link {
  --mascot-accent: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: .72rem 3.05rem .72rem .8rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 15px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(255,255,255,.043), rgba(255,255,255,.018));
  isolation: isolate;
  transition: border-color .24s ease, color .24s ease, background .24s ease, transform .24s var(--ease-out);
}
.category-link::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 42%);
  opacity: 0;
  transition: opacity .24s ease;
}
.category-link:hover,
.category-link:focus-visible,
.category-link[aria-current="page"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--gold) 46%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 8%, rgba(255,255,255,.04)), rgba(255,255,255,.022));
}
.category-link:hover::before,
.category-link:focus-visible::before,
.category-link[aria-current="page"]::before { opacity: 1; }
.category-link[aria-current="page"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent); }
.category-link[aria-current="page"] .category-link__label::after {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: .45rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  vertical-align: middle;
  content: "";
}
.category-link__label {
  position: relative;
  z-index: 2;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 740;
  line-height: 1.18;
  text-overflow: ellipsis;
}
.category-link__constellation {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 14px 8px 0 -1px color-mix(in srgb, var(--accent) 75%, white), 24px -2px 0 -1px color-mix(in srgb, var(--violet) 70%, white);
  opacity: .38;
}
.category-link__mascot {
  position: absolute;
  right: 3px;
  bottom: -5px;
  width: 54px;
  height: 54px;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(.72);
  transform-origin: 50% 100%;
  transition: opacity .22s ease, transform .32s var(--ease-out);
}
.category-link__mascot svg { width: 100%; height: 100%; overflow: visible; }
.category-mascot .mascot__halo { fill: color-mix(in srgb, var(--accent-soft) 24%, rgba(2,4,12,.82)); stroke: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.12)); stroke-width: 1; }
.category-mascot .mascot__body,
.category-mascot .mascot__action,
.category-mascot .mascot__frame { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.category-mascot .mascot__accent { fill: var(--mascot-accent); stroke: var(--gold-bright); stroke-width: .8; }
.category-mascot .mascot__spotlight { fill: color-mix(in srgb, var(--violet) 16%, transparent); stroke: color-mix(in srgb, var(--violet) 75%, var(--gold)); stroke-width: 1; }
.category-link.is-mascot-active .category-link__mascot,
.category-link[aria-current="page"] .category-link__mascot { opacity: .94; transform: translate3d(0, 0, 0) scale(1); }
.category-link.is-mascot-active { transform: translateY(-2px); }

body[data-motion="on"] .category-link.is-mascot-active .category-mascot--models .mascot__action { animation: mascot-wave .44s var(--ease-out) both; transform-origin: 45px 46px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--singers .mascot__action { animation: mascot-mic .42s var(--ease-out) both; transform-origin: 45px 36px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--djs .mascot__action { animation: mascot-console .44s var(--ease-out) both; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--tributes .mascot__spotlight { animation: mascot-spotlight .44s ease both; transform-origin: 32px 10px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--dancers .mascot__body--left { animation: mascot-dance-left .44s var(--ease-out) both; transform-origin: 22px 40px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--dancers .mascot__body--right { animation: mascot-dance-right .44s var(--ease-out) both; transform-origin: 42px 40px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--actors .mascot__action { animation: mascot-clap .38s ease both; transform-origin: 31px 29px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--influencers .mascot__action { animation: mascot-phone .44s var(--ease-out) both; transform-origin: 14px 28px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--extras .mascot__body { animation: mascot-group .44s var(--ease-out) both; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--figurants .mascot__frame { animation: mascot-frame .44s var(--ease-out) both; transform-origin: 32px 32px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--logistics .mascot__action { animation: mascot-radio .44s ease both; transform-origin: 45px 31px; }
body[data-motion="on"] .category-link.is-mascot-active .category-mascot--entertainers .mascot__action { animation: mascot-confetti .44s var(--ease-out) both; transform-origin: 32px 32px; }
body[data-motion="on"] .category-link.is-mascot-reacting .category-link__mascot { animation: mascot-touch .42s var(--ease-out) both; }

@keyframes mascot-wave { 0%{transform:rotate(0)}45%{transform:rotate(-18deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0)} }
@keyframes mascot-mic { 0%{transform:translateY(5px)}55%{transform:translateY(-2px) rotate(-4deg)}100%{transform:none} }
@keyframes mascot-console { 0%{transform:translateX(-2px)}45%{transform:translateX(2px)}100%{transform:none} }
@keyframes mascot-spotlight { 0%{opacity:.15;transform:scaleX(.72)}55%{opacity:1;transform:scaleX(1.08)}100%{opacity:.68;transform:none} }
@keyframes mascot-dance-left { 0%{transform:rotate(0)}55%{transform:rotate(-9deg) translateY(-2px)}100%{transform:none} }
@keyframes mascot-dance-right { 0%{transform:rotate(0)}55%{transform:rotate(9deg) translateY(-3px)}100%{transform:none} }
@keyframes mascot-clap { 0%{transform:rotate(0)}45%{transform:rotate(-12deg)}75%{transform:rotate(3deg)}100%{transform:none} }
@keyframes mascot-phone { 0%{transform:rotate(0)}55%{transform:rotate(-8deg) translateY(-2px)}100%{transform:none} }
@keyframes mascot-group { 0%,100%{transform:none}45%{transform:translateY(-3px)}70%{transform:translateY(1px)} }
@keyframes mascot-frame { 0%{transform:scale(.86);opacity:.45}65%{transform:scale(1.04);opacity:1}100%{transform:none} }
@keyframes mascot-radio { 0%{transform:translateX(-2px)}45%{transform:translateX(1px) rotate(-3deg)}100%{transform:none} }
@keyframes mascot-confetti { 0%{opacity:.25;transform:scale(.75)}60%{opacity:1;transform:scale(1.12)}100%{opacity:.9;transform:none} }
@keyframes mascot-touch { 0%{transform:scale(.9)}45%{transform:scale(1.08)}100%{transform:scale(1)} }

@media (max-width: 1180px) { .category-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .category-explorer { padding: 18px 14px 22px; }
  .category-explorer__head { align-items: start; margin-bottom: 12px; }
  .category-explorer__head p:last-child { display: none; }
  .category-navigation {
    display: flex;
    gap: 8px;
    margin-inline: -14px;
    padding: 2px 14px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }
  .category-link {
    flex: 0 0 auto;
    width: min(45vw, 166px);
    min-height: 58px;
    padding: .65rem 2.7rem .65rem .72rem;
    scroll-snap-align: start;
  }
  .category-link__mascot {
    right: 2px;
    bottom: 0;
    width: 42px;
    height: 42px;
    opacity: .72;
    transform: none;
  }
  .category-link.is-mascot-active { transform: none; }
  .category-link__label { font-size: .75rem; }
}

body[data-motion="off"] .category-link,
body[data-motion="off"] .category-link__mascot,
body[data-motion="off"] .category-mascot * { animation: none!important; transition-duration: .001ms!important; transform: none!important; }
@media (prefers-reduced-motion: reduce) {
  .category-link,
  .category-link__mascot,
  .category-mascot * { animation: none!important; transition-duration: .001ms!important; transform: none!important; }
}
