/* ============================================================ PANEL MOTION — capa de movimiento para los comparadores. Reveals al hacer scroll, stagger de tarjetas y micro- interacciones. La activa panel-motion.js añadiendo .ws-motion al (no se añade si prefers-reduced-motion). Cargar después de panel-skin.css. ============================================================ */ /* ---------- Reveals al entrar en viewport ---------- */ body.ws-motion .ws-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--ws-delay, 0s); will-change: opacity, transform; } body.ws-motion .ws-reveal.ws-in { opacity: 1; transform: translateY(0); } /* Las animaciones de carga de comparacion_visual.css pasan a ser reveals de scroll: se neutralizan para no animar dos veces */ body.ws-motion .comparison-left, body.ws-motion .comparison-right, body.ws-motion .specs-table-section, body.ws-motion .winner-banner { animation: none; } /* ---------- Entrada en cascada de las tarjetas del viewport ---------- */ body.ws-motion .processor-card.ws-card-in { animation: wsCardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes wsCardIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Slots: pop al seleccionar ---------- */ body.ws-motion .selection-slot.has-selection { animation: wsSlotPop 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes wsSlotPop { 0% { transform: scale(0.96); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } } /* ---------- Contadores: rebote al cambiar ---------- */ body.ws-motion .ws-bump { animation: wsBump 0.32s ease; } @keyframes wsBump { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } /* ---------- Feedback de pulsación en botones ---------- */ body.ws-motion .compare-action button:active, body.ws-motion .search-form button:active, body.ws-motion .btn-share:active, body.ws-motion .specs-diff-btn:active, body.ws-motion .specs-expand-btn:active, body.ws-motion .btn-scoring-info:active, body.ws-motion .btn-compat-cpu:active, body.ws-motion .brand-pill:active, body.ws-motion .score-mode-btn:active { transform: scale(0.96); } /* ---------- Panel "enfocado" al pasar el ratón (estilo DCC) ---------- */ body.ws-motion .ws-panel, body.ws-motion .processors-list-wrapper, body.ws-motion .visual-comparison { transition: border-color 0.25s ease; } body.ws-motion .ws-panel:hover, body.ws-motion .processors-list-wrapper:hover, body.ws-motion .visual-comparison:hover { border-color: rgba(255, 107, 53, 0.3); } /* Las sugerencias de búsqueda están dentro de .filters-row, que recibe will-change y crea un stacking context. Sin z-index explícito el contexto queda debajo de .processors-list-wrapper (posterior en DOM). */ body.ws-motion .filters-row { position: relative; z-index: 10; } /* ---------- Scroll suave en áreas internas ---------- */ body.ws-motion .processors-list-wrapper, body.ws-motion .side-filter-scroll { scroll-behavior: smooth; } /* ---------- Botón volver arriba ---------- */ .ws-backtop { position: fixed; right: 18px; bottom: 18px; z-index: 300; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; background: rgba(24, 24, 24, 0.92); color: var(--primary-color, #ff6b35); font-size: 0.9rem; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease; } .ws-backtop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .ws-backtop:hover { background: rgba(255, 107, 53, 0.15); border-color: rgba(255, 107, 53, 0.5); } body.light-theme .ws-backtop { background: rgba(248, 248, 248, 0.95); border-color: rgba(0, 0, 0, 0.12); } @media (prefers-reduced-motion: reduce) { .ws-backtop { transition: none; } }