/*
 * Orena Design System — Motion System (DS-MOTION-01).
 * Documentação: docs/orena/design-system/10-motion.md
 *
 * Princípios: leve, discreto, performático. Só `opacity` e `transform`
 * (composição na GPU, sem reflow), sem WebGL, sem biblioteca. O único JS
 * é o reveal-on-scroll (orena-motion.js, IntersectionObserver).
 *
 * Intensidade por contexto:
 *   - sistema interno (padrão): deslocamento de 4px, motion mínimo;
 *   - site público: <body data-orena-motion="site"> aumenta o deslocamento;
 *   - PDV / telas operacionais: <body data-orena-motion="off"> desliga tudo.
 *
 * `prefers-reduced-motion: reduce` SEMPRE vence (fim do arquivo).
 */

[data-orena-motion="site"] { --orena-motion-distance: 16px; }

/* ---------- Entradas ---------- */
.o-fade-in {
    animation: o-motion-fade var(--orena-motion-normal) var(--orena-ease) both;
}
.o-slide-up {
    animation: o-motion-slide-up var(--orena-motion-normal) var(--orena-ease-out) both;
}
.o-scale-in {
    animation: o-motion-scale var(--orena-motion-fast) var(--orena-ease-out) both;
}

/* Escalonamento opcional: style="--o-delay: 80ms" */
.o-fade-in,
.o-slide-up,
.o-scale-in { animation-delay: var(--o-delay, 0ms); }

@keyframes o-motion-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes o-motion-slide-up {
    from { opacity: 0; transform: translateY(var(--orena-motion-distance)); }
    to { opacity: 1; transform: none; }
}
@keyframes o-motion-scale {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* ---------- Hover ---------- */
.o-hover-lift {
    transition: transform var(--orena-motion-fast) var(--orena-ease),
                box-shadow var(--orena-motion-fast) var(--orena-ease);
}
.o-hover-lift:hover,
.o-hover-lift:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--orena-shadow-md);
}

.o-hover-border {
    transition: border-color var(--orena-motion-fast) var(--orena-ease);
}
.o-hover-border:hover,
.o-hover-border:focus-within { border-color: var(--orena-primary); }

/* Ícone do botão desloca levemente (ex.: seta "Continuar →"). */
.o-btn-icon-shift .o-icon,
.o-btn-icon-shift [data-icon-shift] {
    transition: transform var(--orena-motion-fast) var(--orena-ease);
}
.o-btn-icon-shift:hover .o-icon,
.o-btn-icon-shift:focus-visible .o-icon,
.o-btn-icon-shift:hover [data-icon-shift],
.o-btn-icon-shift:focus-visible [data-icon-shift] { transform: translateX(3px); }

/* ---------- Reveal on scroll ----------
 * O conteúdo só é escondido quando o JS confirmou que vai revelá-lo
 * (classe `o-reveal-ready` no <html>, posta por orena-motion.js).
 * Sem JS, sem IntersectionObserver ou com erro: tudo fica visível. */
.o-reveal-ready .o-reveal {
    opacity: 0;
    transform: translateY(var(--orena-motion-distance));
    transition: opacity var(--orena-motion-slow) var(--orena-ease-out),
                transform var(--orena-motion-slow) var(--orena-ease-out);
    transition-delay: var(--o-delay, 0ms);
}
.o-reveal-ready .o-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- Motion desligado ----------
 * data-orena-motion="off" (PDV/operação) OU prefers-reduced-motion:
 * nenhuma animação/transição; nada se desloca; reveal sempre visível.
 * Hover continua existindo (sombra, borda), só que instantâneo. */
[data-orena-motion="off"] .o-fade-in,
[data-orena-motion="off"] .o-slide-up,
[data-orena-motion="off"] .o-scale-in,
[data-orena-motion="off"] .o-hover-lift,
[data-orena-motion="off"] .o-hover-border,
[data-orena-motion="off"] .o-btn-icon-shift .o-icon,
[data-orena-motion="off"] .o-btn-icon-shift [data-icon-shift],
[data-orena-motion="off"] .o-reveal {
    animation: none !important;
    transition: none !important;
}
[data-orena-motion="off"] .o-hover-lift:hover,
[data-orena-motion="off"] .o-hover-lift:focus-within,
[data-orena-motion="off"] .o-btn-icon-shift:hover .o-icon,
[data-orena-motion="off"] .o-btn-icon-shift:focus-visible .o-icon,
[data-orena-motion="off"] .o-btn-icon-shift:hover [data-icon-shift],
[data-orena-motion="off"] .o-btn-icon-shift:focus-visible [data-icon-shift] {
    transform: none !important;
}
[data-orena-motion="off"] .o-reveal {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .o-fade-in,
    .o-slide-up,
    .o-scale-in,
    .o-hover-lift,
    .o-hover-border,
    .o-btn-icon-shift .o-icon,
    .o-btn-icon-shift [data-icon-shift],
    .o-reveal {
        animation: none !important;
        transition: none !important;
    }
    .o-hover-lift:hover,
    .o-hover-lift:focus-within,
    .o-btn-icon-shift:hover .o-icon,
    .o-btn-icon-shift:focus-visible .o-icon,
    .o-btn-icon-shift:hover [data-icon-shift],
    .o-btn-icon-shift:focus-visible [data-icon-shift] {
        transform: none !important;
    }
    .o-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}