/* ========================================================================== RemoSync -- Animation & Transition System v1.0 ========================================================================== Load order: 1. fonts.css -- @font-face declarations 2. base.css -- Reset, tokens, layout, components 3. theme-*.css -- Theme-specific custom property overrides 4. animations.css -- THIS FILE (keyframes, transition classes, theme FX) ========================================================================== Performance contract: - ALL animations use transform / opacity ONLY (GPU composited) - No layout-triggering properties animated (width, height, top, left) - Every duration <= 400ms - will-change applied sparingly and removed after animation ========================================================================== Naming: .rs-{category}-{action} Categories: theme, overlay, resync, fragment, page, pointer, spotlight, skeleton, toast, progress, spinner, sync-dot, input, btn ========================================================================== */ /* ========================================================================== 1. THEME TRANSITIONS ========================================================================== */ .rs-theme-transition { transition: background-color 400ms ease-in-out, color 400ms ease-in-out, border-color 400ms ease-in-out, box-shadow 400ms ease-in-out; } .rs-theme-transitioning { opacity: 0; transition: opacity 200ms ease-in; } .rs-theme-transitioning--reveal { opacity: 1; transition: opacity 200ms ease-out; } /* * Cross-fade strategy: * 1. Add .rs-theme-transitioning to (opacity -> 0, 200ms) * 2. Swap data-rs-theme / data-rs-mode attributes * 3. Remove .rs-theme-transitioning, add .rs-theme-transitioning--reveal * 4. After 200ms remove .rs-theme-transitioning--reveal * Total perceived: 400ms = var(--rs-transition-slow) */ /* ========================================================================== 2. OVERLAY ANIMATIONS ========================================================================== */ @keyframes rs-overlay-slide-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes rs-overlay-slide-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } } .rs-overlay-enter { animation: rs-overlay-slide-in 300ms ease-out both; will-change: transform, opacity; } .rs-overlay-exit { animation: rs-overlay-slide-out 200ms ease-in both; will-change: transform, opacity; } .rs-overlay-auto-hide { opacity: 1; transition: opacity 300ms ease-in; } .rs-overlay-auto-hide--fading { opacity: 0; pointer-events: none; } .rs-overlay-btn-hover { transition: transform 150ms ease-out, background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .rs-overlay-btn-hover:hover { transform: scale(1.1); } .rs-overlay-btn-active:active { transform: scale(0.95); transition: transform 50ms ease-in; } /* ========================================================================== 3. RESYNC VISUAL FEEDBACK ========================================================================== */ @keyframes rs-resync-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes rs-resync-glow { 0%, 100% { box-shadow: 0 0 4px var(--rs-accent-primary); } 50% { box-shadow: 0 0 12px var(--rs-accent-primary), 0 0 24px var(--rs-accent-muted); } } @keyframes rs-checkmark-appear { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 50% { transform: scale(1.2) rotate(0deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .rs-resync-pulse { position: relative; } .rs-resync-pulse::after { content: ''; position: absolute; inset: 0; border-radius: var(--rs-radius-full); border: 2px solid var(--rs-accent-primary); animation: rs-resync-ring 600ms ease-out both; pointer-events: none; } .rs-resync-active { animation: rs-resync-glow 1s ease-in-out infinite; will-change: box-shadow; } .rs-resync-complete { animation: rs-checkmark-appear 350ms ease-out both; } /* ========================================================================== 4. FRAGMENT REVEAL ========================================================================== */ @keyframes rs-fragment-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rs-fragment-reveal { animation: rs-fragment-fade-in 200ms ease-in both; will-change: transform, opacity; } .rs-fragment-collapse { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 300ms ease-in-out, opacity 200ms ease-in; } .rs-fragment-collapse--visible { max-height: 2000px; opacity: 1; transition: max-height 300ms ease-in-out, opacity 200ms ease-out 100ms; } /* ========================================================================== 5. PAGE NAVIGATION ========================================================================== */ @keyframes rs-page-in-from-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes rs-page-out-to-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-24px); } } @keyframes rs-page-in-from-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes rs-page-out-to-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } .rs-page-enter { animation: rs-page-in-from-right 300ms ease-out both; will-change: transform, opacity; } .rs-page-enter--reverse { animation: rs-page-in-from-left 300ms ease-out both; will-change: transform, opacity; } .rs-page-exit { animation: rs-page-out-to-left 200ms ease-in both; will-change: transform, opacity; } .rs-page-exit--reverse { animation: rs-page-out-to-right 200ms ease-in both; will-change: transform, opacity; } .rs-page-instant { animation: none; opacity: 1; transform: none; } :root[data-rs-page-transition-enabled="false"] .rs-page-enter, :root[data-rs-page-transition-enabled="false"] .rs-page-enter--reverse, :root[data-rs-page-transition-enabled="false"] .rs-page-exit, :root[data-rs-page-transition-enabled="false"] .rs-page-exit--reverse { animation: none !important; opacity: 1 !important; transform: none !important; } /* ========================================================================== 6. POINTER & TOOLS ========================================================================== */ @keyframes rs-pointer-continuous-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; } } .rs-pointer-pulse { animation: rs-pointer-continuous-pulse 2s ease-in-out infinite; will-change: transform, opacity; } @keyframes rs-spotlight-fade-in { from { opacity: 0; } to { opacity: 1; } } .rs-spotlight-appear { animation: rs-spotlight-fade-in 200ms ease-out both; } .rs-spotlight-move { transition: --rs-spotlight-x 150ms ease-out, --rs-spotlight-y 150ms ease-out; } /* Fallback: smooth repositioning via inline style */ .rs-spotlight-move--fallback { transition: background 150ms ease-out; } /* D-29 — las reglas de `.rs-annotation-draw` se retiraron con su unico llamante. `RSCoreTools.renderAnnotations` pintaba las marcas como `
` en la capa del anfitrion; desde la fusion, la marca es un objeto del panel (`kind: 'dot'`) y la pinta el agente DENTRO del marco, con el resto de las formas. */ } /* ========================================================================== 7. LOADING & FEEDBACK ========================================================================== */ /* --- Skeleton Shimmer --- */ @keyframes rs-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .rs-skeleton-pulse { background: linear-gradient( 90deg, var(--rs-surface-2) 25%, var(--rs-surface-3, rgba(255,255,255,0.08)) 50%, var(--rs-surface-2) 75% ); background-size: 200% 100%; animation: rs-shimmer 1.5s ease-in-out infinite; } /* --- Toast Enter / Exit --- */ @keyframes rs-toast-slide-in { from { opacity: 0; transform: translateX(100%) translateY(-8px); } to { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes rs-toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .rs-toast-enter { animation: rs-toast-slide-in 250ms ease-out both; will-change: transform, opacity; } .rs-toast-exit { animation: rs-toast-slide-out 200ms ease-in both; will-change: transform, opacity; } /* --- Progress Bar --- */ .rs-progress-fill { transition: transform 350ms ease-in-out; transform-origin: left center; } /* Width-based fallback (use transform: scaleX for GPU path) */ .rs-progress-fill--scale { transform: scaleX(var(--rs-progress, 0)); transition: transform 350ms ease-in-out; } /* --- Spinner --- */ @keyframes rs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rs-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--rs-border-default); border-top-color: var(--rs-accent-primary); border-radius: var(--rs-radius-full); animation: rs-spin 1s linear infinite; will-change: transform; } .rs-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; } .rs-spinner--lg { width: 32px; height: 32px; border-width: 3px; } /* ========================================================================== 8. STUDENT SYNC INDICATORS ========================================================================== */ @keyframes rs-pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } } @keyframes rs-pulse-amber { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); } } @keyframes rs-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } } .rs-sync-dot-synced { background-color: var(--rs-success); animation: rs-pulse-green 3s ease-in-out infinite; } .rs-sync-dot-updating { background-color: var(--rs-warning); animation: rs-pulse-amber 1s ease-in-out infinite; } .rs-sync-dot-disconnected { background-color: var(--rs-error); animation: rs-pulse-red 2s ease-in-out infinite; } /* ========================================================================== 9. FORM INTERACTIONS ========================================================================== */ .rs-input-focus { transition: border-color 150ms ease, box-shadow 150ms ease; } .rs-input-focus:focus { border-color: var(--rs-accent-primary); box-shadow: 0 0 0 3px var(--rs-accent-muted); } @keyframes rs-input-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-4px); } 30% { transform: translateX(4px); } 45% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 90% { transform: translateX(2px); } } .rs-input-error { animation: rs-input-shake 300ms ease-in-out; border-color: var(--rs-error) !important; } .rs-btn-loading { position: relative; color: transparent !important; pointer-events: none; } .rs-btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: var(--rs-radius-full); animation: rs-spin 0.8s linear infinite; } /* Success flash after form submit */ @keyframes rs-btn-success-flash { 0% { background-color: var(--rs-success); } 100% { background-color: var(--rs-accent-primary); } } .rs-btn-success-flash { animation: rs-btn-success-flash 400ms ease-out; } /* ========================================================================== 10. SCROLL-TRIGGERED REVEALS (IntersectionObserver) ========================================================================== */ .rs-scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity 300ms ease-out, transform 300ms ease-out; } .rs-scroll-reveal--visible { opacity: 1; transform: translateY(0); } .rs-scroll-reveal--delay-1 { transition-delay: 50ms; } .rs-scroll-reveal--delay-2 { transition-delay: 100ms; } .rs-scroll-reveal--delay-3 { transition-delay: 150ms; } .rs-scroll-reveal--delay-4 { transition-delay: 200ms; } /* ========================================================================== 11. THEME-SPECIFIC ANIMATIONS: HACKER ========================================================================== */ /* Scan line overlay effect */ :root[data-rs-theme="hacker"] .rs-scanline { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 65, 0.03) 2px, rgba(0, 255, 65, 0.03) 4px ); } :root[data-rs-theme="hacker"] .rs-scanline-beam { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 180deg, transparent, rgba(0, 255, 65, 0.12), transparent ); z-index: 2; pointer-events: none; animation: rs-scanline 4s linear infinite; will-change: transform; } /* Glow pulse on accent elements */ @keyframes rs-hacker-glow-pulse { 0%, 100% { text-shadow: 0 0 6px rgba(0, 255, 65, 0.6); } 50% { text-shadow: 0 0 14px rgba(0, 255, 65, 0.9), 0 0 28px rgba(0, 255, 65, 0.4); } } :root[data-rs-theme="hacker"] .rs-hacker-glow { animation: rs-hacker-glow-pulse 2s ease-in-out infinite; } /* Terminal cursor blink */ @keyframes rs-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } :root[data-rs-theme="hacker"] .rs-terminal-cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--rs-accent-primary); vertical-align: text-bottom; animation: rs-cursor-blink 1s step-end infinite; } /* Matrix-green glow on focus */ :root[data-rs-theme="hacker"] input:focus, :root[data-rs-theme="hacker"] select:focus, :root[data-rs-theme="hacker"] textarea:focus { box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.15), 0 0 12px rgba(0, 255, 65, 0.1); } /* ========================================================================== 12. THEME-SPECIFIC ANIMATIONS: SYNTHWAVE ========================================================================== */ /* Gradient text shimmer */ @keyframes rs-text-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } :root[data-rs-theme="synthwave"] .rs-synthwave-shimmer { background: linear-gradient( 90deg, var(--rs-accent-primary) 0%, var(--rs-accent-secondary, #00d4ff) 25%, var(--rs-accent-primary) 50%, var(--rs-accent-secondary, #00d4ff) 75%, var(--rs-accent-primary) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rs-text-shimmer 4s linear infinite; } /* Neon glow pulse on buttons */ @keyframes rs-neon-pulse { 0%, 100% { box-shadow: 0 0 4px var(--rs-accent-primary), 0 0 8px rgba(255, 45, 149, 0.2); } 50% { box-shadow: 0 0 8px var(--rs-accent-primary), 0 0 20px rgba(255, 45, 149, 0.4), 0 0 32px rgba(255, 45, 149, 0.15); } } :root[data-rs-theme="synthwave"] .rs-btn--primary { animation: rs-neon-pulse 2.5s ease-in-out infinite; } /* Perspective grid drift */ @keyframes rs-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } } :root[data-rs-theme="synthwave"] .rs-grid-perspective { position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; background-image: linear-gradient(rgba(123, 47, 247, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 47, 247, 0.15) 1px, transparent 1px); background-size: 40px 40px; transform: perspective(500px) rotateX(60deg); transform-origin: bottom center; pointer-events: none; z-index: -1; animation: rs-grid-drift 3s linear infinite; will-change: background-position; } /* Horizon glow breathing */ @keyframes rs-horizon-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } :root[data-rs-theme="synthwave"] .rs-horizon-glow { position: fixed; bottom: 25vh; left: -10%; right: -10%; height: 120px; background: linear-gradient( 180deg, transparent, rgba(255, 45, 149, 0.08), rgba(123, 47, 247, 0.06), transparent ); pointer-events: none; z-index: -1; animation: rs-horizon-glow 5s ease-in-out infinite; } /* ========================================================================== 13. THEME-SPECIFIC ANIMATIONS: ACADEMIC ========================================================================== */ /* Drop cap fade-in on page load */ @keyframes rs-dropcap-fade { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } :root[data-rs-theme="academic"] .rs-content > p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: 0.85; font-weight: var(--rs-font-bold); color: var(--rs-accent-primary); margin-right: 0.08em; margin-top: 0.05em; animation: rs-dropcap-fade 400ms ease-out both; } /* Decorative border drawing */ @keyframes rs-border-draw-top { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes rs-border-draw-side { from { transform: scaleY(0); } to { transform: scaleY(1); } } :root[data-rs-theme="academic"] .rs-academic-border { position: relative; } :root[data-rs-theme="academic"] .rs-academic-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rs-accent-primary); transform-origin: left center; animation: rs-border-draw-top 400ms ease-out both; } :root[data-rs-theme="academic"] .rs-academic-border::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: var(--rs-accent-primary); transform-origin: top center; animation: rs-border-draw-side 400ms ease-out 200ms both; } /* Page-turn effect for content transitions */ @keyframes rs-page-turn-out { from { opacity: 1; transform: perspective(1200px) rotateY(0deg); } to { opacity: 0; transform: perspective(1200px) rotateY(-15deg); } } @keyframes rs-page-turn-in { from { opacity: 0; transform: perspective(1200px) rotateY(10deg); } to { opacity: 1; transform: perspective(1200px) rotateY(0deg); } } :root[data-rs-theme="academic"] .rs-page-enter { animation: rs-page-turn-in 350ms ease-out both; transform-origin: left center; } :root[data-rs-theme="academic"] .rs-page-exit { animation: rs-page-turn-out 250ms ease-in both; transform-origin: left center; } /* ========================================================================== 14. THEME-SPECIFIC ANIMATIONS: 3D / GPU ========================================================================== */ /* Glass panel hover lift */ :root[data-rs-theme="3d"] .rs-glass-lift { transition: transform 250ms ease-out, box-shadow 250ms ease-out; } :root[data-rs-theme="3d"] .rs-glass-lift:hover { transform: translateY(-4px) translateZ(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Particle drift (CSS-only subtle motion) */ @keyframes rs-particle-drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(-100vh) translateX(20px); opacity: 0; } } :root[data-rs-theme="3d"] .rs-particle { position: fixed; width: 2px; height: 2px; border-radius: var(--rs-radius-full); background: var(--rs-accent-primary); pointer-events: none; z-index: -1; opacity: 0; } :root[data-rs-theme="3d"] .rs-particle:nth-child(1) { left: 15%; bottom: -5%; animation: rs-particle-drift 12s linear infinite; } :root[data-rs-theme="3d"] .rs-particle:nth-child(2) { left: 35%; bottom: -5%; animation: rs-particle-drift 16s linear infinite 3s; } :root[data-rs-theme="3d"] .rs-particle:nth-child(3) { left: 60%; bottom: -5%; animation: rs-particle-drift 14s linear infinite 7s; } :root[data-rs-theme="3d"] .rs-particle:nth-child(4) { left: 80%; bottom: -5%; animation: rs-particle-drift 18s linear infinite 1s; } :root[data-rs-theme="3d"] .rs-particle:nth-child(5) { left: 50%; bottom: -5%; animation: rs-particle-drift 15s linear infinite 5s; } /* Light refraction shift on glass surfaces */ @keyframes rs-refraction { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } :root[data-rs-theme="3d"] .rs-glass-refraction { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.06) 100% ); background-size: 200% 200%; animation: rs-refraction 8s ease-in-out infinite; } /* Glassmorphism blur transition for overlay show/hide */ :root[data-rs-theme="3d"] .rs-glass-blur-transition { transition: backdrop-filter 300ms ease-out, -webkit-backdrop-filter 300ms ease-out, opacity 300ms ease-out; } :root[data-rs-theme="3d"] .rs-glass-blur-transition--hidden { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); opacity: 0; } :root[data-rs-theme="3d"] .rs-glass-blur-transition--visible { backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); opacity: 1; } /* ========================================================================== 15. UTILITY ANIMATION CLASSES ========================================================================== */ /* Fade in/out helpers */ .rs-fade-in { animation: rs-fade-in 200ms ease-out both; } .rs-fade-out { animation: rs-fade-out 200ms ease-in both; } @keyframes rs-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Scale in */ .rs-scale-in { animation: rs-scale-in 200ms ease-out both; } /* Slide utilities */ .rs-slide-up { animation: rs-slide-up 250ms ease-out both; } .rs-slide-down { animation: rs-slide-down 250ms ease-out both; } @keyframes rs-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes rs-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 16. PREFERS-REDUCED-MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* * Strategy: * - Remove ALL keyframe animations (duration -> near-zero) * - Keep opacity transitions but make them instant * - Keep color/border transitions (non-motion) * - Disable all transform-based animations * - Disable decorative elements (scanlines, particles, grids) */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Preserve color transitions for theme switching */ .rs-theme-transition { transition: background-color 0.01ms, color 0.01ms, border-color 0.01ms !important; } /* Disable theme transition opacity flash */ .rs-theme-transitioning, .rs-theme-transitioning--reveal { opacity: 1 !important; transition: none !important; } /* Disable overlay slide -- just show/hide */ .rs-overlay-enter, .rs-overlay-exit { animation: none !important; opacity: 1; transform: none; } .rs-overlay-auto-hide--fading { transition: none !important; } /* Disable hover transforms */ .rs-overlay-btn-hover:hover, .rs-overlay-btn-active:active { transform: none !important; } /* Disable resync effects */ .rs-resync-pulse::after, .rs-resync-active, .rs-resync-complete { animation: none !important; } /* Fragments: instant reveal, no slide */ .rs-fragment-reveal { animation: none !important; opacity: 1; transform: none; } /* Pages: instant swap */ .rs-page-enter, .rs-page-enter--reverse, .rs-page-exit, .rs-page-exit--reverse { animation: none !important; opacity: 1; transform: none; } /* Pointer: no pulse, just show */ .rs-pointer-pulse { animation: none !important; opacity: 0.85; } /* Sync dots: no pulse, just color */ .rs-sync-dot-synced, .rs-sync-dot-updating, .rs-sync-dot-disconnected { animation: none !important; } /* Input shake: no motion */ .rs-input-error { animation: none !important; } /* Spinner: keep for functional feedback but reduce */ .rs-spinner { animation-duration: 1s !important; animation-iteration-count: infinite !important; } .rs-btn-loading::after { animation-duration: 1s !important; animation-iteration-count: infinite !important; } /* Skeleton: instant color, no shimmer */ .rs-skeleton-pulse { animation: none !important; opacity: 0.5; } /* Toast: instant show/hide */ .rs-toast-enter, .rs-toast-exit { animation: none !important; opacity: 1; transform: none; } /* Scroll reveals: just show */ .rs-scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* --- Theme-specific decorative elements --- */ /* Hacker: disable scanlines and glow */ :root[data-rs-theme="hacker"] .rs-scanline, :root[data-rs-theme="hacker"] .rs-scanline-beam { display: none !important; } :root[data-rs-theme="hacker"] .rs-hacker-glow, :root[data-rs-theme="hacker"] .rs-terminal-cursor { animation: none !important; } /* Synthwave: disable grid, glow, shimmer */ :root[data-rs-theme="synthwave"] .rs-grid-perspective { display: none !important; } :root[data-rs-theme="synthwave"] .rs-horizon-glow { display: none !important; } :root[data-rs-theme="synthwave"] .rs-synthwave-shimmer { animation: none !important; -webkit-text-fill-color: var(--rs-accent-primary); } :root[data-rs-theme="synthwave"] .rs-btn--primary { animation: none !important; } /* Academic: disable page-turn, drop cap animation */ :root[data-rs-theme="academic"] .rs-page-enter, :root[data-rs-theme="academic"] .rs-page-exit { animation: none !important; transform: none; opacity: 1; } :root[data-rs-theme="academic"] .rs-academic-border::before, :root[data-rs-theme="academic"] .rs-academic-border::after { animation: none !important; transform: none; } /* 3D: disable particles, refraction, lift */ :root[data-rs-theme="3d"] .rs-particle { display: none !important; } :root[data-rs-theme="3d"] .rs-glass-refraction { animation: none !important; } :root[data-rs-theme="3d"] .rs-glass-lift:hover { transform: none !important; } :root[data-rs-theme="3d"] .rs-glass-blur-transition { transition: none !important; } } /* ========================================================================== 17. DEGRADACION POR RENDIMIENTO — `.rs-perf-degraded` ========================================================================== La mitad que faltaba. `animation-controller.js` pone `.rs-perf-degraded` en `` cuando la media de FPS cae por debajo de 30 durante 10 muestras, y la guia de movimiento (`docs/specs/remosync-motion-design-v1.0.md`, §2.4 y §7.5) documenta el gancho desde el principio. Hasta ahora no habia NI UNA regla CSS que lo consumiera en todo el proyecto: la clase se ponia, `ClienteTest` comprobaba que se ponia, y no pasaba absolutamente nada. La mitad que si funcionaba —`shouldSkipAnimation()`— solo salta las animaciones que dispara el propio JS. Las declaradas en CSS seguian corriendo enteras: las 39 de esta hoja, las 11 de base.css, las 4 del tema 3d oscuro y los barridos infinitos de scanline y glow. Es decir, seguia costando GPU exactamente lo que habia hundido los FPS. Se separa de `prefers-reduced-motion` a proposito. No es la misma decision: una es una preferencia declarada por la persona y es permanente; esta es una medida de emergencia que el cliente pone y quita sola. Comparten tecnica y no comparten motivo, asi que comparten reglas y no selector. ========================================================================== */ :root.rs-perf-degraded *, :root.rs-perf-degraded *::before, :root.rs-perf-degraded *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* * Las capas decorativas se retiran, no se aceleran. Con solo * `animation-iteration-count: 1` una scanline o un glitch se quedan * congelados en su ultimo fotograma —una banda fija sobre el contenido— y * ademas siguen forzando una capa de composicion por cada uno. Que * desaparezcan es lo unico que devuelve los FPS. */ :root.rs-perf-degraded body::before, :root.rs-perf-degraded body::after { display: none !important; } :root.rs-perf-degraded .rs-scanline, :root.rs-perf-degraded .rs-scanline-beam, :root.rs-perf-degraded .rs-scanline-overlay, :root.rs-perf-degraded .rs-grid-bg, :root.rs-perf-degraded .rs-grid-perspective, :root.rs-perf-degraded .rs-horizon-glow { display: none !important; } /* El desenfoque de cristal del tema 3d es de los efectos mas caros que hay. */ :root.rs-perf-degraded .rs-glass, :root.rs-perf-degraded[data-rs-theme="3d"] .rs-card, :root.rs-perf-degraded[data-rs-theme="3d"] .rs-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Los resplandores se apagan: un `text-shadow` o un `box-shadow` grande y * difuso repinta en cada fotograma de cualquier cosa que se mueva encima. */ :root.rs-perf-degraded[data-rs-theme="hacker"] h1, :root.rs-perf-degraded[data-rs-theme="hacker"] h2, :root.rs-perf-degraded[data-rs-theme="synthwave"] h1, :root.rs-perf-degraded[data-rs-theme="synthwave"] h2, :root.rs-perf-degraded[data-rs-theme="3d"] h1, :root.rs-perf-degraded[data-rs-theme="3d"] h2 { text-shadow: none !important; } /* * El esqueleto de carga pierde el barrido y se queda plano: sigue diciendo * «aqui va a llegar contenido» sin animar nada. */ :root.rs-perf-degraded .rs-skeleton { animation: none !important; background-image: none !important; }