/* BPEATS-MUSIC · surgical music-note layer
   Scope: homepage hero, Artist Collection hero and Public Relations hero only.
   The notes stay between the rotating circular layer and the transparent WebGL B. */

.hero-b-stage,
.catalog-b-hero__stage{
    --bpeats-note-rise:-520px;
    isolation:isolate;
}

.catalog-b-hero__stage{
    --bpeats-note-rise:-310px;
}

/* Explicit layer order: rotating background -> rising notes -> WebGL B -> artist portraits. */
.hero-b-stage > .hero-b-backglow,
.hero-b-stage > .hero-b-orbit,
.hero-b-stage > .hero-b-titan-plate,
.catalog-b-hero__stage > .hero-b-backglow,
.catalog-b-hero__stage > .hero-b-orbit,
.catalog-b-hero__stage > .hero-b-titan-plate{
    z-index:0!important;
}

.hero-b-stage > .hero-note-rain,
.catalog-b-hero__stage > .hero-note-rain{
    z-index:1!important;
}

.hero-b-stage > .hero-b-canvas,
.hero-b-stage > .hero-b-fallback,
.catalog-b-hero__stage > .hero-b-canvas,
.catalog-b-hero__stage > .hero-b-fallback{
    z-index:2!important;
}

.hero-b-stage > .hero-artist-orbit{
    z-index:3!important;
}

/* Keep compact page heroes visually aligned with the homepage circular motion. */
.catalog-b-hero .hero-b-orbit{
    inset:13%!important;
    opacity:.76!important;
}

.catalog-b-hero .hero-b-orbit-two{
    inset:22%!important;
    opacity:.42!important;
}

/* Dedicated intermediate layer. It is clipped to the 3D stage, not to page content. */
.hero-b-stage > .hero-note-rain,
.catalog-b-hero__stage > .hero-note-rain{
    position:absolute!important;
    inset:8% 11% 8%!important;
    display:block!important;
    visibility:visible!important;
    pointer-events:none!important;
    overflow:hidden!important;
    opacity:1!important;
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to top,transparent 0%,#000 12%,#000 88%,transparent 100%);
}

.hero-b-stage .hero-note,
.catalog-b-hero__stage .hero-note{
    --note-drift:0px;
    --note-turn:0deg;
    --note-duration:8.6s;
    --note-delay:0s;
    position:absolute!important;
    bottom:-10%!important;
    display:block!important;
    visibility:visible!important;
    margin:0!important;
    font-family:Arial,"Helvetica Neue",sans-serif!important;
    font-style:normal!important;
    font-weight:700!important;
    line-height:1!important;
    color:rgba(214,239,242,.78)!important;
    text-shadow:0 0 10px rgba(88,214,223,.30),0 0 20px rgba(88,214,223,.13)!important;
    opacity:0;
    will-change:transform,opacity;
    transform:translate3d(0,18px,0) scale(.78) rotate(0deg);
    animation:bpeatsNotesRiseLayer var(--note-duration) linear var(--note-delay) infinite!important;
}

.hero-b-stage .hero-note.note-1,
.catalog-b-hero__stage .hero-note.note-1{left:7%!important;font-size:17px!important;--note-drift:-12px;--note-turn:-8deg;--note-duration:9.4s;--note-delay:-1.2s}
.hero-b-stage .hero-note.note-2,
.catalog-b-hero__stage .hero-note.note-2{left:18%!important;font-size:23px!important;--note-drift:10px;--note-turn:7deg;--note-duration:8.3s;--note-delay:-4.1s;color:rgba(96,225,232,.82)!important}
.hero-b-stage .hero-note.note-3,
.catalog-b-hero__stage .hero-note.note-3{left:31%!important;font-size:18px!important;--note-drift:-7px;--note-turn:-5deg;--note-duration:9.8s;--note-delay:-2.6s}
.hero-b-stage .hero-note.note-4,
.catalog-b-hero__stage .hero-note.note-4{left:44%!important;font-size:26px!important;--note-drift:13px;--note-turn:9deg;--note-duration:8.8s;--note-delay:-6.1s;color:rgba(222,241,244,.72)!important}
.hero-b-stage .hero-note.note-5,
.catalog-b-hero__stage .hero-note.note-5{left:57%!important;font-size:17px!important;--note-drift:-10px;--note-turn:-7deg;--note-duration:9.1s;--note-delay:-3.4s}
.hero-b-stage .hero-note.note-6,
.catalog-b-hero__stage .hero-note.note-6{left:69%!important;font-size:24px!important;--note-drift:8px;--note-turn:6deg;--note-duration:8.1s;--note-delay:-7.0s;color:rgba(88,214,223,.86)!important}
.hero-b-stage .hero-note.note-7,
.catalog-b-hero__stage .hero-note.note-7{left:81%!important;font-size:19px!important;--note-drift:-8px;--note-turn:-6deg;--note-duration:9.6s;--note-delay:-4.8s}
.hero-b-stage .hero-note.note-8,
.catalog-b-hero__stage .hero-note.note-8{left:91%!important;font-size:16px!important;--note-drift:6px;--note-turn:5deg;--note-duration:8.9s;--note-delay:-7.8s;color:rgba(217,238,241,.67)!important}

@keyframes bpeatsNotesRiseLayer{
    0%{
        transform:translate3d(0,18px,0) scale(.78) rotate(0deg);
        opacity:0;
    }
    11%{opacity:.16}
    28%{opacity:.70}
    66%{opacity:.58}
    86%{opacity:.24}
    100%{
        transform:translate3d(var(--note-drift),var(--bpeats-note-rise),0) scale(1.08) rotate(var(--note-turn));
        opacity:0;
    }
}

@media (max-width:980px){
    .hero-b-stage{--bpeats-note-rise:-410px}
    .catalog-b-hero__stage{--bpeats-note-rise:-270px}
}

@media (max-width:680px){
    .hero-b-stage{--bpeats-note-rise:-315px}
    .catalog-b-hero__stage{--bpeats-note-rise:-225px}
    .hero-b-stage > .hero-note-rain,
    .catalog-b-hero__stage > .hero-note-rain{inset:7% 9% 7%!important}
}

@media (prefers-reduced-motion:reduce){
    .hero-b-stage > .hero-note-rain,
    .catalog-b-hero__stage > .hero-note-rain{display:none!important}
}