/* Sistema de movimiento de VYDA: las mismas curvas y tiempos en toda la web.
   Reglas (de la investigación y del video aprobado):
   - Lo que entra llega rápido y se posa con calma (--mov-expo); lo que sale arranca lento y se va breve (--mov-sale, ~75 % de la entrada).
   - Solo se animan transform (translate / scale), opacidad y, en lo que no es cristal, desenfoque: son baratos de dibujar.
     Las piezas de cristal NO llevan filter animado: su backdrop-filter perdería lo que hay detrás mientras se mueven.
   - Una cascada, no un golpe: las piezas de un grupo entran una tras otra (55–120 ms entre ellas).
   - Con «reducir movimiento» no se desplaza nada: quedan fundidos cortos.
   scripts/movimiento.js pone las clases y los retrasos (--mov-d) a lo que se pinta con JavaScript. */

:root {
    --mov-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* entrar */
    --mov-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* pulsar, elevar */
    --mov-inout: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de un sitio a otro */
    --mov-sale: cubic-bezier(0.5, 0, 0.75, 0);   /* salir */
    --mov-entra: 1000ms;
    --mov-micro: 250ms;
    /* Al pasar el puntero: la pieza se agranda un poco y rápido, sin brillo. Los botones algo más; las cajas grandes, apenas */
    --escala-boton: 1.06;
    --escala-caja: 1.015;
    --mov-hover: 140ms;
}

/* ---------- Entradas ---------- */
@keyframes mov-sube {
    from { opacity: 0; translate: 0 38px; scale: 0.985; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes mov-baja {
    from { opacity: 0; translate: 0 -14px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mov-sube-corto {
    from { opacity: 0; translate: 0 16px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mov-lado {
    from { opacity: 0; translate: 24px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mov-lado-izq {
    from { opacity: 0; translate: -14px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mov-pop {
    from { opacity: 0; translate: 0 8px; scale: 0.92; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes mov-despliega {
    from { opacity: 0; scale: 0.04 1; translate: -10px 0; }
    to   { opacity: 1; scale: 1 1; translate: 0 0; }
}

@keyframes mov-modal {
    from { opacity: 0; translate: 0 14px; scale: 0.965; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes mov-velo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Lo que pinta movimiento.js: la clase dice cómo entra, --mov-d cuándo (base + lugar en la cascada) */
.mov-sube { animation: mov-sube var(--mov-entra) var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-sube-corto { animation: mov-sube-corto 650ms var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-baja { animation: mov-baja 800ms var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-lado { animation: mov-lado 700ms var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-lado-izq { animation: mov-lado-izq 520ms var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-pop { animation: mov-pop 500ms var(--mov-expo) var(--mov-d, 0ms) backwards; }
.mov-despliega { animation: mov-despliega 900ms var(--mov-quart) var(--mov-d, 0ms) backwards; transform-origin: left center; }

/* Lo que ya está en el HTML entra solo con CSS (así no hay un primer cuadro «ya puesto» antes de animarse) */
.cabecera { animation: mov-baja 800ms var(--mov-expo) 350ms backwards; }
.panel-controles { animation: mov-baja 800ms var(--mov-expo) 300ms backwards; }
.panel-calendario { animation: mov-sube var(--mov-entra) var(--mov-expo) 450ms backwards; }
.contenido-formulario { animation: mov-sube var(--mov-entra) var(--mov-expo) 500ms backwards; }
#recientes { animation: mov-lado 1000ms var(--mov-expo) 1000ms backwards; }
main.inicio > .tarjeta { animation: mov-sube var(--mov-entra) var(--mov-expo) var(--mov-d, 650ms) backwards; }
main.inicio > .area-ahora { --mov-d: 650ms; }
main.inicio > .area-agenda { --mov-d: 770ms; }
main.inicio > .area-racha { --mov-d: 890ms; }
main.inicio > .area-resumen { --mov-d: 1010ms; }
main.inicio > .area-recordar { --mov-d: 1130ms; }
main.inicio > .area-manana { --mov-d: 1250ms; }
.formulario-perfil > .bloque { animation: mov-sube var(--mov-entra) var(--mov-expo) var(--mov-d, 500ms) backwards; }
.formulario-perfil > .bloque:nth-of-type(1) { --mov-d: 450ms; }
.formulario-perfil > .bloque:nth-of-type(2) { --mov-d: 560ms; }
.formulario-perfil > .bloque:nth-of-type(3) { --mov-d: 670ms; }
.formulario-perfil > .bloque:nth-of-type(4) { --mov-d: 780ms; }
.formulario-perfil > .bloque:nth-of-type(n + 5) { --mov-d: 890ms; }
.contenido-nutricion > .bloque { animation: mov-sube var(--mov-entra) var(--mov-expo) var(--mov-d, 500ms) backwards; }
.contenido-nutricion > .bloque:nth-of-type(1) { --mov-d: 450ms; }
.contenido-nutricion > .bloque:nth-of-type(2) { --mov-d: 560ms; }
.contenido-nutricion > .bloque:nth-of-type(3) { --mov-d: 670ms; }
.contenido-nutricion > .bloque:nth-of-type(4) { --mov-d: 780ms; }
.contenido-nutricion > .bloque:nth-of-type(n + 5) { --mov-d: 890ms; }

/* Ventanas (el temporizador, el selector de imagen) */
dialog[open] {
    animation: mov-modal 380ms var(--mov-expo);
}

dialog[open]::backdrop {
    animation: mov-velo 300ms ease-out;
}

/* Avisos que aparecen (compromiso por empezar, fin de un paso...) */
.aviso {
    animation: mov-lado 500ms var(--mov-expo) backwards;
}

/* ---------- Pasar el puntero: la caja o el botón se agranda un poco, rápido (sin brillos) ---------- */
@media (hover: hover) and (pointer: fine) {
    .tarjeta,
    .bloque,
    .recordatorio {
        transition: scale var(--mov-hover) var(--mov-quart), border-color 0.25s ease;
    }

    .tarjeta:hover,
    .bloque:hover,
    .recordatorio:hover {
        position: relative;
        z-index: 1; /* por encima de las vecinas mientras se agranda */
        scale: var(--escala-caja);
    }
}

/* ---------- Botones y campos ---------- */
.btn,
.selector-fecha,
.reciente,
.selector-imagen-opcion {
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s, translate 0.25s var(--mov-quart), scale 0.18s var(--mov-quart), border-color 0.2s;
}

.btn:active,
.selector-fecha:active {
    scale: 0.965;
}

/* Los botones y las piezas pequeñas se agrandan al pasar el puntero; al pulsarlos se hunden (el :active va después y gana) */
@media (hover: hover) and (pointer: fine) {
    .btn,
    .selector-fecha,
    .btn-agregar,
    .reciente,
    .selector-imagen-opcion,
    .columna-dia-titulo,
    .mes-dia {
        transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, scale var(--mov-hover) var(--mov-quart);
    }

    .btn:hover:not(:disabled),
    .selector-fecha:hover,
    .btn-agregar:hover,
    .reciente:hover,
    .selector-imagen-opcion:hover,
    .columna-dia-titulo:hover,
    .mes-dia:hover {
        scale: var(--escala-boton);
    }
}

.btn:active,
.selector-fecha:active {
    scale: 0.965;
}

.reciente:active,
.selector-imagen-opcion:active {
    scale: 0.98;
}

/* Un campo con el foco se ilumina con un halo suave del color del tema */
.control {
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.control:focus,
.control:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo-fondo) 55%, transparent);
}

/* ---------- Barra inferior: el indicador se estira al viajar y se posa ---------- */
/* Al viajar la pastilla se alarga apenas (como una gota) y se recoge al llegar; mismo tiempo que su deslizamiento */
@keyframes mov-liquido {
    0%   { scale: 1 1; }
    42%  { scale: 1.12 0.975; }
    100% { scale: 1 1; }
}

.nav-indicador.viaja {
    animation: mov-liquido 0.8s cubic-bezier(0.45, 0, 0.25, 1);
}

/* La pestaña a la que se llega se aviva con calma: aparece un poco más pequeña y tenue y se afirma */
@keyframes mov-nav-item {
    from { opacity: 0.55; scale: 0.9; }
    to   { opacity: 1; scale: 1; }
}

.nav-item[aria-current="page"] > .nav-icono,
.nav-item[aria-current="page"] > span,
.nav-item[aria-current="page"] > .nav-avatar {
    animation: mov-nav-item 0.75s var(--mov-quart) 0.12s backwards;
}

/* ---------- Destello de un campo que se rellenó solo (Recientes) ---------- */
@keyframes mov-destello {
    0%   { background-color: color-mix(in srgb, var(--activo-fondo) 0%, transparent); box-shadow: 0 0 0 0 transparent; }
    28%  { background-color: color-mix(in srgb, var(--activo-fondo) 24%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--activo-fondo) 24%, transparent); }
    100% { background-color: color-mix(in srgb, var(--activo-fondo) 0%, transparent); box-shadow: 0 0 0 0 transparent; }
}

.mov-destello {
    border-radius: 12px;
    animation: mov-destello 1200ms var(--mov-inout) var(--mov-d, 0ms);
}

/* ---------- Reducir movimiento: nada se desplaza, solo fundidos cortos ---------- */
@media (prefers-reduced-motion: reduce) {
    .mov-sube, .mov-sube-corto, .mov-baja, .mov-lado, .mov-lado-izq, .mov-pop, .mov-despliega, .aviso,
    .cabecera, .panel-controles, .panel-calendario, .contenido-formulario, #recientes, main.inicio > .tarjeta, .formulario-perfil > .bloque,
    .contenido-nutricion > .bloque {
        animation: mov-velo 250ms linear var(--mov-d, 0ms) backwards;
    }

    dialog[open],
    dialog[open]::backdrop {
        animation: mov-velo 200ms linear;
    }

    .nav-indicador.viaja,
    .nav-item[aria-current="page"] > .nav-icono,
    .nav-item[aria-current="page"] > span,
    .nav-item[aria-current="page"] > .nav-avatar,
    .mov-destello {
        animation: none;
    }

    .tarjeta:hover,
    .bloque:hover,
    .recordatorio:hover,
    .btn:hover,
    .selector-fecha:hover,
    .btn-agregar:hover,
    .reciente:hover,
    .selector-imagen-opcion:hover,
    .columna-dia-titulo:hover,
    .mes-dia:hover,
    .btn:active,
    .selector-fecha:active {
        translate: none;
        scale: none;
    }
}