/**
 * TamRank — gedeelde motion & feedback-laag.
 *
 * Richtlijnen: Branding.md §Motion & Feedback. Motion draagt betekenis
 * (voortgang, onthulling, bevestiging) of hij ontbreekt — alleen op
 * piek-momenten, nooit ambient. Referentie-implementatie: Topical
 * Authority (PRO). Dit is de gedeelde laag voor FREE én het PRO-add-on;
 * de PRO-lokale kopie (pro-motion.css) vervalt zodra PRO hierop leunt.
 *
 * Gebruik:
 *  - Zet .tr-reveal op een container → directe kinderen staggeren in
 *    (bedoeld voor het moment dat een resultaat verschijnt, niet voor
 *    permanente page-chrome).
 *  - Zet .tr-reveal-item op een los element voor een enkele fade-up.
 *  - Count-up van getallen: window.TamRankReveal (tr-reveal.js).
 *
 * @package TamRank
 */

/* ==========================================
   PRESS-STATE (web-haptics)
   Elke klik geeft een voelbare press terug. Gescoped op TamRank-
   oppervlakken zodat vreemde admin-UI ongemoeid blijft.
   ========================================== */

.tr-page-wrap .tr-btn:active,
.tr-page-wrap .tr-pill:active,
.tr-page-wrap .button:active,
.tam-dashboard-wrap .tr-btn:active,
.tam-dashboard-wrap .button:active,
.tam-focus-dashboard .tr-btn:active,
.tam-focus-dashboard .button:active,
.tam-focus-dashboard .tam-tasks-tab:active,
.tam-focus-dashboard .tam-btn-add-task:active,
.tam-focus-dashboard .tam-prio-btn:active {
    transform: scale(0.97);
}

/* ==========================================
   ONTHULLING (reveal)
   ========================================== */

@keyframes trFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.tr-reveal > * {
    animation: trFadeUp 0.4s ease backwards;
}

.tr-reveal > *:nth-child(2) { animation-delay: 0.06s; }
.tr-reveal > *:nth-child(3) { animation-delay: 0.12s; }
.tr-reveal > *:nth-child(4) { animation-delay: 0.18s; }
.tr-reveal > *:nth-child(5) { animation-delay: 0.24s; }
.tr-reveal > *:nth-child(6) { animation-delay: 0.3s; }

.tr-reveal-item {
    animation: trFadeUp 0.35s ease backwards;
}

/*
 * Balk die zich intekent (bijv. score-bar bij onthulling): animeert van
 * width 0 naar de inline gezette eindbreedte. Zelfde rol als de
 * ring-draw-in bij Topical Authority (PRO).
 */
@keyframes trBarIn {
    from { width: 0; }
}

.tr-reveal-bar {
    animation: trBarIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

/* ==========================================
   MICRO-FEEDBACK (web-haptics)
   Keyframes voor bevestiging bij het afvinken/afronden van een actie.
   Toepassing gebeurt per feature (bijv. de taak-checkbox op het
   dashboard) — hier alleen de gedeelde bouwstenen.
   ========================================== */

/* Check die zich intekent; dasharray op de polyline zetten bij gebruik. */
@keyframes trCheckDraw {
    from { stroke-dashoffset: 24; }
    to   { stroke-dashoffset: 0; }
}

/* Korte pop als tactiele bevestiging. */
@keyframes trPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ==========================================
   TOEGANKELIJKHEID
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    .tr-reveal > *,
    .tr-reveal-item,
    .tr-reveal-bar {
        animation: none !important;
    }

    .tr-page-wrap .tr-btn:active,
    .tr-page-wrap .tr-pill:active,
    .tr-page-wrap .button:active,
    .tam-dashboard-wrap .tr-btn:active,
    .tam-dashboard-wrap .button:active,
    .tam-focus-dashboard .tr-btn:active,
    .tam-focus-dashboard .button:active,
    .tam-focus-dashboard .tam-tasks-tab:active,
    .tam-focus-dashboard .tam-btn-add-task:active,
    .tam-focus-dashboard .tam-prio-btn:active {
        transform: none;
    }
}
