/* ========================================================
   SHARED-ELEMENT TRANSITIONS — STUDIO CASE STUDIES
   Matching covers morph; projects with different covers transition by title.
   ======================================================== */
@view-transition {
    navigation: auto;
}

.studio-page .case-card--coda-magica .case-cover,
.case-study-page--coda-magica #case-study-hero .cover-img-box>img {
    view-transition-name: coda-magica-cover;
}

.studio-page .case-card--scarta .case-cover,
.case-study-page--scarta .sf-hero-image>img {
    view-transition-name: scarta-cover;
}

.studio-page .case-card--il-giusto .case-copy>h3,
.case-study-page--il-giusto #case-study-hero .hero-container>h1 {
    view-transition-name: il-giusto-title;
}

.studio-page .case-card--ninja-url .case-copy>h3,
.case-study-page--ninja-url #case-study-hero .hero-container>h1 {
    view-transition-name: ninja-url-title;
}

::view-transition-group(coda-magica-cover),
::view-transition-group(scarta-cover) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(il-giusto-title),
::view-transition-group(ninja-url-title) {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(coda-magica-cover),
    ::view-transition-group(scarta-cover),
    ::view-transition-group(il-giusto-title),
    ::view-transition-group(ninja-url-title),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms;
    }
}