/* ─────────────────────────────────────────────────────────────────────
* Wonderland · estados de las tarjetas · PATRÓN GLOBAL
*
* Con la cadencia por lectura, el estado de cada tarjeta es información
* clave: te dice dónde estás en el cuento. Cada estado tiene su señal
* propia — no solo opacidad, que no se lee de un vistazo.
*
* 1. LEÍDO → ✓ dorado · atenuada · "ya pasaste por aquí"
* 2. ABIERTO → viva, sin marca · "esto te espera" (destaca por
* contraste con las otras dos: lo natural no se señala)
* 3. BLOQUEADO → 🗝 · muy atenuada · sin cursor · "su llave está fuera"
*
* OJO · esto aplica al contenido que YA EXISTE y se desbloquea:
* capítulos (Conejo) y destellos (Gato). NO aplica a los nimbos de Absolem
* ni a los naipes del Sombrerero: ese contenido no está bloqueado, es que
* aún no se ha generado (es de pago y bajo demanda). Ver
* DISENO-sistema-de-llaves.md.
*
* USO · en el :
*
* y antes de :
*
* ───────────────────────────────────────────────────────────────────── */
/* Las tarjetas necesitan sitio para la etiqueta de estado. */
.card { position: relative; }
/* ── 1 · LEÍDO · "has estado aquí, es tuyo" ────────────────────────
* NO se distingue por estar apagado (eso lo hace el bloqueado, y se
* confundirían). Se distingue por una MARCA: etiqueta + borde dorado.
* "Ya lo hiciste" y "no puedes entrar" no deben parecerse en nada. */
.card.card-leido {
opacity: 0.78;
border-color: rgba(201, 168, 76, 0.35);
transition: opacity 0.3s ease, border-color 0.3s ease;
}
.card.card-leido:hover {
opacity: 1;
border-color: rgba(201, 168, 76, 0.6);
}
.card.card-leido::after {
content: '✓ Leído';
position: absolute;
top: 0.7rem;
right: 0.8rem;
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 0.55rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold, #c9a84c);
opacity: 0.85;
pointer-events: none;
}
/* ── 2 · ABIERTO SIN LEER · "esto te espera" ──────────────────────
* Una estrella en la esquina inferior derecha: lo que aún no has
* encendido. Es el estado más importante — es donde debes ir. */
.card.card-nuevo::before {
content: '✦';
position: absolute;
bottom: 0.7rem;
right: 0.9rem;
font-size: 0.9rem;
color: var(--gold, #c9a84c);
opacity: 0.9;
pointer-events: none;
animation: wlEstrellaLatir 3s ease-in-out infinite;
}
@keyframes wlEstrellaLatir {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.card.card-nuevo::before { animation: none; opacity: 0.9; }
}
/* ── 2 bis · FALTA LA LLAVE · "ve a por ella" ─────────────────────
* Leíste el anterior. Lo único que falta es la llave, y eso es un sitio al
* que IR — no una espera. Así que esta tarjeta no se apaga: se enciende.
*
* Es el opuesto exacto del bloqueado. Misma llave, sentido contrario:
* 🗝 apagado = "no puedes" → ausencia, resignación
* 🗝 dorado = "ve a por ella" → presencia, invitación
*
* Pintarla como bloqueada sería mentir sobre lo que te falta: mandaría a
* leer a quien ya leyó. */
.card.card-falta-llave {
opacity: 1;
cursor: pointer;
border-color: rgba(201, 168, 76, 0.3);
border-style: dashed;
transition: border-color 0.3s ease, background 0.3s ease;
}
.card.card-falta-llave:hover {
border-color: rgba(201, 168, 76, 0.65);
background: rgba(201, 168, 76, 0.05);
}
.card.card-falta-llave::before {
content: '🗝';
position: absolute;
bottom: 0.7rem;
right: 0.9rem;
font-size: 0.95rem;
opacity: 1;
pointer-events: none;
animation: wlLlaveLlama 2.6s ease-in-out infinite;
}
/* Ni late como la estrella ni se queda quieta como el candado: oscila, como
* algo que cuelga de la mano de alguien que te espera. */
@keyframes wlLlaveLlama {
0%, 100% { transform: rotate(-9deg); }
50% { transform: rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
.card.card-falta-llave::before { animation: none; }
}
/* ── 3 · BLOQUEADO · "su llave está fuera" ────────────────────────
* Se distingue por AUSENCIA: apagado, sin borde, sin cursor. */
.card.locked,
.card.coming {
opacity: 0.32;
cursor: not-allowed;
border-color: rgba(201, 168, 76, 0.06);
transition: opacity 0.3s ease;
}
.card.locked:hover,
.card.coming:hover { opacity: 0.5; }
/* La llave va en el MISMO sitio que la estrella (abajo a la derecha):
* el ojo mira siempre al mismo punto para saber el estado. */
.card.locked::before,
.card.coming::before {
content: '🗝';
position: absolute;
bottom: 0.7rem;
right: 0.9rem;
font-size: 0.85rem;
opacity: 0.75;
pointer-events: none;
}
/* ── Excepción · "empieza por aquí" ───────────────────────────────────
* La puerta de entrada nunca se ve apagada ni leída. */
.card.card-empezar-aqui.card-leido { opacity: 1; }
.card.card-empezar-aqui.card-leido .card-num::after { content: ''; }