/* ==========================================================================
CTA CRYPTEX — boton de conversion reutilizable. Scope: .cx-*
Fuente unica. Cualquier pagina que lo quiera carga este archivo; nadie
copia las reglas a su hoja. Una segunda copia deja de recibir
correcciones y produce trabajo contra decisiones ya revertidas.
USO
---
Save my seat
→
Sirve igual en y en .
El JS (cta-cryptex.js) es opcional: sin el, el label queda plano y el
resto (relleno, medidor, flecha) sigue funcionando.
MODIFICADORES
-------------
.cx-cta--beacon suma la linea de scan que cruza el boton en reposo.
Uno por pantalla: dos compiten entre si.
.cx-cta--bar version angosta para barras fijas. Se encoge y apaga
el medidor, que a 390px no entra.
ANATOMIA
--------
1. RELLENO ::before azul que barre con scaleX. Entra por izquierda,
drena por derecha. El marco nunca se mueve, asi que ningun
pixel de layout cambia.
2. ANILLOS cada letra es un tambor de 2 glifos que rueda y trinca,
escalonado de izquierda a derecha. Lo arma el JS.
3. IDLE medidor de 4 anillos rojo buscando la combinacion, y en la
variante beacon una linea de scan que cruza la caja.
COLOR
-----
Reposo: arena con texto azul y medidor rojo. Hover: se rellena de azul
y el texto vira a arena. El medidor vira con el, porque rojo sobre azul
no se lee.
TOKENS que espera (todos con fallback, asi entra en cualquier pagina):
--bg-base --accent --accent-alt --ink --text-inverse --font-mono
--radius --dur-fast --dur-base --ease-out
========================================================================== */
.cx-cta {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
min-height: 44px;
padding: 1.05rem 1.5rem;
background: var(--bg-base, #f4f2ed);
color: var(--accent, #26418f);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--ink, #131419);
border-radius: var(--radius, 2px);
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease),
color var(--dur-base, 0.45s) var(--ease-out, ease);
}
/* Sobre el relleno azul el texto tiene que virar, o queda azul sobre azul. */
.cx-cta:hover,
.cx-cta:focus-visible { color: var(--text-inverse, #f4f2ed); }
/* --- 1. El barrido de unlock -------------------------------------------- */
.cx-cta::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: var(--accent, #26418f);
pointer-events: none;
transform: scaleX(0);
transform-origin: right center; /* al salir, drena hacia la derecha */
transition: transform var(--dur-base, 0.45s) var(--ease-out, ease);
}
.cx-cta:hover::before,
.cx-cta:focus-visible::before {
transform: scaleX(1);
transform-origin: left center; /* al entrar, crece desde la izquierda */
}
.cx-cta > * { position: relative; z-index: 1; }
/* --- 3b. La linea de scan (solo --beacon) -------------------------------
El elemento va a todo el ancho y su unica tinta es el borde izquierdo,
asi translateX(100%) cruza el boton entero sin saber cuanto mide.
---------------------------------------------------------------------- */
.cx-cta--beacon::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-left: 2px solid var(--accent-alt, #b12a34);
pointer-events: none;
opacity: 0;
animation: cx-cta-scan 7s var(--ease-out, ease) infinite;
}
.cx-cta--beacon:hover::after,
.cx-cta--beacon:focus-visible::after { animation: none; opacity: 0; }
@keyframes cx-cta-scan {
0% { transform: translateX(0); opacity: 0; }
3% { transform: translateX(0); opacity: 0.55; }
26% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(100%); opacity: 0; }
}
/* --- 3a. El medidor de 4 anillos ---------------------------------------- */
.cx-cta__gauge { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.cx-cta__gauge i {
display: block;
width: 2px;
height: 0.95em;
background: var(--accent-alt, #b12a34);
opacity: 0.32;
transition: opacity var(--dur-fast, 0.2s) var(--ease-out, ease),
background var(--dur-base, 0.45s) var(--ease-out, ease);
animation: cx-cta-ring 5.4s var(--ease-out, ease) infinite;
animation-delay: calc(var(--i) * 0.14s);
}
/* La luz corre por los cuatro y despues el ciclo descansa cuatro segundos:
atrae el ojo sin latir encima del lector. */
@keyframes cx-cta-ring {
0% { opacity: 0.32; }
5% { opacity: 1; }
16% { opacity: 0.32; }
100% { opacity: 0.32; }
}
/* Hover: los cuatro alineados y encendidos. Combinacion hallada. */
.cx-cta:hover .cx-cta__gauge i,
.cx-cta:focus-visible .cx-cta__gauge i {
animation: none;
opacity: 1;
background: var(--text-inverse, #f4f2ed);
transition-delay: calc(var(--i) * 0.045s);
}
/* --- 2. Los tambores del label ------------------------------------------ */
.cx-cta__label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
/* La palabra no se parte: los cortes solo caen en los espacios. */
.cx-cta__word { display: inline-flex; white-space: nowrap; }
.cx-cta__space { display: inline-block; width: 0.42em; }
.cx-cta__ring {
display: inline-block;
overflow: hidden;
height: 1.15em; /* alto fijo: el rodillo se mueve, la caja no */
line-height: 1.15em;
}
.cx-cta__stack {
display: block;
transform: translateY(0);
transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease);
transition-delay: 0s; /* la salida vuelve toda junta, sin arrastre */
}
.cx-cta__stack > span { display: block; height: 1.15em; line-height: 1.15em; }
/* Entrada escalonada: 26ms por anillo, de izquierda a derecha. */
.cx-cta:hover .cx-cta__stack,
.cx-cta:focus-visible .cx-cta__stack {
transform: translateY(-50%);
transition-delay: calc(var(--i) * 26ms);
}
/* --- La flecha ----------------------------------------------------------
El cerrojo corre recien cuando trinco el ultimo anillo. --n lo pone el JS;
sin JS el delay es 0 y la flecha sale con todo lo demas.
---------------------------------------------------------------------- */
.cx-cta__arrow {
display: block;
flex-shrink: 0;
transform: translateX(0);
transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease);
transition-delay: 0s;
}
.cx-cta:hover .cx-cta__arrow,
.cx-cta:focus-visible .cx-cta__arrow {
transform: translateX(0.3rem);
transition-delay: calc(var(--n, 0) * 26ms);
}
.cx-cta:active { transform: scale(0.985); }
/* Tinta y no azul: se lee sobre arena y sobre el relleno azul. */
.cx-cta:focus-visible { outline: 2px solid var(--ink, #131419); outline-offset: 3px; }
/* Tactil: no hay hover, asi que el tap dispara el unlock. */
@media (hover: none) {
.cx-cta:active::before { transform: scaleX(1); transform-origin: left center; }
.cx-cta:active .cx-cta__stack { transform: translateY(-50%); }
.cx-cta:active { color: var(--text-inverse, #f4f2ed); }
}
/* --- La nota bajo el boton ---------------------------------------------- */
.cx-cta__note {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted, #6a6b73);
text-align: center;
margin: 0.8rem 0 0;
line-height: 1.5;
}
/* --- Variante angosta, para barras fijas -------------------------------- */
.cx-cta--bar {
width: auto;
flex-shrink: 0;
padding: 0.85rem 1.1rem;
font-size: 0.7rem;
gap: 0.55rem;
}
/* A 390px no sobra ancho para el medidor. */
.cx-cta--bar .cx-cta__gauge { display: none; }
/* --- Movimiento reducido ------------------------------------------------
El boton no pierde ninguna funcion: pierde el espectaculo.
---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cx-cta,
.cx-cta::before,
.cx-cta__arrow,
.cx-cta__stack,
.cx-cta__gauge i { transition: none; }
.cx-cta__gauge i { animation: none; opacity: 1; }
.cx-cta--beacon::after { display: none; }
}