/* =========================================================
   MUSIC SECTION — SITE MUSIC REACTIVE SYSTEM
   This file intentionally layers over sections.css.
   ========================================================= */

.music-reactive {
    --music-energy: 0;
    --music-bass: 0;
    --music-mid: 0;
    --music-high: 0;
    --music-video-priority: 0;
    position: relative;
    isolation: isolate;
    min-height: max(860px, 100vh);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(98, 71, 255, calc(0.055 + var(--music-high) * 0.12)),
            transparent 30rem
        ),
        radial-gradient(
            circle at 24% 64%,
            rgba(0, 217, 255, calc(0.045 + var(--music-bass) * 0.13)),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            rgba(3, 8, 18, 0.99),
            rgba(2, 6, 14, 0.995)
        );
}

.music-reactive::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(
            rgba(104, 192, 255, 0.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(104, 192, 255, 0.028) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image:
        radial-gradient(
            ellipse at 50% 45%,
            #000 22%,
            rgba(0, 0, 0, 0.52) 60%,
            transparent 88%
        );
}

.music-reactive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: calc(0.12 + var(--music-energy) * 0.16);
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 3px,
            rgba(157, 225, 255, 0.025) 4px
        );
    mix-blend-mode: screen;
}

.music-reactive__ambient {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.music-reactive__grid {
    position: absolute;
    left: 50%;
    bottom: -21%;
    width: min(1320px, 110vw);
    height: 62%;
    border-top: 1px solid rgba(0, 217, 255, 0.12);
    background:
        linear-gradient(
            rgba(0, 217, 255, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(122, 92, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 48px 34px;
    opacity: calc(0.16 + var(--music-energy) * 0.2);
    transform:
        translateX(-50%)
        perspective(520px)
        rotateX(63deg)
        scaleX(1.16);
    transform-origin: center top;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9),
            transparent 82%
        );
}

.music-reactive__orb {
    position: absolute;
    border: 1px solid rgba(97, 218, 255, 0.12);
    border-radius: 50%;
    opacity: calc(0.18 + var(--music-energy) * 0.32);
    box-shadow:
        inset 0 0 44px rgba(0, 217, 255, 0.035),
        0 0 calc(30px + var(--music-energy) * 42px)
            rgba(122, 92, 255, 0.055);
    transition:
        opacity 120ms linear,
        box-shadow 120ms linear;
}

.music-reactive__orb::before,
.music-reactive__orb::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(122, 92, 255, 0.11);
    border-radius: inherit;
}

.music-reactive__orb::after {
    inset: 31%;
    border-color: rgba(0, 217, 255, 0.14);
}

.music-reactive__orb--one {
    top: 5%;
    right: 7%;
    width: clamp(220px, 27vw, 520px);
    aspect-ratio: 1;
    animation: music-orbit-spin 26s linear infinite;
}

.music-reactive__orb--two {
    left: -8%;
    bottom: 4%;
    width: clamp(240px, 30vw, 570px);
    aspect-ratio: 1;
    animation: music-orbit-spin 34s linear infinite reverse;
}

.music-reactive__beam {
    position: absolute;
    width: 1px;
    height: 68%;
    opacity: calc(0.2 + var(--music-mid) * 0.42);
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 217, 255, 0.48),
            rgba(122, 92, 255, 0.32),
            transparent
        );
    box-shadow:
        0 0 16px rgba(0, 217, 255, 0.16),
        0 0 34px rgba(122, 92, 255, 0.08);
}

.music-reactive__beam--one {
    top: 13%;
    left: 17%;
    transform: rotate(14deg);
}

.music-reactive__beam--two {
    top: 8%;
    right: 18%;
    transform: rotate(-11deg);
}

.music-reactive__shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(42px, 6vw, 78px);
    width: min(1180px, calc(100% - 48px));
    padding-top: clamp(96px, 10vh, 144px);
    padding-bottom: clamp(88px, 10vh, 142px);
}

.music-reactive__layout {
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(340px, 0.72fr);
    gap: clamp(46px, 7vw, 112px);
    align-items: center;
}

.music-reactive__intro {
    position: relative;
    padding: clamp(26px, 3.5vw, 48px) 0;
}

.music-reactive__intro::before {
    content: "AUDIO_PROFILE // 09";
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(111, 145, 183, 0.48);
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    writing-mode: vertical-rl;
    transform: translateX(-32px) rotate(180deg);
}

.music-reactive__eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: clamp(34px, 6vw, 76px);
}

.music-reactive__eyebrow-row .eyebrow {
    margin: 0;
}

.music-reactive__live-badge {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    color: rgba(171, 198, 225, 0.72);
    border: 1px solid rgba(87, 157, 211, 0.2);
    background: rgba(2, 9, 20, 0.72);
    font-family: var(--font-mono, monospace);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(
        0 0,
        calc(100% - 7px) 0,
        100% 7px,
        100% 100%,
        0 100%
    );
}

.music-reactive__live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #526984;
    box-shadow: 0 0 0 transparent;
    transition:
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.music-reactive[data-site-playing="true"]
.music-reactive__live-badge {
    color: #9aefff;
    border-color: rgba(0, 217, 255, 0.4);
}

.music-reactive[data-site-playing="true"]
.music-reactive__live-badge i {
    background: #48e6ff;
    box-shadow:
        0 0 8px rgba(72, 230, 255, 0.92),
        0 0 18px rgba(72, 230, 255, 0.42);
    transform: scale(calc(1 + var(--music-bass) * 0.8));
}

.music-reactive .music-brand-title {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-bottom: 28px;
    color: #d9e9fb;
    font-size: clamp(4.8rem, 10vw, 9.8rem);
    text-shadow:
        0 0 calc(14px + var(--music-energy) * 20px)
            rgba(0, 217, 255, calc(0.12 + var(--music-energy) * 0.2)),
        0 0 54px rgba(122, 92, 255, 0.11);
    transform: translateZ(0);
}

.music-reactive .music-brand-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: calc(32% + var(--music-bass) * 52%);
    height: 2px;
    background:
        linear-gradient(
            90deg,
            #43ddff,
            #806cff 76%,
            transparent
        );
    box-shadow:
        0 0 10px rgba(67, 221, 255, 0.45),
        0 0 24px rgba(128, 108, 255, 0.2);
    transition: width 90ms linear;
}

.music-reactive .music-brand-subtitle {
    max-width: 16ch;
    margin-bottom: 24px;
    color: #d6e4f5;
    font-size: clamp(2rem, 3.9vw, 4rem);
    letter-spacing: -0.035em;
}

.music-reactive__supporting {
    max-width: 58ch;
    color: #8fa1b9;
    line-height: 1.8;
}

.music-reactive__now-playing {
    position: relative;
    display: grid;
    gap: 5px;
    max-width: 620px;
    margin-top: 30px;
    padding: 17px 18px 17px 22px;
    overflow: hidden;
    border: 1px solid rgba(83, 163, 215, 0.22);
    border-left-color: rgba(0, 217, 255, 0.72);
    background:
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.065),
            transparent 56%,
            rgba(122, 92, 255, 0.035)
        ),
        rgba(2, 8, 18, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(195, 233, 255, 0.025),
        0 18px 42px rgba(0, 0, 0, 0.2);
    clip-path: polygon(
        0 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% 100%,
        0 100%
    );
}

.music-reactive__now-playing::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    opacity: calc(0.45 + var(--music-bass) * 0.55);
    background: #48e6ff;
    box-shadow:
        0 0 12px rgba(72, 230, 255, 0.82),
        0 0 28px rgba(72, 230, 255, 0.36);
}

.music-reactive__now-playing-label,
.music-reactive__now-playing-state {
    color: #70859f;
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.music-reactive__now-playing strong {
    overflow: hidden;
    color: #e8f7ff;
    font-size: clamp(0.9rem, 1.4vw, 1.08rem);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-reactive__now-playing-state {
    color: #67dff4;
}

.music-reactive__discipline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.music-reactive__discipline-grid span {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #7187a2;
    border: 1px solid rgba(94, 142, 185, 0.13);
    background: rgba(3, 9, 19, 0.55);
    font-family: var(--font-mono, monospace);
    font-size: 0.52rem;
    letter-spacing: 0.08em;
}

.music-reactive__discipline-grid small {
    color: #4ddff8;
    font-size: 0.52rem;
}

.music-reactive__feature {
    position: relative;
    min-height: 100%;
    padding: clamp(25px, 3vw, 38px);
    overflow: hidden;
    border-color:
        rgba(81, 170, 221, calc(0.28 + var(--music-energy) * 0.23));
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(122, 92, 255, calc(0.08 + var(--music-high) * 0.12)),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            rgba(4, 13, 28, 0.96),
            rgba(2, 7, 17, 0.985)
        );
    box-shadow:
        0 26px 80px rgba(0, 0, 0, 0.42),
        0 0 calc(20px + var(--music-energy) * 34px)
            rgba(0, 217, 255, calc(0.035 + var(--music-energy) * 0.075)),
        inset 1px 0 0 rgba(0, 217, 255, 0.08),
        inset 0 1px 0 rgba(215, 241, 255, 0.035);
    clip-path: polygon(
        18px 0,
        100% 0,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        0 100%,
        0 18px
    );
    transform:
        translate3d(0, calc(var(--music-bass) * -3px), 0);
    transition:
        border-color 100ms linear,
        box-shadow 100ms linear,
        transform 100ms linear;
}

.music-reactive__feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 217, 255, 0.2),
            transparent
        )
        top left / 100% 1px no-repeat,
        linear-gradient(
            180deg,
            transparent,
            rgba(122, 92, 255, 0.18),
            transparent
        )
        top right / 1px 100% no-repeat;
}

.music-reactive__feature::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -42%;
    width: 42%;
    height: 180%;
    pointer-events: none;
    opacity: calc(0.05 + var(--music-high) * 0.16);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(105, 224, 255, 0.36),
            transparent
        );
    transform: rotate(17deg);
    animation: music-panel-scan 8.5s linear infinite;
}

.music-reactive__feature > * {
    position: relative;
    z-index: 1;
}

.music-reactive__feature-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.music-reactive__feature-index {
    color: #5c7190;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.13em;
}

.music-reactive__feature h3 {
    color: #edf8ff;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    letter-spacing: -0.025em;
}

.music-reactive__feature > p:not(.music-panel__label) {
    color: #8799b2;
    line-height: 1.75;
}

.music-reactive .music-panel__embed {
    position: relative;
    border-color: rgba(76, 190, 232, 0.28);
    border-radius: 0;
    background: #020712;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(122, 92, 255, 0.07),
        inset 0 0 26px rgba(0, 217, 255, 0.025);
    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
}

.music-reactive__video-status {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    color: rgba(216, 238, 255, 0.78);
    background: rgba(0, 5, 14, 0.76);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono, monospace);
    font-size: 0.49rem;
    letter-spacing: 0.11em;
    pointer-events: none;
}

.music-reactive__video-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7b66ff;
    box-shadow: 0 0 9px rgba(123, 102, 255, 0.82);
}

.music-reactive[data-video-priority="true"]
.music-reactive__feature {
    border-color: rgba(142, 114, 255, 0.62);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.5),
        0 0 38px rgba(122, 92, 255, 0.17),
        inset 1px 0 0 rgba(0, 217, 255, 0.09);
}

.music-reactive[data-video-priority="true"]
.music-reactive__video-status span {
    background: #ef74ff;
    box-shadow:
        0 0 9px rgba(239, 116, 255, 0.95),
        0 0 20px rgba(122, 92, 255, 0.55);
    animation: music-video-priority-pulse 1s ease-in-out infinite;
}

.music-reactive .platform-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.music-reactive .platform-links a {
    border-radius: 0;
    clip-path: polygon(
        7px 0,
        100% 0,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        0 100%,
        0 7px
    );
}

/* =========================================================
   FULL-WIDTH REACTIVE SPECTRUM
   ========================================================= */

.music-reactive__spectrum {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(78, 158, 211, 0.24);
    border-top-color: rgba(0, 217, 255, 0.52);
    background:
        radial-gradient(
            circle at 20% 100%,
            rgba(0, 217, 255, 0.065),
            transparent 26rem
        ),
        radial-gradient(
            circle at 86% 0,
            rgba(122, 92, 255, 0.075),
            transparent 24rem
        ),
        rgba(2, 8, 19, 0.88);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.36),
        0 0 calc(22px + var(--music-energy) * 46px)
            rgba(0, 217, 255, calc(0.025 + var(--music-energy) * 0.07)),
        inset 0 1px 0 rgba(216, 241, 255, 0.035);
    clip-path: polygon(
        16px 0,
        calc(100% - 22px) 0,
        100% 22px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        0 100%,
        0 16px
    );
    transition:
        box-shadow 100ms linear,
        border-color 100ms linear;
}

.music-reactive__spectrum::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.28),
            transparent 18%,
            transparent 82%,
            rgba(122, 92, 255, 0.24)
        )
        top / 100% 1px no-repeat,
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 63px,
            rgba(89, 153, 206, 0.055) 64px
        );
}

.music-reactive__spectrum > * {
    position: relative;
    z-index: 1;
}

.music-reactive__spectrum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 16px clamp(18px, 3vw, 32px);
    border-bottom: 1px solid rgba(72, 145, 198, 0.18);
    background:
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.045),
            transparent 52%,
            rgba(122, 92, 255, 0.035)
        );
}

.music-reactive__spectrum-header > div:first-child {
    display: grid;
    gap: 4px;
}

.music-reactive__spectrum-kicker {
    color: #5de4ff;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.17em;
}

.music-reactive__spectrum-header strong {
    color: #deefff;
    font-size: clamp(0.8rem, 1.2vw, 0.96rem);
    letter-spacing: 0.055em;
}

.music-reactive__spectrum-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7186a0;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.music-reactive__spectrum-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #536a84;
    box-shadow: 0 0 0 transparent;
}

.music-reactive[data-site-playing="true"]
.music-reactive__spectrum-status {
    color: #85eaff;
}

.music-reactive[data-site-playing="true"]
.music-reactive__spectrum-status i {
    background: #48e6ff;
    box-shadow:
        0 0 8px rgba(72, 230, 255, 0.9),
        0 0 18px rgba(72, 230, 255, 0.4);
}

.music-reactive[data-video-priority="true"]
.music-reactive__spectrum-status {
    color: #c7b9ff;
}

.music-reactive[data-video-priority="true"]
.music-reactive__spectrum-status i {
    background: #9c7cff;
    box-shadow:
        0 0 9px rgba(156, 124, 255, 0.9),
        0 0 20px rgba(122, 92, 255, 0.48);
}

.music-reactive__canvas-shell {
    position: relative;
    height: clamp(190px, 23vw, 300px);
    overflow: hidden;
    background:
        linear-gradient(
            rgba(69, 137, 191, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(69, 137, 191, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.025),
            transparent 40%,
            rgba(122, 92, 255, 0.03)
        );
    background-size:
        100% 36px,
        52px 100%,
        100% 100%;
}

.music-reactive__canvas-shell canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.music-reactive__center-readout {
    position: absolute;
    left: 50%;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 6px 10px;
    color: rgba(128, 159, 193, 0.65);
    background: rgba(1, 6, 15, 0.56);
    font-family: var(--font-mono, monospace);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    transform: translateX(-50%);
    pointer-events: none;
}

.music-reactive__center-readout i {
    width: 42px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #4adfff,
            #806cff
        );
    box-shadow: 0 0 9px rgba(74, 223, 255, 0.3);
}

.music-reactive__scan-line {
    position: absolute;
    inset: 0 auto 0 -12%;
    width: 12%;
    pointer-events: none;
    opacity: calc(0.08 + var(--music-high) * 0.12);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(115, 227, 255, 0.42),
            transparent
        );
    transform: skewX(-12deg);
    animation: music-spectrum-scan 7.5s linear infinite;
}

.music-reactive__frequency-footer {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.32fr)
        minmax(110px, 0.32fr)
        minmax(110px, 0.32fr)
        minmax(240px, 1.2fr);
    gap: 1px;
    border-top: 1px solid rgba(72, 145, 198, 0.16);
    background: rgba(67, 123, 168, 0.11);
}

.music-reactive__frequency-footer > div,
.music-reactive__frequency-footer > p {
    min-height: 66px;
    margin: 0;
    padding: 13px 16px;
    background: rgba(2, 8, 18, 0.96);
}

.music-reactive__frequency-footer > div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px 12px;
}

.music-reactive__frequency-footer span {
    color: #637b99;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
}

.music-reactive__frequency-footer strong {
    justify-self: end;
    color: #b7eaff;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
}

.music-reactive__frequency-footer i {
    grid-column: 1 / -1;
    height: 2px;
    overflow: hidden;
    background: rgba(79, 119, 156, 0.16);
}

.music-reactive__frequency-footer b {
    display: block;
    width: 0%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #45dfff,
            #826cff
        );
    box-shadow: 0 0 9px rgba(69, 223, 255, 0.36);
    transition: width 85ms linear;
}

.music-reactive__frequency-footer > p {
    display: flex;
    align-items: center;
    color: #687e99;
    font-size: 0.7rem;
    line-height: 1.55;
}

/* =========================================================
   STATES
   ========================================================= */

.music-reactive[data-video-priority="true"] {
    --music-video-priority: 1;
}

.music-reactive[data-video-priority="true"]
.music-reactive__spectrum {
    border-top-color: rgba(151, 120, 255, 0.65);
}

.music-reactive[data-video-priority="true"]
.music-reactive__canvas-shell {
    background:
        linear-gradient(
            rgba(112, 85, 214, 0.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(112, 85, 214, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(122, 92, 255, 0.04),
            transparent 48%,
            rgba(0, 217, 255, 0.02)
        );
    background-size:
        100% 36px,
        52px 100%,
        100% 100%;
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes music-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes music-panel-scan {
    0% {
        transform: translateX(-30%) rotate(17deg);
    }

    100% {
        transform: translateX(410%) rotate(17deg);
    }
}

@keyframes music-spectrum-scan {
    from {
        transform: translateX(0) skewX(-12deg);
    }

    to {
        transform: translateX(960%) skewX(-12deg);
    }
}

@keyframes music-video-priority-pulse {
    0%,
    100% {
        transform: scale(0.82);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .music-reactive {
        min-height: auto;
    }

    .music-reactive__layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .music-reactive__feature {
        width: min(720px, 100%);
    }

    .music-reactive__intro {
        padding-bottom: 0;
    }

    .music-reactive__frequency-footer {
        grid-template-columns: repeat(3, 1fr);
    }

    .music-reactive__frequency-footer > p {
        grid-column: 1 / -1;
        min-height: 54px;
    }
}

@media (max-width: 700px) {
    .music-reactive__shell {
        width: min(100% - 28px, 1180px);
        padding-top: 82px;
        padding-bottom: 92px;
    }

    .music-reactive__intro::before {
        display: none;
    }

    .music-reactive__eyebrow-row {
        margin-bottom: 38px;
    }

    .music-reactive .music-brand-title {
        font-size: clamp(4rem, 20vw, 6.6rem);
    }

    .music-reactive .music-brand-subtitle {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }

    .music-reactive__discipline-grid {
        grid-template-columns: 1fr;
    }

    .music-reactive__feature {
        padding: 22px 18px 24px;
    }

    .music-reactive__spectrum-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .music-reactive__canvas-shell {
        height: 210px;
    }

    .music-reactive__frequency-footer {
        grid-template-columns: 1fr;
    }

    .music-reactive__frequency-footer > p {
        grid-column: auto;
    }

    .music-reactive__frequency-footer > div,
    .music-reactive__frequency-footer > p {
        min-height: 58px;
    }

    .music-reactive__center-readout {
        width: max-content;
        max-width: calc(100% - 24px);
    }

    .music-reactive__center-readout i {
        width: 24px;
    }

    .music-reactive__orb--one {
        right: -24%;
    }

    .music-reactive__orb--two {
        left: -38%;
    }
}

@media (max-width: 430px) {
    .music-reactive__live-badge {
        width: 100%;
        justify-content: center;
    }

    .music-reactive__now-playing {
        padding-right: 14px;
    }

    .music-reactive__now-playing strong {
        font-size: 0.82rem;
    }

    .music-reactive__feature-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .music-reactive__canvas-shell {
        height: 180px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .music-reactive__orb,
    .music-reactive__feature::after,
    .music-reactive__scan-line,
    .music-reactive__video-status span {
        animation: none !important;
    }

    .music-reactive__feature {
        transform: none !important;
    }
}