@import url("fonts/fonts.css");

body {
    background: #333;
}

.poster {
    contain: strict;
    container-type: size;
    container-name: poster;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-sizing: border-box;
    margin: 0;
    padding: 1em;
    row-gap: 1em;

    aspect-ratio: 1080/1350;
    /*min-width: min(min(100cqw, 100cqh), 400px);
    min-height: calc(min(min(100cqw, 100cqh), 400px) / 0.8);*/
    overflow: auto;

    color: #fff;
    background: #888;
    border: 1px solid black;
    color-scheme: dark;

    font:
        3cqw Jost,
        Futura,
        "Futura Std",
        sans-serif;
    text-align: center;

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        1.5px 1.5px 4px black;
}

.poster > * {
    flex: 0;
    margin: 0;
}

.poster * {
    font-size: 1em;
}

.poster small {
    font-size: 0.8em;
}

.poster > .logo {
    flex-basis: 20cqh;
    margin-bottom: -0.5em;
    overflow: hidden;
    filter: drop-shadow(4px 4px 4px black);
    color: rgba(0, 0, 0, 0);
}
.poster > .logo:before {
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    background: #fff;
    mask-image: url(balmainsinfonia-horizontal.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.poster > h1 {
    margin: 0;
    flex-basis: 10cqh;
    font-size: 3em;
    font-weight: 600;
}

.poster > summary {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 1em;
    font-size: 1.5em;
    font-weight: 500;
}

.poster time,
.poster address {
    font-style: normal;
}
.poster address {
    flex: 1 1 60%;
    font-size: 0.9em;
    font-weight: 300;
}

.poster > dl {
    align-content: center;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    row-gap: 1em;
    column-gap: 1em;
}
.poster > dl.credits {
    flex: 1;
}

.poster > dl > * {
    width: 50%;
    margin: 0;
    box-sizing: border-box;
}

.poster > dl > dt {
    text-align: right;
    flex: 1 1 40%;

    font-weight: 600;
}
.poster > dl > dd {
    text-align: left;
    flex: 1 1 40%;

    font-weight: 400;
}

.poster > dl.credits > dt {
    font-weight: 400;
}
.poster > dl.credits > dd {
    font-weight: 600;
}

.poster > footer {
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    font-weight: 350;
}
.poster > footer > * {
    margin: 0;
}
.poster > footer > a {
    font-size: 2em;
    color: inherit;
    text-decoration: inherit;
    font-weight: 400;
}

.poster > .photo-credit {
    position: absolute;
    bottom: 1lh;
    right: 1lh;
    text-align: right;

    font-size: 0.6em;
    font-style: normal;

    color: #ccc;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.poster > a.overlay {
    display: block;
    position: absolute;
    top: -1lh;
    right: 0;
    left: 0;
    bottom: 0;
}

/************\
 * POSTER 1 *
\************/

@property --crepuscular {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes crepuscular {
    from {
        --crepuscular: 0deg;
    }
    to {
        --crepuscular: 90deg;
    }
}
.poster#concert-2026-1 {
    animation: crepuscular linear 60s 5;
    background:
        linear-gradient(
            to bottom,
            rgb(19, 27, 40) 0%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 80%,
            rgb(243, 134, 15) 85%,
            rgb(94, 33, 2) 90%,
            rgb(17, 12, 8) 95%,
            rgb(11, 7, 6) 100%
        ),
        repeating-conic-gradient(
            from calc(var(--crepuscular) + 30deg) at 25% 125%,
            rgba(0, 0, 0, 0),
            rgb(243, 134, 15, 0.4),
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0) 90deg
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgb(66, 116, 143) 60%,
            rgb(172, 151, 120) 80%,
            rgb(172, 151, 120) 100%
        ),
        rgb(19, 27, 40);
}

/************\
 * POSTER 2 *
\************/

.poster#concert-2026-2 {
    background: none;
}
.poster#concert-2026-2::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;

    /* Photo by JJ Shev on Unsplash */
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.5) 100%
        ),
        url(concert-2026-2-bg.jpg);
    background-size: cover;
    background-color: brown;
    filter: blur(2px);
}

/************\
 * POSTER 3 *
\************/

.poster#concert-2026-3 {
    background: none;
}
.poster#concert-2026-3::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;

    /* Photo by Nir Himi on Unsplash */
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.5) 100%
        ),
        url(concert-2026-3-bg.jpg);
    background-size: cover;
    background-color: slategray;
    filter: blur(2px);
}

/************\
 * POSTER 4 *
\************/

.poster#concert-2026-4 {
    background: none;
}

.poster#concert-2026-4::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;

    /* Photo by Olga Angelucci on Unsplash */
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.5) 100%
        ),
        url(concert-2026-4-bg.jpg);
    background-size: cover;
    background-color: maroon;
    filter: blur(2px);
}