/* Lit Score widget - progress bar shine effects (dashboard/index.php)
 * Moved out of an inline <style> block in templates/components/widget-creator-score.php after it
 * failed to render in production (a Fragment::component() DOMDocument-rendered template doesn't
 * reliably preserve inline <style> tags) - this is the asset-loader-registered equivalent instead,
 * the established pattern in this codebase (see Core AssetLoader::core() registering main.css). */

@keyframes litScoreShimmer {
    /* Swept right-to-left before (the naive "0% -150% -> 100% 250%" reading suggests left-to-right,
     * but since the gradient image is wider than its container, CSS's percentage background-position
     * formula - position = (container - image) * pct% - inverts that relationship). Swapped so it
     * reads left-to-right instead, matching the bar's own fill direction. */
    0% { background-position: 250% 0; }
    100% { background-position: -150% 0; }
}

@keyframes litScoreBarGlow {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

.lit-score-bar-fill {
    background-image: linear-gradient(90deg, #d97706, #fde68a 55%, #d97706);
    background-size: 200% 100%;
    animation: litScoreBarGlow 3s ease-in-out infinite;
}

.lit-score-bar-shimmer {
    background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: litScoreShimmer 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lit-score-bar-shimmer, .lit-score-bar-fill { animation: none; }
}

/* Lit Score widget - "next steps" collapse/expand (templates/components/widget-creator-score.php)
 * Pure-CSS checkbox toggle (no JS - this partial renders through Fragment::component()'s
 * DOMDocument pipeline, where inline <script> tags are unreliable, same reasoning as the shimmer
 * above living here rather than an inline <style> block). #lit_score_steps_expand and its label are
 * both direct children of the widget's outer <div>, so the general sibling combinator (~) reaches
 * both the steps list and the toggle label from the checkbox's checked state. */
.lit-score-steps-collapsed {
    max-height: 4.75rem; /* ~3 rows (20px each) + a sliver of the 4th, then the mask fades it out */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}

#lit_score_steps_expand:checked ~ .lit-score-steps-collapsed {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.lit-score-steps-toggle-less { display: none; }

#lit_score_steps_expand:checked ~ .lit-score-steps-toggle .lit-score-steps-toggle-more { display: none; }
#lit_score_steps_expand:checked ~ .lit-score-steps-toggle .lit-score-steps-toggle-less { display: inline; }