/*
 * IWonnaP — Motion (feedback)
 * Feedback-only keyframes — bound to specific UI states:
 *   rs-pulse        right-sidebar running-event pulse (Phase 26)
 *   ef-flash        edit-field auto-save success flash (Phase 27)
 *   modal-spin      modal loading spinner (Phase 29)
 *   vault-cd-tick   vault reveal countdown ring (redesign-v2.1 screen 4)
 *   dt-pulse        calendar day-timeline live chip pulse (FB-4)
 *   dt-pop-in       calendar day-timeline popover entrance (FB-4)
 *
 * Split out of animations.css (ADR-026) so feedback motion has a dedicated home
 * and prefers-reduced-motion overrides for these states can win in the cascade.
 *
 * Load LAST in the pipeline so its reduced-motion @media overrides any
 * `animation:` declarations from earlier stylesheets.
 */

/* ═══ Right-sidebar running event pulse ════════════════ */

@keyframes rs-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ═══ Edit-field auto-save success flash ══════════════ */

@keyframes ef-flash {
  0%   { background: color-mix(in srgb, var(--success) 26%, transparent); }
  100% { background: transparent; }
}

/* ═══ Modal loading spinner ═══════════════════════════ */

@keyframes modal-spin {
  to { transform: rotate(1turn); }
}

/* ═══ Family-tree loading spinner ═════════════════════ */

@keyframes ft-spin {
  to { transform: rotate(1turn); }
}

/* ═══ Vault reveal countdown ring ═════════════════════ */

@keyframes vault-cd-tick {
  to { stroke-dashoffset: 270; }
}

/* ═══ Calendar timeline active-chip blink ═════════════ */

@keyframes dt-pulse {
  0%, 100% { opacity: .25; }
  50% { opacity: .9; }
}

@keyframes dt-pop-in {
  from { transform: translateY(7px); }
  to { transform: none; }
}

/* ═══ Mobile full-navigation sheet ════════════════════ */

@keyframes mnav-slide-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ═══ RV3 tasks list motion ═══════════════════════════ */

@keyframes tk-pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes tk-pulse-mid {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
    transform: scale(1.18);
  }
}

@keyframes tk-pulse-strong {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent);
    transform: scale(1.3);
  }
}

@keyframes tk-glyph-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.tk-card-in,
.tk-stat,
.tk-chip,
.tk-mark,
.tk-search-deep,
.tk-search-clear,
.tk-confirm,
.tk-detail-in,
.tk-detail-title h2,
.tk-detail textarea,
.tk-btn,
.tk-sub-remove,
.tk-fallback {
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    color var(--t-fast),
    opacity var(--t-fast),
    transform var(--t-fast);
}

.tk-children,
.tk-sec-body {
  transition: grid-template-rows var(--t-base);
}

.tk-chip-reset {
  transition: opacity var(--t-base), transform var(--tk-t-morph);
}

.tk-chev-ic::before,
.tk-chev-ic::after {
  transition: transform var(--tk-t-morph);
}

.tk-menu,
.tk-scrim,
.tk-mtab-ind,
[data-tip]::after {
  transition:
    opacity var(--t-base),
    transform var(--t-base),
    background var(--t-base),
    border-color var(--t-base);
}

[data-tip]::after {
  transition-delay: var(--tk-tip-delay);
}

.tk-clock--t24 { animation: tk-pulse-soft var(--tk-pulse-24) ease-in-out infinite; }
.tk-clock--t6 { animation: tk-pulse-mid var(--tk-pulse-6) ease-in-out infinite; }
.tk-clock--t1 { animation: tk-pulse-strong var(--tk-pulse-1) ease-in-out infinite; }
.tk-p4 .tk-tab .tk-scale,
.tk-stat--over:not(.is-zero) .tk-stat-num {
  animation: tk-glyph-pulse var(--tk-pulse-24) ease-in-out infinite;
}
.tk-seg-attention {
  animation: tk-glyph-pulse var(--tk-pulse-6) ease-in-out infinite;
}

.tk-mark--attention {
  animation: tk-glyph-pulse var(--tk-pulse-6) ease-in-out infinite;
}

.tk-btn:active,
.tk-sub-remove:active,
.tk-prio-pick .tk-chip:active {
  transform: scale(.98);
}

@media (hover: hover) {
  .tk-card > .tk-card-main > .tk-card-in:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }
}

.ig-card__slide {
  transition: opacity var(--t-base);
}

/* ═══ prefers-reduced-motion ══════════════════════════
   Feedback animations stop, but the state must still be readable.
   Keep colour/border, drop motion.
*/

@media (prefers-reduced-motion: reduce) {
  .ig-card__slide {
    transition: none !important;
  }
  .modal-loading__spinner {
    animation: none;
    border-top-color: var(--accent);
  }
  .tree-loading__spinner {
    animation: none;
    border-top-color: var(--accent);
  }
  .dt-track,
  .dt-base,
  .dt-chip,
  .dt-pop,
  .dt-toggle .chev {
    transition: none;
  }
  .dt-chip.t-active::after,
  .dt-chip.t-active .live,
  .dt-base.is-live::after,
  .dt-pop.is-shown {
    animation: none;
  }
  .vault-countdown-ring circle.fg {
    animation: none;
    stroke-dashoffset: 0;
  }
  .mnav-panel {
    animation: none !important;
    transition: none;
  }
  .mnav-scrim { transition: none; }
  .tk-card-in,
  .tk-stat,
  .tk-chip,
  .tk-mark,
  .tk-search-deep,
  .tk-search-clear,
  .tk-confirm,
  .tk-detail-in,
  .tk-detail-title h2,
  .tk-detail textarea,
  .tk-btn,
  .tk-sub-remove,
  .tk-fallback,
  .tk-children,
  .tk-sec-body,
  .tk-chip-reset,
  .tk-chev-ic::before,
  .tk-chev-ic::after,
  .tk-menu,
  .tk-scrim,
  .tk-mtab-ind,
  [data-tip]::after {
    transition: none !important;
  }
  .tk-clock,
  .tk-p4 .tk-tab .tk-scale,
  .tk-stat--over .tk-stat-num,
  .tk-seg-attention,
  .tk-mark--attention {
    animation: none !important;
  }
  .tk-btn:active,
  .tk-sub-remove:active,
  .tk-prio-pick .tk-chip:active {
    transform: none;
  }
}