refactor(ui): anchor detail header darkening to reel geometry

frontend/src/components/MediaDetail.vue

@@ -485,6 +485,29 @@ function handleOpenFolder(folderPath: string) {
   position: relative;
 }
 
+.movie-page-content::before {
+  content: '';
+  position: absolute;
+  top: 300px;
+  /* Start clipped edge at reel 2/3 split bottom (y=300): 40vw - 0.8rem. */
+  left: calc(-50vw + 50% - 1.6rem);
+  width: calc(40vw + 0.8rem);
+  max-width: calc(100vw - 24px);
+  height: var(--header-height);
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 0.72) 0%,
+    rgba(5, 7, 10, 0.5) 100%
+  );
+  -webkit-backdrop-filter: blur(10px) saturate(115%);
+  backdrop-filter: blur(10px) saturate(115%);
+  /* Match reel slant angle: 2rem horizontal shift over 300px reel height. */
+  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - (var(--header-height) * 0.1067)) 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 0, calc(100% - (var(--header-height) * 0.1067)) 100%, 0 100%);
+  pointer-events: none;
+  z-index: 30;
+}
+
 /* Modal body with backdrop - full viewport width, fits backdrop height */
 .modal-body {
   position: relative;

frontend/src/styles/main.css

@@ -75,9 +75,28 @@ html, body {
   display: flex;
   align-items: center;
   padding: 0 12px;
+  isolation: isolate;
   transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  border-radius: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast);
+}
+
+.header > * {
+  position: relative;
+  z-index: 1;
+}
+
 .header-top {
   top: 40px;
 }
@@ -88,8 +107,8 @@ html, body {
 }
 
 .header-after-movie-header {
-  /* Position after movie detail collage-header (300px) */
-  top: 320px;
+  /* Place header below movie detail collage-header (300px). */
+  top: 300px;
 }
 
 .header-after-series-hero {
@@ -97,6 +116,19 @@ html, body {
   top: clamp(450px, 70vh, 600px);
 }
 
+.header-after-series-hero::before {
+  width: 30em;
+  max-width: calc(100vw - 24px);
+  opacity: 1;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 0.72) 0%,
+    rgba(5, 7, 10, 0.5) 100%
+  );
+  backdrop-filter: blur(10px) saturate(115%);
+  -webkit-backdrop-filter: blur(10px) saturate(115%);
+}
+
 /* Spacer to reserve space for header in layout */
 .header-spacer {
   height: calc(var(--header-height) + 20px);
@@ -133,6 +165,11 @@ html, body {
   padding: 0;
 }
 
+.header-after-movie-header .header-nav-item,
+.header-after-series-hero .header-nav-item {
+  color: rgba(255, 255, 255, 0.78);
+}
+
 .header-nav-item:hover,
 .header-nav-item.active {
   color: var(--text-primary);