# Story 9.11: Animations & Micro-interactions

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **subtle, professional animations**,
So that **the interface feels polished and responsive**.

## Acceptance Criteria

### Transitions
- [ ] Button hover: 150ms ease
- [ ] Card hover: 200ms ease
- [ ] Modal open/close: 200ms
- [ ] Page transitions (optional)

### Loading States
- [ ] Skeleton loaders for content
- [ ] Spinner for actions
- [ ] Progress indicators

### Feedback Animations
- [ ] Success checkmark
- [ ] Error shake
- [ ] Toast slide-in

### Hover Effects
- [ ] Links: Color transition
- [ ] Cards: Lift effect
- [ ] Buttons: Background transition

### Requirements
- [ ] All animations subtle, professional
- [ ] Under 300ms duration
- [ ] Respect prefers-reduced-motion

## Technical Notes

```css
/* Base transitions */
.transition-default {
  @apply transition-all duration-150 ease-in-out;
}

.transition-slow {
  @apply transition-all duration-200 ease-in-out;
}

/* Button hover */
.btn {
  @apply transition-colors duration-150;
}

/* Card lift */
.card-hover {
  @apply transition-all duration-200;
}
.card-hover:hover {
  @apply -translate-y-0.5 shadow-md;
}

/* Skeleton loader */
.skeleton {
  @apply animate-pulse bg-charcoal/10 rounded;
}

/* Toast animation */
.toast-enter {
  @apply transform translate-x-full opacity-0;
}
.toast-enter-active {
  @apply transform translate-x-0 opacity-100 transition-all duration-200;
}

/* Success checkmark */
@keyframes checkmark {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

.checkmark-animated path {
  stroke-dasharray: 100;
  animation: checkmark 0.3s ease-in-out forwards;
}

/* Error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.3s ease-in-out;
}
```

```blade
<!-- Skeleton loader component -->
@props(['lines' => 3])

<div class="space-y-3">
    @for($i = 0; $i < $lines; $i++)
        <div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
    @endfor
</div>

<!-- Loading spinner -->
<div wire:loading class="flex items-center gap-2">
    <svg class="animate-spin h-5 w-5 text-gold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
    </svg>
    <span>{{ __('common.loading') }}</span>
</div>
```

## Definition of Done
- [ ] Button transitions work
- [ ] Card hover effects work
- [ ] Skeleton loaders work
- [ ] Spinners work
- [ ] Toast animations work
- [ ] All animations subtle
- [ ] Reduced motion respected
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 4 hours