/* Opt-in section surfaces. No section count, page-specific selector or extra DOM is required. */
[data-theme-section-style]:not([data-theme-section-style="original"]) [data-theme-section] {
    --ts-section-background: var(--ts-background);
    --ts-section-text: var(--ts-text);
    --ts-motif-primary: color-mix(in srgb, var(--ts-primary) var(--ts-intensity), transparent);
    --ts-motif-secondary: color-mix(in srgb, var(--ts-secondary) var(--ts-intensity), transparent);
    --ts-relief-highlight: color-mix(in srgb, white var(--ts-intensity), transparent);
    background-color: var(--ts-section-background);
    background-image: none;
    background-repeat: no-repeat;
    color: var(--ts-section-text);
}

[data-theme-section-style]:not([data-theme-section-style="original"]) [data-theme-section="soft"] {
    --ts-section-background: color-mix(in srgb, var(--ts-primary) 7%, var(--ts-background));
}

[data-theme-section-style="circles"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-image:
        radial-gradient(circle at 98% 12%, transparent 0 65px, var(--ts-motif-primary) 66px 100px, transparent 101px),
        radial-gradient(ellipse 190px 190px at -30px 88%, var(--ts-motif-secondary) 99%, transparent 100%);
}

[data-theme-section-style="waves"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-image:
        radial-gradient(ellipse 85% 140px at 12% calc(100% + 65px), var(--ts-motif-primary) 98%, transparent 100%),
        radial-gradient(ellipse 65% 115px at 96% -50px, var(--ts-motif-secondary) 98%, transparent 100%);
}

[data-theme-section-style="blocks"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-image:
        linear-gradient(115deg, var(--ts-motif-primary) 0 12%, transparent 12%),
        linear-gradient(295deg, var(--ts-motif-secondary) 0 10%, transparent 10%);
}

[data-theme-section-style="moon"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-image:
        radial-gradient(circle 55px at calc(100% - 34px) 57px, var(--ts-section-background) 98%, transparent 100%),
        radial-gradient(circle 65px at calc(100% - 61px) 79px, transparent 96%, var(--ts-relief-highlight) 98% 100%, transparent 102%),
        radial-gradient(circle 65px at calc(100% - 60px) 80px, var(--ts-motif-secondary) 98%, transparent 100%),
        radial-gradient(circle 69px at calc(100% - 58px) 83px, var(--ts-motif-primary) 88%, transparent 100%),
        radial-gradient(ellipse 170px 55px at 29px calc(100% - 21px), transparent 95%, var(--ts-relief-highlight) 98%, transparent 101%),
        radial-gradient(ellipse 170px 55px at 30px calc(100% - 20px), var(--ts-motif-primary) 98%, transparent 100%);
}

[data-theme-section-style="lantern"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-image:
        radial-gradient(ellipse 36px 48px at calc(100% - 61px) 82px, transparent 94%, var(--ts-relief-highlight) 98% 100%, transparent 103%),
        radial-gradient(ellipse 36px 48px at calc(100% - 60px) 83px, var(--ts-motif-secondary) 98%, transparent 100%),
        radial-gradient(ellipse 40px 52px at calc(100% - 58px) 86px, var(--ts-motif-primary) 80%, transparent 100%),
        linear-gradient(var(--ts-motif-primary), var(--ts-motif-primary)),
        linear-gradient(var(--ts-motif-primary), var(--ts-motif-primary)),
        radial-gradient(ellipse 27px 37px at 29px calc(100% - 66px), transparent 94%, var(--ts-relief-highlight) 98% 100%, transparent 103%),
        radial-gradient(ellipse 27px 37px at 30px calc(100% - 65px), var(--ts-motif-secondary) 98%, transparent 100%),
        radial-gradient(ellipse 31px 41px at 32px calc(100% - 62px), var(--ts-motif-primary) 80%, transparent 100%),
        linear-gradient(var(--ts-motif-primary), var(--ts-motif-primary)),
        linear-gradient(var(--ts-motif-primary), var(--ts-motif-primary));
    background-size: auto, auto, auto, 2px 40px, 28px 4px, auto, auto, auto, 2px 34px, 22px 4px;
    background-position: 0 0, 0 0, 0 0, calc(100% - 60px) 0, calc(100% - 47px) 37px,
        0 0, 0 0, 0 0, 30px 100%, 20px calc(100% - 100px);
}

/* Blend only the background image with its section surface, leaving every child fully opaque. */
[data-theme-section-style="custom"] [data-theme-section]:not([data-theme-section="contrast"]) {
    --ts-image-tint: color-mix(in srgb, var(--ts-section-background) var(--ts-transparency), transparent);
    background-image: linear-gradient(var(--ts-image-tint), var(--ts-image-tint)), var(--ts-image, none);
    background-size: 100% 100%, clamp(120px, 24vw, 300px) auto;
    background-position: center, right 24px top 24px;
    background-repeat: no-repeat;
}

[data-theme-section-style="custom"][data-theme-section-image-layout="cover"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-size: 100% 100%, cover;
    background-position: center;
}

[data-theme-section-style="custom"][data-theme-section-image-layout="tile"] [data-theme-section]:not([data-theme-section="contrast"]) {
    background-size: 100% 100%, 180px auto;
    background-position: 0 0;
    background-repeat: no-repeat, repeat;
}

/* Strong surfaces keep their reliable text contrast; decorative ink stays on lighter sections. */
[data-theme-section-style]:not([data-theme-section-style="original"]) [data-theme-section="contrast"] {
    --ts-section-background: var(--ts-primary);
    --ts-section-text: var(--ts-on-primary);
    background-image: none;
}

/* A flow owns one continuous canvas. Its content sections separate with spacing,
   so adding a section does not restart the motif or introduce another color band. */
[data-theme-section-style]:not([data-theme-section-style="original"]) [data-theme-section-flow] [data-theme-section]:not([data-theme-section="contrast"]) {
    --ts-section-background: var(--ts-background);
    background: transparent;
}

@media (max-width: 767px) {
    [data-theme-section-style="circles"] [data-theme-section]:not([data-theme-section="contrast"]) {
        background-image:
            radial-gradient(circle at 110% 6%, transparent 0 45px, var(--ts-motif-primary) 46px 70px, transparent 71px),
            radial-gradient(ellipse 100px 100px at -35px 92%, var(--ts-motif-secondary) 99%, transparent 100%);
    }
    [data-theme-section-style="waves"] [data-theme-section]:not([data-theme-section="contrast"]) {
        background-image:
            radial-gradient(ellipse 110% 85px at 12% calc(100% + 45px), var(--ts-motif-primary) 98%, transparent 100%),
            radial-gradient(ellipse 95% 70px at 96% -35px, var(--ts-motif-secondary) 98%, transparent 100%);
    }
}