Fix brain image vertical centering on homepage

Use flexbox-based centering instead of transform-based positioning.
The brain-wrapper now spans the full container and uses flexbox to
center the brain image, providing true vertical centering regardless
of the info button state.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: jeremymanning

css/style.css

@@ -992,18 +992,22 @@ body.homepage main {
     width: 100%;
     height: 100%;
     max-width: 1200px;
-    padding: 40px;
+    padding: 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .brain-wrapper {
     position: absolute;
-    top: calc(50% - 20px); /* Offset up to visually center in the green area above the menu */
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: left 0.27s ease, transform 0.27s ease, top 0.27s ease;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.27s ease;
 }
 
 .brain-image {
@@ -1066,8 +1070,9 @@ body.info-transitioning .brain-image {
 
 /* Info Panel Active State - Gallery View */
 body.info-active .brain-wrapper {
-    left: 27%;
-    top: 50%;
+    right: 50%;
+    justify-content: flex-end;
+    padding-right: 5%;
 }
 
 body.info-active .brain-image {