/**
 * Lightweight decorative motion — GPU-friendly CSS only
 *
 * Rules:
 * - transform / opacity only
 * - paused unless .is-motion-on (IntersectionObserver)
 * - paused while html.is-scrolling
 * - prefers-reduced-motion = off
 *
 * @package Bargtunes
 */

/* ========================================
   SCROLL PERF BASE (keep paint cheap)
======================================== */

*,
*::before,
*::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Header glass — solid only (no backdrop-filter; major scroll perf win). */
.main-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ab-bg__spotlight,
.ms-bg__spotlight,
.mv-bg__spotlight,
.ct-bg__spotlight,
.ft-bg__orb {
    filter: none !important;
    animation: none !important;
    opacity: 0.35;
}

.fn-dock__bar,
.fn-dock__lang,
.ms-mini-player {
    background: rgba(8, 8, 12, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ms-glass,
.ms-tracklist,
.ms-toolbar,
.ms-queue,
.mv-modal__sheet {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ft-bg__orb {
    will-change: auto !important;
}

html {
    scroll-behavior: auto !important;
}

/* Music/videos paint caps */
.ms-bg__noise,
.mv-bg__noise {
    display: none !important;
}

.ms-col--tracklist {
    position: relative !important;
    top: auto !important;
}

.mv-tile__hit:hover .mv-tile__img,
.mv-tile__hit:focus-visible .mv-tile__img {
    filter: none !important;
}

/* Heavy continuous beams stay off */
.ct-form-beam {
    animation: none !important;
}

/* ========================================
   MOTION GATE
======================================== */

/* Default: paused */
.hv-ring__svg,
.hv-ring__ticks,
.hv-marquee__inner,
.ms-marquee__track,
.mv-marquee__track,
.ft-marquee__track,
.ft-bg__eq-bar,
.hv-waveform__bar,
.ab-waveform__bar,
.ms-waveform__bar,
.ms-vinyl__disc.is-spinning {
    animation-play-state: paused !important;
}

/* Run only when section/root is in view */
.is-motion-on .hv-ring__svg,
.is-motion-on .hv-ring__ticks,
.is-motion-on .hv-marquee__inner,
.is-motion-on .ms-marquee__track,
.is-motion-on .mv-marquee__track,
.is-motion-on .ft-marquee__track,
.is-motion-on .ft-bg__eq-bar,
[data-motion].is-motion-on .ft-bg__eq-bar {
    animation-play-state: running !important;
}

/* Waveforms: only while playing + parent in view */
.is-motion-on .hv-release.is-playing .hv-waveform__bar,
.is-motion-on .ab-portrait.is-playing .ab-waveform__bar,
.is-motion-on .ms-section.is-playing .ms-waveform__bar,
.is-motion-on .ms-vinyl__disc.is-spinning {
    animation-play-state: running !important;
}

/* Pause everything while the user is actively scrolling */
html.is-scrolling .hv-ring__svg,
html.is-scrolling .hv-ring__ticks,
html.is-scrolling .hv-marquee__inner,
html.is-scrolling .ms-marquee__track,
html.is-scrolling .mv-marquee__track,
html.is-scrolling .ft-marquee__track,
html.is-scrolling .ft-bg__eq-bar,
html.is-scrolling .hv-waveform__bar,
html.is-scrolling .ab-waveform__bar,
html.is-scrolling .ms-waveform__bar,
html.is-scrolling .ms-vinyl__disc {
    animation-play-state: paused !important;
}

/* ========================================
   RING — one spinner only (ticks static)
======================================== */

.hv-ring__ticks {
    animation: btRingSpin 28s linear infinite !important;
    animation-play-state: paused !important;
    transform: translateZ(0);
    transform-origin: 50% 50%;
}

.hv-ring__svg {
    animation: btRingSpin 28s linear infinite !important;
    animation-play-state: paused !important;
    transform: translateZ(0);
}

/* Pause everything while scrolling — beats is-motion-on specificity */
html.is-scrolling *,
html.is-scrolling *::before,
html.is-scrolling *::after {
    animation-play-state: paused !important;
}

html.is-scrolling .ft-bg__aurora,
html.is-scrolling .ft-bg__brand,
html.is-scrolling .ft-marquee {
    visibility: hidden;
}

html.is-scrolling .ms-bg__spotlight,
html.is-scrolling .mv-bg__spotlight,
html.is-scrolling .ab-bg__spotlight,
html.is-scrolling .ct-bg__spotlight {
    opacity: 0.15 !important;
}

.is-motion-on .hv-ring__ticks,
.is-motion-on .hv-ring__svg {
    animation-play-state: running !important;
}

@keyframes btRingSpin {
    to {
        transform: translateZ(0) rotate(360deg);
    }
}

/* ========================================
   MARQUEES — transform3d, slower, cheap
======================================== */

.hv-marquee,
.ms-marquee,
.mv-marquee,
.ft-marquee {
    contain: layout style paint;
    overflow: hidden;
}

.hv-marquee__inner {
    animation: btMarquee 55s linear infinite !important;
    animation-play-state: paused !important;
    transform: translate3d(0, 0, 0);
}

.ms-marquee__track,
.mv-marquee__track,
.ft-marquee__track {
    animation: btMarquee 48s linear infinite !important;
    animation-play-state: paused !important;
    transform: translate3d(0, 0, 0);
}

.is-motion-on .hv-marquee__inner,
.is-motion-on .ms-marquee__track,
.is-motion-on .mv-marquee__track,
.is-motion-on .ft-marquee__track {
    animation-play-state: running !important;
}

.bargtunes-videos[dir="rtl"] .mv-marquee__track,
.hv-section[dir="rtl"] .hv-marquee__inner,
body.lang-persian .ft-marquee__track,
body.lang-persian .ms-marquee__track {
    animation-name: btMarqueeRtl !important;
}

@keyframes btMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes btMarqueeRtl {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* ========================================
   WAVEFORMS — few bars, transform only
======================================== */

.hv-waveform__bar:nth-child(n + 11),
.ab-waveform__bar:nth-child(n + 11),
.ms-waveform__bar:nth-child(n + 13) {
    display: none;
}

.hv-waveform__bar,
.ab-waveform__bar,
.ms-waveform__bar {
    animation: btWave 1.35s ease-in-out infinite !important;
    animation-delay: calc(var(--wi, 0) * 0.07s) !important;
    animation-play-state: paused !important;
    transform: scaleY(0.45);
    transform-origin: bottom center;
}

.is-motion-on .hv-release.is-playing .hv-waveform__bar,
.is-motion-on .ab-portrait.is-playing .ab-waveform__bar,
.is-motion-on .ms-section.is-playing .ms-waveform__bar {
    animation-play-state: running !important;
}

@keyframes btWave {
    0%,
    100% {
        transform: scaleY(0.4);
    }
    50% {
        transform: scaleY(1);
    }
}

/* ========================================
   FOOTER EQ — lite bounce
======================================== */

.ft-bg__eq {
    opacity: 0.28;
    contain: layout style paint;
}

.ft-bg__eq-bar {
    animation: btEq 1.4s ease-in-out infinite !important;
    animation-delay: calc(var(--i, 0) * 0.08s) !important;
    animation-play-state: paused !important;
    transform: scaleY(0.2);
    transform-origin: bottom center;
    background: rgba(255, 255, 255, 0.5);
}

.is-motion-on .ft-bg__eq-bar,
[data-motion].is-motion-on .ft-bg__eq-bar {
    animation-play-state: running !important;
}

@keyframes btEq {
    0%,
    100% {
        transform: scaleY(0.18);
    }
    40% {
        transform: scaleY(0.85);
    }
    70% {
        transform: scaleY(0.45);
    }
}

/* ========================================
   VINYL — only when spinning class present
======================================== */

.ms-vinyl__disc.is-spinning {
    animation: btVinyl 10s linear infinite !important;
    animation-play-state: paused !important;
    transform: translateZ(0);
}

.is-motion-on .ms-vinyl__disc.is-spinning {
    animation-play-state: running !important;
}

@keyframes btVinyl {
    to {
        transform: translateZ(0) rotate(360deg);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .hv-ring__svg,
    .hv-marquee__inner,
    .ms-marquee__track,
    .mv-marquee__track,
    .ft-marquee__track,
    .ft-bg__eq-bar,
    .hv-waveform__bar,
    .ab-waveform__bar,
    .ms-waveform__bar,
    .ms-vinyl__disc,
    .ms-vinyl__disc.is-spinning {
        animation: none !important;
    }
}

/* Mobile: fewer concurrent motions */
@media (max-width: 768px) {
    .ft-bg__eq-bar:nth-child(n + 9) {
        display: none;
    }

    .hv-waveform__bar:nth-child(n + 8),
    .ab-waveform__bar:nth-child(n + 8),
    .ms-waveform__bar:nth-child(n + 9) {
        display: none;
    }

    .hv-marquee__inner,
    .ms-marquee__track,
    .mv-marquee__track,
    .ft-marquee__track {
        animation-duration: 70s;
    }
}