/* ===== PHOTOGRAPHY =====
   Content and order from portfolio '25 (single column, newest first), restyled to the PF26
   project pages: same column, back arrow, title + summary, media radius and spring entry.
   Shares css/project.css and js/project.js (lightbox, edge blur, scroll-to-top, reveal). */

.photo-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 64px;
}

.photo-list > .media + .media {
    margin-top: 0;               /* the list's gap does the spacing */
}

.photo-list > .media > img {
    aspect-ratio: 1600 / 1064;
    object-fit: cover;
}

/* the first photos join the page entry (back 0, title 1, summary 2, then 50ms apart);
   the rest rise in as they scroll into view ([data-reveal] in css/project.css) */
.photo-list > .media:nth-child(-n + 3):not(.is-pending) {
    opacity: 0;
    animation:
        pp-rise var(--spring-dur) cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--i, 0) * var(--stagger)) both,
        pp-clear var(--spring-dur) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * var(--stagger)) both;
}

@supports (animation-timing-function: linear(0, 1)) {
    .photo-list > .media:nth-child(-n + 3):not(.is-pending) {
        animation:
            pp-rise var(--spring-dur) var(--spring) calc(var(--i, 0) * var(--stagger)) both,
            pp-clear var(--spring-dur) var(--spring-capped) calc(var(--i, 0) * var(--stagger)) both;
    }
}

.photo-list > .media:nth-child(1) { --i: 4; }
.photo-list > .media:nth-child(2) { --i: 5; }
.photo-list > .media:nth-child(3) { --i: 6; }

@media (prefers-reduced-motion: reduce) {
    .photo-list > .media:nth-child(-n + 3) {
        animation: fade-in 0.3s ease-out forwards !important;
    }
}

@media (max-width: 760px) {
    .photo-list {
        gap: 16px;
        margin-top: 40px;
    }
}