/* ============================================================================ DRAKO MOTION — estilos de la capa de movimiento · 18-ago-2026 Pareja de drako-motion.js. Sin dependencias, ~2 KB. 🔴 REGLA DE ORO DE ESTE ARCHIVO: el estado por defecto es VISIBLE. Los elementos solo se esconden cuando el JS confirma que está vivo (clase .dm-on en ). Si el JS falla o el navegador es viejo, la página se ve entera — nunca en blanco. Es la lección de [[reveals-sin-js-pagina-vacia]], que ya dejó una demo vacía antes. ========================================================================== */ /* --- 1. REVELADOS ------------------------------------------------------- */ .dm-on:not(.dm-quieto) [data-dm], .dm-on:not(.dm-quieto) [data-dm-hijo] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } .dm-on [data-dm].dm-visible, .dm-on [data-dm-hijo].dm-visible { opacity: 1; transform: none; will-change: auto; /* se libera la GPU cuando ya entró */ } /* --- 2. TITULAR LETRA POR LETRA ---------------------------------------- */ .dm-letra { display: inline-block; white-space: pre; } .dm-on:not(.dm-quieto) .dm-letra { opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-45deg); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); } .dm-on [data-dm].dm-visible .dm-letra { opacity: 1; transform: none; } /* --- 3. PARALLAX -------------------------------------------------------- */ [data-dm-parallax] { will-change: transform; } /* el contenedor de una capa con parallax SIEMPRE recorta, o la capa se escapa */ [data-dm-parallax-marco] { overflow: hidden; position: relative; } /* --- 4. CURSOR CON SEGUIDORES ------------------------------------------ */ .dm-cursor-punta, .dm-cursor-pieza { position: fixed; top: 0; left: 0; pointer-events: none; /* jamás debe robar un clic */ z-index: 9999; margin-left: -.5em; margin-top: -.5em; transition: opacity .25s ease, scale .25s ease; } .dm-cursor-punta { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: currentColor; opacity: .55; } .dm-cursor-pieza { font-size: 1.35rem; line-height: 1; opacity: .92; } .dm-cursor-off .dm-cursor-punta { opacity: 0; } .dm-cursor-off .dm-cursor-pieza { opacity: .35; scale: .7; } @media (hover: none) { .dm-cursor-punta, .dm-cursor-pieza { display: none; } } /* --- 5. BRILLO QUE SIGUE AL CURSOR ------------------------------------- */ [data-dm-brillo] { position: relative; isolation: isolate; } [data-dm-brillo]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle at var(--dm-bx, 50%) var(--dm-by, 50%), rgba(255, 255, 255, .16), transparent 42%); border-radius: inherit; } [data-dm-brillo]:hover::after { opacity: 1; } /* --- 6. BARRA DE AVANCE DEL SCROLL ------------------------------------- */ /* Se alimenta de --dm-avance, que el JS actualiza. Cuesta 3 líneas y da una señal de "esto es un sitio trabajado" desde el primer scroll. */ .dm-avance { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9997; transform-origin: 0 50%; transform: scaleX(var(--dm-avance, 0)); background: currentColor; opacity: .85; pointer-events: none; } /* --- 7. ACCESIBILIDAD --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .dm-on [data-dm], .dm-on [data-dm-hijo], .dm-on .dm-letra { opacity: 1 !important; transform: none !important; transition: none !important; } [data-dm-parallax] { transform: none !important; } .dm-cursor-punta, .dm-cursor-pieza, .dm-avance { display: none; } }