/* Motion — "the work comes to the wall".
   Focal moment: shared-element view transitions between pages (card image → artwork stage,
   portrait → profile, cover → exhibition). Supporting: hero hang-in on Home, the wall-label rule
   drawing in, gallery crossfade, press/hover feedback. Everything is visible without animation. */

/* ── Cross-document view transitions (same-origin navigations) ────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }

/* Shared elements (art-*, artist-*, show-*) grow from their card into place. */
::view-transition-group(*) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 300ms; }

/* The header and footer stay put while the page changes underneath. */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

/* ── Home: the building photo is hung, not dropped in ─────────────── */
@keyframes wss-hang {
    from { clip-path: inset(0 0 100% 0); transform: translateY(-16px); }
    to { clip-path: inset(0 0 0 0); transform: none; }
}
.home-hero__media img { animation: wss-hang 900ms var(--ease-out) 120ms both; }

/* ── Artwork page: the label's ink rule draws in under the work ───── */
@keyframes wss-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wall-label { position: relative; border-top: 0; }
.wall-label::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--ink); transform-origin: left center;
    animation: wss-rule 700ms var(--ease-out) 200ms both;
}

/* ── Feedback ─────────────────────────────────────────────────────── */
.btn { transition-property: background-color, color, border-color, transform; }
.btn:active { transform: scale(0.98); transition-duration: 80ms; }

.exhibition-card__cover img,
.feature__media img { transition: transform 600ms var(--ease-out); }
.exhibition-card:hover .exhibition-card__cover:not(.exhibition-card__cover--logo) img,
.feature:hover .feature__media:not(.feature__media--logo) img { transform: scale(1.03); }

.artwork-stage__frame img.is-swapping { opacity: 0; }
.artwork-stage__frame img { transition: opacity 180ms var(--ease-out); }

.disclosure__body { animation: wss-fade 220ms var(--ease-out); }
@keyframes wss-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Home hero: headline, lead and actions arrive in sequence ─────── */
@keyframes wss-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.home-hero__text > * { animation: wss-rise 760ms var(--ease-out) both; }
.home-hero__text > :nth-child(2) { animation-delay: 90ms; }
.home-hero__text > :nth-child(3) { animation-delay: 180ms; }
.home-hero__text > :nth-child(4) { animation-delay: 270ms; }

/* ── Status: the feature's colour rule draws; "Current" carries a live dot ── */
.feature--current .feature__body,
.feature--upcoming .feature__body { border-top: 0; position: relative; }
.feature--current .feature__body::before,
.feature--upcoming .feature__body::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
    background: var(--current); transform-origin: left center;
    animation: wss-rule 1000ms var(--ease-out) 350ms both;
}
.feature--upcoming .feature__body::before { background: var(--upcoming); }

@keyframes wss-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.status--current::before {
    content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; animation: wss-pulse 1.8s ease-in-out infinite;
}

/* ── Navigation: underline slides in; arrows lean forward; menu drops ── */
@media (min-width: 861px) {
    .site-nav a,
    .site-nav a:hover,
    .site-nav a[aria-current="page"] { box-shadow: none; }
    .site-nav a {
        background: linear-gradient(var(--line), var(--line)) no-repeat left bottom / 0 3px;
        transition: background-size 280ms var(--ease-out);
    }
    .site-nav a:hover { background-size: 100% 3px; }
    .site-nav a[aria-current="page"] { background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 3px; }
}
.text-link::after { display: inline-block; transition: transform 220ms var(--ease-out); }
.text-link:hover::after { transform: translateX(4px); }
@keyframes wss-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.site-nav[data-open] { animation: wss-drop 240ms var(--ease-out); }

/* ── Scroll reveals (classes added by app.js only to elements below the fold) ──
   Each kind of thing arrives in its own way; --i staggers items revealed together. */
.reveal {
    transition: opacity 640ms var(--ease-out), transform 820ms var(--ease-out), clip-path 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* Artworks are hung: the image drops into its mat. */
.artwork-card.reveal:not(.is-in) { opacity: 1; transform: none; }
.artwork-card.reveal .artwork-card__mat img {
    transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.artwork-card.reveal:not(.is-in) .artwork-card__mat img { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
.artwork-card.reveal .artwork-card__title,
.artwork-card.reveal .artwork-card__meta { transition: opacity 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.artwork-card.reveal:not(.is-in) .artwork-card__title,
.artwork-card.reveal:not(.is-in) .artwork-card__meta { opacity: 0; }

/* Exhibitions open like a curtain, left to right. */
.exhibition-card.reveal:not(.is-in) { transform: none; }
.exhibition-card.reveal .exhibition-card__cover { transition: clip-path 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.exhibition-card.reveal:not(.is-in) .exhibition-card__cover { clip-path: inset(0 100% 0 0); }

/* The Second Saturday badge swings in. */
.open-band__badge.reveal:not(.is-in) { transform: rotate(-10deg) scale(0.9); }

/* The footer address rises into place, a little slower and further than the rest.
   (No clip-path on observed targets: a zero-area clip keeps IntersectionObserver from firing.) */
.site-footer__street.reveal { transition-duration: 900ms, 1100ms; }
.site-footer__street.reveal:not(.is-in) { transform: translateY(0.45em); }

/* ── Reduced motion: no travel, keep meaningful fades ─────────────── */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .home-hero__media img { animation: wss-fade-only 400ms ease-out both; }
    .wall-label::before { animation: none; }
    .btn:active { transform: none; }
    .site-header__brand img, .site-header__tagline { transition: none; }
    .exhibition-card:hover .exhibition-card__cover img,
    .feature:hover .feature__media img { transform: none; }
    .disclosure__body { animation: wss-fade-only 150ms ease-out; }
    .home-hero__text > * { animation: none; }
    .feature--current .feature__body::before,
    .feature--upcoming .feature__body::before { animation: none; }
    .status--current::before { animation: none; }
    .site-nav a, .text-link::after { transition: none; }
    .site-nav[data-open] { animation: none; }
    /* app.js adds no .reveal classes under reduced motion; this is a safety net. */
    .reveal, .reveal * { transition: none !important; }
    .reveal:not(.is-in), .reveal:not(.is-in) * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
@keyframes wss-fade-only { from { opacity: 0; } to { opacity: 1; } }