Fix hero image transition on event detail page

Replace hard-edged color overlay with CSS mask-image fade-out and
increase hero height to 420px for a seamless blend into the aurora
mesh background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/views/EventDetailView.vue

@@ -268,15 +268,19 @@ onMounted(fetchEvent)
 .detail__hero {
   position: relative;
   width: 100%;
-  height: 260px;
+  height: 420px;
-  overflow: hidden;
+  overflow: visible;
   flex-shrink: 0;
 }
 
 .detail__hero-img {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
 }
 
 .detail__hero-overlay {
@@ -284,9 +288,8 @@ onMounted(fetchEvent)
   inset: 0;
   background: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0.4) 0%,
+    rgba(27, 23, 48, 0.4) 0%,
-    transparent 50%,
+    transparent 50%
-    var(--color-gradient-start) 100%
   );
 }