perf(dashboard): fill the hero rotation dot on the compositor

The active hero dot animated `width` 0 → 18px for every 8 s rotation, so
an idle dashboard with two or more slides ran style, layout and paint on
every frame. The fill is now a full-width bar that slides in with
`transform` under the pill's rounded clip. The `animationend` advance,
the pause and reduced-motion behaviour are unchanged.

Measured on the E2E build (visible, four slides, 120 s): layouts
10,405-10,677 -> 366-369, renderer process CPU 14.2-16.4 s -> 3.7-4.1 s,
GPU process CPU 14.8-18.8 s -> 14.0-14.8 s.

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

.changes/dashboard-hero-idle-rotation.md

@@ -0,0 +1,8 @@
+---
+type: perf
+area: dashboard
+---
+
+The dashboard's rotating banner uses much less CPU while you leave it on
+screen: the progress dot under it no longer makes the page re-lay itself out
+on every frame.

docs/architecture/idle-work-audit-2026-09.md

@@ -183,11 +183,11 @@ code. Costs are for the dev build unless noted.
 ### Added after the measurement: rotating hero
 
 Not in the measured counts above; found by reading the code on master after
-#1725.
+#1725. The rotation row was measured later, when its follow-up landed.
 
 | Source | What it does | Period | Cost per firing | Justified | Evidence | Follow-up |
 | --- | --- | --- | --- | --- | --- | --- |
-| [dashboard-hero.component.scss:558](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.scss) `hero-dot-fill` and the `(animationend)="onRotationTick()"` at [dashboard-hero.component.html:233](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.html) | The active rotation dot animates `width` 0 → 18 px over `HERO_ROTATION_MS` (8 s); its `animationend` advances the slide, which starts the next fill and the backdrop's 8 s `transform` transition | Continuous while the dashboard is visible with two or more hero slides, unless the rotation is paused or reduced motion is on | A layout pass on every animation frame, because `width` is a layout property (not measured) | **Partly.** The rotation is a feature. Animating a layout property for it is not, and it runs on an otherwise idle page. | Static | **Own thread.** Animate the fill with a compositor-only `transform: scaleX()`, keep the `animationend` advance, and decide whether rotation should pause on an idle or hidden dashboard. |
+| [dashboard-hero.component.scss:579](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.scss) `hero-dot-fill` and the `(animationend)="onRotationTick()"` at [dashboard-hero.component.html:233](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.html) | The active rotation dot animated `width` 0 → 18 px over `HERO_ROTATION_MS` (8 s); its `animationend` advances the slide, which starts the next fill and the backdrop's 8 s `transform` transition | Continuous while the dashboard is visible with two or more hero slides, unless the rotation is paused or reduced motion is on | Measured afterwards (visible, four slides, 120 Hz display): about 10,500 layouts, 16 s renderer and 17 s GPU process CPU per 120 s; about 0.3 s each while paused | **Partly.** The rotation is a feature. Animating a layout property for it is not, and it runs on an otherwise idle page. | Measured after the fact | **Done.** The fill now animates `transform` only: about 370 layouts (the slide switches), 3.7 s renderer and 14 s GPU process CPU per 120 s. The GPU figure is the compositor drawing every vsync for any running animation, so going lower means animating less, not animating differently; whether rotation should stop on an idle dashboard is open. |
 | [dashboard-live-epg.presenter.ts:121](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-live-epg.presenter.ts) `heroLiveCandidates` (lookup) and :191 (pinned portal keys); limits in [dashboard-hero-slides.utils.ts:14–15](../../libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero-slides.utils.ts) | Up to five hero live candidates (three favourites, two recent) join the 30 s XMLTV "now on air" lookup, and are pinned for the portal live-EPG queue even when their rails are hidden or scrolled away | 30 s XMLTV heartbeat while the hero is enabled and any candidate exists; portal sync on the same tick | More lookup keys per `GET_CURRENT_PROGRAMS_BATCH` IPC and SQL, and portal `get_short_epg`-style requests for pinned Xtream/Stalker candidates when stale (not measured) | **Yes** for the programme shown on the hero; the 30 s re-ask of unchanged programmes is not | Static | Covered by #1722: the clock re-asks only when a programme ended, a key has no answer, the answer is five minutes old, or the guide changed, and it pauses while hidden. |
 
 ### Checked and not periodic at idle

docs/architecture/workspace-dashboard.md

@@ -127,7 +127,10 @@ extras (backdrop, rating, genres, overview, year) come from
 `DashboardHeroTmdbService` per featured title and vanish when TMDB is off.
 
 Rotation is the active dot's CSS fill animation (8 s); its `animationend`
-advances. Hover, focus inside the hero and the pause button pause it; an
+advances. The fill animates `transform` only (a bar sliding in under the
+pill's rounded clip), so it runs on the compositor; animating `width` there
+cost a style, layout and paint pass on every frame of an idle dashboard.
+Hover, focus inside the hero and the pause button pause it; an
 explicit Play clears the hover/focus pause until they re-arm; under
 `prefers-reduced-motion` nothing auto-advances. The active slide is tracked
 by id, so a late live slide never moves the user off the current one. Test

libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.scss

@@ -547,28 +547,41 @@
     width: 0;
     height: 6px;
     border-radius: 3px;
-    background: var(--hero-heading);
+    overflow: hidden;
     pointer-events: none;
 
+    // The fill is a full-width bar that slides in from the left under the
+    // pill's rounded clip. Only `transform` animates, so the compositor runs
+    // it: animating `width` meant style, layout and paint on every frame for
+    // as long as an idle dashboard stayed on screen. Its `animationend`
+    // reaches the span (the originating element) and advances the slide.
+    &::before {
+        content: '';
+        display: block;
+        height: 100%;
+        border-radius: inherit;
+        background: var(--hero-heading);
+    }
+
     .hero__dot--active & {
         width: 18px;
     }
 
-    .hero--rotating .hero__dot--active & {
+    .hero--rotating .hero__dot--active &::before {
         animation: hero-dot-fill var(--hero-rotation-ms, 8000ms) linear both;
     }
 
-    .hero--paused .hero__dot--active & {
+    .hero--paused .hero__dot--active &::before {
         animation-play-state: paused;
     }
 }
 
 @keyframes hero-dot-fill {
     from {
-        width: 0;
+        transform: translateX(-100%);
     }
     to {
-        width: 18px;
+        transform: none;
     }
 }
 

libs/workspace/dashboard/feature/src/lib/rails/dashboard-hero.component.spec.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { signal } from '@angular/core';
 import { TestBed, type ComponentFixture } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
@@ -263,3 +265,27 @@ describe('DashboardHeroComponent', () => {
         ).toBeNull();
     });
 });
+
+describe('DashboardHeroComponent rotation animation', () => {
+    const styles = readFileSync(
+        resolve(__dirname, 'dashboard-hero.component.scss'),
+        'utf8'
+    );
+    const keyframes = (name: string) =>
+        new RegExp(`@keyframes ${name}\\s*\\{([\\s\\S]*?)\\n\\}`).exec(
+            styles
+        )?.[1] ?? '';
+
+    // The fill runs for the whole time an idle dashboard is on screen: a
+    // layout property here means style, layout and paint on every frame.
+    it('fills the active dot with a compositor-only animation', () => {
+        const frames = keyframes('hero-dot-fill');
+        const properties = Array.from(
+            frames.matchAll(/^\s*([a-z-]+)\s*:/gm),
+            (match) => match[1]
+        );
+
+        expect(properties.length).toBeGreaterThan(0);
+        expect(new Set(properties)).toEqual(new Set(['transform']));
+    });
+});