/* ═══════════════════════════════════════════════════
   LomGroup — Shared Animations & Micro-interactions
   Import in any app for consistent motion design.
   ═══════════════════════════════════════════════════ */

/* ── Timing functions ──────────────── */
:root {
    --lom-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --lom-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --lom-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lom-duration-fast: 150ms;
    --lom-duration: 250ms;
    --lom-duration-slow: 400ms;
}

/* ── Fade in variants ──────────────── */
@keyframes lom-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lom-fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lom-fade-in-down {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lom-fade-in-scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Skeleton loading ──────────────── */
@keyframes lom-skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.lom-skeleton {
    background: linear-gradient(90deg,
        var(--lom-skeleton-base, #1a1d27) 25%,
        var(--lom-skeleton-shine, #232733) 50%,
        var(--lom-skeleton-base, #1a1d27) 75%);
    background-size: 200% 100%;
    animation: lom-skeleton 1.5s var(--lom-ease-in-out) infinite;
    border-radius: 6px;
}

.lom-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.lom-skeleton-text:last-child {
    width: 60%;
}

.lom-skeleton-title {
    height: 24px;
    width: 40%;
    margin-bottom: 16px;
}

.lom-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.lom-skeleton-card {
    height: 200px;
    border-radius: 12px;
}

.lom-skeleton-image {
    height: 160px;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Light theme skeletons */
@media (prefers-color-scheme: light) {
    .lom-skeleton {
        --lom-skeleton-base: #e5e7eb;
        --lom-skeleton-shine: #f3f4f6;
    }
}

/* ── Card interactions ─────────────── */
.lom-card-hover {
    transition:
        transform var(--lom-duration) var(--lom-ease-out),
        box-shadow var(--lom-duration) var(--lom-ease-out),
        border-color var(--lom-duration) var(--lom-ease-out);
}

.lom-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.lom-card-hover:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── Button press ──────────────────── */
.lom-btn-press {
    transition: transform var(--lom-duration-fast) var(--lom-spring);
}

.lom-btn-press:active {
    transform: scale(0.97);
}

/* ── Stagger children ──────────────── */
.lom-stagger > * {
    animation: lom-fade-in-up var(--lom-duration-slow) var(--lom-ease-out) both;
}

.lom-stagger > *:nth-child(1) { animation-delay: 0ms; }
.lom-stagger > *:nth-child(2) { animation-delay: 60ms; }
.lom-stagger > *:nth-child(3) { animation-delay: 120ms; }
.lom-stagger > *:nth-child(4) { animation-delay: 180ms; }
.lom-stagger > *:nth-child(5) { animation-delay: 240ms; }
.lom-stagger > *:nth-child(6) { animation-delay: 300ms; }
.lom-stagger > *:nth-child(7) { animation-delay: 360ms; }
.lom-stagger > *:nth-child(8) { animation-delay: 420ms; }
.lom-stagger > *:nth-child(n+9) { animation-delay: 480ms; }

/* ── Page transition ───────────────── */
.lom-page-enter {
    animation: lom-fade-in-up var(--lom-duration-slow) var(--lom-ease-out);
}

/* ── Pulse dot (notifications) ─────── */
@keyframes lom-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.lom-pulse {
    animation: lom-pulse 2s var(--lom-ease-in-out) infinite;
}

/* ── Spin (loaders) ────────────────── */
@keyframes lom-spin {
    to { transform: rotate(360deg); }
}

.lom-spin {
    animation: lom-spin 0.8s linear infinite;
}

/* ── LomGroup branded loader ───────── */
.lom-loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lom-border, #2a2e3a);
    border-top-color: var(--lom-accent, #8cc63f);
    border-radius: 50%;
    animation: lom-spin 0.8s linear infinite;
}

.lom-loader-sm { width: 20px; height: 20px; border-width: 2px; }
.lom-loader-lg { width: 56px; height: 56px; border-width: 4px; }

/* ── Toast slide in ────────────────── */
@keyframes lom-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes lom-slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

.lom-toast-enter { animation: lom-slide-in-right var(--lom-duration) var(--lom-ease-out); }
.lom-toast-exit  { animation: lom-slide-out-right var(--lom-duration-fast) var(--lom-ease-in-out); }

/* ── Number count up ───────────────── */
.lom-count-up {
    display: inline-block;
    animation: lom-fade-in-scale var(--lom-duration) var(--lom-spring);
}

/* ── Tooltip ───────────────────────── */
.lom-tooltip {
    animation: lom-fade-in-scale var(--lom-duration-fast) var(--lom-ease-out);
}

/* ── Respect reduced motion ────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}