/* =========================================================
   Home: "Our Digital Learning Toolkit" (#learning-toolkit)
   Brand tokens from style.css: --primary, --secondary, --light,
   --color-accent (#FFC000), --color-accent-soft (#FFE8A1).
   Tool list and logos: assets/js/toolkit.js
   ========================================================= */

.tk { position: relative; overflow: hidden; padding: 42px 0 42px; background: var(--light); }
.tk-inner { position: relative; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 450px); justify-content: center;
  grid-template-areas: "copy visual" "legend visual"; column-gap: 72px; align-items: center; }
.tk-copy { grid-area: copy; align-self: end; }
.tk-legend { grid-area: legend; align-self: start; }
.tk-visual { grid-area: visual; position: relative; padding: 13px 0; } /* equal space above and below, so the orbit sits in the middle of the section */

.page-home .tk .tk-title { margin-top: 14px; text-align: left; font-size: clamp(28px, 2.55vw, 36px); line-height: 1.2; }
.tk-lead { margin-top: 14px; max-width: 470px; font-size: 16px; line-height: 1.75; color: var(--text); }
.tk-text { margin-top: 10px; max-width: 470px; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- list of tools with what they are for ---------- */
.tk-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; max-width: 500px; }
.tk-legend li { position: relative; padding: 5px 10px 5px 28px; border-radius: 14px; transition: background-color .3s, box-shadow .3s; cursor: default; }
.tk-legend li::before { content: ""; position: absolute; left: 12px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); transition: background-color .3s, transform .3s var(--ease); }
.tk-legend b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--primary); }
.tk-legend span { display: block; font-size: 12.8px; line-height: 1.45; color: var(--muted); }
.tk-legend li.is-hot { background: #fff; box-shadow: var(--shadow-sm); }
.tk-legend li:nth-child(even)::before { background: var(--color-accent); }
.tk-legend li.is-hot::before { background: var(--color-accent); transform: scale(1.3); }

/* ---------- the orbit ---------- */
.tk-orbit { position: relative; width: 100%; max-width: 450px; margin: 0 auto; aspect-ratio: 1 / 1; }
.tk-shape { position: absolute; inset: 14%; border-radius: 47% 53% 44% 56% / 52% 46% 54% 48%;
  background: radial-gradient(circle, #fff 0 46%, rgba(255, 255, 255, 0) 70%); }
.tk-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.tk-ring-outer { inset: 1%; border: 1px solid rgba(52, 156, 92, .14); }
.tk-ring-main { inset: 10%; border: 1.5px solid rgba(52, 156, 92, .32); }
.tk-ring-inner { inset: 23%; border: 1.5px dashed rgba(3, 86, 67, .22); }
.tk-ring-inner i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(255, 192, 0, .2); }
.tk-ring-inner i:first-child { left: 50%; top: 0; }
.tk-ring-inner i:last-child { left: 14.6%; top: 85.4%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--secondary); box-shadow: none; }
.js .tk-ring-inner { animation: tkTurn 90s linear infinite reverse; } /* turns gently the other way for depth */
@keyframes tkTurn { to { transform: rotate(360deg); } }

.tk-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tk-line { stroke: var(--secondary); stroke-width: .3; stroke-linecap: round; opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .3s, opacity .3s; }
.tk-line.is-hot { stroke: var(--color-accent); opacity: 1; stroke-width: .5; }
.tk-point { fill: var(--color-accent); }

.tk-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 34%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 0 0 9.5px rgba(52, 156, 92, .28), 0 22px 44px rgba(3, 86, 67, .16); }
.tk-core img { width: 78%; height: auto; -webkit-user-drag: none; user-select: none; }

.tk-nodes { list-style: none; margin: 0; padding: 0; }

/* the tools travel round the centre on their lines; each logo turns back so it stays upright */
.tk-spin { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tk-spin .tk-node { pointer-events: auto; }
.tk-up { position: absolute; inset: 0; }
.js .tk-spin { animation: tkTurn 48s linear infinite; }
.js .tk-up { animation: tkTurnBack 48s linear infinite; }
@keyframes tkTurnBack { to { transform: rotate(-360deg); } }
.tk-orbit:hover .tk-spin, .tk-orbit:hover .tk-up, .tk-orbit:hover .tk-ring-inner { animation-play-state: paused; } /* hold still while someone points at a tool */
.tk-node { position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 13.6%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.tk-pop { position: absolute; inset: 0; }
.tk-badge { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(52, 156, 92, .2), 0 10px 22px rgba(3, 86, 67, .12);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tk-badge img { width: 50%; height: 50%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.tk-node.is-wide .tk-badge img { width: 74%; }
.tk-node.is-placeholder .tk-badge { background: var(--light); box-shadow: inset 0 0 0 1.5px var(--secondary), 0 10px 22px rgba(3, 86, 67, .1); }
.tk-node.is-placeholder .tk-badge::after { /* dashed inner line: a deliberate stand-in, not a logo */
  content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(52, 156, 92, .45); }
.tk-mark { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--primary); }
.tk-name { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1.2; color: var(--primary); transition: color .3s; }
.tk-node.is-hot .tk-badge { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--color-accent), 0 16px 28px rgba(3, 86, 67, .18); }
.tk-node.is-hot .tk-name { color: var(--secondary); }

/* ---------- arrival (assets/js/toolkit.js moves --p from 0 to 1 once, when the orbit is first scrolled into view) ----------
   The orbit starts completely empty. Order: soft shape and rings, then the centre logo; as the logo appears,
   the lines draw out and all the tools travel out from the centre together, then their names appear.
   It plays once per page load. Without JS, or with reduced motion, all of it simply shows. */
.tk-visual.is-scrub { --p: 0; }
.tk-visual.is-scrub .tk-shape      { --k: clamp(0, var(--p) / .3, 1); }
.tk-visual.is-scrub .tk-ring-outer { --k: clamp(0, (var(--p) - .04) / .3, 1); }
.tk-visual.is-scrub .tk-ring-main  { --k: clamp(0, (var(--p) - .09) / .3, 1); }
.tk-visual.is-scrub .tk-ring-inner { --k: clamp(0, (var(--p) - .14) / .3, 1); }
.tk-visual.is-scrub .tk-core       { --k: clamp(0, (var(--p) - .16) / .28, 1); }
.tk-visual.is-scrub .tk-line       { --k: clamp(0, (var(--p) - .16) / .32, 1); }
.tk-visual.is-scrub .tk-point      { --k: clamp(0, (var(--p) - .42) / .12, 1); }
.tk-visual.is-scrub .tk-node       { --k: clamp(0, (var(--p) - .16) / .64, 1); } /* all tools move out together, starting with the logo */
.tk-visual.is-scrub :is(.tk-shape, .tk-ring-outer, .tk-ring-main, .tk-ring-inner, .tk-core, .tk-node) { --e: calc(var(--k) * (2 - var(--k))); } /* ease-out */

.tk-visual.is-scrub .tk-shape { opacity: var(--k); scale: calc(.6 + .4 * var(--e)); }
.tk-visual.is-scrub .tk-ring-outer { opacity: var(--k); scale: calc(.82 + .18 * var(--e)); }
.tk-visual.is-scrub .tk-ring-main { opacity: var(--k); scale: calc(.78 + .22 * var(--e)); }
.tk-visual.is-scrub .tk-ring-inner { opacity: var(--k); scale: calc(.6 + .4 * var(--e)); }
.tk-visual.is-scrub .tk-core { opacity: var(--k); scale: calc(.5 + .5 * var(--e)); }
.tk-visual.is-scrub .tk-line { stroke-dashoffset: calc(1 - var(--k)); opacity: clamp(0, var(--k) * 12, .6); transition: stroke .3s, opacity .3s, stroke-width .3s; } /* hidden at 0, so the round line ends leave no dots */
.tk-visual.is-scrub .tk-line.is-hot { opacity: 1; }
.tk-visual.is-scrub .tk-point { opacity: var(--k); }
/* each tool starts at the centre and moves out along its line */
.tk-visual.is-scrub .tk-node { left: calc((50 + (var(--x) - 50) * var(--e)) * 1%); top: calc((50 + (var(--y) - 50) * var(--e)) * 1%); }
.tk-visual.is-scrub .tk-spin { z-index: 1; } /* tools sit under the logo while they set off, so they come out from behind it */
.tk-visual.is-scrub .tk-pop { opacity: clamp(0, var(--k) * 4, 1); scale: calc(.3 + .7 * var(--e)); }
.tk-visual.is-scrub .tk-name { opacity: clamp(0, (var(--k) - .7) / .3, 1); }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .tk { padding: 68px 0 72px; }
  .tk-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual" "legend"; }
  .tk-lead, .tk-text { max-width: 640px; }
  .tk-visual { margin-top: 40px; padding-bottom: 40px; }
  .tk-orbit { max-width: 500px; }
  .tk-legend { max-width: 640px; margin-top: 8px; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .tk { padding: 54px 0 58px; }
  .tk-visual { margin-top: 30px; padding-bottom: 34px; }
  .tk-node { width: 15.5%; }
  .tk-mark { font-size: 13px; }
  .tk-name { top: calc(100% + 5px); font-size: 10.5px; }
  .tk-core { box-shadow: 0 0 0 5px rgba(255, 255, 255, .75), 0 0 0 6.5px rgba(52, 156, 92, .28), 0 14px 30px rgba(3, 86, 67, .16); }
  .tk-node.is-placeholder .tk-badge::after { inset: 3px; }
  .tk-legend { gap: 4px 8px; }
  .tk-legend li { padding: 8px 8px 8px 24px; }
  .tk-legend li::before { left: 9px; top: 14px; width: 7px; height: 7px; }
  .tk-legend b { font-size: 13px; }
  .tk-legend span { font-size: 12px; }
}
@media (max-width: 374px) { .tk-legend { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .tk-name { font-size: 9.5px; } }

@media (prefers-reduced-motion: reduce) {
  .js .tk-ring-inner, .js .tk-spin, .js .tk-up { animation: none; }
}