/* ═══════════════════════════════════════════ IML Effects — Estilos base Los valores se sobreescriben por JS con las variables CSS que inyecta iml-effects.js ═══════════════════════════════════════════ */ /* ─── PROGRESS BAR ─── */ #iml-progress { position: fixed; left: 0; right: 0; /* top / bottom y z-index los pone JS */ height: var(--iml-pb-height, 3px); background: linear-gradient( to right, var(--iml-pb-from, #8a7050), var(--iml-pb-to, #d4bc92) ); transform-origin: left center; transform: scaleX(0); will-change: transform; pointer-events: none; /* Sin transition: la actualización en rAF ya es suave */ } /* ─── CURSOR ─── */ #iml-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--iml-cursor-z, 99999); /* Deshabilitado en touch */ } .iml-cursor-dot { position: absolute; border-radius: 50%; background: var(--iml-dot-color, #b89d72); width: var(--iml-dot-size, 8px); height: var(--iml-dot-size, 8px); transform: translate(-50%, -50%); will-change: left, top; transition: transform 0.15s ease, opacity 0.3s ease; } .iml-cursor-ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--iml-ring-color, rgba(184,157,114,0.5)); width: var(--iml-ring-size, 36px); height: var(--iml-ring-size, 36px); transform: translate(-50%, -50%); will-change: left, top, width, height; transition: width 0.35s cubic-bezier(0.16,1,0.3,1), height 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease; } /* Estado hover: el JS agrega esta clase */ .iml-cursor-ring.is-hovered { width: var(--iml-ring-hover, 56px) !important; height: var(--iml-ring-hover, 56px) !important; background: rgba(184,157,114,0.07); border-color: var(--iml-dot-color, #b89d72); } /* Estado click: escala el punto */ .iml-cursor-dot.is-clicking { transform: translate(-50%, -50%) scale(0.6); } /* Ocultar cursor nativo (solo si la opción está activa — lo pone JS en ) */ .iml-hide-cursor, .iml-hide-cursor * { cursor: none !important; } /* En dispositivos táctiles el cursor nunca se muestra */ @media (hover: none) { #iml-cursor { display: none !important; } }