feat: Add festive visual effects (#2252)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Introduces an effects system (fireworks, ghost, hearts, shamrocks,
snow), a new `effect` action, and optional date-based loading effects,
integrated into the card with docs, schema, editor, and tests.
> 
> - **Effects System**:
> - Add `EffectsController` and `advanced-camera-card-effects` host with
lazy-loaded effect modules (`fireworks`, `ghost`, `hearts`, `shamrocks`,
`snow`).
> - New base effect component with fade-in/out; SCSS and z-index
updates.
> - **Actions**:
> - New custom action `advanced_camera_card_action: effect` with
`effect_action` (`start`|`stop`|`toggle`).
>   - Wire into `ActionFactory` and add `EffectAction` executor.
> - **Card Integration**:
> - Mount effects host in `advanced-camera-card` and expose
`getEffectsControllerAPI()` via `CardController`.
> - Loading component can trigger date-based effects (e.g., New Year
fireworks) when enabled.
> - **Configuration & Editor**:
> - Add `performance.features.card_loading_effects` (default `true`)
alongside `card_loading_indicator`.
> - Update schemas, defaults, low-performance profile (disables
effects), and editor toggles.
> - **Docs & Examples**:
>   - Document `effect` action parameters and add menu example.
>   - Update performance docs with new option.
> - **Localization & Tests**:
>   - Update i18n strings for new performance option.
> - Add comprehensive tests for effects controller, action, factory,
config defaults/profiles, and utilities.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
cffd4304fe3bd22340316f9cec53e341379b1756. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

src/components/loading.ts

@@ -1,11 +1,76 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import loadingStyle from '../scss/loading.scss';
+import { EffectName, EffectsControllerAPI } from '../types';
 import { getReleaseVersion } from '../utils/diagnostics';
 import './icon';
 
+// Map of "MM-DD" to effect name for special dates.
+const DATE_EFFECTS: Record<string, EffectName> = {
+  // New Year's Day
+  '01-01': 'fireworks',
+
+  // Valentine's Day
+  '02-14': 'hearts',
+
+  // St. Patrick's Day
+  '03-17': 'shamrocks',
+
+  // Halloween
+  '10-31': 'ghost',
+
+  // Christmas
+  '12-25': 'snow',
+};
+
+const getDateEffect = (): EffectName | null => {
+  const now = new Date();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return DATE_EFFECTS[`${month}-${day}`] ?? null;
+};
+
 @customElement('advanced-camera-card-loading')
 export class AdvancedCameraCardLoading extends LitElement {
+  @property({ attribute: false })
+  public effectsControllerAPI?: EffectsControllerAPI | null;
+
+  @property({ type: Boolean, reflect: true })
+  public loaded = false;
+
+  private _effectName: EffectName | null = null;
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._stopEffect();
+  }
+
+  protected updated(): void {
+    const effect = getDateEffect();
+    if (!effect) {
+      this._stopEffect();
+      return;
+    }
+
+    if (!this.loaded) {
+      this._startEffect(effect);
+    } else {
+      this._stopEffect();
+    }
+  }
+
+  private _startEffect(effect: EffectName): void {
+    this.effectsControllerAPI?.startEffect(effect, { fadeIn: false });
+    this._effectName = effect;
+  }
+
+  private _stopEffect(): void {
+    if (this._effectName) {
+      this.effectsControllerAPI?.stopEffect(this._effectName);
+    }
+    this._effectName = null;
+  }
+
   protected render(): TemplateResult {
     return html`<advanced-camera-card-icon
         .icon=${{ icon: 'iris' }}