/* Six ambient backgrounds: two bounded layers, moving only transforms/opacity. */
[data-site-background^="background-animated-"] { --site-background-size: cover; --site-background-repeat: no-repeat; --ambient-size-one: cover; --ambient-size-two: cover; }
body[data-site-background^="background-animated-"] { isolation: isolate; }
.site-theme-sample[data-site-background^="background-animated-"] { position: relative; isolation: isolate; overflow: hidden; }
body[data-site-background^="background-animated-"]::before,
body[data-site-background^="background-animated-"]::after,
.site-theme-sample[data-site-background^="background-animated-"]::before,
.site-theme-sample[data-site-background^="background-animated-"]::after {
  content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background: var(--ambient-layer-one); background-size: var(--ambient-size-one, cover);
  opacity: .65; transform-origin: center;
  animation: var(--ambient-motion-one, ambient-sway) var(--ambient-duration, 24s) ease-in-out infinite alternate;
}
body[data-site-background^="background-animated-"]::after,
.site-theme-sample[data-site-background^="background-animated-"]::after {
  background: var(--ambient-layer-two); background-size: var(--ambient-size-two, cover);
  animation-name: var(--ambient-motion-two, ambient-breathe); animation-delay: -8s;
  animation-duration: var(--ambient-duration-two, 32s); opacity: .5;
}
.site-theme-sample[data-site-background^="background-animated-"]::before,
.site-theme-sample[data-site-background^="background-animated-"]::after { position: absolute; }

[data-site-background="background-animated-aurora-flow"] {
  --site-background-image: linear-gradient(135deg, #0b1d24, #13152b);
  --ambient-layer-one: linear-gradient(115deg, transparent 15%, #4ad6aa44 28%, #78eac42e 34%, transparent 44%, #6385e54a 62%, transparent 76%);
  --ambient-layer-two: radial-gradient(ellipse at 75% 20%, #a35bdf52, transparent 55%), linear-gradient(70deg, transparent 25%, #3da8a836 45%, transparent 58%);
  --ambient-duration: 24s; --ambient-duration-two: 32s;
  --ambient-motion-one: ambient-sway; --ambient-motion-two: ambient-breathe;
}
[data-site-background="background-animated-neon-rain"] {
  --site-background-image: linear-gradient(150deg, #10182b, #151027);
  --ambient-layer-one: repeating-linear-gradient(110deg, transparent 0 65px, #67daee38 66px 67px, transparent 68px 104px);
  --ambient-layer-two: repeating-linear-gradient(110deg, transparent 0 125px, #e37bcc30 126px 128px, transparent 129px 176px);
  --ambient-size-one: 130px 100%; --ambient-size-two: 210px 100%;
  --ambient-duration: 16s; --ambient-duration-two: 22s;
  --ambient-motion-one: ambient-rain; --ambient-motion-two: ambient-rain;
}
[data-site-background="background-animated-ember-drift"] {
  --site-background-image: radial-gradient(ellipse at 30% 100%, #b95b2524, transparent 55%), radial-gradient(ellipse at 50% 100%, #4d251d, #17131b 70%);
  --ambient-layer-one: url("/assets/ember-field-near.svg");
  --ambient-layer-two: url("/assets/ember-field-far.svg"), radial-gradient(ellipse at 28% 88%, #da702d55, transparent 57%);
  --ambient-size-one: 997px 773px; --ambient-size-two: 839px 1061px, cover;
  --ambient-duration: 12s; --ambient-duration-two: 9s;
  --ambient-motion-one: ambient-rise; --ambient-motion-two: ambient-breathe;
}
[data-site-background="background-animated-arcade-horizon"] {
  --site-background-image: radial-gradient(ellipse at 50% 20%, #422445, #11182c 70%);
  --ambient-layer-one: linear-gradient(#b880da3b 1px, transparent 1px), linear-gradient(90deg, #6bbfda38 1px, transparent 1px);
  --ambient-layer-two: radial-gradient(ellipse at 50% 42%, #eead7440, transparent 34%), linear-gradient(0deg, transparent 46%, #d687ba33 50%, transparent 55%);
  --ambient-size-one: 64px 64px; --ambient-size-two: cover;
  --ambient-duration: 20s; --ambient-duration-two: 26s;
  --ambient-motion-one: ambient-grid; --ambient-motion-two: ambient-breathe;
}
[data-site-background="background-animated-prism-tide"] {
  --site-background-image: linear-gradient(140deg, #162128, #22182c);
  --ambient-layer-one: conic-gradient(from 40deg at 35% 65%, transparent, #9d73d938, #75c6c03d, transparent 55%, #d09d5b30, transparent);
  --ambient-layer-two: conic-gradient(from 230deg at 70% 40%, transparent, #db85b43b, transparent 40%, #78a7db45, transparent);
  --ambient-duration: 35s; --ambient-duration-two: 42s;
  --ambient-motion-one: ambient-prism; --ambient-motion-two: ambient-sway;
}
[data-site-background="background-animated-event-horizon"] {
  --site-background-image: radial-gradient(ellipse at 70% 28%, #231e36, #0c1020 70%);
  --ambient-layer-one: radial-gradient(ellipse at center, transparent 26%, #a293d912 27%, #9fbfea55 28%, #ab84d333 29%, transparent 31%, #819cdf12 35%, transparent 41%);
  --ambient-layer-two: radial-gradient(ellipse at center, transparent 23%, #e9c58b40 24%, transparent 25% 32%, #8e96ce33 33%, transparent 35%);
  --ambient-duration: 22s; --ambient-duration-two: 30s;
  --ambient-motion-one: ambient-orbit; --ambient-motion-two: ambient-orbit-reverse;
}
body[data-site-background="background-animated-event-horizon"]::before,
body[data-site-background="background-animated-event-horizon"]::after,
.site-theme-sample[data-site-background="background-animated-event-horizon"]::before,
.site-theme-sample[data-site-background="background-animated-event-horizon"]::after {
  animation-timing-function: linear; animation-direction: normal;
  mask-image: conic-gradient(from 20deg, #0003, #000 55deg 220deg, #0003 300deg, #0003);
}

@keyframes ambient-sway { from { transform: translate(-4%, -2%) skewX(-8deg); } to { transform: translate(4%, 3%) skewX(8deg); } }
@keyframes ambient-breathe { from { transform: scale(.96); opacity: .35; } to { transform: scale(1.07); opacity: .7; } }
@keyframes ambient-rain { from { transform: translate(-3%, -5%); } to { transform: translate(3%, 5%); } }
@keyframes ambient-rise { from { transform: translate(-2%, 6%); opacity: .35; } to { transform: translate(2%, -6%); opacity: .8; } }
@keyframes ambient-grid { from { transform: perspective(700px) rotateX(28deg) translateY(-3%) scale(1.1); } to { transform: perspective(700px) rotateX(28deg) translateY(3%) scale(1.1); } }
@keyframes ambient-prism { from { transform: rotate(-10deg) scale(1.1); } to { transform: rotate(10deg) scale(1.2); } }
@keyframes ambient-orbit { from { transform: rotate(0deg) scale(1.08); } to { transform: rotate(360deg) scale(1.08); } }
@keyframes ambient-orbit-reverse { from { transform: rotate(0deg) scale(.98); } to { transform: rotate(-360deg) scale(.98); } }

body[data-background-paused]::before, body[data-background-paused]::after,
body[data-theme-hidden]::before, body[data-theme-hidden]::after,
body[data-theme-hidden] .site-theme-sample::before, body[data-theme-hidden] .site-theme-sample::after,
#shopView.previews-paused .site-theme-sample::before, #shopView.previews-paused .site-theme-sample::after { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
  body[data-site-background^="background-animated-"]:not([data-background-play])::before, body[data-site-background^="background-animated-"]:not([data-background-play])::after,
  body:not([data-grinder-motion="full"]) .site-theme-sample[data-site-background^="background-animated-"]::before, body:not([data-grinder-motion="full"]) .site-theme-sample[data-site-background^="background-animated-"]::after { animation: none; }
}

/* Two-colour accents: main text/buttons plus a distinct trim and panel colour. */
body { --site-accent-secondary: var(--site-accent); }
body[data-site-accent] {
  --panel: color-mix(in srgb, #181e22 90%, var(--site-accent-secondary));
  --line: color-mix(in srgb, #343c40 65%, var(--site-accent-secondary));
}
body[data-site-accent] :is(.join-panel, .ledger, .recent-outcomes-section, .leaderboard-section, .daily-board, .stats-chart-panel, .hr-machine, .account-menu) { border-top-color: var(--site-accent-secondary); }
body[data-site-accent] .site-tabs button[aria-selected="true"] { border-bottom-color: var(--site-accent-secondary); }
body[data-site-accent] .shop-card.equipped { border-color: var(--site-accent-secondary); }
.site-theme-sample-heading { border-bottom-color: var(--site-accent-secondary); }
.site-theme-sample-panels i:first-child { border-top-color: var(--site-accent); }
.site-theme-sample-panels i:last-child { border-top: 2px solid var(--site-accent-secondary); }

/* Only sparks tile; the animated glow covers its layer once. */
body[data-site-background="background-animated-ember-drift"]::after,
.site-theme-sample[data-site-background="background-animated-ember-drift"]::after{background-repeat:repeat,no-repeat}

body[data-grinder-motion="reduced"] .site-theme-sample::before,body[data-grinder-motion="reduced"] .site-theme-sample::after{animation:none}