/* Original figures: draw first, then reveal the result. Each loop lasts 6s. */
[data-c-teaching] .sec__head h2 { max-width: 790px; }
[data-c-teaching] .wire-path path { stroke-dasharray: 100; stroke-dashoffset: 0; transition: none; }
[data-teaching-card].is-animating .teaching-arrow path { animation: teaching-arrow-draw 6s linear infinite both; }
[data-teaching-card].is-animating .teaching-growth path { animation: teaching-line-grow 6s linear infinite both; }
[data-teaching-card].is-animating .teaching-arrow-result { animation: teaching-arrow-result 6s ease-out infinite both; }
[data-teaching-card].is-animating .teaching-feedback { animation: teaching-feedback 6s ease-out infinite both; }
[data-teaching-card].is-animating .teaching-reflection { animation: teaching-reflection 6s ease-out infinite both; }
[data-teaching-card].is-animating .teaching-release { animation: teaching-release 6s ease-out infinite both; }
.teaching-feedback::after, .teaching-reflection::after { content: ''; position: absolute; left: 60px; width: 1px; background: var(--accent-ink); opacity: .6; }
.teaching-feedback::after { top: 100%; height: 14px; }
.teaching-reflection::after { bottom: 100%; height: 22px; }
/* Arrows finish at 1.44s; their result starts appearing at 1.5s. */
@keyframes teaching-arrow-draw {
  0%, 6% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: 1; }
  24%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes teaching-arrow-result {
  0%, 25% { opacity: 0; transform: translateY(4px); }
  32%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
/* The plot finishes at 2.4s. Callouts follow their points; release follows the plot. */
@keyframes teaching-line-grow {
  0%, 6% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: 1; }
  40%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes teaching-feedback {
  0%, 16% { opacity: 0; transform: translateY(4px); }
  22%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes teaching-reflection {
  0%, 32% { opacity: 0; transform: translateY(4px); }
  38%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes teaching-release {
  0%, 42% { opacity: 0; transform: translateY(4px); }
  48%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-teaching-card] :is(.teaching-arrow-result, .teaching-feedback, .teaching-reflection, .teaching-release) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-teaching-card] * { animation: none !important; }
}

[data-c-teaching] .brand-heading { font-family: inherit; font-weight: inherit; color: var(--accent-ink); }