/* ============================================================ interactions.css — capa de movimiento (scroll + puntero) Fondo 3D continuo · Progreso de scroll · Glow ambiental · Tilt + spotlight · Magnético · Parallax · Reveal escalonado ============================================================ */ /* ─── FONDO 3D CONTINUO (fijo detrás de todo) ─────────────── */ /* El color base del tema vive en ; el body se vuelve transparente para que el canvas se vea a través de toda la página. */ html { background: var(--bg-primary); } body { background: transparent !important; } .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* El contenido se apila por encima del canvas de fondo. */ #main, .footer { position: relative; z-index: 1; } /* El orbe del hero ahora lo provee el fondo global. */ .hero__canvas { display: none !important; } /* ─── BARRA DE PROGRESO DE SCROLL ─────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand), var(--accent)); z-index: 9999; pointer-events: none; will-change: transform; } /* ─── GLOW AMBIENTAL QUE SIGUE EL CURSOR ──────────────────── */ .cursor-glow { position: fixed; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; /* centra en el puntero */ border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%); pointer-events: none; z-index: 3; opacity: 0; mix-blend-mode: screen; /* solo aclara → no ensucia el texto */ filter: blur(10px); transition: opacity 0.5s ease; will-change: transform; } @media (pointer: coarse) { .cursor-glow { display: none; } } /* ─── TARJETAS: TILT 3D + SPOTLIGHT ───────────────────────── */ .card { transform-style: preserve-3d; will-change: transform; } /* contenido siempre por encima del spotlight */ .card > * { position: relative; z-index: 1; } /* halo radial que sigue el cursor dentro de la tarjeta */ .card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0; } .card:hover::after { opacity: 1; } /* ─── BOTONES MAGNÉTICOS ──────────────────────────────────── */ .magnetic { will-change: transform; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); } /* ─── PARALLAX ────────────────────────────────────────────── */ [data-parallax] { will-change: transform; } /* ─── REVEAL ESCALONADO (reusa .reveal de typography.css) ──── */ /* Los delays se inyectan inline desde JS por índice de hijo. */ /* ─── REDUCED MOTION: neutraliza todo ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .scroll-progress, .cursor-glow { display: none !important; } .card, .magnetic { transform: none !important; } .card::after { display: none; } }