/* ============================================================ Silvaril Quest — Tactile primitives. Mirrors the MAUI TapScaleBehavior (0.96 press / 80ms cubic-out / 120ms spring-back) on the web using CSS transitions + pointer events. The .rw-press class opts any element into the press feedback; the --rw-press-scale variable lets callers override. Gesture-progress CSS variables are written live by rw-gesture.js: --rw-swipe-progress 0..1 while swipe-up is active --rw-slide-progress 0..1 while slide-to-confirm is active --rw-press 1 while the bound element is pressed ============================================================ */ :root { --rw-tactile-press-scale: 0.96; --rw-tactile-press-in: cubic-bezier(0.4, 0, 0.2, 1); --rw-tactile-press-out: cubic-bezier(0.2, 0.8, 0.2, 1); --rw-tactile-press-in-ms: 80ms; --rw-tactile-press-out-ms: 120ms; } .rw-press { transition: transform var(--rw-tactile-press-out-ms) var(--rw-tactile-press-out), filter var(--rw-tactile-press-out-ms) ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform; } .rw-press:active, .rw-press[data-rw-gesture-active] { transform: scale(var(--rw-tactile-press-scale)); transition: transform var(--rw-tactile-press-in-ms) var(--rw-tactile-press-in), filter var(--rw-tactile-press-in-ms) ease; } /* Disable scale-on-press for reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .rw-press, .rw-press:active, .rw-press[data-rw-gesture-active] { transform: none !important; transition: none !important; } } /* ------------------------------------------------------------ Dice disc press halo — the signature gesture affordance. Uses --rw-swipe-progress from rw-gesture.js to light up the disc as the user drags upward. ------------------------------------------------------------ */ .rw-dice-disc { --rw-swipe-progress: 0; transform: translateY(calc(var(--rw-swipe-progress) * -24px)) scale(calc(1 + var(--rw-swipe-progress) * 0.06)); transition: transform 140ms var(--rw-tactile-press-out); } .rw-dice-disc[data-rw-gesture-active] { transition: none; } .rw-dice-disc::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--rw-gold); opacity: calc(var(--rw-swipe-progress) * 0.9); box-shadow: 0 0 calc(var(--rw-swipe-progress) * 24px) var(--rw-gold-light); pointer-events: none; transition: opacity 140ms ease; } /* ------------------------------------------------------------ Slide-to-confirm track fill. ------------------------------------------------------------ */ .rw-slide-track { --rw-slide-progress: 0; position: relative; overflow: hidden; } .rw-slide-track::before { content: ""; position: absolute; inset: 0; width: calc(var(--rw-slide-progress) * 100%); background: linear-gradient(90deg, rgba(196, 160, 64, 0.1), rgba(196, 160, 64, 0.35)); transition: width 120ms var(--rw-tactile-press-out); pointer-events: none; } .rw-slide-track[data-rw-gesture-active]::before { transition: none; } /* Thumb indicator that rides the slide. */ .rw-slide-thumb { position: absolute; top: 50%; left: calc(var(--rw-slide-progress, 0) * (100% - 48px)); transform: translateY(-50%); transition: left 120ms var(--rw-tactile-press-out); pointer-events: none; } .rw-slide-track[data-rw-gesture-active] .rw-slide-thumb { transition: none; } /* ------------------------------------------------------------ Low-power mode — disables decorative animations when the device is under 20% battery (or the user forced the pref). rw-gesture.js toggles .rw-low-power on . ------------------------------------------------------------ */ .rw-low-power .rw-ambient__pulse, .rw-low-power .rw-ambient--inhaling, .rw-low-power .rw-ambient__concentration--strained, .rw-low-power .rw-ambient__concentration-crack, .rw-low-power .rw-ambient__attention, .rw-low-power .rw-ambient__turn-badge--active, .rw-low-power .rw-dock__reaction, .rw-low-power .rw-dock__reaction-pulse, .rw-low-power .rw-dock--downed .rw-dock__dice, .rw-low-power .rw-narration-toggle--active, .rw-low-power .player-dashboard--hushed::after { animation: none !important; } .rw-low-power .rw-ambient__pulse--damage, .rw-low-power .rw-ambient__pulse--heal, .rw-low-power .rw-ambient__pulse--crit { /* Pulses are informational — still flash briefly, but no ease-in. */ animation-duration: 0.3s !important; animation-timing-function: linear !important; } /* ------------------------------------------------------------ Narration toggle (GM-only fixed control in LiveSession). ------------------------------------------------------------ */ .rw-narration-toggle { all: unset; cursor: pointer; position: fixed; top: calc(env(safe-area-inset-top) + 0.55rem); right: 0.75rem; z-index: 50; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid rgba(196, 160, 64, 0.45); border-radius: var(--rw-radius-pill); background: rgba(12, 20, 28, 0.9); color: var(--rw-text-dim); font-family: var(--rw-font-sc, "Alegreya SC"), serif; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: color var(--rw-transition), background var(--rw-transition), border-color var(--rw-transition), box-shadow var(--rw-transition); -webkit-tap-highlight-color: transparent; } .rw-narration-toggle:hover, .rw-narration-toggle:focus-visible { color: var(--rw-gold-light); border-color: var(--rw-gold); } .rw-narration-toggle--active { color: var(--rw-gold-glow, var(--rw-gold-light)); background: rgba(196, 160, 64, 0.14); border-color: var(--rw-gold); box-shadow: 0 0 14px rgba(196, 160, 64, 0.3), inset 0 0 6px rgba(196, 160, 64, 0.12); animation: rw-narration-pulse 2.2s ease-in-out infinite; } @keyframes rw-narration-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(196, 160, 64, 0.2), inset 0 0 6px rgba(196, 160, 64, 0.08); } 50% { box-shadow: 0 0 18px rgba(196, 160, 64, 0.4), inset 0 0 10px rgba(196, 160, 64, 0.18); } } @media (prefers-reduced-motion: reduce) { .rw-narration-toggle--active { animation: none; } }