/**
 * Maestro Assessment - Micro-interactions & motion
 * ================================================
 * All animations honour `prefers-reduced-motion`. No animation > 400ms.
 * Tokens: var(--transition*), var(--ease-*).
 */

:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

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

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

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

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes count-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-in    { animation: fade-in 320ms var(--ease-out-expo) both; }
.anim-fade-up    { animation: fade-up 360ms var(--ease-out-expo) both; }
.anim-fade-down  { animation: fade-down 360ms var(--ease-out-expo) both; }
.anim-scale-in   { animation: scale-in 280ms var(--ease-out-back) both; }
.anim-slide-in-r { animation: slide-in-right 320ms var(--ease-out-expo) both; }
.anim-count-up   { animation: count-up 360ms var(--ease-out-expo) both; }

.anim-stagger > * { animation: fade-up 380ms var(--ease-out-expo) both; }
.anim-stagger > *:nth-child(1)  { animation-delay: 30ms; }
.anim-stagger > *:nth-child(2)  { animation-delay: 70ms; }
.anim-stagger > *:nth-child(3)  { animation-delay: 110ms; }
.anim-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.anim-stagger > *:nth-child(5)  { animation-delay: 190ms; }
.anim-stagger > *:nth-child(6)  { animation-delay: 230ms; }
.anim-stagger > *:nth-child(7)  { animation-delay: 270ms; }
.anim-stagger > *:nth-child(8)  { animation-delay: 310ms; }

/* Reveal-on-scroll: starts hidden, animates in when [data-revealed] is set by JS */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms var(--ease-out-expo), transform 480ms var(--ease-out-expo);
    will-change: opacity, transform;
}

[data-reveal][data-revealed] {
    opacity: 1;
    transform: translateY(0);
}

/* Skeleton shimmer for loading states */
.skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-100) 0%,
        var(--color-gray-200) 50%,
        var(--color-gray-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--radius);
}

.skeleton-line {
    height: 1em;
    margin-block: 0.4em;
}

.skeleton-line.w-3-4 { width: 75%; }
.skeleton-line.w-1-2 { width: 50%; }
.skeleton-line.w-1-3 { width: 33%; }

/* Soft pulse used on live status pills */
.live-pulse {
    animation: pulse-soft 1.8s var(--ease-in-out) infinite;
}

/* Button press micro-interaction */
.btn,
button {
    transition: transform var(--transition-fast),
                background-color var(--transition),
                box-shadow var(--transition),
                color var(--transition);
}

.btn:active,
button:active {
    transform: scale(0.98);
}

/* Card hover lift */
.card-interactive {
    transition: transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
}

.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@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] { opacity: 1; transform: none; }
}