/** * styles/tokens/_motion.less * * Layer 3/4 — SP Urgency Tier & Motion Tokens * * ALL animated token usages MUST be inside: * @media (prefers-reduced-motion: no-preference) { ... } * * Fallback (reduced motion): instant state change with icon/state signal only. * No layout/size animations — only opacity, background-color, border-color. * * Motion tokens: * --sp-fade-hide : Player client opacity fade on hide (300–500ms ease-out) * --sp-pulse-reconnecting : StateRing pulse for reconnecting state (lighthouse rhythm) * --sp-shimmer-degraded : cam-lost shimmer (single blink, not looping) * --sp-toast-delay : Director-cue toast delay after hide action */ /* ─── Motion token values ─────────────────────────────────────────────────── */ :root { --sp-fade-hide: 300ms ease-out; /* Player only — GM sees instant state change */ --sp-pulse-reconnecting: 1.5s ease-in-out infinite; --sp-shimmer-degraded: 800ms ease-in-out 1; /* single blink, not looping */ --sp-toast-delay: 1s; /* Director-cue toast delay */ --sp-transition-state: 200ms ease-out; /* Generic state token transition */ /* Urgency tokens (Layer 3 per AC7) — NEVER inherit Foundry error/warn colours */ /* Director cues = deliberate stage direction, not a failure. */ --sp-urgency-director: var(--sp-theme-urgency, #c8982a); --sp-urgency-awareness: var(--sp-text-secondary); } /* ─── Keyframe animations ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { @keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes sp-shimmer { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes sp-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Reconnecting ring pulse — applied via .sp-state-ring--pulse */ .sp-state-ring--pulse { animation: sp-pulse var(--sp-pulse-reconnecting); } /* cam-lost shimmer — applied via .sp-state-cam-lost */ .sp-state-cam-lost .sp-state-ring--dashed { animation: sp-shimmer var(--sp-shimmer-degraded); } } /* ─── Reduced motion overrides (global) ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Target specific animated elements instead of universal selector */ .sp-state-ring--pulse, .sp-state-cam-lost .sp-state-ring--dashed { animation: none; transition: none; } } /* ─── Allowed transitions (opacity, background-color, border-color only) ─── */ /* Transitions on layout properties (width, height, max-height, transform) are forbidden except for the ScryingPoolStrip collapsed ↔ expanded toggle which uses max-width exclusively (never width animation). */