/* assets/css/animations.css — Eneryon redesign v2
 * Animations complémentaires (CSS only — pulse, link underline, btn arrow, italic hover)
 * Référence : spec §11.2 (couche animation moderne)
 */

/* ═══ Dot pulse "service actif" (utility class) ═══ */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-success);
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--c-success);
    opacity: 0.4;
    animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ═══ Underline progressive sur liens (background-size animation) ═══ */
.link-anim {
    color: var(--c-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--c-accent), var(--c-accent));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--d-base) var(--ease-out);
    padding-bottom: 2px;
    font-weight: 500;
}
.link-anim:hover { background-size: 100% 1px; }

/* ═══ Italique signature au hover sur chiffres optionnels ═══ */
.stat-toggle .pct {
    transition: font-style var(--d-base) ease, color var(--d-base) ease, font-weight var(--d-base) ease;
}
.stat-toggle:hover .pct {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 600;
    font-family: var(--ff-serif);
}

/* ═══ View Transitions API — root transitions ═══ */
@view-transition {
    navigation: auto;
}

/* Optional : customize transition timing for the root */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 350ms;
    animation-timing-function: var(--ease-out);
}

/* ═══ Respect prefers-reduced-motion ═══ */
@media (prefers-reduced-motion: reduce) {
    .pulse-dot::after { animation: none; }
    .link-anim {
        transition: none !important;
        background-size: 100% 1px; /* always show underline */
    }
    .stat-toggle .pct { transition: none !important; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}