81 lines
3.1 KiB
Plaintext
81 lines
3.1 KiB
Plaintext
/**
|
||
* 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).
|
||
*/
|