/* Animations. All of them are skipped for visitors who ask the system to reduce motion. */

@media (prefers-reduced-motion: no-preference) {
    /* Page titles rise word by word, out of a mask (pure CSS: also runs without JS). */
    .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
    .word > span { display: inline-block; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) calc(0.1s + var(--i) * 60ms) both; }
    @keyframes rise { from { transform: translateY(105%); } }

    /* Main image of the page: opens like a curtain on load, the photo settling inside. */
    .photo--intro { animation: curtain 1.3s cubic-bezier(0.7, 0, 0.2, 1) 0.1s both; }
    .photo--intro > img { animation: settle 2s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s both; }
    @keyframes curtain { from { clip-path: inset(0 0 100% 0); } }
    @keyframes settle { from { scale: 1.18; } }

    /* ...then drifts slower than the page (parallax), where scroll-driven animations exist. */
    @supports (animation-timeline: view()) {
        .photo--intro > img {
            top: -8%;
            height: 116%;
            animation: settle 2s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s both, drift linear both;
            animation-timeline: auto, view();
        }
        @keyframes drift { from { translate: 0 -7%; } to { translate: 0 7%; } }
    }

    /* Blocks entering the viewport (reveal_controller): fade up; photos open like the main one. */
    .reveal-pending { opacity: 0; translate: 0 32px; }
    .reveal-in { transition: opacity 0.9s ease var(--delay, 0s), translate 1s cubic-bezier(0.2, 0.7, 0.1, 1) var(--delay, 0s); }
    .photo.reveal-pending { opacity: 1; translate: none; clip-path: inset(0 0 100% 0); }
    .photo.reveal-pending > img { scale: 1.15; }
    .photo.reveal-in { transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1) var(--delay, 0s); }
    .photo.reveal-in > img { transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) var(--delay, 0s); }

    /* Hover */
    .card .photo > img, .project-row .photo > img { transition: scale 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); }
    .card:hover .photo > img, .project-row:hover .photo > img { scale: 1.06; }
    .project-row__name, .card__title { transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.1, 1), color 0.2s; }
    .project-row:hover .project-row__name, .card:hover .card__title { translate: 8px 0; }
    .btn { transition: background-color 0.25s, color 0.25s; }

    /* Page changes cross-fade (View Transitions, see app.js); the header stays put. */
    .site-header { view-transition-name: header; }
    ::view-transition-old(root) { animation: 0.25s ease both fade-out; }
    ::view-transition-new(root) { animation: 0.45s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s both fade-up; }
    @keyframes fade-out { to { opacity: 0; } }
    @keyframes fade-up { from { opacity: 0; translate: 0 16px; } }
}

/* Nav links: underline drawn from left to right. */
.nav__link:not([aria-current]) {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.nav__link:not([aria-current]):hover { background-size: 100% 1px; }