/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Micro-Interactions Styles - Sprint 7
 * Styles for button ripples, hovers, form inputs, and feedback
 */

/* ============================================
   BUTTON INTERACTIONS
   ============================================ */

button,
.btn,
[role="button"] {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;

.button-clicked {
    transform: scale(0.95);

.button-hovered {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.2);

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: var(--radius-full);
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;

/* ============================================
   FORM INTERACTIONS
   ============================================ */

input,
textarea,
select {
    transition: all 0.3s ease;

.input-focused {
    border-color: var(--color-info, #4a90e2) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    outline: none;

.input-container.input-focused,
.form-group.input-focused {
    transform: translateY(-2px);

/* Floating label */
label {
    transition: all 0.3s ease;

.label-floating {
    transform: translateY(-20px) scale(0.85);
    color: var(--color-info, #4a90e2);

/* ============================================
   HOVER EFFECTS
   ============================================ */

a,
button,
.interactive,
[role="button"] {
    transition: all 0.2s ease;

.hover-active {
    transform: translateY(-2px);
    filter: brightness(1.1);

/* ============================================
   FEEDBACK ANIMATIONS
   ============================================ */

.success-animation {
    animation: success-pulse 1s ease;
    border-color: var(--color-success, #5cb85c) !important;

@keyframes success-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--color-success-rgb, 92, 184, 92), 0.4);

    50% {
        box-shadow: 0 0 0 10px rgba(var(--color-success-rgb, 92, 184, 92), 0);

.error-animation {
    border-color: var(--color-danger, #f44336) !important;

.warning-animation {
    border-color: var(--color-warning, #ffc107) !important;

/* ============================================
   NOTIFICATION ANIMATIONS
   ============================================ */

.notification-enter {
    animation: slideInDown 0.3s ease-out;

.notification-active {
    animation: none;

.notification-exit {
    animation: slideOutUp 0.3s ease-in;

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);

    to {
        opacity: 1;
        transform: translateY(0);

@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);

    to {
        opacity: 0;
        transform: translateY(-20px);

/* ============================================
   RESPECT REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .ripple,
    .button-clicked,
    .button-hovered,
    .hover-active,
    .input-focused,
    .label-floating,
    .success-animation,
    .error-animation,
    .warning-animation,
    .notification-enter,
    .notification-exit {
        animation: none !important;
        transition: none !important;
        transform: none !important;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}