/* The original artwork is the one shared element; the rest of the page stays still. */
@view-transition{navigation:auto}
:root{view-transition-name:none}

.sponsor-page .sponsor-cell{transition:background-color 140ms ease-out}
.sponsor-page .sponsor-company-name{transition:color 140ms ease-out;text-decoration-thickness:1px;text-underline-offset:5px}
.sponsor-page .sponsor-card-arrow{transition:transform 150ms cubic-bezier(.16,1,.3,1)}
.sponsor-page .directory-logo{outline:1px solid transparent;outline-offset:-1px;transition:outline-color 140ms ease-out}
.sponsor-page .sponsor-cell:focus-visible{background:var(--tint);outline:2px solid var(--rust);outline-offset:-2px}
.sponsor-page .sponsor-cell:focus-visible .sponsor-company-name{color:var(--rust);text-decoration:underline}
.sponsor-page .sponsor-cell:focus-visible .directory-logo{outline-color:var(--line)}
.sponsor-page .sponsor-cell:active{background:var(--tint)}
.sponsor-page .directory-filters select{transition:border-color 140ms ease-out}
.sponsor-page .directory-filters select:focus-visible{border-color:var(--rust)}
.sponsor-page .sponsor-transition-artwork{view-transition-name:sponsor-artwork}

@media(hover:hover){
  .sponsor-page .sponsor-cell:hover{background:var(--tint)}
  .sponsor-page .sponsor-cell:hover .sponsor-company-name{color:var(--rust)}
  .sponsor-page .sponsor-cell:hover .directory-logo{outline-color:var(--line)}
  .sponsor-page .sponsor-cell:hover .sponsor-card-arrow{transform:translateX(3px)}
}

/* No full-page fade or movement competes with the selected announcement. */
::view-transition-group(root){animation:none}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(sponsor-artwork){animation-duration:360ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(sponsor-artwork),::view-transition-new(sponsor-artwork){width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;animation-duration:180ms}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .sponsor-page .sponsor-cell,.sponsor-page .sponsor-company-name,.sponsor-page .sponsor-card-arrow,.sponsor-page .directory-logo,.sponsor-page .directory-filters select{transition:none}
  .sponsor-page .sponsor-cell:hover .sponsor-card-arrow{transform:none}
  .sponsor-page .sponsor-transition-artwork{view-transition-name:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}