.hero {
    /* for video backdrop */
    position: relative;
    height: 46em;

    /* positioning */
    margin-top: calc(var(--header-height) * -1);
    padding-top: var(--header-height);

    & h1 {
        margin: 2rem auto;
        max-width: 20em;
    }

    & h1,
    & p {
        text-align: center;
    }

    & p {
        max-width: 32em;
        margin: 2rem auto;
    }

    & p a {
        margin: 0.5rem;
    }

    & .section {
        margin-bottom: 0;
        height: 100%;
    }

    & demo-stage {
        max-width: none;
    }

    & + .section {
        margin-top: 0;
    }
}

/* demo base theme */
demo-container {
    & file-pond {
        --default-color: #fff;
        --default-background-color: #404247;
    }

    & file-pond::part(drop-indicator) {
        --background-color: var(--color-edge);
    }

    & file-pond::part(drop-area) {
        --border: 1px solid var(--color-edge);
    }
}

:where(:root[data-theme='dark']) {
    & demo-container {
        & file-pond {
            --default-color: #fff;
            --default-background-color: #454b53;
        }
    }
}

/* overrides */
demo-stage {
    display: block;
    max-width: 50em;
    min-height: 5em;
    margin-top: 1em;
}

/* demo layout */
demo-container {
    display: block;
    transition: opacity 0.25s ease-in-out;

    &[state='loading'] {
        opacity: 0;
    }

    &[state='ready'] {
        opacity: 1;
    }

    &.layout-fill file-pond {
        max-width: 50em;
    }

    &.layout-wide file-pond {
        max-width: 30em;
    }

    &.grid-one-column file-pond::part(list) {
        display: grid;
        grid-template-columns: 1fr;
    }

    &.grid-two-columns file-pond::part(list) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    &.grid-uneven-columns file-pond::part(list) {
        display: grid;
        grid-template-columns: 0.75fr 0.25fr;
    }

    &.grid-three-columns file-pond::part(list) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    &.grid-tiles file-pond::part(list) {
        display: grid;
        grid-template-rows: 10em;
    }

    &.grid-tiles-alt file-pond::part(list) {
        display: grid;
        grid-template-rows: auto 10em;
    }
}

/* demo alt theme */
demo-container {
    &.theme-alt file-pond {
        --default-color: #fff;
        --default-background-color: #404247;
    }
}

:root[data-theme='dark'] {
    & demo-container {
        &.theme-alt file-pond {
            --default-color: #404247;
            --default-background-color: #fff;
        }
    }
}

/* specific stage styles */
demo-stage[name='springs'] {
    grid-column: 2 / 4;
    justify-self: stretch;
    min-height: 24em;

    & file-pond {
        max-width: 40em;
    }

    & demo-container.narrow {
        max-width: 20em;
    }
}

/*  */
demo-stage[name='hero'] {
    & file-pond {
        max-width: 20em;
    }

    & demo-container.wide file-pond {
        max-width: 40em;
    }

    & demo-container.grid file-pond::part(list) {
        display: grid;
        grid-template-columns: auto auto;
    }
}

video-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    opacity: 0;
    transition: opacity 1s ease-out;
    &[data-state='ready'] {
        opacity: 1;
    }

    & video {
        position: absolute;
        left: 0;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }
}

:root[data-theme='light'] video-backdrop {
    & video {
        height: 15em;
        bottom: -5em;
        mask-image: radial-gradient(closest-side, black 30%, transparent);
    }

    &::after {
        position: absolute;
        height: 5em;
        left: 0;
        right: 0;
        bottom: -5em;
        background: linear-gradient(transparent, white 40%);
        content: '';
    }
}

:root[data-theme='dark'] video-backdrop {
    /* 
    ease-in-out gradient 
    new Array(10).fill(0).map((_,index,arr) => index / arr.length).map((x) => -(Math.cos(Math.PI * x) - 1) / 2).map(v => Math.round(Math.abs(v) * 100) / 100).map((alpha, index) => `rgb(0 0 0 / ${alpha}) ${Math.round(index * 30) / 100}em,`)
    */
    mask-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0) 0em,
        rgb(0 0 0 / 0.02) 0.3em,
        rgb(0 0 0 / 0.1) 0.6em,
        rgb(0 0 0 / 0.21) 0.9em,
        rgb(0 0 0 / 0.35) 1.2em,
        rgb(0 0 0 / 0.5) 1.5em,
        rgb(0 0 0 / 0.65) 1.8em,
        rgb(0 0 0 / 0.79) 2.1em,
        rgb(0 0 0 / 0.9) 2.4em,
        rgb(0 0 0 / 0.98) 2.7em,
        black 3em
    );

    background-color: var(--color-background);
    & video {
        top: 0;
        height: 20em;
        opacity: 0.5;
        mask: radial-gradient(closest-side, black, transparent) no-repeat 0 -8em / 100% 20em;
        mix-blend-mode: screen;
    }
}

.landing pre {
}

.landing run-code {
}