/* Credit: G-Bars ("Gradient Bars background") by Iqtidar Tara, https://framer.com/m/Gradient-bars-background-PBP7eD.js@1az5mj0YIKKWNeAX6WXF
   The source module has no credit/licence header of its own (credit from the Framer components sheet). Licence clearance: confirmed by Rowan, 2026-11-03 17:23 AEST (UTC+10), relayed by Relay. */
/* G-Bars: vanilla port of Rowan's Framer "G_bars_background" component (gradient_bars/G_bars_background.module.js).
   Same keyframes (Float/Pulse/Wave x X/Y), same CSS variables (--gb-translate, --gb-pulse-scale, --gb-min/max-opacity). */
.gbars{position:absolute;left:20px;right:20px;top:46px;bottom:-14px;border-radius:30px;overflow:hidden;z-index:0;background:var(--ink,#14204A)}
.gbars-row{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:6px}
.gbars[data-gb-direction="X Axis"] .gbars-row{flex-direction:column}
.gbars-row > i{display:block;flex:1 1 10px;min-width:10px;height:100%;background:linear-gradient(180deg,var(--orange,#F57E20),var(--blue,#124A92));transform-origin:center center}
/* fallback (no JS) look: taller in the middle, like an equaliser */
.gbars-row > i:nth-child(4n+1){height:70%}.gbars-row > i:nth-child(4n+3){height:85%}
@keyframes framerGradientBarsFloatY{0%{transform:translateY(var(--gb-translate));opacity:var(--gb-min-opacity)}50%{transform:translateY(calc(var(--gb-translate) * -1));opacity:var(--gb-max-opacity)}100%{transform:translateY(var(--gb-translate));opacity:var(--gb-min-opacity)}}
@keyframes framerGradientBarsPulseY{0%{transform:scaleY(1);opacity:var(--gb-min-opacity)}50%{transform:scaleY(var(--gb-pulse-scale));opacity:var(--gb-max-opacity)}100%{transform:scaleY(1);opacity:var(--gb-min-opacity)}}
@keyframes framerGradientBarsWaveY{0%{transform:translateY(var(--gb-translate)) scaleY(1);opacity:var(--gb-min-opacity)}50%{transform:translateY(calc(var(--gb-translate) * -1)) scaleY(var(--gb-pulse-scale));opacity:var(--gb-max-opacity)}100%{transform:translateY(var(--gb-translate)) scaleY(1);opacity:var(--gb-min-opacity)}}
@keyframes framerGradientBarsFloatX{0%{transform:translateX(var(--gb-translate));opacity:var(--gb-min-opacity)}50%{transform:translateX(calc(var(--gb-translate) * -1));opacity:var(--gb-max-opacity)}100%{transform:translateX(var(--gb-translate));opacity:var(--gb-min-opacity)}}
@keyframes framerGradientBarsPulseX{0%{transform:scaleX(1);opacity:var(--gb-min-opacity)}50%{transform:scaleX(var(--gb-pulse-scale));opacity:var(--gb-max-opacity)}100%{transform:scaleX(1);opacity:var(--gb-min-opacity)}}
@keyframes framerGradientBarsWaveX{0%{transform:translateX(var(--gb-translate)) scaleX(1);opacity:var(--gb-min-opacity)}50%{transform:translateX(calc(var(--gb-translate) * -1)) scaleX(var(--gb-pulse-scale));opacity:var(--gb-max-opacity)}100%{transform:translateX(var(--gb-translate)) scaleX(1);opacity:var(--gb-min-opacity)}}
.gbars.gb-paused .gbars-row > i{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.gbars .gbars-row > i{animation:none!important}.gbars-pause{display:none}}
html.rm-user .gbars .gbars-row > i{animation:none!important}html.rm-user .gbars-pause{display:none}
.gbars-pause{position:absolute;z-index:2;right:34px;bottom:-4px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(20,32,74,.85);color:#fff;font:700 12px/1 var(--font-b,system-ui,sans-serif);cursor:pointer}
.gbars-pause:hover{background:#14204A}.gbars-pause:focus-visible{outline:3px solid #FEC623;outline-offset:2px}
html:not(.gb-js) .gbars-pause{display:none}
@media (max-width:600px){.gbars{left:8px;right:8px;border-radius:24px}.gbars-pause{right:16px}}
/* player sits on the bars: a little more opaque so text contrast stays >= 4.5:1 */
.ma-player-band .ma-player{background:rgba(255,255,255,.93)}
/* frame the player inside the bars so the equaliser reads around it */
.ma-player-band .gbars{left:20px;right:20px;top:46px;bottom:0}
.ma-player-band .ma-player{margin:30px 60px 30px}
.ma-player-band .gbars-pause{bottom:8px;right:36px}
@media (max-width:1000px){.ma-player-band .ma-player{margin:26px 34px}}
@media (max-width:600px){.ma-player-band .gbars{left:8px;right:8px}.ma-player-band .ma-player{margin:22px 14px 48px}.ma-player-band .gbars-pause{right:18px;bottom:10px}}
.ma-player-band .ma-pos{flex-wrap:wrap;row-gap:2px}
@media (max-width:600px){.ma-player-band .ma-ctl .ma-eq{display:none}}
.ma-ctl .ma-skip{flex:none}