/* Cinematic HUD slide transitions. Class `cinematic-hud-hidden` is toggled on by index.html's inline enforce + the cinematic axis (Tidemark.Client.Rendering/cinematic/hud-visibility-mount.ts). Selectors enumerated so framework panels only join the transition deliberately. */ :root { --cinematic-hud-transition-ms: 400; } .hud-root .hud-slot, .canvas-container > .stats-panel, .canvas-container > .stats-mini, .canvas-container > #off-sidebar, .canvas-container > #off-settings-panel, .canvas-container > #off-debug-panel { transition: transform calc(var(--cinematic-hud-transition-ms, 400) * 1ms) cubic-bezier(.2, .8, .2, 1), opacity calc(var(--cinematic-hud-transition-ms, 400) * 1ms) ease; will-change: transform, opacity; } html.cinematic-hud-hidden .hud-root .hud-top-left, html.cinematic-hud-hidden .hud-root .hud-bottom-left, html.cinematic-hud-hidden .stats-panel, html.cinematic-hud-hidden .stats-mini { transform: translateX(-120%); opacity: 0; } html.cinematic-hud-hidden .hud-root .hud-top-right, html.cinematic-hud-hidden .hud-root .hud-bottom-right, html.cinematic-hud-hidden #off-sidebar, html.cinematic-hud-hidden #off-settings-panel, html.cinematic-hud-hidden #off-debug-panel { transform: translateX(120%); opacity: 0; } /* Top strip slides down from above the viewport — distinct axis from the left/right slots so the intro reads as multi-direction reveal. */ html.cinematic-hud-hidden .hud-root .hud-top { transform: translateY(-120%); opacity: 0; } /* Center-bottom controls are the primary in-game action dock, so they join the world-entry reveal instead of staying visible over the intro fade. */ html.cinematic-hud-hidden .hud-root .hud-bottom-center { transform: translateX(-50%) translateY(140%); opacity: 0; } @media (max-width: 640px) { html.cinematic-hud-hidden .hud-root .hud-bottom-center { transform: translateY(140%); } }