Re-enable and redesign LCARS animated center display with Star Trek console-style wave bands

[Copilot]

Overview

This PR re-enables the animated bridge screens overlay for the LCARS theme and redesigns the central HUD display to match the authentic Star Trek LCARS console aesthetic with animated wave bands, segmented grid overlays, and proper color theming.

Previously, the animated overlay was completely disabled for LCARS via CSS guards. This implementation removes those guards and introduces LCARS-specific console styling that transforms the central display into a Star Trek-style console with moving waveforms and grid segmentation.

Changes Made

CSS-Only Implementation

All changes are purely CSS-based with no HTML modifications required:

docs/bridge-screens.css

• Removed LCARS guard that disabled the overlay (display: none !important)
• Updated comment to reflect overlay is now enabled for LCARS

docs/lcars-prime.css

• Changed overlay from display: none to display: grid for LCARS theme
• Added 150+ lines of LCARS console-style transformations

Central HUD Console Transformation

The main-hud panel now features:

• Hidden radar/sweep: Original SVG radar animation hidden for LCARS theme
• Animated wave bands: Data-URI SVG background with 3 smooth bezier paths in LCARS colors (cyan #7EC8FF, amber #FF9E66, rose #E08AA3)
• Horizontal scrolling: 25-second continuous animation creating waveform movement
• Console grid overlay: Repeating linear gradients at 28px spacing creating segmented display
• LCARS bezel: Rounded borders with cyan glow and inner shadow matching console aesthetic

Side Panels Harmony

All overlay panels now use LCARS color palette:

• Top strip: LCARS color segments (cyan, amber, rose)
• Equalizer bars: Amber to rose gradient with reduced glow
• Wave scope: Amber waveform with LCARS filter
• List panel: Cyan grid lines with amber indicator dots

Accessibility & Performance

• Reduced motion: All animations properly disabled with @media (prefers-reduced-motion: reduce)
• Tab visibility: Animations pause when tab is hidden (battery saving)
• Performance: GPU-accelerated with will-change hints
• Efficient loading: Data-URI SVG eliminates external file requests

Non-Regression

• LCARS-scoped selectors ensure no impact on other themes
• Cyberpunk 2077, Star Wars, and Stargate themes remain unchanged
• Original radar animations still visible in non-LCARS themes

Technical Details

The wave animation uses an inline SVG with three quadratic bezier curves:

background-image: url('data:image/svg+xml;utf8,<svg>
  <path d="M0,200 Q200,150 400,200 T800,200 T1200,200 T1600,200" 
        stroke="#7EC8FF" stroke-width="2" opacity="0.6"/>
  <path d="M0,220 Q200,180 400,220 T800,220 T1200,220 T1600,220" 
        stroke="#FF9E66" stroke-width="2.5" opacity="0.7"/>
  <path d="M0,240 Q200,210 400,240 T800,240 T1200,240 T1600,240" 
        stroke="#E08AA3" stroke-width="2" opacity="0.5"/>
</svg>');

Grid overlay combines three gradient layers for depth:

• Vertical lines at 28px spacing
• Horizontal lines at 28px spacing
• Subtle vignette gradient (top/bottom fade)

Screenshots

LCARS Theme - Animated Console Display

The central HUD now displays animated wave bands scrolling horizontally across a segmented grid, matching the Star Trek LCARS console aesthetic.

Wave bands animate continuously with cyan, amber, and rose colored paths creating the authentic console look with proper grid segmentation overlay.

All panels harmonized with LCARS color palette - top strip shows colored segments, equalizer uses amber gradient, and list panel features cyan grid with amber dots.

Other Themes Unaffected

Cyberpunk 2077 and other themes remain completely unaffected, still showing their original radar animations and styling.

Testing

• ✅ LCARS theme displays wave animation and grid overlay
• ✅ Animations pause with prefers-reduced-motion: reduce
• ✅ Animations pause when browser tab is hidden
• ✅ Other themes (Cyberpunk 2077, Star Wars, Stargate) unaffected
• ✅ No console errors or performance issues
• ✅ Responsive layout maintained

Browser Compatibility

Works on all modern browsers with support for:

• CSS animations
• Data-URI SVG
• CSS Grid
• Mix-blend-mode

Tested and verified working correctly with theme switching and accessibility features.

Original prompt

Objective: Re-enable and redesign the LCARS animated center display so it matches the Star Trek console style, only when the LCARS theme is active. Keep other themes (e.g., Cyberpunk 2077) unaffected. Implement via CSS only or by augmenting existing overlay CSS/inline SVG without changing overall page structure. Publish the change.

References

• Primary visual target (console):
• Secondary console reference (same style):
• Current site state screenshot for comparison:

Context

• The animated overlay lives in docs/bridge-screens.css with markup present in docs/index.html under .bridge-screens. Currently, LCARS disables the overlay via guards in both docs/bridge-screens.css and docs/lcars-prime.css. We now need the overlay ON for LCARS and styled to resemble the console (segmented pads, amber/cyan micro blocks, moving horizontal wave bands in the central panel).

Scope

• Files to edit: docs/lcars-prime.css, docs/bridge-screens.css (CSS-only). Do not alter the HTML structure.
• Ensure reduced-motion and tab-visibility pause continue to work.

Tasks

1. Re-enable overlay for LCARS

• In docs/lcars-prime.css, remove the LCARS guard that hides .bridge-screens or override it at the end with a rule that restores display:grid for LCARS scope. Keep guards for non-LCARS themes untouched.
• In docs/bridge-screens.css, remove or override the LCARS guard that hides the overlay so it’s visible for LCARS again.

2. Transform the central HUD (.screen.main-hud) to LCARS console style for LCARS only

• Keep markup unchanged; hide the existing internal radar circles/rotating sweep when LCARS is active (display:none on the child SVG within .main-hud for LCARS scope).
• Use ::before background to paint an animated “wave bands” layer: implement a data-URI SVG (wide, e.g., 1600px) that contains 2–3 smooth bezier paths in cyan/amber/rose with glow, then animate background-position-x to scroll left-to-right continuously (20–30s loop) to simulate waveform movement like the reference.
• Use ::after to add console-like grid/segmentation: combine repeating-linear-gradients (vertical grid at 24–32px spacing) + thin horizontal rules; add a thin inner cyan outline and rounded bezel.
• Ensure the main-hud retains rounded corners and inner glow similar to the console.

3. Side panels harmony

• Slightly adjust .screen.list, .screen.eq, .screen.wave colors under LCARS to LCARS amber/cyan palette (no HTML change). Keep their animations, but reduce glow to fit the console look.

4. Performance & a11y

• Keep existing prefers-reduced-motion and tab-visibility pause selectors working. Include new ::before/::after animations under these guards to pause.
• Maintain sufficient contrast. Do not introduce text elements that would be unreadable.

5. Non-regression

• Other themes remain as-is; this change applies only within LCARS scope (html[data-franchise-theme="lcars"], body.theme-lcars).

Acceptance criteria

• With LCARS enabled, the central display shows moving colored wave bands across a segmented grid with a dark bezel, resembling the reference consoles. The overlay is visible in LCARS.
• No HTML edits. Animations pause on tab hidden and disable on reduced motion.
• Non-LCARS themes and other content unaffected.

Testing

• Switch to LCARS theme: verify overlay is visible.
• Observe .main-hud: waves animate horizontally; segmented grid visible; bezel/glow match LCARS scheme.
• Check reduced motion (prefers-reduced-motion: reduce) and tab visibility pause.
• Verify side panels (eq/wave/list) still animate but with refined palette.

Deliverables

• docs/lcars-prime.css: remove/override overlay hide; ensure overlay visible in LCARS.
• docs/bridge-screens.css: LCARS-scoped redesign of .main-hud with ::before data-URI SVG waves, ::after grid/bezel, palette tweaks for sibling screens; LCARS guard removed/overridden.

This pull request was created as a result of the following prompt from Copilot chat.

Objective: Re-enable and redesign the LCARS animated center display so it matches the Star Trek console style, only when the LCARS theme is active. Keep other themes (e.g., Cyberpunk 2077) unaffected. Implement via CSS only or by augmenting existing overlay CSS/inline SVG without changing overall page structure. Publish the change.

References

• Primary visual target (console):
• Secondary console reference (same style):
• Current site state screenshot for comparison:

Context

• The animated overlay lives in docs/bridge-screens.css with markup present in docs/index.html under .bridge-screens. Currently, LCARS disables the overlay via guards in both docs/bridge-screens.css and docs/lcars-prime.css. We now need the overlay ON for LCARS and styled to resemble the console (segmented pads, amber/cyan micro blocks, moving horizontal wave bands in the central panel).

Scope

• Files to edit: docs/lcars-prime.css, docs/bridge-screens.css (CSS-only). Do not alter the HTML structure.
• Ensure reduced-motion and tab-visibility pause continue to work.

Tasks

1. Re-enable overlay for LCARS

• In docs/lcars-prime.css, remove the LCARS guard that hides .bridge-screens or override it at the end with a rule that restores display:grid for LCARS scope. Keep guards for non-LCARS themes untouched.
• In docs/bridge-screens.css, remove or override the LCARS guard that hides the overlay so it’s visible for LCARS again.

2. Transform the central HUD (.screen.main-hud) to LCARS console style for LCARS only

• Keep markup unchanged; hide the existing internal radar circles/rotating sweep when LCARS is active (display:none on the child SVG within .main-hud for LCARS scope).
• Use ::before background to paint an animated “wave bands” layer: implement a data-URI SVG (wide, e.g., 1600px) that contains 2–3 smooth bezier paths in cyan/amber/rose with glow, then animate background-position-x to scroll left-to-right continuously (20–30s loop) to simulate waveform movement like the reference.
• Use ::after to add console-like grid/segmentation: combine repeating-linear-gradients (vertical grid at 24–32px spacing) + thin horizontal rules; add a thin inner cyan outline and rounded bezel.
• Ensure the main-hud retains rounded corners and inner glow similar to the console.

3. Side panels harmony

• Slightly adjust .screen.list, .screen.eq, .screen.wave colors under LCARS to LCARS amber/cyan palette (no HTML change). Keep their animations, but reduce glow to fit the console look.

4. Performance & a11y

• Keep existing prefers-reduced-motion and tab-visibility pause selectors working. Include new ::before/::after animations under these guards to pause.
• Maintain sufficient contrast. Do not introduce text elements that would be unreadable.

5. Non-regression

• Other themes remain as-is; this change applies only within LCARS scope (html[data-franchise-theme="lcars"], body.theme-lcars).

Acceptance criteria

• With LCARS enabled, the central display shows moving colored wave bands across a segmented grid with a dark bezel, resembling the reference consoles. The overlay is visible in LCARS.
• No HTML edits. Animations pause on tab hidden and disable on reduced motion.
• Non-LCARS themes and other content unaffected.

Testing

• Switch to LCARS theme: verify overlay is visible.
• Observe .main-hud: waves animate horizontally; segmented grid visible; bezel/glow match LCARS scheme.
• Check reduced motion (prefers-reduced-motion: reduce) and tab visibility pause.
• Verify side panels (eq/wave/list) still animate but with refined palette.

Deliverables

• docs/lcars-prime.css: remove/override overlay hide; ensure overlay visible in LCARS.
• docs/bridge-screens.css: LCARS-scoped redesign of .main-hud with ::before data-URI SVG waves, ::after grid/bezel, palette tweaks for sibling screens; LCARS guard removed/overridden.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.