feat(layout): add noisy overlay controlled by layout service

Introduce a conditional noisy overlay div in application template that
renders when `shouldShowNoisyOverlay` is true. Add a corresponding getter
in the layout service, currently mirroring `shouldShowHeader`. This sets
up infrastructure for future UI enhancements requiring an overlay effect.

Author: rohitpaulk

app/services/layout.ts

@@ -19,4 +19,8 @@ export default class LayoutService extends Service {
       return true;
     }
   }
+
+  get shouldShowNoisyOverlay(): boolean {
+    return this.shouldShowHeader; // Same for now
+  }
 }

app/templates/application.hbs

@@ -2,11 +2,15 @@
 
 {{page-title "CodeCrafters"}}
 
-<div class="min-h-screen {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}" id="application-container" data-test-application-container>
+<div class="min-h-screen relative {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}" id="application-container" data-test-application-container>
   {{! TODO: revive once https://github.com/cibernox/ember-basic-dropdown/issues/931 is out }}
   {{! <BasicDropdownWormhole /> }}
   <div id="ember-basic-dropdown-wormhole"></div>
 
+  {{#if this.layout.shouldShowNoisyOverlay}}
+    <div class="absolute inset-0 z-10 noisy-overlay pointer-events-none"></div>
+  {{/if}}
+
   {{#if this.layout.shouldShowHeader}}
     <Header />
   {{/if}}