/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

:root {
    --slider-duration: 7s;
}

.content .slider {
    position: relative;
    overflow: hidden;
    height: 50vw;
    min-height: 30rem;
    max-height: 70vh;
    margin: 0 0 0.1rem;
    background-color: var(--color-lightgrey);
}

.content .slider .slide {
    --duration: 1.125s;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform var(--duration) cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 1;
    z-index: 0;
    aspect-ratio: unset;
}

body:not(.is-interactive) .slide:first-of-type {
    z-index: 1;
}

.content .slider picture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    object-position: var(--focus-position);
    aspect-ratio: initial;
}

.content .slider .slide picture img {
    height: 100%;
    object-fit: cover;
}

.content .slider .is-queued {
    transform: translateY(-100%);
    opacity: 0;
}

.content .slider .is-prev {
    transform: translateY(100%);
}

/* Toggle */

.content .slider-toggle {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    overflow: visible;
    height: 0;
    margin: 0;
    z-index: var(--z-index-top);
}

.content .slider-toggle button {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    appearance: none;
    width: 2.9rem;
    height: 2.9rem;
    margin: 2.4rem;
    border: none;
    background: transparent;
}

.content .slider-toggle button[aria-pressed='true'] #play,
.content .slider-toggle button[aria-pressed='false'] #pause {
    display: none;
}

.content .slider-toggle button #timer {
    transform: rotate(-90deg);
    transform-origin: center;
    animation: timer var(--slider-duration, 7s) ease-in infinite;
    stroke-dasharray: 166;
    stroke-dashoffset: -166;
}

.content .slider-toggle button[aria-pressed='false'] #timer,
.is-delaying .slider-toggle button #timer {
    animation: none !important;
}

@keyframes timer {
    0% {
        stroke: #ef572f;
        stroke-dashoffset: -166;
    }
    98% {
        stroke: #ef572f;
        stroke-dashoffset: -332;
    }
    99% {
        stroke: transparent;
        stroke-dashoffset: -332;
    }
    100% {
        stroke: transparent;
        stroke-dashoffset: -166;
    }
}

.content .slider-toggle button::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    border-radius: 50%;
    background-image: conic-gradient(
        var(--color-jeweled-peach) var(--progress, 0),
        transparent var(--progress, 0)
    );
}

.content .slider-toggle button::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
}

/* Homepage */

#home .slider {
    height: calc(100vh + 4.9rem);
    min-height: 25rem;
    max-height: unset;
    margin-top: -25rem;
}

@media (min-width: 320px) {
    #home .slider {
        min-height: 80vw;
        margin-top: -80vw;
    }
}

#home .slider-toggle {
    bottom: 1.3rem;
    transform: translateY(1.3rem);
}