/* Efectos de movimiento de Microblading Ibiza. Se activan con atributos data-fx="..." (los descubre assets/js/efectos.js).
   Lujo discreto: solo transform y opacity (salvo el brillo del cursor en los bordes dorados, que repinta una tarjeta), 200-700 ms, curva ease-out fuerte.
   TODO el color sale de los tokens de sitio.css (var(--acento), var(--linea)...): funciona igual en los temas dorado y arena. Cero colores escritos a mano.

   USO RAPIDO (varios valores se pueden combinar con espacio: data-fx="revelar borde-dorado"):
   data-fx="revelar"        Aparece con fundido y un desplazamiento corto al entrar en pantalla.
                            Opcional: data-fx-retraso="120" (ms), data-fx-dir="arriba|abajo|izq|der|ninguna" (de dónde llega; por defecto desde abajo).
   data-fx="escalonar"      En el CONTENEDOR: cada hijo directo aparece en cascada (70 ms entre hijos, máx. 420 ms en total). Los que entran juntos van en cascada; el resto, al llegar.
   data-fx="titular"        En h1/h2/h3: palabra por palabra subiendo desde una máscara. Respeta <em class="acento">. El texto completo queda en aria-label.
                            Opcional: data-fx-retraso="120".
   data-fx="contar"         En el elemento de una cifra ("25+", "4,98", "132"): cuenta hasta el valor que YA está en el HTML. Opcional: data-fx-desde="0", data-fx-duracion="700".
                            Los años (2018) y los valores de 0 a 2 no cuentan (se quedan fijos), salvo que se pida con data-fx-desde. Para que una cifra no cuente, no se le pone el atributo.
   data-fx="foto-revelar"   En el contenedor (overflow-hidden) de una foto .foto-bn: con el cursor aparece una lente de color y la foto hace zoom lento. Solo con ratón; en táctil queda estática.
   data-fx="borde-dorado"   En una tarjeta (.glass-apple): borde fino con degradado de los tokens y, con ratón, un brillo que sigue al cursor. En táctil queda el borde fino.
   data-fx="brillo"         En un botón primario: un destello cruza el botón al pasar el ratón.
   data-fx="cabecera"       En <header>: al hacer scroll se compacta (transform) y aparece un desenfoque progresivo bajo ella.
   data-fx="progreso"       En <body>: barra fina de lectura arriba del todo (solo se crea si la página es larga).
   Automático (sin atributo): los botones .btn-* se hunden un poco al pulsar (:active).

   Reglas que se cumplen: prefers-reduced-motion = sin movimiento y todo visible; sin JS todo visible (lo oculto solo existe bajo html.fx-on, que pone el JS);
   sin capas promovidas de forma permanente; sin cambios de layout. Orden de carga: sitio.css y después efectos.css. */

:root {
 --fx-ease: cubic-bezier(0.23, 1, 0.32, 1);
 --fx-cab-recorte: 8px; /* cuánto se recorta la cabecera al compactarse (móvil) */
}
@media (min-width: 768px) { :root { --fx-cab-recorte: 12px; } }

/* ===== Estados iniciales (solo si el JS está activo: html.fx-on) ===== */
html.fx-on [data-fx~="revelar"]:not(.fx-in),
html.fx-on [data-fx~="escalonar"] > :not(.fx-in) { opacity: 0; }

/* ===== Titular por palabras con máscara =====
   Cada palabra va en .fx-m (la máscara) > .fx-w (la palabra que sube). El relleno + margen negativo evita que la máscara recorte
   descendentes (g, p, y) y la cursiva de Playfair sin cambiar la altura de la línea. */
.fx-m { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.14em 0.1em 0.3em; margin: -0.14em -0.1em -0.3em; }
.fx-w { display: inline-block; }
html.fx-on [data-fx~="titular"].fx-dividido:not(.fx-in) .fx-w { transform: translate3d(0, 150%, 0); }

/* ===== Contador ===== */
[data-fx~="contar"] { font-variant-numeric: tabular-nums; }
.fx-num { position: relative; display: inline-block; text-align: left; }
.fx-num > .fx-num-v { position: absolute; left: 0; top: 0; white-space: pre; }
.fx-num::after { content: attr(data-final); visibility: hidden; white-space: pre; pointer-events: none; }

/* ===== Foto con lente de color ===== */
[data-fx~="foto-revelar"] { overflow: hidden; }
.fx-lente { position: absolute; left: 0; top: 0; display: none; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--fx-ease);
 -webkit-mask-image: radial-gradient(circle closest-side, black 0, black 55%, transparent 100%); mask-image: radial-gradient(circle closest-side, black 0, black 55%, transparent 100%); }
.fx-lente.fx-viva { opacity: 1; }
.fx-lente-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }

/* ===== Borde dorado fino + brillo que sigue al cursor =====
   El borde propio de la tarjeta pasa a transparente y lo dibuja ::before (anillo de 1 px con máscara). ::after es un halo muy tenue. */
[data-fx~="borde-dorado"] { position: relative; isolation: isolate; --fx-x: -999px; --fx-y: -999px; }
html [data-fx~="borde-dorado"] { border-color: transparent !important; }
[data-fx~="borde-dorado"]::before, [data-fx~="borde-dorado"]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
[data-fx~="borde-dorado"]::before { padding: 1px;
 background: radial-gradient(circle 150px at var(--fx-x) var(--fx-y), var(--acento-claro), transparent 70%), linear-gradient(135deg, var(--linea-fuerte), var(--linea) 38%, var(--linea) 62%, var(--linea-fuerte));
 -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
 mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude; }
[data-fx~="borde-dorado"]::after { background: radial-gradient(circle 260px at var(--fx-x) var(--fx-y), var(--acento-claro), transparent 70%); opacity: 0; transition: opacity 0.4s var(--fx-ease); }
[data-fx~="borde-dorado"].fx-hover::after { opacity: 0.09; }

/* ===== Brillo en botones primarios (solo con ratón) =====
   El color del destello contrasta con el botón de cada tema: crema sobre el degradado dorado; arena/bronce sobre el botón crema o negro del tema arena. */
[data-fx~="brillo"] { position: relative; overflow: hidden; isolation: isolate; --fx-brillo: var(--tinta); }
html[data-tema="arena"] [data-fx~="brillo"] { --fx-brillo: var(--acento); }
[data-fx~="brillo"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transform: translate3d(-100%, 0, 0);
 background: linear-gradient(105deg, transparent 38%, var(--fx-brillo) 50%, transparent 62%); }
@media (hover: hover) and (pointer: fine) {
 [data-fx~="brillo"]:hover::after { opacity: 0.5; transform: translate3d(100%, 0, 0); transition: transform 0.75s cubic-bezier(0.25, 0.6, 0.3, 1), opacity 0.2s ease; }
}

/* ===== Botones: se hunden al pulsar (100-160 ms) ===== */
html.fx-on :is(.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro) { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.16s var(--fx-ease); }
html.fx-on :is(.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro):active { transform: scale(0.97); }

/* ===== Cabecera que se compacta =====
   Se sube la cabecera (recorte) y se baja su contenido la mitad: la barra visible mide 12 px menos (8 px en móvil) con el contenido centrado. Solo transform. */
html.fx-on header[data-fx~="cabecera"], html.fx-on header[data-fx~="cabecera"] > div { transition: transform 0.35s var(--fx-ease); }
html.fx-on header[data-fx~="cabecera"].fx-compacto { transform: translate3d(0, calc(var(--fx-cab-recorte) * -1), 0); }
html.fx-on header[data-fx~="cabecera"].fx-compacto > div { transform: translate3d(0, calc(var(--fx-cab-recorte) / 2), 0); }
html.fx-on header[data-fx~="cabecera"].fx-quieto, html.fx-on header[data-fx~="cabecera"].fx-quieto > div { transition: none; }

/* Desenfoque progresivo bajo la cabecera (3 capas; cada una con su propia opacidad, porque la opacidad de un padre anularía el backdrop-filter) */
.fx-cab-blur { position: fixed; left: 0; right: 0; top: var(--fx-cab-h, 64px); height: 40px; z-index: 49; pointer-events: none; transition: transform 0.35s var(--fx-ease); }
.fx-cab-blur.fx-compacto { transform: translate3d(0, calc(var(--fx-cab-recorte) * -1), 0); }
.fx-cab-blur.fx-quieto { transition: none; }
.fx-cab-blur > i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s var(--fx-ease); }
.fx-cab-blur.fx-vis > i { opacity: 1; }
.fx-cab-blur > i:nth-child(1) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
 -webkit-mask-image: linear-gradient(to bottom, black 0, black 22%, transparent 55%); mask-image: linear-gradient(to bottom, black 0, black 22%, transparent 55%); }
.fx-cab-blur > i:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
 -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 38%, black 55%, transparent 85%); mask-image: linear-gradient(to bottom, transparent 10%, black 38%, black 55%, transparent 85%); }
.fx-cab-blur > i:nth-child(3) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
 -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 40%, black 72%, transparent 100%); }
body:has(#mobileMenu:not(.hidden)) .fx-cab-blur { display: none; }

/* ===== Barra de progreso de lectura ===== */
.fx-progreso { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity 0.3s ease;
 background: linear-gradient(90deg, var(--acento), var(--acento-claro)); }

/* ===== Sin movimiento: todo visible y en su sitio ===== */
@media (prefers-reduced-motion: reduce) {
 html.fx-on [data-fx~="revelar"], html.fx-on [data-fx~="escalonar"] > *, html.fx-on [data-fx~="titular"] .fx-w { opacity: 1 !important; transform: none !important; }
 .fx-lente, .fx-cab-blur, .fx-progreso { display: none !important; }
 [data-fx~="brillo"]::after { display: none; }
 [data-fx~="borde-dorado"]::after { display: none; }
 [data-fx~="borde-dorado"]::before { background: linear-gradient(135deg, var(--linea-fuerte), var(--linea) 38%, var(--linea) 62%, var(--linea-fuerte)); }
 html.fx-on header[data-fx~="cabecera"], html.fx-on header[data-fx~="cabecera"] > div { transform: none !important; transition: none !important; }
 html.fx-on :is(.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro):active { transform: none; }
}
/* Impresión: todo visible */
@media print {
 html.fx-on [data-fx~="revelar"], html.fx-on [data-fx~="escalonar"] > *, html.fx-on [data-fx~="titular"] .fx-w { opacity: 1 !important; transform: none !important; }
 .fx-lente, .fx-cab-blur, .fx-progreso { display: none !important; }
}