/* Compact catalog hero: reuses the exact homepage WebGL model and motion,
   without artist orbit cards or music-note effects. */
.catalog-page-hero {
    overflow: hidden;
}

.catalog-b-hero {
    flex: 0 0 clamp(240px, 27vw, 340px);
    min-width: 0;
    min-height: 250px;
    display: grid;
    place-items: center;
    isolation: isolate;
    contain: layout paint style;
}

.catalog-b-hero__stage {
    position: relative;
    width: clamp(230px, 25vw, 320px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.catalog-b-hero__stage::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 18%;
    right: 18%;
    bottom: 12%;
    height: 15%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .42), rgba(0, 0, 0, .14) 48%, transparent 78%);
    filter: blur(12px);
    pointer-events: none;
}

.catalog-b-hero .hero-b-backglow {
    inset: 12%;
    filter: blur(26px);
    opacity: .82;
}

.catalog-b-hero .hero-b-titan-plate {
    inset: 18% 16% 19%;
    border-radius: 24px;
}

.catalog-b-hero .hero-b-shine-a {
    top: 19%;
    left: 18%;
    width: 31%;
}

.catalog-b-hero .hero-b-shine-b {
    top: 65%;
    right: 17%;
    width: 24%;
}

.catalog-b-hero .hero-b-canvas,
.catalog-b-hero .hero-b-fallback {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
}

.catalog-b-hero .hero-b-canvas {
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .30)) drop-shadow(0 0 22px rgba(82, 180, 192, .14));
}

.catalog-b-hero .hero-b-fallback {
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .30)) drop-shadow(0 0 22px rgba(82, 180, 192, .14));
}

@media (max-width: 980px) {
    .catalog-page-hero {
        align-items: center;
    }

    .catalog-b-hero {
        flex-basis: 280px;
        min-height: 230px;
    }

    .catalog-b-hero__stage {
        width: min(280px, 66vw);
    }
}

@media (max-width: 680px) {
    .catalog-page-hero {
        gap: 8px;
    }

    .catalog-b-hero {
        width: 100%;
        min-height: 210px;
        justify-self: center;
    }

    .catalog-b-hero__stage {
        width: min(235px, 68vw);
    }

    .catalog-b-hero .hero-b-titan-plate {
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-b-hero .hero-b-shine {
        animation: none !important;
    }
}