/**
 * OS TigerLab Design System v2 — MOTION TOKENS + KEYFRAMES
 * Sistema de animación CSS-driven. JS-driven en /assets/scripts/motion.js.
 *
 * Filosofía:
 *   - Solo animar transform y opacity (GPU-friendly).
 *   - Nunca >800ms en interacciones (excepto rewards).
 *   - prefers-reduced-motion respetado al 100%.
 */

:root {
    /* ---- Duraciones ---- */
    --d-instant: 80ms;
    --d-fast:    160ms;
    --d-base:    240ms;
    --d-slow:    360ms;
    --d-slower:  600ms;
    --d-page:    800ms;

    /* ---- Easings cuidados ---- */
    --ease-linear:        linear;
    --ease-out-quad:      cubic-bezier(0.5, 1, 0.89, 1);
    --ease-out-cubic:     cubic-bezier(0.33, 1, 0.68, 1);
    --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);     /* reveals */
    --ease-in-out-cubic:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce:        cubic-bezier(0.68, -0.55, 0.27, 1.55); /* solo logros */
    --ease-spring:        cubic-bezier(0.155, 1.105, 0.295, 1.12); /* hover lift */
    --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);     /* default Material */
    /* Revelados scroll — aterrizaje suave sin sensación “elástica” */
    --ease-reveal-smooth: cubic-bezier(0.17, 1, 0.32, 1);

    /* ---- Offset distance por velocidad ---- */
    --motion-offset-sm: 8px;
    --motion-offset-md: 16px;
    --motion-offset-lg: 32px;

    /* Shorthand transitions reusables */
    --t-color:    color var(--d-fast) var(--ease-smooth), background-color var(--d-fast) var(--ease-smooth);
    --t-transform: transform var(--d-base) var(--ease-out-cubic);
    --t-shadow:   box-shadow var(--d-base) var(--ease-out-cubic);
    --t-all-fast: all var(--d-fast) var(--ease-smooth);
    --t-all-base: all var(--d-base) var(--ease-out-cubic);
}

/* ================================================================== */
/*  KEYFRAMES                                                          */
/* ================================================================== */

@keyframes ostl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ostl-fade-up {
    from { opacity: 0; transform: translate3d(0, var(--motion-offset-md), 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ostl-fade-down {
    from { opacity: 0; transform: translate3d(0, calc(-1 * var(--motion-offset-md)), 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ostl-fade-left {
    from { opacity: 0; transform: translate3d(var(--motion-offset-md), 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ostl-fade-right {
    from { opacity: 0; transform: translate3d(calc(-1 * var(--motion-offset-md)), 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ostl-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ostl-blur-in {
    from { opacity: 0; filter: blur(8px); transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes ostl-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes ostl-shake-x {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20%      { transform: translate3d(-6px, 0, 0); }
    40%      { transform: translate3d(6px, 0, 0); }
    60%      { transform: translate3d(-4px, 0, 0); }
    80%      { transform: translate3d(4px, 0, 0); }
}

@keyframes ostl-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-soft); }
    50%      { box-shadow: 0 0 0 12px transparent; }
}

@keyframes ostl-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes ostl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ostl-progress-indeterminate {
    0%   { transform: translateX(-100%) scaleX(0.4); }
    50%  { transform: translateX(0)     scaleX(0.6); }
    100% { transform: translateX(100%)  scaleX(0.4); }
}

@keyframes ostl-toast-in {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ostl-toast-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(120%, 0, 0); }
}

@keyframes ostl-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ostl-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ostl-glow-accent {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-soft); }
    50%      { box-shadow: 0 0 24px 4px var(--color-accent-soft); }
}

@keyframes ostl-dots {
    0%, 20%   { content: '.'; }
    40%       { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ================================================================== */
/*  REVEAL ON SCROLL — sistema de variantes                            */
/* ================================================================== */

/* Estado por defecto — invisible y desplazado */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--motion-offset-md), 0);
    transition:
        opacity var(--d-slow) var(--ease-reveal-smooth),
        transform var(--d-slow) var(--ease-reveal-smooth),
        filter var(--d-slow) var(--ease-reveal-smooth);
    will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translate3d(0, var(--motion-offset-md), 0); }
[data-reveal="down"]  { transform: translate3d(0, calc(-1 * var(--motion-offset-md)), 0); }
[data-reveal="left"]  { transform: translate3d(var(--motion-offset-md), 0, 0); }
[data-reveal="right"] { transform: translate3d(calc(-1 * var(--motion-offset-md)), 0, 0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="blur"]  { filter: blur(8px); transform: translate3d(0, 8px, 0); }
[data-reveal="fade"]  { transform: none; }

/* Estado revelado */
[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    will-change: auto;
}

/* Sistema legacy .reveal compat */
.reveal {
    opacity: 0;
    transform: translate3d(0, var(--motion-offset-md), 0);
    transition:
        opacity var(--d-slow) var(--ease-reveal-smooth),
        transform var(--d-slow) var(--ease-reveal-smooth),
        filter var(--d-slow) var(--ease-reveal-smooth);
}
.reveal--done,
.reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ================================================================== */
/*  HOVER / FOCUS / ACTIVE base                                        */
/* ================================================================== */

.ostl-tactile {
    transition: transform var(--d-fast) var(--ease-spring),
                box-shadow var(--d-fast) var(--ease-spring);
}
.ostl-tactile:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-3);
}
.ostl-tactile:active {
    transform: translate3d(0, 0, 0) scale(0.985);
    transition-duration: var(--d-instant);
}

/* Focus visible global */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* ================================================================== */
/*  REDUCE MOTION — override total                                     */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: opacity 120ms linear !important;
    }
}

/* Toggle manual via data-motion="off" en <html> (persistente vía JS) */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
html[data-motion="off"] [data-reveal],
html[data-motion="off"] .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}