/**
 * Clara — Supplemental animations
 * @package Clara
 * @version 14.0.0
 */

/* Scroll hint for horizontal containers — shown once */
.scroll-hint {
    animation: scrollHint 1.5s ease-in-out 1.5s 2;
}
@keyframes scrollHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-12px); }
}

/* Skeleton loading placeholders */
.skeleton {
    background: linear-gradient(90deg, var(--c-bg-soft) 25%, var(--c-border) 50%, var(--c-bg-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fun fact text swap */
.fun-fact-text { transition: opacity .25s ease; }

/* Slide transitions (used by category slider) */
.category-slide {
    transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
}

/* Button press feedback */
.slider-arrow:active,
.fun-fact-refresh:active {
    transform: scale(.92);
}
.slider-arrow:active {
    transform: translateY(-50%) scale(.92);
}

/* Card lift on focus-visible (keyboard) */
.article-card:focus-within,
.category-card:focus-within,
.youtube-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.1);
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint,
    .skeleton { animation: none !important; }
    .category-slide { transition: opacity .3s ease !important; }
}