.turbo-scroll-highlight {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.4);
    border-radius: 4px;
}

/** View Transition Styles **/
/** View transitions are a new feature in modern browsers that allow for smooth transitions between different states of a page. **/
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 50ms; /* faster transition */
    animation-timing-function: ease-in-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}


/* Animation pulse */
@keyframes skeleton-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Éléments */
div[class*=" skeleton-"] {
    background-color: #e9ecef;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* Éléments */
.skeleton-divider {
    height: 3px;
    width: 100%;
    margin-bottom: 12px;
}
.skeleton-line {
    height: 16px;
    width: 100%;
    margin-bottom: 12px;
}

.skeleton-input {
    height: 51px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-rectangle {
    height: 120px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-textarea {
    height: 96px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 200px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    margin-bottom: 12px;
}

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

.skeleton-card-header {
    height: 56px;
    width: 100%;
    margin-bottom: 12px;
}

.skeleton-card-footer {
    height: 48px;
    width: 100%;
    margin-bottom: 12px;
}

/**
 * StaminaTransition CSS Animations
 * Non-blocking animations for DOM modifications (remove, add, replace, etc.)
 * These allow users to continue interacting while animations play.
 */

/* Default duration variable */
:root {
    --stamina-transition-duration: 150ms;
}

/* Remove animation - fade out and scale down */
.stamina-transition-removing {
    animation: stamina-fade-out var(--stamina-transition-duration, 150ms) ease-out forwards;
}

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

/* Enter animation - fade in and scale up */
.stamina-transition-entering {
    animation: stamina-fade-in var(--stamina-transition-duration, 150ms) ease-out forwards;
}

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

/* Replace animations */
.stamina-transition-replacing-out {
    animation: stamina-fade-out var(--stamina-transition-duration, 150ms) ease-out forwards;
}

.stamina-transition-replacing-in {
    animation: stamina-fade-in var(--stamina-transition-duration, 150ms) ease-out forwards;
}

/* Content change animation - brief opacity pulse */
.stamina-transition-content-changing {
    animation: stamina-content-fade-out calc(var(--stamina-transition-duration, 150ms) / 2) ease-out forwards;
}

.stamina-transition-content-changed {
    animation: stamina-content-fade-in calc(var(--stamina-transition-duration, 150ms) / 2) ease-out forwards;
}

@keyframes stamina-content-fade-out {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

@keyframes stamina-content-fade-in {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .stamina-transition-removing,
    .stamina-transition-entering,
    .stamina-transition-replacing-out,
    .stamina-transition-replacing-in,
    .stamina-transition-content-changing,
    .stamina-transition-content-changed {
        animation: none !important;
        transition: none !important;
    }
}