───────────────────────────────────────────────────────────────── */ .rv-glow-red { position: relative; } .rv-glow-red::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(230,57,70,.14) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(99,102,241,.06) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Variante: glow mais forte (para auth pages) */ .rv-glow-strong::before { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(230,57,70,.22) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(99,102,241,.10) 0%, transparent 60%); } /* ───────────────────────────────────────────────────────────────── SPEED LINES — Linhas de velocidade horizontais Uso:

───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .speed-line { position: fixed; height: 1px; width: 200px; background: linear-gradient(90deg, transparent, rgba(230,57,70,.35), transparent); animation: rvPassBy 6s infinite linear; opacity: 0; pointer-events: none; z-index: 1; will-change: transform, opacity; } @keyframes rvPassBy { 0% { transform: translateX(-100vw) skewX(-40deg); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } 100% { transform: translateX(110vw) skewX(-40deg); opacity: 0; } } /* Linhas mais sutis para páginas internas (não auth) */ .speed-line-subtle { position: fixed; height: 1px; width: 150px; background: linear-gradient(90deg, transparent, rgba(230,57,70,.15), transparent); animation: rvPassBy 8s infinite linear; opacity: 0; pointer-events: none; z-index: 1; will-change: transform, opacity; } } @media (prefers-reduced-motion: reduce) { .speed-line, .speed-line-subtle { display: none !important; } } /* ───────────────────────────────────────────────────────────────── GLASSMORPHISM — Cards e modais com blur ───────────────────────────────────────────────────────────────── */ .rv-glass-card { background: rgba(255,255,255,0.75); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--rv-radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.06); } .dark .rv-glass-card { background: rgba(18,18,20,0.85); border-color: rgba(255,255,255,0.06); box-shadow: 0 8px 32px rgba(0,0,0,0.30); } /* Modal overlay com blur — exibido via JS removendo .hidden */ .rv-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.60); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } /* Respeitar Tailwind .hidden — evita que display:flex sobreponha display:none */ .rv-modal-overlay.hidden { display: none; } /* ───────────────────────────────────────────────────────────────── GLOW EFFECTS — Botões e elementos com brilho ───────────────────────────────────────────────────────────────── */ .rv-glow { box-shadow: 0 0 20px rgba(230,57,70,0.20); transition: box-shadow 0.25s; } .rv-glow:hover { box-shadow: 0 0 30px rgba(230,57,70,0.35); } .rv-glow-yellow { box-shadow: 0 0 20px rgba(255,230,0,0.15); } .rv-glow-yellow:hover { box-shadow: 0 0 30px rgba(255,230,0,0.25); } .rv-glow-emerald { box-shadow: 0 0 20px rgba(34,197,94,0.15); } .rv-glow-emerald:hover { box-shadow: 0 0 30px rgba(34,197,94,0.25); } /* ───────────────────────────────────────────────────────────────── GRID PATTERN — Background de grade sutil Uso: ───────────────────────────────────────────────────────────────── */ .rv-grid-bg { background-image: linear-gradient(rgba(230,57,70,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(230,57,70,.03) 1px, transparent 1px); background-size: 40px 40px; } .dark .rv-grid-bg { background-image: linear-gradient(rgba(230,57,70,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(230,57,70,.02) 1px, transparent 1px); } /* ───────────────────────────────────────────────────────────────── MICRO ANIMATIONS — Entradas e transições ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .rv-enter { animation: rvEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; } .rv-enter-delay-1 { animation-delay: 50ms; } .rv-enter-delay-2 { animation-delay: 100ms; } .rv-enter-delay-3 { animation-delay: 150ms; } .rv-enter-delay-4 { animation-delay: 200ms; } @keyframes rvEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Escala suave para modais */ .rv-scale-in { animation: rvScaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes rvScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Pulso suave para badges/notificações */ .rv-pulse { animation: rvPulse 2s ease-in-out infinite; } @keyframes rvPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } } @media (prefers-reduced-motion: reduce) { .rv-enter, .rv-scale-in, .rv-pulse { animation: none !important; } } /* ───────────────────────────────────────────────────────────────── SKELETON LOADING — Placeholders enquanto carrega ───────────────────────────────────────────────────────────────── */ .rv-skeleton { background: linear-gradient(90deg, var(--rv-surface-2) 25%, var(--rv-surface-3) 50%, var(--rv-surface-2) 75%); background-size: 200% 100%; animation: rvSkeleton 1.5s ease infinite; border-radius: var(--rv-radius-md); } @keyframes rvSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }