/* Shared, progressive finishing layer. Keep the existing layout styles. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: photography-page-out .2s ease both;
}

::view-transition-new(root) {
    animation: photography-page-in .3s ease both;
}

@keyframes photography-page-out {
    to { opacity: 0; }
}

@keyframes photography-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* A short entrance also works in browsers without cross-document transitions.
   Links remain normal links: no artificial navigation delay or loading screen. */
.homepage,
.photo-feed {
    animation: photography-page-in .35s ease both;
}

.homepage .navigation .navigation__item {
    border-bottom: .0625rem solid transparent;
    padding-bottom: .2rem;
    color: #676762;
    transition: color .2s ease, border-color .2s ease;
}

.homepage .navigation .navigation__item:hover {
    color: #20201e;
    border-bottom-color: #aaa9a0;
}

.homepage .carousel-controls .slide-selector {
    color: #c8cccb;
    border-radius: 0;
    transition: background-color .2s ease, color .2s ease;
}

.homepage .pause-input:checked ~ .carousel-controls .slide-selector {
    animation-play-state: paused !important;
}

.photo-feed .photo-feed__header > .container {
    padding-inline: clamp(1.25rem, 3vw, 3rem);
}

.photo-feed .photo-feed__header nav {
    margin-left: auto;
}

.photo-feed .photo-feed__filter {
    color: #686863;
    opacity: 1;
    transition: color .2s ease, border-color .2s ease;
}

.photo-feed .photo-feed__filter:hover,
.photo-feed .photo-feed__filter[aria-current="true"] {
    color: #20201e;
}

.photo-feed .photo-feed__filter[aria-current="true"] {
    border-bottom-color: currentColor;
}

.photo-feed .photo-feed__item,
.photo-feed .photo-feed__image {
    border-radius: 0;
}

.photo-feed .photo-feed__image-link {
    background: #f1f0ed;
}

/* Only animate loaded images, never hide content while waiting for JavaScript. */
.photo-feed .photo-feed__image.is-revealed {
    animation: photography-image-in .65s cubic-bezier(.2, .6, .3, 1) both;
}

@keyframes photography-image-in {
    from {
        opacity: .15;
        transform: translateY(.5rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.photo-feed-page .glightbox-container .gslide-description {
    background: #171918;
}

.photo-feed-page .glightbox-container .gdesc-inner {
    padding: .8rem 1.25rem;
}

.photo-feed-page .glightbox-container .gslide-title {
    margin: 0;
    color: #eeefeb;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .025rem;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    .homepage,
    .photo-feed,
    .photo-feed .photo-feed__image.is-revealed {
        animation: none !important;
    }

    .homepage .photo-auto:checked ~ .carousel-controls .slide-selector {
        animation: none !important;
        background-color: transparent;
        color: #c8cccb;
        border-bottom-color: transparent;
    }

    .homepage .photo-auto:checked ~ .carousel-controls .slide-selector:first-child {
        background-color: rgba(255, 255, 255, .14);
        color: #fff;
        border-bottom-color: #fff;
    }

    .photo-feed .photo-feed__filter {
        transition: none;
    }
}