/**
 * Motor de movimiento/scroll compartido (FLUQUES_PLAN.txt [467]) - solo se
 * carga cuando el proyecto tiene "Movimiento y scroll" activado (ver
 * helpers/design.php TemplateFlqBlankDesignHelper::motionSettings()).
 * Nombres con prefijo "flq-motion" a propósito, para no chocar con clases
 * que ya usa algún módulo (ej. los ".reveal" propios de mod_flq_gallery).
 */

/* Cursor personalizado (punto que sigue al mouse, solo escritorio) */
.flq-motion-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    z-index: 9990;
    pointer-events: none;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}
@media (max-width: 900px) {
    .flq-motion-cursor { display: none; }
}

/* Textura de grano */
.flq-motion-grain {
    position: fixed;
    inset: 0;
    z-index: 9980;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Riel de progreso lateral - a proposito del lado DERECHO, nunca
   izquierdo: mod_flq_social_rail (regla R1 del proyecto, "el texto
   nunca debe chocar con la barra social sticky") ya vive fijo del lado
   izquierdo en la inmensa mayoria de los sitios reales - poner este
   riel tambien a la izquierda los dejaba literalmente superpuestos
   (bug real encontrado en Chrome contra pagina 44, "00"/"SCROLL"
   ilegibles sobre los iconos de Facebook/Instagram/WhatsApp). */
.flq-motion-rail {
    position: fixed;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9970;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #fff;
    mix-blend-mode: difference;
}
.flq-motion-rail .flq-motion-rail__line { width: 1px; height: 90px; background: currentColor; opacity: .55; }
.flq-motion-rail .flq-motion-rail__num { font-size: 12px; letter-spacing: .1em; font-weight: 600; font-family: var(--flq-font-body, sans-serif); }
.flq-motion-rail .flq-motion-rail__label { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-family: var(--flq-font-body, sans-serif); }
.flq-motion-rail .flq-motion-rail__arrow { font-size: 13px; }
@media (max-width: 820px) { .flq-motion-rail { right: 18px; } }
@media (max-width: 700px) { .flq-motion-rail { display: none; } }

/* Lado izquierdo ([476], opcional - a proposito NO es el default, ver
   comentario de arriba sobre el choque con el riel social). Quien elija
   "Izquierda" a sabiendas de ese choque (o cuyo diseño no tenga riel
   social) usa esta variante. */
.flq-motion-rail.flq-motion-rail--left { left: 44px; right: auto; }
@media (max-width: 820px) { .flq-motion-rail.flq-motion-rail--left { left: 18px; } }

/* [660] BUG REAL reportado por el usuario ("dos puntos... encimados, cuesta
   saber cual es cual") - mismo tipo de choque ya documentado arriba ("riel
   social"), pero esta vez DENTRO del Constructor: el lienzo interactivo
   carga la pagina REAL completa (con este mismo riel decorativo adentro),
   compitiendo por el mismo espacio de capas que cualquier control del
   editor (ambos con z-index alto en el MISMO documento). El primer intento
   ([658]) solo apagaba el riel durante "Ver estructura" - parchaba UN
   choque puntual (contra las manijas de esa vista) en vez de la causa: en
   CUALQUIER otro lugar del lienzo interactivo (una manija de lienzo libre,
   un icono de "traer al frente", cualquier control futuro) el mismo riel
   podia volver a chocar. Pedido explicito del usuario tras preguntar como
   lo resuelven herramientas como Squarespace - la respuesta real no es
   parchar choque por choque: se apaga TODO lo puramente decorativo
   (cursor personalizado, textura de grano, este riel) mientras se esta
   DENTRO del lienzo interactivo, sin importar el modo - esas decoraciones
   existen para un visitante real desplazandose por la pagina publicada,
   nunca aportan nada mientras se esta construyendo. "flq-canvas-
   interactive" (ver el comentario completo junto a donde se agrega, en
   preview/default.php) viaja SOLO cuando "!readOnly" - nunca en el sitio
   publicado ni en la vista previa de solo lectura. */
body.flq-canvas-interactive .flq-motion-rail,
body.flq-canvas-interactive .flq-motion-cursor,
body.flq-canvas-interactive .flq-motion-grain { display: none; }

/* [687] BUG REAL reportado por el usuario ("parecen rotos") - un bloque
   con "data-flq-reveal" arranca en opacity:0 por la regla de mas abajo
   hasta que motion.js le agrega ".is-flq-visible" (IntersectionObserver,
   al entrar en pantalla la primera vez) - [518] decidio que ese
   revelado SI corre dentro del lienzo interactivo (para que "se vea
   igual que publicado"), pero eso significa que cualquier bloque
   todavia no scrolleado a la vista se queda invisible mientras se
   esta editando, pareciendo roto en vez de en pausa. Pedido explicito
   del usuario: dentro del Constructor, siempre visible de entrada, sin
   importar el scroll - mismo guardia "body.flq-canvas-interactive" ya
   usado arriba para lo decorativo, nunca toca el sitio publicado ni la
   vista previa de solo lectura. */
body.flq-canvas-interactive [data-flq-reveal],
body.flq-canvas-interactive .flq-word-reveal .flq-w-inner {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
}

/* Revelado simple (bloque completo) - la forma en la que "aparece" (no
   el hecho de que aparezca, eso ya lo decide cada bloque con su propio
   "Animación de scroll") depende del "Estilo de revelado" elegido en
   Ajustes del proyecto (motion_reveal_style), aplicado por motion.js
   como una clase en <body> ("flq-reveal-<estilo>"). "slide_up" es el
   estilo por defecto Y el unico definido directo sobre "[data-flq-reveal]"
   (sin necesitar la clase en <body>) para que un proyecto que ya tenia
   el motor activado ANTES de este campo (ej. "Fluxus Digital 2") se
   vea exactamente igual sin tener que volver a guardar sus ajustes. */
[data-flq-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform .9s ease;
}
[data-flq-reveal].is-flq-visible {
    opacity: 1;
    transform: translateY(0);
}

body.flq-reveal-fade [data-flq-reveal]:not([data-flq-reveal="image"]) { transform: none; }

body.flq-reveal-zoom [data-flq-reveal]:not([data-flq-reveal="image"]) { transform: scale(.94); }
body.flq-reveal-zoom [data-flq-reveal]:not([data-flq-reveal="image"]).is-flq-visible { transform: scale(1); }

body.flq-reveal-slide_down [data-flq-reveal]:not([data-flq-reveal="image"]) { transform: translateY(-40px); }
body.flq-reveal-slide_down [data-flq-reveal]:not([data-flq-reveal="image"]).is-flq-visible { transform: translateY(0); }

body.flq-reveal-line [data-flq-reveal]:not([data-flq-reveal="image"]) {
    transform: scaleY(.03);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
body.flq-reveal-line [data-flq-reveal]:not([data-flq-reveal="image"]).is-flq-visible { transform: scaleY(1); }

body.flq-reveal-circle [data-flq-reveal]:not([data-flq-reveal="image"]) {
    transform: none;
    clip-path: circle(0% at 50% 50%);
    transition: opacity .5s ease, clip-path .9s ease;
}
body.flq-reveal-circle [data-flq-reveal]:not([data-flq-reveal="image"]).is-flq-visible {
    clip-path: circle(150% at 50% 50%);
}

/* El "zoom-out" de imagenes (usado por las fotos de mod_flq_text_image/
   mod_flq_gallery/etc.) es un efecto propio, no forma parte del
   catalogo elegible en "Estilo de revelado" - por eso las reglas de
   arriba excluyen ":not([data-flq-reveal=\"image\"])" y esta queda
   siempre igual sin importar el estilo elegido. */
[data-flq-reveal="image"] {
    transform: scale(1.12);
    transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16, .7, .3, 1);
}
[data-flq-reveal="image"].is-flq-visible {
    transform: scale(1);
}

/* Revelado palabra por palabra */
.flq-word-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.flq-word-reveal .flq-w-inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.flq-word-reveal.is-flq-visible .flq-w-inner {
    transform: translateY(0);
}

/* Escala cinetica continua ligada al scroll */
[data-flq-scale] {
    opacity: 0;
    will-change: transform, opacity;
}