/* =====================================================================
 * Discover / Explore — hero collections + beat shelves.
 *
 * Wears the same macOS "Finder" app shell as /beats/ (toolbar/sidebar/
 * player bar), so this file is loaded AFTER beat-page.css and only adds the
 * Discover-specific body: the scrolling main pane, the hero carousel, the
 * horizontal shelves and the beat cards. All design tokens (--ac, --ink,
 * --ink2, --ink3, --line, --panel, --mono) come from body.beats-archive.
 * ===================================================================== */

/* The main pane scrolls as one column (overrides the /beats/ list layout). */
.discover-page .archive-main.discover-main {
    display: block;
    overflow-y: auto;
    padding: 24px 32px 48px;
}

/* Sidebar items are deep-link anchors here, not filter buttons. */
.discover-page .archive-folder { text-decoration: none; }

/* ---------------------------------------------------------------------
 * HERO CAROUSEL — gradient "collection" slides
 * ------------------------------------------------------------------- */
.discover-hero {
    position: relative;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 44px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.4),
                0 20px 60px rgba(0, 0, 0, 0.5);
}
.hero-viewport { height: 100%; overflow: hidden; }
.hero-track {
    display: flex;
    height: 100%;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.discover-hero.is-single .hero-track { transition: none; }

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    background: var(--hero-grad, radial-gradient(120% 140% at 70% 30%, #0a2548 0%, #06182f 55%, #020a16 100%));
}
.hero-slide__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.82) 46%,
        rgba(0, 0, 0, 0.35) 72%,
        rgba(0, 0, 0, 0.05) 100%);
}

/* Floating cover-art cluster (real beat artwork). */
.hero-cluster {
    position: absolute;
    right: 40px;
    top: 0;
    bottom: 0;
    width: 42%;
    max-width: 440px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
    pointer-events: none;
}
.hero-tile {
    width: 128px;
    height: 128px;
    flex: 0 0 auto;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card, #2a2a2a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px rgba(0, 0, 0, 0.55);
}
.hero-tile:not(:first-child) { margin-left: -34px; }
.hero-tile:nth-child(1) { transform: rotate(-9deg) translateY(18px);  z-index: 1; }
.hero-tile:nth-child(2) { transform: rotate(-3deg) translateY(-12px); z-index: 3; }
.hero-tile:nth-child(3) { transform: rotate(3deg)  translateY(10px);  z-index: 2; }
.hero-tile:nth-child(4) { transform: rotate(9deg)  translateY(-16px); z-index: 1; }

/* Copy block. */
.hero-slide__content {
    position: absolute;
    left: 44px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 460px;
    z-index: 5;
}
.hero-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--hero-accent, var(--ac));
    margin-bottom: 12px;
}
.hero-title {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 0.98;
    color: var(--ink);
    margin: 0 0 14px;
}
.hero-sub {
    font-size: 16px;
    line-height: 1.5;
    color: #c9c9cf;
    margin: 0 0 24px;
}
.hero-cta-wrap { display: inline-block; }
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    border: none;
    color: #0a0a0a;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 980px;
    cursor: pointer;
    text-decoration: none; /* the CTA renders as <a> on link slides */
    transition: transform 140ms ease;
}
.hero-cta:hover { transform: translateY(-2px); }
.hero-cta i { font-size: 12px; }

/* Arrows. */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--ink);
    font-size: 15px;
    cursor: pointer;
    transition: background 140ms ease;
}
.hero-arrow:hover { background: rgba(0, 0, 0, 0.65); }
.hero-arrow--prev { left: 14px; }
.hero-arrow--next { right: 14px; }

/* Dots. */
.hero-dots {
    position: absolute;
    left: 44px;
    bottom: 18px;
    display: flex;
    gap: 7px;
    z-index: 3;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 980px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.35);
    transition: width 200ms ease, background 200ms ease;
}
.hero-dot[aria-current="true"] { width: 22px; background: var(--ink); }

/* ---------------------------------------------------------------------
 * SHELVES
 * ------------------------------------------------------------------- */
.shelf { margin-bottom: 40px; }
.shelf__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.shelf__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
.shelf__subtitle { font-size: 14px; color: var(--ink2); margin: 5px 0 0; }
.shelf__nav { display: flex; align-items: center; gap: 6px; flex: none; }
.shelf__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202022;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ink2);
    font-size: 13px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.shelf__arrow:hover { background: #2a2a2d; color: var(--ink); }
.shelf__arrow[hidden] { display: none; }

.shelf__viewport { position: relative; }
.shelf__row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}
.shelf__row::-webkit-scrollbar { height: 0; display: none; }

/* ---------------------------------------------------------------------
 * BEAT CARD
 * ------------------------------------------------------------------- */
.beat-card { width: 188px; flex: none; }

.beat-card__art {
    position: relative;
    width: 188px;
    height: 188px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card, #2a2a2a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 1px 2px rgba(0, 0, 0, 0.4),
                0 10px 26px rgba(0, 0, 0, 0.4);
    transition: transform 160ms ease;
}
.beat-card__art:hover { transform: translateY(-4px); }

.beat-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ac);
    color: #fff;
    border: none;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: opacity 160ms ease, transform 160ms ease;
}
.beat-card__art:hover .beat-card__play,
.beat-card.playing .beat-card__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.beat-card__play:active { transform: translate(-50%, -50%) scale(0.92); }

.beat-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px 8px;
    border-radius: 980px;
}

.beat-card__body { margin-top: 11px; }
.beat-card__row { display: flex; align-items: center; gap: 8px; }
.beat-card__title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 140ms ease;
}
.beat-card__title:hover { color: var(--ac); }

.beat-card__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.beat-card__action,
.beat-card__dl-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ac);
    cursor: pointer;
    font-size: 14px;
    transition: filter 140ms ease, transform 120ms ease;
}
.beat-card__action:hover,
.beat-card__dl-btn:hover { filter: brightness(1.25); }
.beat-card__action:active,
.beat-card__dl-btn:active { transform: scale(0.9); }
.beat-card__dl { margin-top: 2px; }
.beat-card .fav-btn.favorited { color: var(--ac); }

/* Entrance reveal — JS adds .has-reveal to <html>, then .is-in per card. */
.has-reveal .beat-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease, transform 420ms ease;
}
.has-reveal .beat-card.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
    .discover-page .archive-main.discover-main { padding: 18px 18px 40px; }
    .hero-cluster { opacity: 0; }            /* cluster crowds the copy on narrow */
    .hero-slide__content { max-width: none; right: 24px; }
    .hero-title { font-size: 34px; }
}

@media (max-width: 640px) {
    .discover-hero { height: 260px; }
    .hero-slide__content { left: 24px; }
    .hero-arrow { display: none; }           /* swipe instead */
    .hero-dots { left: 24px; }
    .shelf__title { font-size: 20px; }
    .beat-card { width: 150px; }
    .beat-card__art { width: 150px; height: 150px; }
}