/**
 * OS TigerLab — Empty States Animations
 *
 * Animaciones sutiles para SVGs en estados vacíos / error / 404 / 500.
 * Todas GPU-friendly (solo transform/opacity), respetan reduce-motion,
 * pausables con [data-motion="off"].
 *
 * USO:
 *   <div class="ostl-empty-state ostl-empty-state--no-courses">
 *     <svg data-empty-illustration>...</svg>  // o <use href="...">
 *     <h3>Aún no tenés cursos</h3>
 *     <p>Cuando compres algo, va a aparecer acá.</p>
 *     <a class="ostl-btn ostl-btn--primary">Ver catálogo</a>
 *   </div>
 *
 *   data-attribute para activar variantes:
 *     data-empty-anim="pulse" (default)
 *     data-empty-anim="float"
 *     data-empty-anim="rotate"
 *     data-empty-anim="glitch" (para 404)
 *     data-empty-anim="shake"  (para 500)
 */

.ostl-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--sp-8, 32px) var(--sp-4, 16px);
    gap: var(--sp-3, 12px);
    color: var(--color-text-secondary, #B3B3B3);
}
.ostl-empty-state__illustration,
.ostl-empty-state [data-empty-illustration],
.ostl-empty-state__illustration svg {
    width: clamp(120px, 30vw, 220px);
    height: auto;
    color: var(--color-accent, #00FF9C);
    margin-bottom: var(--sp-3);
    transform-origin: center;
    will-change: transform, opacity;
}
.ostl-empty-state h2,
.ostl-empty-state h3 {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-weight: 700;
    color: var(--color-text-primary, #F5F5F5);
    margin: 0;
}
.ostl-empty-state p {
    color: var(--color-text-secondary, #B3B3B3);
    max-width: 50ch;
    margin: 0;
    line-height: 1.55;
}
.ostl-empty-state .ostl-empty-state__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-2);
}

/* Default: pulse sutil */
.ostl-empty-state__illustration,
.ostl-empty-state [data-empty-illustration],
.ostl-empty-state[data-empty-anim="pulse"] .ostl-empty-state__illustration {
    animation: ostl-empty-pulse 3.6s ease-in-out infinite;
}
@keyframes ostl-empty-pulse {
    0%, 100% { transform: scale(1)    rotate(0); opacity: 0.92; }
    50%      { transform: scale(1.04) rotate(-1deg); opacity: 1; }
}

.ostl-empty-state[data-empty-anim="float"] .ostl-empty-state__illustration,
.ostl-empty-state[data-empty-anim="float"] [data-empty-illustration] {
    animation: ostl-empty-float 4.2s ease-in-out infinite;
}
@keyframes ostl-empty-float {
    0%, 100% { transform: translateY(0)   rotate(0); }
    50%      { transform: translateY(-8px) rotate(1.5deg); }
}

.ostl-empty-state[data-empty-anim="rotate"] .ostl-empty-state__illustration,
.ostl-empty-state[data-empty-anim="rotate"] [data-empty-illustration] {
    animation: ostl-empty-rotate 18s linear infinite;
}
@keyframes ostl-empty-rotate {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* 404 — glitch sutil con clip-path */
.ostl-empty-state[data-empty-anim="glitch"] .ostl-empty-state__illustration,
.ostl-empty-state[data-empty-anim="glitch"] [data-empty-illustration] {
    animation: ostl-empty-glitch 2.4s steps(2, end) infinite;
}
@keyframes ostl-empty-glitch {
    0%, 100% { transform: translate(0, 0); filter: hue-rotate(0); }
    10% { transform: translate(-2px, 1px); }
    20% { transform: translate(2px, -1px); filter: hue-rotate(20deg); }
    30% { transform: translate(0, 0); filter: hue-rotate(0); }
    72% { transform: translate(-1px, -1px); filter: hue-rotate(-20deg); }
    78% { transform: translate(0, 0); filter: hue-rotate(0); }
}

/* 500 — shake leve cada cierto tiempo */
.ostl-empty-state[data-empty-anim="shake"] .ostl-empty-state__illustration,
.ostl-empty-state[data-empty-anim="shake"] [data-empty-illustration] {
    animation: ostl-empty-shake 4s ease-in-out infinite;
}
@keyframes ostl-empty-shake {
    0%, 60%, 100% { transform: translateX(0); }
    65% { transform: translateX(-3px) rotate(-0.5deg); }
    70% { transform: translateX(3px)  rotate(0.5deg); }
    75% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    85% { transform: translateX(0); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .ostl-empty-state__illustration,
    .ostl-empty-state [data-empty-illustration] {
        animation: none !important;
        will-change: auto;
    }
}
[data-motion="off"] .ostl-empty-state__illustration,
[data-motion="off"] .ostl-empty-state [data-empty-illustration] {
    animation: none !important;
}