/* TacTex reading page: self-drawn animated figures.
   Loop figures (.tcf--loop) run while on screen; one-shot figures (.tcf--once)
   play once and get a Replay button. Reduced motion shows a still frame. */

.tcf {
  --m-cur: var(--color-accent);
  --m-gt: #1a1a1a;
  --m-base: #b5532a;
  --m-imu1: #6c7380;
  --m-imu2: #2f9e57;
  --m-baro: #2b86c0;
  --m-mag: #8a3fd1;
  --m-pose: #4a4f5a;
  --m-grid: rgba(27, 31, 42, 0.1);
  --m-tint: rgba(78, 42, 132, 0.08);
  --m-on: #ffffff;
  position: relative;
  padding: 0.9rem 1rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcf {
    --m-gt: #e4e4e4;
    --m-base: #e8895a;
    --m-imu1: #9aa1ae;
    --m-imu2: #5fc78a;
    --m-baro: #6fbfe8;
    --m-mag: #b98af0;
    --m-pose: #b4bac6;
    --m-grid: rgba(255, 255, 255, 0.12);
    --m-tint: rgba(179, 157, 219, 0.12);
    --m-on: #14161d;
  }
}

:root[data-theme="dark"] .tcf {
  --m-gt: #e4e4e4;
  --m-base: #e8895a;
  --m-imu1: #9aa1ae;
  --m-imu2: #5fc78a;
  --m-baro: #6fbfe8;
  --m-mag: #b98af0;
  --m-pose: #b4bac6;
  --m-grid: rgba(255, 255, 255, 0.12);
  --m-tint: rgba(179, 157, 219, 0.12);
  --m-on: #14161d;
}

.tcf-wide { margin-top: 1.6rem; }

.tcf-replay {
  position: absolute;
  top: -0.72rem;
  right: 0.9rem;
  z-index: 2;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.85;
}
.tcf-replay:hover,
.tcf-replay:focus-visible {
  opacity: 1;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- SVG vocabulary ---------- */
.tcf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tcf-svg text { fill: var(--color-text); font-family: inherit; font-size: 15px; }
.tcf-svg .t-sm { font-size: 13px; }
.tcf-svg .t-muted { fill: var(--color-text-muted); }
.tcf-svg .t-mid { text-anchor: middle; }
.tcf-svg .t-end { text-anchor: end; }
.tcf-svg .tcf-cap { font-size: 17px; font-weight: 700; }
.tcf-svg .tcf-val { font-size: 17px; font-weight: 700; }
.tcf-svg .c-cur { fill: var(--m-cur); font-weight: 700; }
.tcf-svg .c-base { fill: var(--m-base); font-weight: 700; }
.tcf-svg .c-baro { fill: var(--m-baro); font-weight: 700; }
.tcf-svg .c-mag { fill: var(--m-mag); font-weight: 700; }
.tcf-svg .c-imu2 { fill: var(--m-imu2); font-weight: 700; }

.tcf-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tcf-gt { stroke: var(--m-gt); stroke-width: 3; }
.tcf-gt-soft { stroke: var(--m-gt); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.55; }
.tcf-base { stroke: var(--m-base); stroke-width: 3.5; }
.tcf-cur { stroke: var(--m-cur); stroke-width: 3.5; }
.tcf-baro { stroke: var(--m-baro); stroke-width: 3.5; }
.tcf-mag { stroke: var(--m-mag); stroke-width: 3.5; }
.tcf-gap { stroke: var(--m-base); stroke-width: 2; stroke-dasharray: 4 5; }
.tcf-gap-cur { stroke: var(--m-cur); stroke-width: 2; stroke-dasharray: 4 5; }
.tcf-axis { stroke: var(--m-grid); stroke-width: 1; }
.tcf-grid { stroke: var(--m-grid); stroke-width: 1; }

.tcf-dash { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.tcf-dot { offset-distance: 100%; offset-rotate: 0deg; }
.tcf-dot-gt { fill: var(--m-gt); }
.tcf-dot-base { fill: var(--m-base); }
.tcf-dot-cur { fill: var(--m-cur); }
.tcf-dot-baro { fill: var(--m-baro); }
.tcf-dot-mag { fill: var(--m-mag); }

/* boxes in flow diagrams */
.tcf-box { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 2; }
.tcf-box-soft { fill: var(--m-tint); stroke: none; }
.tcf-pill { fill: var(--color-surface); stroke-width: 3; }
.tcf-p-imu1 { stroke: var(--m-imu1); }
.tcf-p-imu2 { stroke: var(--m-imu2); }
.tcf-p-baro { stroke: var(--m-baro); }
.tcf-p-mag { stroke: var(--m-mag); }
.tcf-p-pose { stroke: var(--m-pose); }
.tcf-f-imu1 { fill: var(--m-imu1); }
.tcf-f-imu2 { fill: var(--m-imu2); }
.tcf-f-baro { fill: var(--m-baro); }
.tcf-f-mag { fill: var(--m-mag); }
.tcf-f-pose { fill: var(--m-pose); }
.tcf-tile { stroke: none; opacity: 0.85; }
.tcf-arrow { fill: none; stroke: var(--color-text-light); stroke-width: 2; stroke-linecap: round; }
.tcf-head { fill: var(--color-text-light); }
.tcf-pulse { fill: var(--m-cur); }

/* stick figure */
.tcf-body { fill: none; stroke: var(--color-text-light); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tcf-leg { fill: none; stroke: var(--m-cur); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.tcf-skull { fill: var(--color-surface); stroke: var(--color-text-light); stroke-width: 4; }
.tcf-specs { fill: none; stroke: var(--m-cur); stroke-width: 4; stroke-linecap: round; }
.tcf-trace { fill: none; stroke: var(--m-cur); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* result bars */
.tcf-bar-a { fill: var(--m-base); }
.tcf-bar-b { fill: var(--m-cur); }

/* dataset squares */
.tcf-sq { fill: var(--m-cur); opacity: 0.35; }
.tcf-sq-held { fill: var(--m-base); opacity: 0.9; }

/* frame state used by animated elements */
.tcf-vis { opacity: 0; }
.tcf-vis.tcf-static { opacity: 1; }
.tcf-late { opacity: 1; }

/* original images stay one click away */
.tcf-orig { margin-top: 0.7rem; font-size: 0.85rem; color: var(--color-text-muted); }
.tcf-orig summary { cursor: pointer; width: fit-content; }
.tcf-orig summary:hover { color: var(--color-accent); }

/* ---------- story layout ---------- */
.tcf-note {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* "How it works": two alternating story rows */
.tcf-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  margin: 2.6rem 0 0;
}
.tcf-story--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tcf-story figure { margin: 0; }
.tcf-story-text > p { margin: 0 0 0.95rem; }
.tcf-story-text > p:last-child { margin-bottom: 0; }
.tcf-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.tcf-kicker span {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.78rem;
  letter-spacing: 0;
}
.tcf-photo {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
}
.tcf-photo img { display: block; width: 100%; height: auto; border: 0; }
.tcf-story figcaption {
  margin: 0.6rem 0 0;
  font-size: 0.845rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.tcf-story-photo { margin-top: 1.1rem !important; }
.tcf-story .tcf--loop { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; box-sizing: border-box; }
.tcf-story .tcf--loop .tcf-svg { width: 100%; height: 100%; }
.tcf-step-head { margin: 3.2rem 0 0 !important; }
.tcf-step-head + .tcf-wide, .tcf-step-head + .tcf-stats { margin-top: 1.1rem; }

.tcf-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.1rem 0 0;
}
.tcf-three > figure { margin: 0; }
.tcf-three > figure > .tcf { padding: 0.6rem 0.6rem 0.4rem; }
.tcf-three figcaption {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.tcf-three figcaption strong { color: var(--color-text); }

/* chips: four trackers */
.tcf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.tcf-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  background: var(--color-surface);
  font-weight: 650;
  font-size: 0.95rem;
}
.tcf-chips li::before {
  content: "";
  width: 0.62rem;
  height: 0.3rem;
  border-left: 3px solid var(--m-cur);
  border-bottom: 3px solid var(--m-cur);
  transform: rotate(-45deg) translate(1px, -2px);
}
.tcf-chips-label { font-size: 0.88rem; color: var(--color-text-muted); margin-right: 0.4rem; }
.tcf.tcf-strip { padding: 0.9rem 1.1rem; }

/* metric meters */
.project-metric[data-meter] { --m-meter: var(--color-accent); }
.tcf-meter { height: 5px; margin-top: 0.7rem; border-radius: 99px; background: var(--color-border); overflow: hidden; }
.tcf-meter span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--m-meter); transform-origin: left center; }

@media (max-width: 860px) {
  .tcf-three { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tcf { padding: 0.7rem 0.6rem 0.5rem; }
  .tcf-replay { display: none; }
  .tcf-story, .tcf-story--lead { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}
@media print { .tcf-replay { display: none; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tcf-flow { stroke-dasharray: 6 8; animation: tcfFlow 0.9s linear infinite; }
  @keyframes tcfFlow { to { stroke-dashoffset: -14; } }
  .tcf--loop:not(.is-play) .tcf-flow,
  .tcf--loop:not(.is-play) [class*="k-"],
  .tcf--loop:not(.is-play) [class*="tcf-walk"] { animation-play-state: paused; }

  /* bars */
  .tcf-grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(1);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
  .tcf--once:not(.is-play) .tcf-grow { transform: scaleY(0); transition: none; }
  .tcf-late { transition: opacity 0.5s ease var(--d, 0s); }
  .tcf--once:not(.is-play) .tcf-late { opacity: 0; transition: none; }

  /* tracker chips */
  .tcf-chips li { transition: opacity 0.5s ease calc(var(--i, 0) * 0.35s), transform 0.5s ease calc(var(--i, 0) * 0.35s); }
  .tcf--once:not(.is-play) .tcf-chips li { opacity: 0; transform: translateY(0.4rem); transition: none; }

  /* meters */
  .tcf-meter span { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
  .project-metric[data-meter]:not(.is-in) .tcf-meter span { transform: scaleX(0); transition: none; }

  /* walking stick figure */
  @keyframes tcfThigh { 0% { transform: rotate(28deg); } 50% { transform: rotate(-28deg); } 100% { transform: rotate(28deg); } }
  @keyframes tcfShin { 0% { transform: rotate(0deg); } 25% { transform: rotate(52deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(0deg); } }
  @keyframes tcfBob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-3px); } }
  @keyframes tcfGround { to { stroke-dashoffset: -44; } }
  @keyframes tcfScroll { to { transform: translateX(-120px); } }
  .tcf-walk-thigh { animation: tcfThigh 1.2s linear infinite; }
  .tcf-walk-thigh.is-b { animation-delay: -0.6s; }
  .tcf-walk-shin { animation: tcfShin 1.2s linear infinite; }
  .tcf-walk-shin.is-b { animation-delay: -0.6s; }
  .tcf-walk-bob { animation: tcfBob 1.2s ease-in-out infinite; }
  .tcf-walk-ground { stroke-dasharray: 14 30; animation: tcfGround 1.2s linear infinite; }
  .tcf-walk-scroll { animation: tcfScroll 1.2s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .tcf-walk-thigh { transform: rotate(14deg); }
  .tcf-walk-thigh.is-b { transform: rotate(-14deg); }
}

.tcf.tcf-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.tcf-strip .tcf-replay { top: -0.72rem; }
.tcf-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.tcf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1.1rem 0 1.35rem; }
@media (max-width: 860px) { .tcf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Original two-up figures: kept for the slide deck only */
body:not(.present-mode) .tcf-deck-only { display: none; }
body.present-mode .tcf-deck-only .ck-reveal,
body.present-mode .tcf-deck-only .animate-on-scroll { opacity: 1; transform: none; transition: none; }

/* ---------- TacTex vocabulary ---------- */
.tcf {
  --t-warp: #b5532a;
  --t-weft: #2b86c0;
  --t-skin: #f3c4a4;
  --t-red: #d6322f;
  --t-nc: #cfd2da;
  --t-rec: #e8604a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcf {
    --t-warp: #e8895a;
    --t-weft: #6fbfe8;
    --t-skin: #8a6556;
    --t-red: #ff6b6b;
    --t-nc: #4a4f5a;
    --t-rec: #ff8a76;
  }
}
:root[data-theme="dark"] .tcf {
  --t-warp: #e8895a;
  --t-weft: #6fbfe8;
  --t-skin: #8a6556;
  --t-red: #ff6b6b;
  --t-nc: #4a4f5a;
  --t-rec: #ff8a76;
}
.tcf-yarn { fill: none; stroke-width: 6; stroke-linecap: round; }
.tcf-warp { stroke: var(--t-warp); }
.tcf-weft { stroke: var(--t-weft); }
.tcf-fill-warp { fill: var(--t-warp); }
.tcf-fill-weft { fill: var(--t-weft); }
.tcf-nc { fill: var(--t-nc); stroke: none; }
.tcf-fabric { fill: var(--m-tint); stroke: var(--color-border); stroke-width: 2; }
.tcf-skin { fill: var(--t-skin); opacity: 0.38; }
.tcf-rec { fill: var(--t-rec); opacity: 0.9; }
.tcf-rec-stalk { fill: none; stroke: var(--t-rec); stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.tcf-node { fill: var(--t-red); }
.tcf-halo { fill: var(--t-red); opacity: 0.22; }
.tcf-finger { fill: var(--t-skin); fill-opacity: 0.55; stroke: var(--t-skin); stroke-width: 2.5; }
.tcf-sense { fill: none; stroke: var(--m-cur); stroke-width: 3; stroke-dasharray: 5 5; }
.tcf-bar-red { fill: var(--t-red); }
.tcf-bar-sense { fill: var(--m-cur); }
.tcf-track { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.tcf-svg .c-red { fill: var(--t-red); font-weight: 700; }
.tcf-svg .c-warp { fill: var(--t-warp); font-weight: 700; }
.tcf-svg .c-weft { fill: var(--t-weft); font-weight: 700; }
.tcf-svg .tcf-stage { font-size: 15px; font-weight: 700; }
.tcf-svg .t-it { font-style: italic; }
.tcf-dot-hv { fill: var(--t-red); }
.tcf-dot-sense { fill: var(--t-weft); }

/* ---------- circuit schematic symbols ---------- */
.tcf-sym { fill: none; stroke: var(--color-text-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tcf-sym-bg { fill: var(--color-surface); }
.tcf-jdot { fill: var(--color-text-light); stroke: none; }
.tcf-flowline { fill: none; stroke: var(--t-red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tcf-tag { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 2; }

/* ---------- self-drawn confusion matrices ---------- */
.tcf-cm-base { fill: var(--m-grid); opacity: 0.55; }
.tcf-svg .tcf-cm-n { text-anchor: middle; font-weight: 600; pointer-events: none; }
.tcf-svg .tcf-cm-n--on { fill: var(--m-on); }
.tcf-svg .tcf-cm-n--zero { fill: var(--color-text-muted); opacity: 0.45; font-weight: 400; }
.tcf-cm-hl { fill: transparent; stroke: transparent; stroke-width: 2; }
.tcf-cmc:hover .tcf-cm-hl { stroke: var(--color-text); }
.tcf-cm-ring { fill: none; stroke: var(--color-text); stroke-width: 2.5; pointer-events: none; }
.tcf-ic { fill: var(--color-border); }
.tcf-ic--on { fill: var(--m-cur); }
@media (prefers-reduced-motion: no-preference) {
  .tcf-cmc { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), opacity 0.4s ease var(--d, 0s); }
  .tcf--once:not(.is-play) .tcf-cmc { transform: scale(0.4); opacity: 0; transition: none; }
}

/* four independent sensation photos */
.tcf-sens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.tcf-sens-item { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 0; }
.tcf-sens-item .tcf-photo { width: 100%; }
.tcf-sens-item span { font-size: 0.78rem; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-text-muted); }
@media (max-width: 460px) { .tcf-sens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- inside the slide deck: follow the deck day / night palette ---------- */
body.present-mode .present-deck--research .tcf {
  --m-gt: #1a1a1a; --m-base: #b5532a; --m-imu1: #6c7380; --m-imu2: #2f9e57;
  --m-baro: #2b86c0; --m-mag: #8a3fd1; --m-pose: #4a4f5a;
  --m-grid: rgba(27, 31, 42, 0.1); --m-tint: rgba(78, 42, 132, 0.08); --m-on: #ffffff;
}
body.present-mode:not(.present-theme-light) .present-deck--research .tcf {
  --m-gt: #e4e4e4; --m-base: #e8895a; --m-imu1: #9aa1ae; --m-imu2: #5fc78a;
  --m-baro: #6fbfe8; --m-mag: #b98af0; --m-pose: #b4bac6;
  --m-grid: rgba(255, 255, 255, 0.12); --m-tint: rgba(179, 157, 219, 0.12); --m-on: #14161d;
}
.present-deck--research .tcf { padding: 0.7rem 0.9rem 0.55rem; }

/* generated timelines */
@media (prefers-reduced-motion: no-preference){
@keyframes k-wf{0%,2%{stroke-dashoffset:1;opacity:1}20%,92%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes k-wp{0%,10%{stroke-dashoffset:1;opacity:1}28%,92%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes k-ow{0%,28%{opacity:0}32%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes k-lc1{0%,34%{opacity:0}35%,34.8%{opacity:1}35.8%,100%{opacity:0}}
@keyframes k-lc2{0%,34.5%{opacity:0}35.5%,40.4%{opacity:1}41.4%,100%{opacity:0}}
@keyframes k-lc3{0%,40.2%{opacity:0}41.2%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes k-lc4{0%,45.8%{opacity:0}46.8%,51.7%{opacity:1}52.7%,100%{opacity:0}}
@keyframes k-lc5{0%,51.4%{opacity:0}52.4%,57.3%{opacity:1}58.3%,100%{opacity:0}}
@keyframes k-lc6{0%,57.1%{opacity:0}58.1%,62.9%{opacity:1}63.9%,100%{opacity:0}}
@keyframes k-lc7{0%,62.7%{opacity:0}63.7%,68.6%{opacity:1}69.6%,100%{opacity:0}}
@keyframes k-lc8{0%,68.3%{opacity:0}69.3%,74.2%{opacity:1}75.2%,100%{opacity:0}}
@keyframes k-lc9{0%,74%{opacity:0}75%,79.9%{opacity:1}80.9%,100%{opacity:0}}
@keyframes k-lc10{0%,79.6%{opacity:0}80.6%,81%{opacity:1}82%,100%{opacity:0}}
@keyframes k-fg{0%,30%{offset-distance:0%;opacity:0}31%{offset-distance:0%;opacity:1}82%,85%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}
@keyframes k-st{0%,5.6%{opacity:0}8.3%,36.7%{opacity:1}41.1%,100%{opacity:0}}
@keyframes k-sw0{0%,44.4%{opacity:0}45.6%,52.2%{opacity:1}53.3%,100%{opacity:0}}
@keyframes k-sw1{0%,53.3%{opacity:0}54.4%,61.1%{opacity:1}62.2%,100%{opacity:0}}
@keyframes k-sw2{0%,62.2%{opacity:0}63.3%,70%{opacity:1}71.1%,100%{opacity:0}}
@keyframes k-sw3{0%,71.1%{opacity:0}72.2%,78.9%{opacity:1}80%,100%{opacity:0}}
@keyframes k-sw4{0%,80%{opacity:0}81.1%,87.8%{opacity:1}88.9%,100%{opacity:0}}
@keyframes k-sw5{0%,88.9%{opacity:0}90%,96.7%{opacity:1}97.8%,100%{opacity:0}}
@keyframes k-t1{0%,4.4%{opacity:0}7.8%,37.8%{opacity:1}42.2%,100%{opacity:0}}
@keyframes k-t2{0%,43.3%{opacity:0}46.7%,92.2%{opacity:1}97.8%,100%{opacity:0}}
@keyframes k-c1{0%,37.1%{opacity:0}39.3%,60.7%{opacity:1}62.9%,100%{opacity:0}}
@keyframes k-c2{0%{opacity:0}7.1%{opacity:0}9.3%{opacity:1}32.1%{opacity:1}34.3%{opacity:0}63.6%{opacity:0}65.7%{opacity:1}89.3%{opacity:1}91.4%{opacity:0}100%{opacity:0}}
@keyframes k-li{0%,38.6%{opacity:0}40.7%,60%{opacity:1}62.1%,100%{opacity:0}}
@keyframes k-lb{0%,65%{opacity:0}67.1%,87.9%{opacity:1}90%,100%{opacity:0}}
@keyframes k-so{0%,4.3%{opacity:1}5.7%,95.7%{opacity:0}97.1%,100%{opacity:1}}
@keyframes k-sc{0%,4.3%{opacity:0}5.7%,95.7%{opacity:1}97.1%,100%{opacity:0}}
@keyframes k-s0{0%,36.4%{opacity:1}38.2%,90%{opacity:0}91.4%,100%{opacity:1}}
@keyframes k-s1{0%,36.4%{opacity:0}38.2%,90%{opacity:1}91.4%,100%{opacity:0}}
@keyframes k-fing{0%,32.9%{offset-distance:0%;opacity:0}33.3%{offset-distance:0%;opacity:1}37.9%,90%{offset-distance:100%;opacity:1}94.3%,100%{offset-distance:100%;opacity:0}}
@keyframes k-vA{0%,19.3%{opacity:0}21.4%,30.7%{opacity:1}32.9%,100%{opacity:0}}
@keyframes k-vB{0%,74.3%{opacity:0}76.4%,87.9%{opacity:1}90%,100%{opacity:0}}
@keyframes k-hl{0%{opacity:0}10%{opacity:0}12.1%{opacity:1}30.7%{opacity:1}32.9%{opacity:0}65%{opacity:0}67.1%{opacity:1}88.6%{opacity:1}90.7%{opacity:0}100%{opacity:0}}
@keyframes k-cd{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes k-cdA{0%{offset-distance:0%;opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes k-rg{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
@keyframes k-fi{0%,38.6%{opacity:0}40.7%,60%{opacity:1}62.1%,100%{opacity:0}}
@keyframes k-sa{0%,10%{opacity:0}12.1%,30%{opacity:1}32.1%,100%{opacity:0}}
@keyframes k-sb{0%,65%{opacity:0}67.1%,87.9%{opacity:1}90%,100%{opacity:0}}
@keyframes k-sd1{0%,11.4%{offset-distance:0%;opacity:0}11.9%{offset-distance:0%;opacity:1}19.3%,20%{offset-distance:100%;opacity:1}20.7%,100%{offset-distance:100%;opacity:0}}
@keyframes k-sd2{0%,66.4%{offset-distance:0%;opacity:0}66.9%{offset-distance:0%;opacity:1}74.3%,75%{offset-distance:100%;opacity:1}75.7%,100%{offset-distance:100%;opacity:0}}
/* backwards: during the stagger delay, hold the hidden first frame.
   Otherwise the resting dashoffset (fully drawn) flashes, then the
   line vanishes and draws in again. */
.k-wf{animation:k-wf 10s linear infinite backwards}
.k-wp{animation:k-wp 10s linear infinite backwards}
.k-ow{animation:k-ow 10s linear infinite}
.k-lc1{animation:k-lc1 10s linear infinite}
.k-lc2{animation:k-lc2 10s linear infinite}
.k-lc3{animation:k-lc3 10s linear infinite}
.k-lc4{animation:k-lc4 10s linear infinite}
.k-lc5{animation:k-lc5 10s linear infinite}
.k-lc6{animation:k-lc6 10s linear infinite}
.k-lc7{animation:k-lc7 10s linear infinite}
.k-lc8{animation:k-lc8 10s linear infinite}
.k-lc9{animation:k-lc9 10s linear infinite}
.k-lc10{animation:k-lc10 10s linear infinite}
.k-fg{animation:k-fg 10s linear infinite}
.k-st{animation:k-st 9s linear infinite}
.k-sw0{animation:k-sw0 9s linear infinite}
.k-sw1{animation:k-sw1 9s linear infinite}
.k-sw2{animation:k-sw2 9s linear infinite}
.k-sw3{animation:k-sw3 9s linear infinite}
.k-sw4{animation:k-sw4 9s linear infinite}
.k-sw5{animation:k-sw5 9s linear infinite}
.k-t1{animation:k-t1 9s linear infinite}
.k-t2{animation:k-t2 9s linear infinite}
.k-c1{animation:k-c1 14s linear infinite}
.k-c2{animation:k-c2 14s linear infinite}
.k-li{animation:k-li 14s linear infinite}
.k-lb{animation:k-lb 14s linear infinite}
.k-so{animation:k-so 14s linear infinite}
.k-sc{animation:k-sc 14s linear infinite}
.k-s0{animation:k-s0 14s linear infinite}
.k-s1{animation:k-s1 14s linear infinite}
.k-fing{animation:k-fing 14s linear infinite}
.k-vA{animation:k-vA 14s linear infinite}
.k-vB{animation:k-vB 14s linear infinite}
.k-hl{animation:k-hl 14s linear infinite}
.k-cd{animation:k-cd 3s linear infinite}
.k-cdA{animation:k-cdA 1.5s linear infinite}
.k-rg{transform-box:fill-box;transform-origin:center;animation:k-rg 1.2s ease-out infinite}
.k-fi{animation:k-fi 14s linear infinite}
.k-sa{animation:k-sa 14s linear infinite}
.k-sb{animation:k-sb 14s linear infinite}
.k-sd1{animation:k-sd1 14s linear infinite}
.k-sd2{animation:k-sd2 14s linear infinite}
}