/* Satyro Music — "Em alta" section on the Feishin home (trending.js). */
.satyro-trend {
    /* Sits inside Feishin's content container, which already has the page's side padding. */
    --st-pad: 0px;
    padding: 24px 0 24px;
    color: #ffffff;
    font-family: 'Figtree', 'Inter', system-ui, sans-serif;
}
.satyro-trend button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}
.satyro-trend button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.st-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.st-head h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.st-tabs {
    display: flex;
    gap: 8px;
}
.st-tabs button {
    padding: 6px 14px;
    border-radius: 999px;
    background: #2a2a2a;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}
.st-tabs button:hover {
    background: #3a3a3a;
}
.st-tabs button[aria-selected='true'] {
    background: #ffffff;
    color: #000000;
}

/* Hero: a field in the cover's own color, the artist photo bleeding in from the right, a big rank numeral
   and a segmented progress bar whose fill is the rotation timer. */
.st-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 16px;
    min-height: clamp(300px, 30vw, 420px);
    display: flex;
    background: #181818;
}
.st-hero-field {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--hero) 55%, #000) 0%, transparent 60%),
        linear-gradient(100deg, var(--hero) 0%, color-mix(in srgb, var(--hero) 60%, #000) 100%);
    transition: background 0.6s ease;
}
.st-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 62%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    animation: st-photo 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes st-photo {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: none; }
}
.st-hero-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: min(58%, 640px);
    padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 48px) 76px;
    animation: st-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes st-in {
    from { opacity: 0.3; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.st-rank {
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 0.8;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    margin-bottom: 14px;
}
.st-hero-title {
    margin: 0 0 8px;
    font-size: clamp(2.25rem, 4.8vw, 4.5rem);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.st-hero-artist {
    margin: 0 0 24px;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
}
.st-owned {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(34, 211, 107, 0.2);
    color: #7dffb2;
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: 2px;
}
.st-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
}
.st-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px 0 18px;
    border-radius: 999px;
    font-weight: 800 !important;
    transition: transform 0.12s ease, background-color 0.15s ease;
}
.st-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.satyro-trend .st-primary {
    background: #22d36b;
    color: #000000;
}
.satyro-trend .st-primary:hover {
    background: #3ae07f;
    transform: scale(1.03);
}
.st-album {
    display: inline-flex;
    text-align: left;
    padding: 0 !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
}
.st-album img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.st-album > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 22ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-album small {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.st-hero-nav {
    position: absolute;
    left: clamp(24px, 3.5vw, 48px);
    right: clamp(24px, 3.5vw, 48px);
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.st-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px);
}
.st-arrow:hover {
    background: rgba(0, 0, 0, 0.65) !important;
}
.st-arrow svg {
    width: 16px;
    height: 16px;
}
.st-segs {
    flex: 1;
    display: flex;
    gap: 6px;
    max-width: 420px;
}
.st-seg {
    flex: 1;
    height: 16px;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.st-seg i {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    transition: height 0.15s ease;
}
.st-seg:hover i {
    height: 5px;
}
.st-seg.is-done i {
    background: rgba(255, 255, 255, 0.75);
}
.st-seg.is-on i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    transform-origin: left;
    animation: st-fill 8s linear forwards;
}
.st-hero.is-paused .st-seg.is-on i::after {
    animation-play-state: paused;
}
@keyframes st-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .st-hero-photo, .st-hero-body { animation: none; }
    .st-seg.is-on i::after { animation: none; transform: none; }
}

@media (max-width: 720px) {
    .st-hero {
        min-height: 440px;
    }
    .st-hero-photo {
        width: 100%;
        height: 62%;
        bottom: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    }
    .st-hero-body {
        max-width: none;
        justify-content: flex-end;
        padding-top: 160px;
    }
    .st-rank {
        font-size: 3.25rem;
    }
    .st-hero-title {
        font-size: 2rem;
        line-height: 1;
    }
}

/* Rows of albums and artists: paged with arrows like Feishin's carousels, no visible scrollbar. */
.st-block {
    margin-top: 40px;
}
.st-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.st-row-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.st-pager {
    display: flex;
    gap: 8px;
}
.st-page {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #242424 !important;
    color: #ffffff;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.st-page:hover:not(:disabled) {
    background: #333333 !important;
}
.st-page:disabled {
    opacity: 0.35;
    cursor: default;
}
.st-page svg {
    width: 16px;
    height: 16px;
}
.st-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(140px, 12.5vw, 190px);
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 0 -10px;
    padding: 0 0 4px;
    scrollbar-width: none;
}
.st-row::-webkit-scrollbar {
    display: none;
}
.st-card {
    position: relative;
    container-type: inline-size;
    scroll-snap-align: start;
}
.st-card-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 10px !important;
    border-radius: 10px;
    text-align: left;
    transition: background-color 0.15s ease;
}
.st-card:hover .st-card-open {
    background: #1f1f1f !important;
}
.st-art {
    position: relative;
    display: block;
    margin-bottom: 6px;
}
.st-art img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: #282828;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.st-card-a .st-art img {
    border-radius: 999px;
}
/* Play sits on the artwork's bottom-right corner (100cqw = card width; art is card minus 2×10px padding). */
.satyro-trend .st-play {
    position: absolute;
    right: 18px;
    top: calc(100cqw - 10px - 52px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #22d36b;
    color: #000000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.st-play svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.st-card:hover .st-play,
.st-card:focus-within .st-play,
.st-card.is-playing .st-play {
    opacity: 1;
    transform: none;
}
.st-card.is-playing .st-play svg {
    display: none;
}
.st-card.is-playing .st-play::before {
    content: '';
    width: 14px;
    height: 14px;
    background:
        linear-gradient(#000, #000) 0 100% / 3px 60% no-repeat,
        linear-gradient(#000, #000) 50% 100% / 3px 100% no-repeat,
        linear-gradient(#000, #000) 100% 100% / 3px 40% no-repeat;
    animation: st-eq 0.9s ease-in-out infinite alternate;
}
@keyframes st-eq {
    to { background-size: 3px 30%, 3px 50%, 3px 100%; }
}
.st-link {
    padding: 0 !important;
    font-weight: 700;
}
.st-link:hover,
.st-album:hover span {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.st-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-sub {
    font-size: 0.85rem;
    color: #a7a7a7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-sub.is-owned {
    color: #7dffb2;
}

@media (max-width: 720px) {
    .st-head h2 {
        font-size: 1.4rem;
    }
}

/* The home's last row sat flush against the player bar: trending.js marks the home content container
   and this adds room after its last row. */
.satyro-home-content {
    padding-bottom: 96px !important;
}
.satyro-home-content::after {
    content: '';
    display: block;
    flex: none;
    height: 96px;
}

/* ---------------------------------------------------------------------------------------------------------
 * Album / artist page (trend-page.js): covers Feishin's content area, Spotify-like header in the item's color.
 * ------------------------------------------------------------------------------------------------------- */
.sp-page {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow-x: hidden;
    overflow-y: auto;
    /* One continuous fade from the item's color into the page, scrolling with the content. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--sp) 85%, #fff 15%) 0, var(--sp) 200px,
        color-mix(in srgb, var(--sp) 35%, #121212) 420px, #121212 640px) local, #121212;
    color: #ffffff;
    font-family: 'Figtree', 'Inter', system-ui, sans-serif;
    animation: sp-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sp-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-page { animation: none; }
}
.sp-page button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}
.sp-page button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.sp-back {
    position: sticky;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 16px 0 -52px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(8px);
}
.sp-back svg {
    width: 18px;
    height: 18px;
}
.sp-inner {
    padding-bottom: 120px;
}
.sp-head {
    display: flex;
    align-items: flex-end;
    gap: clamp(20px, 3vw, 32px);
    padding: 88px clamp(20px, 3vw, 40px) 28px;
}
.sp-cover {
    flex: none;
    width: clamp(160px, 18vw, 232px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.sp-round {
    border-radius: 999px;
}
.sp-head-text {
    flex: 1 1 0;
    min-width: 0;
}
.sp-type {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
}
.sp-feat {
    color: rgba(255, 255, 255, 0.82);
}
.sp-title {
    margin: 0 0 12px;
    font-size: clamp(2.25rem, 6vw, 5.5rem);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
}
.sp-title.sp-len-l {
    font-size: clamp(2rem, 4.4vw, 4rem);
}
.sp-title.sp-len-xl {
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    line-height: 1.02;
}
.sp-meta {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
}
.sp-link {
    padding: 0 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}
.sp-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.sp-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px clamp(20px, 3vw, 40px);
}
.sp-play {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #22d36b !important;
    color: #000000 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease, background-color 0.15s ease;
}
.sp-play:hover {
    transform: scale(1.05);
    background: #3ae07f !important;
}
.sp-play svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
.sp-lib {
    height: 36px;
    padding: 0 18px !important;
    border-radius: 999px;
    border: 1px solid #7c7c7c !important;
    font-weight: 700 !important;
}
.sp-lib:hover {
    border-color: #ffffff !important;
}
.sp-req {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px 0 16px !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    font-weight: 800 !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.sp-req svg {
    width: 18px;
    height: 18px;
}
.sp-req:hover:not(:disabled) {
    border-color: #ffffff !important;
    transform: scale(1.03);
}
.sp-req:disabled {
    cursor: default;
}
.sp-req[data-state='requested'],
.sp-req[data-state='downloading'],
.sp-req[data-state='library'] {
    border-color: transparent !important;
    background: rgba(34, 211, 107, 0.16) !important;
    color: #7dffb2;
}
.sp-req[data-state='unavailable'],
.sp-req[data-state='busy'] {
    opacity: 0.6;
}
.sp-actions {
    flex-wrap: wrap;
}
.sp-note {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 52ch;
    line-height: 1.45;
    font-size: 0.875rem;
    color: #a7a7a7;
}
.sp-h2 {
    margin: 24px clamp(20px, 3vw, 40px) 12px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.sp-list {
    list-style: none;
    margin: 0;
    padding: 0 clamp(12px, 2vw, 32px);
}
.sp-track-btn {
    display: grid;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px 12px !important;
    border-radius: 6px;
    text-align: left;
}
.sp-track-btn:not(.has-thumb) {
    grid-template-columns: 32px minmax(0, 1fr) auto;
}
.sp-track-btn.has-thumb {
    grid-template-columns: 32px 40px minmax(0, 1fr) auto;
}
.sp-track-btn:hover:not(:disabled) {
    background: #2a2a2a !important;
}
.sp-track-btn:disabled {
    cursor: default;
    opacity: 0.55;
}
.sp-num,
.sp-eq {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    font-variant-numeric: tabular-nums;
    color: #a7a7a7;
}
.sp-eq {
    display: none;
    gap: 2px;
    align-items: flex-end;
    height: 14px;
}
.sp-eq i {
    width: 3px;
    background: #22d36b;
    animation: sp-eq 0.8s ease-in-out infinite alternate;
}
.sp-eq i:nth-child(1) { height: 60%; }
.sp-eq i:nth-child(2) { height: 100%; animation-delay: -0.3s; }
.sp-eq i:nth-child(3) { height: 40%; animation-delay: -0.6s; }
@keyframes sp-eq {
    to { transform: scaleY(0.35); transform-origin: bottom; }
}
.sp-track.is-playing .sp-num { visibility: hidden; }
.sp-track.is-playing .sp-eq { display: flex; }
.sp-track.is-playing .sp-t { color: #22d36b; }
.sp-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}
.sp-ttl {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sp-t,
.sp-s {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-t {
    font-weight: 600;
}
.sp-s {
    font-size: 0.875rem;
    color: #a7a7a7;
}
.sp-e {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 3px;
    background: #9a9a9a;
    color: #121212;
    font-size: 0.625rem;
    font-weight: 800;
    text-decoration: none;
    vertical-align: 1px;
}
.sp-dur {
    font-size: 0.875rem;
    color: #a7a7a7;
    font-variant-numeric: tabular-nums;
}
.sp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px;
    padding: 0 clamp(10px, 2vw, 30px);
}
.sp-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px !important;
    border-radius: 10px;
    text-align: left;
}
.sp-card:hover {
    background: #1f1f1f !important;
}
.sp-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sp-card-t {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-card-s {
    font-size: 0.85rem;
    color: #a7a7a7;
}
.sp-foot {
    margin: 20px clamp(20px, 3vw, 40px) 8px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #a7a7a7;
}
.sp-h2 {
    margin-top: 40px !important;
}
.sp-h2-link {
    font-size: inherit !important;
    letter-spacing: inherit;
}
.sp-loading {
    display: flex;
    gap: 8px;
    padding: 160px clamp(20px, 3vw, 40px);
}
.sp-loading span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    animation: sp-dot 0.9s ease-in-out infinite alternate;
}
.sp-loading span:nth-child(2) { animation-delay: 0.15s; }
.sp-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sp-dot {
    to { opacity: 0.2; transform: translateY(-6px); }
}
.sp-error {
    padding: 120px clamp(20px, 3vw, 40px);
    max-width: 52ch;
}
.sp-error .sp-meta {
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .sp-head {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 72px;
    }
    .sp-cover {
        width: 180px;
    }
}