/* Creator page styling: the effect of a creator's choices (partials/themes.php sets the body classes and --t-* variables).
   Loaded on a creator's pages only when they have changed something. Fonts come in through --font-display / --font. */

/* ---------------------------------------------------------------- shape: sharp / round corners */
body[class*="t-r-"] :is(.ap-latest-card, .coll-card, .ap-details div, .announce, .spotlight, .update, .person, .credit, .ap-block, .cp-card, .release-info .btn-group, .dest-list, .rel-media, .rel .art, .rel-art, .release-cover, .release-cover .art, .photo, .ap-about-art, .ap-about-art img, .coll-stack > *, .badge) { border-radius: var(--t-card); }
body[class*="t-r-"] :is(.ap-pill, .ap-play, .btn, .chip, .like-btn, .ap-tabs a) { border-radius: var(--t-btn); }
body.t-r-sharp :is(.badge, .chip) { border-radius: 4px; }
body.t-r-round :is(.ap-latest-card, .coll-card, .spotlight, .announce) { border-radius: var(--t-card-lg); }

/* ---------------------------------------------------------------- the name */
body .ap-name { font-size: calc(clamp(52px, 15vw, 112px) * var(--t-name, 1) * var(--t-fs, 1) * var(--t-fit, 1)); line-height: var(--t-lh, .9); letter-spacing: var(--t-ls, -.06em); }
body .ap-name--long { font-size: calc(clamp(40px, 11vw, 84px) * var(--t-name, 1) * var(--t-fs, 1) * var(--t-fit, 1)); }
body .release-title, body .release-top h1 { font-size: calc(clamp(34px, 7vw, 56px) * var(--t-fs, 1)); line-height: var(--t-lh, 1.05); letter-spacing: var(--t-ls, -.04em); overflow-wrap: anywhere; }
body .ap-name, body .release-title { word-break: normal; overflow-wrap: anywhere; hyphens: auto; }
body.t-case-upper .ap-name, body.t-case-upper .release-title, body.t-case-upper .ap-latest h3 { text-transform: uppercase; }
body.t-case-lower .ap-name, body.t-case-lower .release-title { text-transform: lowercase; }
@media (max-width: 819px) { body .ap-name { font-size: calc(clamp(40px, 15vw, 88px) * var(--t-name, 1) * var(--t-fs, 1) * var(--t-fit, 1)); } }
@media (min-width: 820px) {
  body.t-align-center .ap-body { justify-items: center; text-align: center; }
  body.t-align-center .ap-name, body.t-align-center .ap-actions, body.t-align-center .ap-sub { justify-content: center; }
  body.t-align-center .ap-tagline { margin-inline: auto; }
}

/* ---------------------------------------------------------------- buttons */
body.t-b-outline :is(.ap-play, .ap-pill, .release-info .btn--light) { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.t-b-outline :is(.ap-play, .ap-pill):hover { background: rgb(255 255 255 / .12); }
body.t-b-outline :is(.ap-play--follow, .ap-pill)[aria-pressed="true"] { background: var(--artwork-accent, #fff); color: #0d0d10; box-shadow: none; }
body.t-b-glass :is(.ap-play, .release-info .btn--light) { background: rgb(255 255 255 / .2); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
body.t-b-glass .ap-play:hover { background: rgb(255 255 255 / .3); }
body.t-b-glass .ap-play--follow[aria-pressed="true"] { background: var(--artwork-accent, #fff); color: #0d0d10; }

/* ---------------------------------------------------------------- texture over the whole page */
body.t-tex::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; }
body.t-tex-grain::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: calc(var(--t-tex, .4) * .22); mix-blend-mode: overlay; }
body.t-tex-dots::after { background-image: radial-gradient(rgb(255 255 255 / .9) 1.2px, transparent 1.6px); background-size: 22px 22px; opacity: calc(var(--t-tex, .4) * .22); }
body.t-tex-grid::after { background-image: linear-gradient(rgb(255 255 255 / .9) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .9) 1px, transparent 1px); background-size: 44px 44px; opacity: calc(var(--t-tex, .4) * .14); }
body.t-tex-lines::after { background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / .9) 0 1px, transparent 1px 7px); opacity: calc(var(--t-tex, .4) * .12); }
body.t-tex-glow::after { background: radial-gradient(60% 45% at 18% 12%, var(--artwork-glow, #8c7bff), transparent 70%), radial-gradient(55% 45% at 85% 85%, var(--artwork-accent, #8c7bff), transparent 70%); opacity: calc(var(--t-tex, .4) * .42); mix-blend-mode: screen; animation: t-glow 18s ease-in-out infinite alternate; }
@keyframes t-glow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body.t-tex-glow::after { animation: none; } }

/* ---------------------------------------------------------------- motion off */
body.t-nomotion *, body.t-nomotion *::before, body.t-nomotion *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
body.t-nomotion .ap-anim .ap-content > *, body.t-nomotion .ap-anim .ap-content .catalog > * { opacity: 1 !important; transform: none !important; }