/* ========================================================================= MYTIQ v1.5 — SISTEMA DE PRESETS VISUALES ========================================================================= 6 presets curados, activables vía data-preset en . Cada uno redefine variables, intensidades, animaciones y elementos visibles. Activación por JS: document.documentElement.setAttribute('data-preset', 'cinematic') localStorage.setItem('mytiq_preset', 'cinematic') Presets disponibles: - editorial (sobrio total, sin animaciones) - corporate (animaciones tenues, "Stripe-like") - cinematic (Linear-like, parallax, animaciones agresivas) ← DEFAULT - neural (IA pura, partículas, nodos animados) - matrix (hacker terminal aesthetic) - aurora (flujos aurora boreal, mesh animado) ========================================================================= */ /* ---- Variables base de control de animación e intensidad ----------------- */ :root { /* Animación general (0 = sin animaciones / 1 = normal / 1.5 = exagerado) */ --preset-anim-intensity: 1; --preset-anim-duration: 0.4s; --preset-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Glow / brillo */ --preset-glow-intensity: 1; /* Visibilidad de elementos especiales por preset */ --preset-waves-display: block; /* ondas en hero */ --preset-particles-display: none; /* partículas neural */ --preset-grid-display: block; /* grid bg hero */ --preset-mockup-display: block; /* mockup celular */ --preset-rain-display: none; /* matrix rain */ /* Intensidades */ --preset-waves-opacity: 0.5; --preset-grid-opacity: 0.05; --preset-glow-blur: 80px; /* Timings de animaciones secundarias */ --preset-pulse-duration: 2s; --preset-float-duration: 8s; } /* ====================================================================== */ /* PRESET 1 · EDITORIAL — sobrio total */ /* Para clientes corporativos serios, despachos, sectores conservadores */ /* ====================================================================== */ [data-preset="editorial"] { --preset-anim-intensity: 0; --preset-anim-duration: 0.2s; --preset-glow-intensity: 0; --preset-waves-display: none; --preset-particles-display: none; --preset-grid-display: block; --preset-mockup-display: none; --preset-rain-display: none; --preset-waves-opacity: 0; --preset-grid-opacity: 0.03; --preset-glow-blur: 0px; } [data-preset="editorial"] *, [data-preset="editorial"] *::before, [data-preset="editorial"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0.15s !important; } /* ====================================================================== */ /* PRESET 2 · CORPORATE — Stripe / Notion-like */ /* Para PyMEs en general, default seguro */ /* ====================================================================== */ [data-preset="corporate"] { --preset-anim-intensity: 0.7; --preset-anim-duration: 0.4s; --preset-glow-intensity: 0.6; --preset-waves-display: block; --preset-particles-display: none; --preset-grid-display: block; --preset-mockup-display: block; --preset-rain-display: none; --preset-waves-opacity: 0.3; --preset-grid-opacity: 0.04; --preset-glow-blur: 60px; --preset-pulse-duration: 3s; --preset-float-duration: 12s; } /* ====================================================================== */ /* PRESET 3 · CINEMATIC — Linear / Vercel-like (DEFAULT MYTIQ) */ /* Para PyMEs tech-forward, agencias, founders */ /* ====================================================================== */ [data-preset="cinematic"], :root:not([data-preset]) { --preset-anim-intensity: 1; --preset-anim-duration: 0.5s; --preset-glow-intensity: 1; --preset-waves-display: block; --preset-particles-display: none; --preset-grid-display: block; --preset-mockup-display: block; --preset-rain-display: none; --preset-waves-opacity: 0.6; --preset-grid-opacity: 0.06; --preset-glow-blur: 100px; --preset-pulse-duration: 2s; --preset-float-duration: 10s; } /* ====================================================================== */ /* PRESET 4 · NEURAL — IA pura, partículas, nodos */ /* Para empresas que quieren posicionarse fuerte en IA */ /* ====================================================================== */ [data-preset="neural"] { --preset-anim-intensity: 1.2; --preset-anim-duration: 0.6s; --preset-glow-intensity: 1.3; --preset-waves-display: none; --preset-particles-display: block; --preset-grid-display: block; --preset-mockup-display: block; --preset-rain-display: none; --preset-waves-opacity: 0; --preset-grid-opacity: 0.08; --preset-glow-blur: 120px; --preset-pulse-duration: 1.5s; --preset-float-duration: 8s; } /* ====================================================================== */ /* PRESET 5 · MATRIX — terminal hacker */ /* Para cyber, fintech, audiencias tech-savvy hardcore */ /* ====================================================================== */ [data-preset="matrix"] { --preset-anim-intensity: 1; --preset-anim-duration: 0.3s; --preset-glow-intensity: 1.1; --preset-waves-display: none; --preset-particles-display: none; --preset-grid-display: block; --preset-mockup-display: block; --preset-rain-display: block; --preset-waves-opacity: 0; --preset-grid-opacity: 0.1; --preset-glow-blur: 80px; --preset-pulse-duration: 1s; --preset-float-duration: 6s; --font-display: var(--font-mono); } /* ====================================================================== */ /* PRESET 6 · AURORA — flujos aurora boreal */ /* Para marcas creativas, aspiracionales */ /* ====================================================================== */ [data-preset="aurora"] { --preset-anim-intensity: 1.1; --preset-anim-duration: 0.7s; --preset-glow-intensity: 1.4; --preset-waves-display: block; --preset-particles-display: none; --preset-grid-display: none; --preset-mockup-display: block; --preset-rain-display: none; --preset-waves-opacity: 0.8; --preset-grid-opacity: 0; --preset-glow-blur: 150px; --preset-pulse-duration: 4s; --preset-float-duration: 16s; } /* ========================================================================= ANIMACIONES SHARED (todas las usan, intensidad la modula cada preset) ========================================================================= */ /* Pulso suave para puntos, dots, indicadores live */ @keyframes mytiqPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } } /* Heartbeat sostenido para el logo isotipo */ @keyframes mytiqHeartbeat { 0%, 60%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(61, 255, 152, 0.5)); } 30% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(61, 255, 152, 0.9)); } } /* Flotación lenta para glows de fondo */ @keyframes mytiqFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -30px) scale(1.05); } 66% { transform: translate(-15px, 25px) scale(0.95); } } /* Onda viajera horizontal */ @keyframes mytiqWaveTravel { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Ondas SVG (para hero) — sinusoidal lenta */ @keyframes mytiqWaveFlow { 0% { d: path("M 0 80 Q 200 60, 400 80 T 800 80 T 1200 80 L 1200 200 L 0 200 Z"); } 50% { d: path("M 0 80 Q 200 100, 400 80 T 800 60 T 1200 90 L 1200 200 L 0 200 Z"); } 100% { d: path("M 0 80 Q 200 60, 400 80 T 800 80 T 1200 80 L 1200 200 L 0 200 Z"); } } /* Aparición desde abajo cuando entra al viewport */ @keyframes mytiqFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Aparición con escala */ @keyframes mytiqScaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* Counter para números (el JS hace el counting; CSS solo el flicker final) */ @keyframes mytiqNumberFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Línea verde dibujándose (para gráfica del logo viva) */ @keyframes mytiqLineDraw { to { stroke-dashoffset: 0; } } /* Nodos neural pulsando en cadena */ @keyframes mytiqNeuralPulse { 0%, 100% { opacity: 0.3; r: 2; } 50% { opacity: 1; r: 3; } } /* Matrix rain — caída vertical de caracteres */ @keyframes mytiqMatrixRain { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(100vh); opacity: 0; } } /* Cursor parpadeante (matrix preset) */ @keyframes mytiqCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Aurora wave (gradiente que se mueve) */ @keyframes mytiqAuroraShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================================= APLICACIÓN DE ANIMACIONES POR ELEMENTO ========================================================================= */ /* HERO — fondo con glow flotante */ .hero__glow { animation: mytiqFloat var(--preset-float-duration) ease-in-out infinite; } /* HERO — ondas SVG vivas */ .hero__waves { display: var(--preset-waves-display); position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; pointer-events: none; z-index: 0; opacity: var(--preset-waves-opacity); overflow: hidden; } .hero__waves svg { width: 100%; height: 100%; } .hero__waves-path-1 { animation: mytiqWaveFlow 12s ease-in-out infinite; } .hero__waves-path-2 { animation: mytiqWaveFlow 9s ease-in-out infinite reverse; opacity: 0.5; } .hero__waves-path-3 { animation: mytiqWaveFlow 6s ease-in-out infinite; opacity: 0.3; } /* HERO — grid pattern background */ .hero__grid-bg { background-image: linear-gradient(to right, rgba(61, 255, 152, var(--preset-grid-opacity)) 1px, transparent 1px), linear-gradient(to bottom, rgba(61, 255, 152, var(--preset-grid-opacity)) 1px, transparent 1px); background-size: 50px 50px; display: var(--preset-grid-display); position: absolute; inset: 0; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } /* PARTÍCULAS NEURAL — canvas controlado por JS */ .hero__particles { display: var(--preset-particles-display); position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* MATRIX RAIN — overlay de caracteres cayendo */ .hero__matrix-rain { display: var(--preset-rain-display); position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; opacity: 0.3; font-family: var(--font-mono); color: var(--accent); font-size: 14px; } /* MOCKUP CELULAR HERO */ .hero__phone { display: var(--preset-mockup-display); } /* GRÁFICA DEL LOGO ANIMADA EN HERO */ .hero__logo-chart { /* La línea verde se dibuja al cargar */ } .hero__logo-chart .chart-line-green { stroke-dasharray: 600; stroke-dashoffset: 600; animation: mytiqLineDraw 2.5s var(--preset-anim-ease) forwards; animation-delay: 0.3s; } .hero__logo-chart .chart-circle-final { animation: mytiqHeartbeat var(--preset-pulse-duration) ease-in-out infinite; animation-delay: 2.8s; transform-origin: center; } /* SCROLL REVEAL — elementos que aparecen al scrollear */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity calc(var(--preset-anim-duration) * 1.5) var(--preset-anim-ease), transform calc(var(--preset-anim-duration) * 1.5) var(--preset-anim-ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal--scale { transform: scale(0.95); } .reveal--scale.is-visible { transform: scale(1); } /* COUNTER ANIMADO — números del hero */ .proof__number[data-counter] { font-variant-numeric: tabular-nums; } /* HOVER ENHANCEMENTS — solo si la intensidad lo permite */ .btn, .service-card, .problem-card, .why__card { transition: transform var(--preset-anim-duration) var(--preset-anim-ease), box-shadow var(--preset-anim-duration) var(--preset-anim-ease), border-color var(--preset-anim-duration) var(--preset-anim-ease); } [data-preset="cinematic"] .service-card:hover, [data-preset="neural"] .service-card:hover, [data-preset="aurora"] .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-accent); border-color: var(--accent); } [data-preset="cinematic"] .problem-card:hover, [data-preset="neural"] .problem-card:hover, [data-preset="aurora"] .problem-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); box-shadow: 0 20px 40px -20px rgba(61, 255, 152, 0.3); } [data-preset="cinematic"] .why__card:hover, [data-preset="neural"] .why__card:hover, [data-preset="aurora"] .why__card:hover { transform: translateY(-4px); border-color: var(--accent); } /* CINEMATIC: parallax sutil en hero */ [data-preset="cinematic"] .hero__phone, [data-preset="neural"] .hero__phone { animation: mytiqFloat 8s ease-in-out infinite; } /* NEURAL: glow extra en headlines */ [data-preset="neural"] h1 em, [data-preset="neural"] h2 em { filter: drop-shadow(0 0 10px rgba(61, 255, 152, 0.6)); } /* MATRIX: cursor parpadeante en H1 */ [data-preset="matrix"] .hero__title::after { content: "_"; color: var(--accent); animation: mytiqCursorBlink 1s steps(2) infinite; margin-left: 0.1em; } /* AURORA: gradiente animado en hero glow */ [data-preset="aurora"] .hero__glow { background: linear-gradient(120deg, rgba(61, 255, 152, 0.25), rgba(139, 92, 246, 0.2), rgba(124, 213, 255, 0.15), rgba(61, 255, 152, 0.25)); background-size: 400% 400%; animation: mytiqAuroraShift 15s ease infinite, mytiqFloat 12s ease-in-out infinite; filter: blur(var(--preset-glow-blur)); } /* Override editorial: anula todos los hover transforms */ [data-preset="editorial"] .service-card:hover, [data-preset="editorial"] .problem-card:hover, [data-preset="editorial"] .why__card:hover { transform: none !important; box-shadow: none !important; } /* ========================================================================= PRESET SWITCHER (UI flotante) ========================================================================= */ .preset-switcher { position: fixed; top: 80px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .preset-switcher__toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-strong); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s var(--ease); box-shadow: var(--shadow-md); } .preset-switcher__toggle:hover { border-color: var(--accent); transform: rotate(15deg); } .preset-switcher__panel { position: absolute; top: 52px; right: 0; width: 280px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.25s var(--ease); } .preset-switcher.is-open .preset-switcher__panel { opacity: 1; visibility: visible; transform: translateY(0); } .preset-switcher__title { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .preset-switcher__option { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; transition: background 0.2s var(--ease); border: none; background: transparent; width: 100%; text-align: left; color: var(--text-primary); font-family: var(--font-body); } .preset-switcher__option:hover { background: var(--bg-elevated); } .preset-switcher__option.is-active { background: var(--accent-soft); } .preset-switcher__swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border-strong); flex-shrink: 0; } .preset-switcher__swatch--editorial { background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .preset-switcher__swatch--corporate { background: linear-gradient(135deg, #0a1a33, #3DFF98); } .preset-switcher__swatch--cinematic { background: linear-gradient(135deg, #041226, #3DFF98 70%); box-shadow: inset 0 0 8px rgba(61, 255, 152, 0.5); } .preset-switcher__swatch--neural { background: radial-gradient(circle at 30% 30%, #8B5CF6, #041226 70%); box-shadow: inset 0 0 8px rgba(139, 92, 246, 0.6); } .preset-switcher__swatch--matrix { background: #000; color: #3DFF98; font-family: monospace; font-size: 10px; display: flex; align-items: center; justify-content: center; } .preset-switcher__swatch--matrix::before { content: "01"; } .preset-switcher__swatch--aurora { background: linear-gradient(135deg, #3DFF98, #8B5CF6, #06B6D4); } .preset-switcher__label { flex: 1; display: flex; flex-direction: column; } .preset-switcher__label strong { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .preset-switcher__label span { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; } /* RESPONSIVE: switcher se vuelve más compacto en mobile */ @media (max-width: 768px) { .preset-switcher { top: auto; bottom: 80px; right: 12px; } .preset-switcher__panel { width: 240px; right: 0; } } /* RESPETO PREFERS-REDUCED-MOTION: deshabilita animaciones para usuarios que lo pidan */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } }