:root { --title-svg: url('./images/title-rclc-w.svg'); }

@media (prefers-color-scheme: dark) {
    :root { --title-svg: url(./images/title-rclc-w.svg); }
}

@media only screen {
    canvas { display: none; }
    .bg--dark .page-image { background-color: #953a1f; color: white; }

    .textured { position: relative; z-index: 1;
        &::after { position: absolute; top: 0; left: 0; width: 100%; height: auto; content: ""; background: url(./images/txt-red-1200.webp) center / cover no-repeat; z-index: 0; transform: scale(1.1); }
        &.texture--red::after { background: url(./images/txt-red-1200.webp) center / cover no-repeat; }
        &.texture--orange::after { background: url(./images/txt-orange-1200.webp) center / cover no-repeat; }
        &.texture--green::after { background: url(./images/txt-green-1200.webp) center / cover no-repeat; }
        &.texture--blue::after { background: url(./images/txt-blue-1200.webp) center / cover no-repeat; }
        &.avatar::after { border-radius: 50%; aspect-ratio: 1 / 1; }
        img { position: relative; z-index: 1; }
        figcaption { margin-block: 2rem 0 }
    }

    .page-title {
        text-indent: -999vw;
        line-height: 0;
        margin-block-end: 0;
    }

    .page-title-wrapper::before {
        content: "";
        background-image: var(--title-svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: auto;
        aspect-ratio: 102.37 / 65.69;
        position: relative;
        display: block;
        margin-inline: auto;
        margin-bottom: 2em;
    }

    .bg-anim .play-pause {
        border: none;
        bottom: 1rem;
        color: #000;
        padding: 0;
        position: absolute;
        right: 1rem;
        z-index: 10
    }

    .bg-anim .play-pause,
    .bg-anim .play-pause:focus,
    .bg-anim .play-pause:hover {
        background: transparent
    }

    .bg-anim .play-pause .icon {
        height: max(44px,min(2vw,50px));
        width: max(44px,min(2vw,50px));
        fill: currentColor
    }

    .bg-anim .play-pause svg {
        border-radius: 50%;
        transition: background-color 125ms ease-in-out;
        transition: background-color var(--anim-duration-fast) var(--anim-ease)
    }

    .bg-anim .play-pause:focus svg,
    .bg-anim .play-pause:hover svg {
        background-color: hsla(0,0%,100%,.2)
    }

    .bg-anim .play-pause:focus svg {
        border: 2px solid #15a6b5;
        border: 2px solid var(--link-focus)
    }
    .bg-anim .play-pause { display: none; }
}


@media only screen and (min-width: 60em) {
    canvas { width: 100%; height: 100%; display: block; aspect-ratio: 2 / 1.5; opacity: 0; transition: opacity 1s ease; }
     .page-title-wrapper::before {
        background-image: url('./images/title-rclc-w.svg');
     }
    .page-header--container:has(.page-image) .page-title-wrapper {
        grid-column: 2 / span 10
    }
    .bg-anim::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle,rgba(149, 58, 31, 1) 0%, rgba(149, 58, 31, 0) 100%);
        top: 0;
        left: 0; 
        z-index: 1;
    }
    .bg-anim .play-pause {
        bottom:1.5rem;
        right: 1.5rem
    }
    .bg-anim .play-pause { display: block; }
}

@media only screen and (min-width: 75em) {
    canvas { aspect-ratio: 2 / 1; }
    .page-header--container:has(.page-image) .page-title-wrapper {
        grid-column: 4 / span 6
    }
}

@media print {
    .bg--dark .page-image { display: none; }
    canvas { display: none; }
    .page-title { text-indent: -999em; }
    .page-title-wrapper::before {
        content: "";
        background: url('./images/title-rclc-cl.svg') center center / contain no-repeat;
        width: 100%;
        height: auto;
        aspect-ratio: 102.37 / 65.69;
        position: relative;
        display: block;
        margin-inline: auto;
        margin-bottom: 2em;
        max-width: 50vw;
    }
}