/* =================================================== EFECTOS VISUALES — Portafolio de José Marrufo Paleta: índigo (#6366f1) → cyan (#22d3ee) =================================================== */ /* --- Canvas de partículas de fondo (header) --- */ #network-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* --- SEGURIDAD: si por algo el JS no llega a cargar, las tarjetas se muestran normales (nunca en blanco) --- */ .reveal { opacity: 1; } /* Perspectiva 3D para el contenedor padre de las tarjetas con .reveal */ .reveal-grid { perspective: 1600px; } /* Solo se ocultan cuando tiene la clase "js-ready", confirmando que el script sí cargó y va a controlar el efecto. Cada tarjeta entra con una rotación 3D distinta según su posición (izquierda/derecha/centro), dando profundidad real al scroll. */ html.js-ready .reveal { opacity: 0; transform-style: preserve-3d; transform: translateY(40px) translateZ(-120px) rotateX(14deg) rotateY(0deg) scale(0.94); filter: blur(6px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1); } html.js-ready .reveal[data-tilt="left"] { transform: translateY(40px) translateZ(-160px) rotateX(10deg) rotateY(18deg) scale(0.92); } html.js-ready .reveal[data-tilt="right"] { transform: translateY(40px) translateZ(-160px) rotateX(10deg) rotateY(-18deg) scale(0.92); } html.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1); filter: blur(0); } /* Destello que recorre el borde justo al aparecer */ .reveal::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent, #6366f1, #22d3ee, transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; } html.js-ready .reveal.is-visible::after { animation: borderFlash 1s ease-out; } @keyframes borderFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } /* Escalonar tarjetas dentro del grid */ .reveal:nth-child(1) { transition-delay: 0s; } .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal:nth-child(4) { transition-delay: 0.24s; } .reveal:nth-child(5) { transition-delay: 0.32s; } .reveal:nth-child(6) { transition-delay: 0.4s; } /* --- Inclinación 3D sutil al pasar el mouse (tarjetas) --- */ .card-hover { position: relative; transform-style: preserve-3d; will-change: transform; } .card-hover .sweep { position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(99, 102, 241, 0.10) 40%, rgba(34, 211, 238, 0.16) 50%, rgba(99, 102, 241, 0.10) 60%, transparent ); transition: left 0.7s ease; pointer-events: none; z-index: 2; border-radius: inherit; } @media (hover: hover) { .card-hover:hover .sweep { left: 130%; } } /* --- Halo que sigue el cursor en el header (efecto "wow" de entrada) --- */ #hero-spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(500px circle at var(--spot-x, 50%) var(--spot-y, 30%), rgba(99, 102, 241, 0.14), transparent 60%); transition: background 0.15s ease; } /* --- Degradado animado sutil en el nombre (un único "momento" de marca) --- */ .name-gradient-animated { background-size: 200% 200%; animation: nameShift 6s ease-in-out infinite; } @keyframes nameShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- Tarjetas de la sección "Conocimiento en Servidores & IA" --- */ .skill-card-3d { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .skill-card-3d:hover { transform: translateY(-8px) rotateX(6deg); } .skill-card-3d:hover .skill-icon-3d { transform: translateZ(30px) scale(1.08); } } .skill-icon-3d { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transform: translateZ(0); } /* Respeta accesibilidad */ @media (prefers-reduced-motion: reduce) { html.js-ready .reveal, html.js-ready .reveal::after, .card-hover, .card-hover .sweep, .name-gradient-animated, .skill-card-3d, .skill-icon-3d { transition: none !important; animation: none !important; transform: none !important; } html.js-ready .reveal { opacity: 1; filter: none; } #hero-spotlight { display: none; } } /* =================================================== CAPA "CENTRO DE MONITOREO" — efectos de sitio Concepto: la página se comporta como un panel de red vivo. Todo comparte la misma paleta índigo→cyan. =================================================== */ /* --- Barra de progreso de scroll (línea de señal) --- */ #scroll-signal { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 100; background: linear-gradient(90deg, #6366f1, #22d3ee); box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); transition: width 0.1s linear; pointer-events: none; } /* --- Resplandor que sigue el cursor a nivel de página --- */ #cursor-glow { position: fixed; top: 0; left: 0; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; z-index: 80; pointer-events: none; background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, rgba(34,211,238,0.05) 40%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; will-change: transform; } /* --- Foco que sigue el cursor DENTRO de cada tarjeta --- */ .card-hover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.13), transparent 65%); } @media (hover: hover) { .card-hover:hover::before { opacity: 1; } } /* El contenido de la tarjeta debe quedar por encima del foco */ .card-hover > * { position: relative; z-index: 2; } /* --- Brillo que recorre la tarjeta según la inclinación 3D --- */ .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.35s ease; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%); } /* --- Encabezados que se ensamblan por palabra al entrar en pantalla --- */ .split-word { display: inline-block; opacity: 0; transform: translateY(18px) rotateX(-40deg); transform-origin: bottom center; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .split-ready .split-word.is-in { opacity: 1; transform: translateY(0) rotateX(0); } /* Sin JS, los títulos se ven normales */ html:not(.js-ready) .split-word { opacity: 1; transform: none; } /* --- Botones magnéticos --- */ .magnetic { will-change: transform; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* --- Marco tipo terminal para la línea de roles del hero --- */ .role-line { position: relative; } .role-caret { display: inline-block; width: 9px; height: 1.05em; margin-left: 4px; vertical-align: -0.16em; background: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.8); animation: caretBlink 1.05s steps(1) infinite; } @keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* --- Etiquetas de estado tipo panel de monitoreo --- */ .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 0 rgba(34,211,238,0.6); animation: statusPulse 2.4s ease-out infinite; } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5); } 70% { box-shadow: 0 0 0 9px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } } /* --- Cinta de tecnologías en movimiento continuo --- */ .tech-rail { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tech-rail-track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; animation: railScroll 38s linear infinite; will-change: transform; } .tech-rail-track > * { flex: 0 0 auto; } .tech-rail:hover .tech-rail-track { animation-play-state: paused; } @keyframes railScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Accesibilidad: todo lo anterior se apaga si se pide menos movimiento --- */ @media (prefers-reduced-motion: reduce) { #cursor-glow { display: none !important; } .split-word { opacity: 1 !important; transform: none !important; } .role-caret { animation: none; } .status-dot { animation: none; } .tech-rail-track { animation: none; } .magnetic { transition: none !important; transform: none !important; } .tilt-glare { display: none; } } /* =================================================== MÓVIL — que se sienta tan potente como en escritorio =================================================== */ /* La tarjeta que estás mirando se realza sola al hacer scroll */ .card-hover.in-focus, .skill-card-3d.in-focus { border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 18px 40px -12px rgba(99, 102, 241, 0.28), 0 0 22px -6px rgba(34, 211, 238, 0.18); transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s ease; } /* Un haz de luz recorre la tarjeta enfocada, sustituyendo al hover del mouse */ @media (hover: none) { .card-hover.in-focus .sweep { animation: mobileSweep 1.5s ease-out; } @keyframes mobileSweep { from { left: -60%; } to { left: 130%; } } /* Los títulos de sección reciben un subrayado que se dibuja al entrar */ .split-ready { position: relative; } } /* En móvil el borde de la tarjeta enfocada respira suavemente */ @media (hover: none) and (prefers-reduced-motion: no-preference) { .skill-card-3d.in-focus .skill-icon-3d { transform: scale(1.1); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } } /* El resplandor grande del hero es muy costoso de repintar en móviles: se reduce el radio de desenfoque para que el scroll siga fluido. */ @media (max-width: 768px) { .hero-glow { filter: blur(60px) !important; } } @media (prefers-reduced-motion: reduce) { .card-hover.in-focus, .skill-card-3d.in-focus { transform: none !important; } .card-hover.in-focus .sweep { animation: none !important; } }