/*
 * Transiciones y efectos del portal médico.
 * Mejora progresiva: nada oculta contenido sin JavaScript, y todo movimiento queda dentro de
 * "prefers-reduced-motion: no-preference". El estado nunca depende solo del color ni del movimiento.
 */

@keyframes portal-enter {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: none; }
}

@keyframes portal-check {
    from { stroke-dasharray: 24; stroke-dashoffset: 24; }
    to { stroke-dasharray: 24; stroke-dashoffset: 0; }
}

@keyframes portal-pulse {
    0% { box-shadow: 0 0 0 0 #d99a0073; }
    70%, 100% { box-shadow: 0 0 0 0.9rem #d99a0000; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Entrada de página: el contenido principal y el formulario de acceso aparecen de forma escalonada. */
    .portal-container > *,
    .access-content > * {
        animation: portal-enter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    .portal-container > :nth-child(2),
    .access-content > :nth-child(2) { animation-delay: 70ms; }

    .portal-container > :nth-child(3),
    .access-content > :nth-child(3) { animation-delay: 140ms; }

    .portal-container > :nth-child(4),
    .access-content > :nth-child(4) { animation-delay: 210ms; }

    .portal-container > :nth-child(n + 5),
    .access-content > :nth-child(n + 5) { animation-delay: 280ms; }

    /* Revelado al desplazarse: solo actúa cuando el script marcó el documento con .portal-motion. */
    .portal-motion [data-reveal] {
        opacity: 0;
        translate: var(--reveal-from, 0 14px);
        transition:
            opacity 0.55s ease var(--reveal-delay, 0ms),
            translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
    }

    .portal-motion [data-reveal].is-visible {
        opacity: 1;
        translate: none;
    }

    /* Línea de tiempo: cada etapa entra desde su lado; en una sola columna, todas desde la derecha. */
    .portal-timeline-item[data-reveal] { --reveal-from: -28px 0; }
    .portal-timeline-item[data-reveal]:nth-child(even) { --reveal-from: 28px 0; }

    @media (max-width: 767.98px) {
        .portal-timeline-item[data-reveal],
        .portal-timeline-item[data-reveal]:nth-child(even) { --reveal-from: 20px 0; }
    }

    .portal-motion .portal-timeline-item[data-reveal] .portal-timeline-node {
        scale: 0.5;
        transition: scale 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s;
    }

    .portal-motion .portal-timeline-item[data-reveal].is-visible .portal-timeline-node {
        scale: 1;
    }

    /* El eje central se dibuja de arriba hacia abajo al llegar a la lista. */
    .portal-motion .portal-timeline[data-draw]::before {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .portal-motion .portal-timeline[data-draw].is-visible::before {
        transform: scaleY(1);
    }

    /* El check de una etapa completada se traza al aparecer. */
    .portal-motion .portal-timeline-item[data-state='completed'].is-visible .portal-timeline-node path {
        animation: portal-check 0.5s ease-out 0.45s backwards;
    }

    /* La etapa en curso pulsa tres veces (menos de cinco segundos) y queda estática, con su icono y su texto. */
    .portal-motion .portal-timeline-item[data-state='in_progress'].is-visible .portal-timeline-node {
        animation: portal-pulse 1.5s ease-out 0.7s 3;
    }

    /* Barra de avance: crece hasta su valor cuando llega a la vista; el porcentaje siempre está escrito. */
    .portal-motion .portal-progress[data-draw] .portal-progress-bar {
        width: 0;
        transition: width 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
    }

    .portal-motion .portal-progress[data-draw].is-visible .portal-progress-bar {
        width: var(--portal-progress, 0%);
    }

    /* Tarjetas: elevación suave al apuntar con el ratón o al enfocar con el teclado. */
    .portal-case-card,
    .portal-timeline-card,
    .portal-journal-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .portal-motion .portal-case-card[data-reveal] {
        transition:
            opacity 0.55s ease var(--reveal-delay, 0ms),
            translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }

    .portal-case-card:hover,
    .portal-case-card:focus-within {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px #173b2b1f;
    }

    .portal-timeline-card:hover,
    .portal-journal-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px #173b2b1a;
    }

    .portal-case-card .btn .app-icon {
        transition: translate 0.2s ease;
    }

    .portal-case-card .btn:hover .app-icon,
    .portal-case-card .btn:focus-visible .app-icon {
        translate: 4px 0;
    }

    .access-submit,
    .access-return {
        transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .access-submit:hover,
    .access-submit:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px #0e62513d;
    }
}

/* Al imprimir, todo el contenido debe verse aunque no se haya desplazado hasta él. */
@media print {
    .portal-motion [data-reveal] {
        opacity: 1 !important;
        translate: none !important;
    }
}