/* Motion stays inside the printed directory; the book and click targets stay still. */
.catalogue-directory .application-illustration{
 /* Source crops retain their native boxes before the responsive transform.
    Let the track shrink so the scaled image is centred inside its actual cell. */
 grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
.catalogue-directory .application-row{
 position:relative;isolation:isolate;
 transition:background-color 320ms ease;
}
.catalogue-directory .application-row::after{
 content:'';position:absolute;inset:auto 0 -1px;height:1px;
 background:#a47735;transform:scaleX(0);transform-origin:left;
 transition:transform 420ms cubic-bezier(.22,.7,.22,1);pointer-events:none;
}
.catalogue-directory .application-row:dir(rtl)::after{transform-origin:right}
.catalogue-directory :is(.application-number,.application-name){transition:color 300ms ease}
.catalogue-directory :is(.application-illustration,.application-arrow){
 translate:0 0;
 transition:translate 420ms cubic-bezier(.22,.7,.22,1),rotate 420ms cubic-bezier(.22,.7,.22,1);
}
.catalogue-directory .application-row:focus-visible{
 outline:1px solid #a47735;outline-offset:-3px;background-color:#a477350c;
}
.catalogue-directory .application-row:focus-visible :is(.application-number,.application-name){color:#966323}
.catalogue-directory .application-row:focus-visible::after{transform:scaleX(1)}
.catalogue-directory .application-row:focus-visible .application-arrow{translate:4px 0}
.catalogue-directory .application-row:active{background-color:#a477351c;transition-duration:100ms}

@media(hover:hover) and (pointer:fine){
 .catalogue-directory .application-row:hover{background-color:#a477350a}
 .catalogue-directory .application-row:hover :is(.application-number,.application-name){color:#966323}
 .catalogue-directory .application-row:hover::after{transform:scaleX(1)}
 .catalogue-directory .application-row:hover .application-arrow{translate:4px 0}
 .catalogue-directory .application-row:is(:hover,:focus-visible) .application-illustration{translate:-2px -3px;rotate:-.7deg}
}

/* Start after the turning leaf is gone, never while an offscreen page is prepared. */
@media(prefers-reduced-motion:no-preference){
 #book-stage:not(:has(>.catalogue-page-turn)) #view>.view-spread:not([data-preparing]) .catalogue-directory>:is(.contents-kicker,.contents-heading,.contents-subtitle){
  animation:directory-heading-arrive 560ms cubic-bezier(.22,.7,.22,1) both;
 }
 #book-stage:not(:has(>.catalogue-page-turn)) #view>.view-spread:not([data-preparing]) .catalogue-directory>.contents-heading{animation-delay:45ms}
 #book-stage:not(:has(>.catalogue-page-turn)) #view>.view-spread:not([data-preparing]) .catalogue-directory>.contents-subtitle{animation-delay:90ms}
 #book-stage:not(:has(>.catalogue-page-turn)) #view>.view-spread:not([data-preparing]) .catalogue-directory .application-row{
  animation:directory-row-arrive 560ms cubic-bezier(.22,.7,.22,1) both;
  animation-delay:calc(100ms + var(--directory-order,0)*65ms);
 }
 .catalogue-directory .application-row:nth-child(2){--directory-order:1}
 .catalogue-directory .application-row:nth-child(3){--directory-order:2}
 .catalogue-directory .application-row:nth-child(4){--directory-order:3}
 .catalogue-directory .application-row:nth-child(5){--directory-order:4}
 .catalogue-directory .application-row:nth-child(6){--directory-order:5}
}
@keyframes directory-heading-arrive{
 from{opacity:.35;translate:0 7px}to{opacity:1;translate:0 0}
}
@keyframes directory-row-arrive{
 from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}
}
@media(max-width:1000px){
 .catalogue-canvas.is-mobile .catalogue-directory .application-row:focus-visible .application-arrow{translate:2px 0}
 @keyframes directory-row-arrive{
  from{opacity:.35;translate:0 4px}to{opacity:1;translate:0 0}
 }
}
@media(prefers-reduced-motion:reduce){
 .catalogue-directory .application-row,
 .catalogue-directory .application-row::after,
 .catalogue-directory :is(.application-number,.application-name,.application-illustration,.application-arrow){transition:none}
 .catalogue-directory .application-row:is(:hover,:focus-visible) :is(.application-illustration,.application-arrow){translate:0 0;rotate:0deg}
}