Add cinematic title artwork backgrounds to request pages

frontend/app/requests/[id]/page.tsx

@@ -552,6 +552,8 @@ export default function RequestTimelinePage() {
     .filter((action): action is RequestAction => Boolean(action))
   const posterUrl = snapshot.artwork?.poster_url
   const resolvedPoster = posterUrl?.startsWith('http') ? posterUrl : posterUrl ? `${getApiBase()}${posterUrl}` : null
+  const backdropUrl = snapshot.artwork?.backdrop_url?.replace('https://image.tmdb.org/t/p/w780/', 'https://image.tmdb.org/t/p/w1280/')
+  const resolvedBackdrop = backdropUrl?.startsWith('http') ? backdropUrl : backdropUrl ? `${getApiBase()}${backdropUrl}` : null
 
   const trackedPost = async (label: string, url: string, init: RequestInit = {}) => {
     const operationId = typeof crypto?.randomUUID === 'function'
@@ -768,7 +770,11 @@ export default function RequestTimelinePage() {
   }
 
   return (
-    <main className="card request-detail-page">
+    <main className={`card request-detail-page request-cinematic ${resolvedBackdrop ? 'has-backdrop' : ''}`}>
+      <div className="request-cinematic-art" aria-hidden="true">
+        {resolvedBackdrop && <Image src={resolvedBackdrop} alt="" fill sizes="100vw" priority unoptimized onError={(event) => { event.currentTarget.style.opacity = '0' }} />}
+      </div>
+      <div className="request-cinematic-title">
       <PageHeading
         title={snapshot.title}
         eyebrow={`Request #${snapshot.request_id}`}
@@ -776,6 +782,8 @@ export default function RequestTimelinePage() {
         leading={resolvedPoster && <Image className="request-poster" src={resolvedPoster} alt={`${snapshot.title} poster`} width={60} height={90} sizes="60px" unoptimized />}
       />
 
+      </div>
+
       <RequestLanguage requestId={snapshot.request_id} disabled={Boolean(busyAction)} onApply={async (code) => {
         setBusyAction('language')
         try {