.section-background{
    width: 100%;
    max-width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.section-background[data-top-add-margin="1"]{
    margin-top: var(--block-margin);
}

.section-background[data-top-add-padding="1"] > .blocks-container{
    padding-top: var(--block-margin);
}

.section-background[data-top-remove-margin="1"] > .blocks-container > *:first-child{
    margin-top: 0;
}

.section-background[data-bottom-add-margin="1"]{
    margin-bottom: var(--block-margin);
}

.section-background[data-bottom-add-padding="1"] > .blocks-container{
    padding-bottom: var(--block-margin);
}

.section-background[data-bottom-remove-margin="1"] > .blocks-container > *:last-child{
    margin-bottom: 0;
}

.section-background > * {
    grid-column: 1;
    grid-row: 1;    
}

.section-background [data-color="cream"]{
    --color: var(--color-cream);
}

.section-background [data-color="orange"]{
    --color: var(--color-orange);
}

.section-background [data-color="teal"]{
    --color: var(--color-teal);
}

.section-background [data-color="red"]{
    --color: var(--color-red);
}

.section-background [data-color="lime"]{
    --color: var(--color-lime);
}

.section-background [data-color="pink"]{
    --color: var(--color-pink);
}

.section-background [data-color="lavender"]{
    --color: var(--color-lavender);
}

.section-background [data-color="grass"]{
    --color: var(--color-grass);
}

.section-background [data-color="babyblue"]{
    --color: var(--color-babyblue);
}

.section-background [data-color="seafoam"]{
    --color: var(--color-seafoam);
}

.section-background-image{
    background-color: rgba(0,0,0,.3);
    z-index: 1;
    pointer-events: none;
}

.section-background-image img{
    width: 100%;
    height: 0;
    min-height: 100%;
    opacity: 0.2;
}

.section-background-image[data-vertical="top"][data-horizontal="left"] img{
    object-position: top left;
}

.section-background-image[data-vertical="top"][data-horizontal="center"] img{
    object-position: top center;
}

.section-background-image[data-vertical="top"][data-horizontal="right"] img{
    object-position: top right;
}

.section-background-image[data-vertical="middle"][data-horizontal="left"] img{
    object-position: center left;
}

.section-background-image[data-vertical="middle"][data-horizontal="center"] img{
    object-position: center center;
}

.section-background-image[data-vertical="middle"][data-horizontal="right"] img{
    object-position: center right;
}

.section-background-image[data-vertical="bottom"][data-horizontal="left"] img{
    object-position: bottom left;
}

.section-background-image[data-vertical="bottom"][data-horizontal="center"] img{
    object-position: bottom center;
}

.section-background-image[data-vertical="bottom"][data-horizontal="right"] img{
    object-position: bottom right;
}

.section-background-image[data-fill="cover"] img{
    object-fit: cover;
}

.section-background-image[data-fill="contain"] img{
    object-fit: contain;
}

.section-background-gradient{
    --background-color: var(--color);

    z-index: 2;
    pointer-events: none;
}

.section-background-gradient[data-direction="top"]{
    background: linear-gradient(180deg, var(--color), transparent);
}

.section-background-gradient[data-direction="bottom"]{
    background: linear-gradient(0deg, var(--color), transparent);
}

.section-background-gradient[data-direction="left"]{
    background: linear-gradient(90deg, var(--color), transparent);
}

.section-background-gradient[data-direction="right"]{
    background: linear-gradient(270deg, var(--color), transparent);
}

.section-background-gradient[data-direction="bottom"] + .blocks-container .page-numbers {
    color: var(--dark-background-text-color);
}

.section-background-gradient[data-direction="bottom"] + .blocks-container .photo-carousel-navigation button svg path {
    --link-color: var(--light-background-link-color);
}

.section-background-blob{
    z-index: 3;
    width: calc(var(--wide-width) * 1.5);
    max-width: 100%;
    height: 0;
    margin: 0 auto;
    pointer-events: none;
}

.section-background-blob:is([data-position="before"], [data-position="top"]){
    align-self: start;
}

.section-background-blob[data-position="middle"]{
    align-self: center;
}

.section-background-blob:is([data-position="bottom"], [data-position="after"]){
    align-self: end;
}

.section-background-blob-inner{
    width: 100%;
}

.section-background-blob:is([data-position="before"], [data-position="middle"], [data-position="after"]) .section-background-blob-inner{
    transform: translateY(-50%);
}

.section-background-blob:is([data-position="bottom"], [data-position="after"]) .section-background-blob-inner{
    transform: translateY(-100%);
}

.section-background-blob svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: blur(14rem);
}

.section-background-blob[data-direction="right"] svg{
    transform: rotateZ(180deg);
}

.section-background-blob svg path{
    fill: var(--color);
}

.section-background-graphic{
    z-index: 4;
    pointer-events: none;
    width: calc(50% + 15rem);
}

.section-background-graphic[data-depth="above"]{
    z-index: 6;
}

.section-background-graphic[data-position="middle"]{
    align-self: center;
}

.section-background-graphic[data-position="bottom"]{
    align-self: end;
}

.section-background-graphic[data-alignment="left"]{
    justify-self: start;
}

.section-background-graphic[data-alignment="right"]{
    justify-self: end;
}

.section-background-graphic :is(img, svg){
    --path-length: 10000;

    width: 100%;
    color: var(--color);
    opacity: 0;
    transition: all 1s ease 0.5s;
}

.section-background-graphic.animated :is(img, svg){
    opacity: 1;
}

.section-background-graphic svg path {
    stroke-dasharray: var(--path-length);
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

/*.section-background-graphic svg path:not([stroke]){
    stroke: var(--color);
}

.section-background-graphic[data-alignment="left"] svg path{
    stroke-dashoffset: var(--path-length);
}

.section-background-graphic[data-alignment="right"] svg path{
    stroke-dashoffset: calc(var(--path-length) * -1);
}

.section-background-graphic.animated svg path{
    animation-name: section-background-draw;
}*/

.section-background > .blocks-container{
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
    align-self: center;
}

.section-background[data-primary-button="teal"]{
    --light-background-primary-button-border-color: var(--color-teal);
    --light-background-primary-button-background-color: var(--color-teal);
    --light-background-primary-button-text-color: var(--color-white);
    --light-background-primary-button-hover-border-color: var(--color-red);
    --light-background-primary-button-hover-background-color: var(--color-red);
    --light-background-primary-button-hover-text-color: var(--color-white);
    --dark-background-primary-button-border-color: var(--color-teal);
    --dark-background-primary-button-background-color: var(--color-teal);
    --dark-background-primary-button-text-color: var(--color-white);
    --dark-background-primary-button-hover-border-color: var(--color-red);
    --dark-background-primary-button-hover-background-color: var(--color-red);
    --dark-background-primary-button-hover-text-color: var(--color-white);
}

.section-background[data-primary-button="white"]{
    --light-background-primary-button-border-color: var(--color-white);
    --light-background-primary-button-background-color: var(--color-white);
    --light-background-primary-button-text-color: var(--color-teal);
    --light-background-primary-button-hover-border-color: var(--color-red);
    --light-background-primary-button-hover-background-color: var(--color-red);
    --light-background-primary-button-hover-text-color: var(--color-white);
    --dark-background-primary-button-border-color: var(--color-white);
    --dark-background-primary-button-background-color: var(--color-white);
    --dark-background-primary-button-text-color: var(--color-teal);
    --dark-background-primary-button-hover-border-color: var(--color-red);
    --dark-background-primary-button-hover-background-color: var(--color-red);
    --dark-background-primary-button-hover-text-color: var(--color-white);
}

@keyframes section-background-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes section-background-draw-reverse {
    from {
        stroke-dashoffset: calc(var(--path-length) * -1);
    }
    to {
        stroke-dashoffset: 0;
    }
}