/* Shared low-contrast page motifs for sections without their own backdrop. */
body.section-ambience--training:not(.light) {
    background:
        url('/images/workouts/workout-backdrop.svg') right -2rem top 7rem / min(43rem, 75vw) auto no-repeat,
        radial-gradient(ellipse at 88% 10%, rgba(var(--gg-secondary-rgb), .11), transparent 27rem),
        radial-gradient(ellipse at 4% 58%, rgba(var(--gg-primary-rgb), .07), transparent 29rem),
        linear-gradient(180deg, var(--gg-bg) 0%, #0a1022 42%, var(--gg-bg) 100%) !important;
}

html body.light.section-ambience--training {
    background:
        url('/images/workouts/workout-backdrop-light.svg') right -2rem top 7rem / min(43rem, 75vw) auto no-repeat,
        radial-gradient(ellipse at 88% 10%, rgba(var(--gg-secondary-rgb), .07), transparent 27rem),
        radial-gradient(ellipse at 4% 58%, rgba(var(--gg-primary-rgb), .05), transparent 29rem),
        linear-gradient(155deg, #fdfcff, #f6f3fc 55%, #f1edf8) !important;
}

body.section-ambience--story:not(.light) {
    background:
        url('/images/gamification/story-backdrop.svg') right -5rem top 7rem / min(62rem, 88vw) auto no-repeat,
        radial-gradient(ellipse at 82% 13%, rgba(var(--gg-warning-rgb), .09), transparent 30rem),
        radial-gradient(ellipse at 9% 58%, rgba(var(--gg-primary-rgb), .08), transparent 28rem),
        linear-gradient(180deg, var(--gg-bg) 0%, #0d1026 48%, var(--gg-bg) 100%) !important;
}

html body.light.section-ambience--story {
    background:
        url('/images/gamification/story-backdrop-light.svg') right -5rem top 7rem / min(62rem, 88vw) auto no-repeat,
        radial-gradient(ellipse at 82% 13%, rgba(var(--gg-warning-rgb), .07), transparent 30rem),
        radial-gradient(ellipse at 9% 58%, rgba(var(--gg-primary-rgb), .06), transparent 28rem),
        linear-gradient(155deg, #fdfcff, #f6f3fc 55%, #f1edf8) !important;
}

@media (max-width: 767px) {
    body.section-ambience--training:not(.light),
    html body.light.section-ambience--training {
        background-size: min(35rem, 95vw) auto, auto, auto, auto !important;
        background-position: right -1.5rem top 9rem, center, center, center !important;
    }

    body.section-ambience--story:not(.light),
    html body.light.section-ambience--story {
        background-size: min(38rem, 105vw) auto, auto, auto, auto !important;
        background-position: right -4rem top 8rem, center, center, center !important;
    }
}