/*
 * Tietopankki articles: reading furniture and scroll effects.
 *
 * Loaded only on the articles under the Tietopankki page (inc/tietopankki.php). Everything here is
 * opt-in by class on a block (kelo-fx-*, set in the article sources), except the reading bar and the
 * table, quote and button styling, which every article gets.
 *
 * Two rules keep the page fast and calm. Only opacity and transform ever animate, so nothing moves
 * the layout (the site's CLS is 0 and stays 0). And nothing is hidden until the script has run and
 * said so with html.kelo-fx: without JavaScript, for a crawler or with reduced motion, every word is
 * simply there.
 */

/* ---------- every article ---------- */

.kelo-fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: var(--pine); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.admin-bar .kelo-fx-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .kelo-fx-progress { top: 46px; } }

.kelo-sheet__body .wp-block-table { margin: 22px 0; overflow-x: auto; }
.kelo-sheet__body .wp-block-table table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.kelo-sheet__body .wp-block-table th,
.kelo-sheet__body .wp-block-table td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.kelo-sheet__body .wp-block-table thead th { background: var(--paper-warm); color: var(--soft); font-size: 14px; font-weight: 600; }
.kelo-sheet__body .wp-block-table tbody tr:nth-child(even) td { background: var(--paper-warm); }
.kelo-sheet__body .wp-block-table tbody tr:last-child td { border-bottom: 0; }

.kelo-sheet__body .wp-block-quote {
  position: relative; margin: 26px 0; padding: 18px 22px 18px 26px;
  background: var(--pine-wash); border: 0; border-radius: var(--r);
}
.kelo-sheet__body .wp-block-quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pine); border-radius: var(--r) 0 0 var(--r); transform-origin: 50% 0;
}
.kelo-sheet__body .wp-block-quote p { margin: 0; font-size: 18px; color: var(--ink); }

.kelo-sheet__body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.kelo-sheet__body .wp-block-button__link {
  display: inline-block; padding: 13px 22px; border-radius: var(--r-pill); font-weight: 600;
  text-decoration: none; background: var(--pine); color: #fff; border: 2px solid var(--pine);
  transition: background-color .2s, transform .2s;
}
.kelo-sheet__body .wp-block-button__link:hover { background: var(--pine-dark); transform: translateY(-1px); }
.kelo-sheet__body .is-style-outline .wp-block-button__link { background: transparent; color: var(--pine); }
.kelo-sheet__body .is-style-outline .wp-block-button__link:hover { background: var(--pine-wash); }

/* Headings, tables, quotes and button rows rise into place as they come into view. */
.kelo-fx .kelo-fx-hide { opacity: 0; transform: translateY(14px); }
.kelo-fx .kelo-fx-rise { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }

/* ---------- checklist: each item ticks itself off ---------- */

.kelo-sheet__body ul.kelo-fx-checklist { list-style: none; padding-left: 0; }
.kelo-fx-checklist > li { position: relative; padding-left: 36px; margin-bottom: 10px; }
.kelo-fx-checklist > li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; box-sizing: border-box;
  border: 2px solid var(--pine-pale); border-radius: 50%; background: var(--paper);
  transition: background-color .35s ease, border-color .35s ease;
  transition-delay: calc(var(--i, 0) * 130ms);
}
.kelo-fx-checklist > li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(1);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--i, 0) * 130ms + 120ms);
}
.kelo-fx-checklist > li { transition: color .35s; }
html:not(.kelo-fx) .kelo-fx-checklist > li::before,
.kelo-fx .kelo-fx-checklist.is-in > li::before { background: var(--pine); border-color: var(--pine); }
.kelo-fx .kelo-fx-checklist:not(.is-in) > li::after { transform: rotate(45deg) scale(0); }

/* ---------- cards: points become cards that slide in turn by turn ---------- */

.kelo-sheet__body ul.kelo-fx-cards {
  list-style: none; padding-left: 0; display: grid; gap: 14px; margin: 18px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kelo-fx-cards > li {
  margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-warm); box-shadow: 0 1px 0 rgba(35, 36, 30, .03);
}
.kelo-fx-cards > li strong:first-child { display: block; color: var(--pine-dark); margin-bottom: 4px; font-size: 18px; }
.kelo-fx .kelo-fx-cards > li {
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.kelo-fx .kelo-fx-cards:not(.is-in) > li { opacity: 0; transform: translateY(18px); }
.kelo-fx .kelo-fx-cards:not(.is-in) > li:nth-child(odd) { transform: translate(-14px, 18px); }
.kelo-fx .kelo-fx-cards:not(.is-in) > li:nth-child(even) { transform: translate(14px, 18px); }

/* ---------- timeline: a rail that fills as the reader scrolls ---------- */

.kelo-sheet__body .kelo-fx-timeline { list-style: none; position: relative; padding-left: 46px; counter-reset: kelo-step; }
.kelo-fx-timeline::before,
.kelo-fx-timeline::after {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
}
.kelo-fx-timeline::before { background: var(--line-soft); }
.kelo-fx-timeline::after { background: var(--pine); transform-origin: 50% 0; transform: scaleY(var(--kelo-fill, 1)); }
.kelo-fx-timeline > li { position: relative; margin-bottom: 16px; counter-increment: kelo-step; }
.kelo-fx-timeline > li::before {
  content: counter(kelo-step); position: absolute; left: -46px; top: -1px; z-index: 1;
  width: 33px; height: 33px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans); color: #fff; background: var(--pine); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--pine); transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.kelo-fx-dates > li::before { content: ""; width: 21px; height: 21px; left: -40px; top: 3px; }
.kelo-fx-dates > li > strong:first-child {
  display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: var(--r-pill);
  background: var(--pine-wash); color: var(--pine-dark); font-variant-numeric: tabular-nums;
}
.kelo-fx .kelo-fx-timeline > li:not(.is-passed)::before {
  background: var(--paper); color: var(--soft); box-shadow: 0 0 0 1px var(--line); transform: scale(.88);
}

/* ---------- pop: the short answer arrives with a little weight ---------- */

.kelo-fx .kelo-fx-pop { transition: opacity .6s ease, transform .6s cubic-bezier(.2, 1.2, .3, 1); }
.kelo-fx .kelo-fx-pop::before { transition: transform .7s ease .25s; }
.kelo-fx .kelo-fx-pop:not(.is-in) { opacity: 0; transform: scale(.96); }
.kelo-fx .kelo-fx-pop:not(.is-in)::before { transform: scaleY(0); }

/* ---------- sweep: the words that matter get a highlighter stroke ---------- */

.kelo-fx-sweep strong {
  background-image: linear-gradient(transparent 58%, rgba(155, 196, 178, .55) 58%);
  background-repeat: no-repeat; background-size: 100% 100%;
}
.kelo-fx .kelo-fx-sweep strong { transition: background-size .9s cubic-bezier(.3, .7, .2, 1) .2s; }
.kelo-fx .kelo-fx-sweep:not(.is-in) strong { background-size: 0% 100%; }

/* ---------- counters ---------- */

.kelo-fx-num { font-variant-numeric: tabular-nums; }

/* ---------- quiz ---------- */

.kelo-fx-quiz > li { margin-bottom: 18px; }
.kelo-quiz__choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kelo-quiz__choice {
  font: 600 15px/1.2 var(--sans); padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper); color: var(--pine-dark); border: 1.5px solid var(--pine-pale);
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.kelo-quiz__choice:hover { border-color: var(--pine); background: var(--pine-wash); }
.kelo-quiz__choice:active { transform: scale(.97); }
.kelo-quiz__choice[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.kelo-quiz__meter { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin: 6px 0 4px; }
.kelo-quiz__meter span { display: block; height: 100%; background: var(--pine); transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s ease; }
.kelo-quiz__count { font-size: 14px; color: var(--soft); margin: 0 0 18px; }
.kelo-quiz__result {
  margin: 6px 0 26px; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--pine-pale);
  background: var(--pine-wash); animation: kelo-quiz-in .5s cubic-bezier(.2, 1.2, .3, 1);
}
.kelo-quiz__result h3 { margin: 0 0 8px; color: var(--pine-dark); }
.kelo-quiz__result ul { margin: 0 0 12px; }
.kelo-quiz__result .wp-block-buttons { margin: 14px 0 0; }
@keyframes kelo-quiz-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- reduced motion: the same page, standing still ---------- */

@media (prefers-reduced-motion: reduce) {
  .kelo-fx-progress, .kelo-fx-checklist > li::before, .kelo-fx-checklist > li::after,
  .kelo-fx-cards > li, .kelo-fx-timeline > li::before, .kelo-fx-pop, .kelo-fx-pop::before,
  .kelo-fx-sweep strong, .kelo-fx-rise, .kelo-quiz__meter span, .kelo-quiz__result {
    transition: none !important; animation: none !important;
  }
}