/* ============================================================ tr!x — FX layer · v2 Capa de interacción avanzada sobre el sistema visual existente. No redefine tokens ni layout: solo cursor, transiciones, reveals con máscara, hairlines dibujadas, magnetismo y pulido. Todo se activa con html.fx (lo pone js/fx.js si no hay reduced-motion); sin JS la página se ve exactamente igual. ============================================================ */ /* ============================================================ PULIDO GLOBAL — selección y scrollbar (activos siempre) ============================================================ */ ::selection { background: var(--color-acento); color: var(--on-accent); } html { scrollbar-width: thin; scrollbar-color: var(--color-faint) transparent; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-faint); border-radius: var(--radio); } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); } /* Swipe táctil en los carruseles: el gesto horizontal arrastra el marquee y el vertical sigue scrolleando la página. Solo con la capa fx activa (con reduced-motion el marquee ya es scrolleable nativo). */ html.fx .marquee { touch-action: pan-y; } /* Lenis (smooth scroll) necesita anular el scroll-behavior nativo. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================ CURSOR PROPIO — punto magenta que reacciona (solo pointer fino) ============================================================ */ html.fx-cursor, html.fx-cursor * { cursor: none !important; } html.fx-cursor input, html.fx-cursor textarea { cursor: text !important; } .trix-cursor { position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--radio); background: var(--color-acento); border: var(--line) solid transparent; color: var(--on-accent); font-family: var(--fuente-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0; transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.25s; } .trix-cursor.is-on { opacity: 1; } .trix-cursor .cur-label { opacity: 0; transition: opacity 0.18s; white-space: nowrap; } /* Sobre links y botones: anillo abierto (invita al clic) */ .trix-cursor.cur-link { width: 36px; height: 36px; margin: -18px 0 0 -18px; background: transparent; border-color: var(--color-acento); } /* Sobre las tarjetas del carrusel: cápsula "VER" */ .trix-cursor.cur-view { width: 76px; height: 42px; margin: -21px 0 0 -38px; } .trix-cursor.cur-view .cur-label { opacity: 1; } /* Sobre las pills con física: anillo punteado (se puede agarrar) */ .trix-cursor.cur-grab { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: transparent; border-color: var(--color-acento); border-style: dashed; } /* ============================================================ TRANSICIÓN ENTRE PÁGINAS — cortina magenta con la marca ------------------------------------------------------------ html.page-entering la pone un gate en el ANTES de pintar (con red de seguridad que la quita sola). El ::before cubre hasta que fx.js monta la cortina real y la levanta. ============================================================ */ html.page-entering::before { content: ''; position: fixed; inset: 0; z-index: 900; background: var(--color-acento); } /* La cortina barre en HORIZONTAL (entra desde la derecha, sale por la izquierda): mismo lenguaje que las fotos apaisadas de los carruseles. */ .page-curtain { position: fixed; inset: 0; z-index: 901; display: flex; align-items: center; justify-content: center; background: var(--color-acento); transform: translateX(103%); pointer-events: none; /* Invisible salvo durante la transición: si queda "estacionada" siendo un layer magenta a pantalla completa, Safari iOS puede usarla para teñir su barra inferior de rosado. */ visibility: hidden; } .page-curtain.is-covering { pointer-events: auto; visibility: visible; } .page-curtain .curtain-mark { display: block; width: 34px; /* logo-mark ≈ 0.53 de la altura */ height: 64px; background-color: var(--on-accent); -webkit-mask: url('../assets/logo-mark.svg') no-repeat center / contain; mask: url('../assets/logo-mark.svg') no-repeat center / contain; } /* ============================================================ MEDIA REVEAL — las fotos entran abriéndose con máscara (galerías, hero de proyecto, retratos) ============================================================ */ html.fx .media-reveal { clip-path: inset(11% 8% 11% 8% round 14px); transition: clip-path 1s var(--ease); } html.fx .media-reveal.is-visible { clip-path: inset(0% 0% 0% 0% round 0px); } /* Estos elementos ya no necesitan la subida genérica del reveal: la máscara ES su entrada (mantienen solo el fade). */ html.reveal-ready .media-reveal { transform: none !important; } /* Parallax interno: la imagen viaja levemente dentro de su marco. El scale compensa el recorrido para que nunca asomen bordes. */ html.fx .plx { overflow: hidden; } html.fx .plx > img { transform: translate3d(0, var(--plx-y, 0px), 0) scale(1.08); will-change: transform; } /* ============================================================ HAIRLINES QUE SE DIBUJAN — mismo lenguaje que la intro (la línea se traza de izquierda a derecha al entrar en vista) ============================================================ */ html.fx .rule-draw { position: relative; border-top-color: transparent !important; } html.fx .rule-draw::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--line) * -1); height: var(--line); background: var(--color-hairline); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); } html.fx .rule-draw.is-drawn::before { transform: scaleX(1); } /* ============================================================ BOTONES MAGNÉTICOS — las cápsulas se inclinan hacia el cursor ============================================================ */ html.fx .magnetic { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--mp, 1)); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Regreso con rebote elástico al soltar */ html.fx .magnetic.mag-idle { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.5s cubic-bezier(0.22, 1.6, 0.36, 1); } /* ============================================================ LIGHTBOX — contador "2 / 6" ============================================================ */ .lb-count { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-family: var(--fuente-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; pointer-events: none; } /* ============================================================ FORMULARIO — estados del botón ENVIAR (envío real vía FormSubmit) ============================================================ */ .btn-enviar.is-sent { background: var(--color-acento); color: var(--on-accent); border-color: var(--color-acento); pointer-events: none; } .btn-enviar.is-sending { opacity: 0.65; pointer-events: none; } .btn-enviar.is-error { border-color: #c62828; color: #c62828; } /* ============================================================ REDUCED MOTION — nada de esta capa se mueve ============================================================ */ @media (prefers-reduced-motion: reduce) { .trix-cursor, .page-curtain { display: none !important; } html.page-entering::before { display: none !important; } html.fx .media-reveal { clip-path: none; transition: none; } html.fx .plx > img { transform: none; } html.fx .rule-draw { border-top-color: var(--color-hairline) !important; } html.fx .rule-draw::before { display: none; } }