/* ============================================================
   TBB Academy: animated SVG art (tbb-academy-art.php)
   Pure SVG + CSS keyframes. Without motion (reduced-motion users,
   or before the keyframes load) every piece shows its finished
   state; the animation rules live in one no-preference block at the
   bottom. Colours come from the --s-* tokens in the base sheet.
   ============================================================ */

.tbb-ah .tbb-ah-svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tbb-ah .tbb-ah-svg text { font-family: var(--tbb-ah-font); stroke: none; }
.tbb-ah .tbb-ah-svg .s-line   { fill: none; stroke: var(--s-line); stroke-width: 1.5; }
.tbb-ah .tbb-ah-svg .s-thick  { stroke-width: 3; }
.tbb-ah .tbb-ah-svg .s-stroke { fill: none; stroke: var(--s-fg); stroke-width: 2; }
.tbb-ah .tbb-ah-svg .s-card   { fill: var(--s-card); stroke: var(--s-line); stroke-width: 1; }
.tbb-ah .tbb-ah-svg .s-node   { fill: var(--s-panel); stroke: var(--s-line-strong); stroke-width: 1; }
.tbb-ah .tbb-ah-svg .s-bar    { fill: var(--s-fg); opacity: .75; }
.tbb-ah .tbb-ah-svg .s-bar--muted { fill: var(--s-muted); opacity: .5; }
.tbb-ah .tbb-ah-svg .s-label  { fill: var(--s-fg); font-size: 15px; font-weight: 600; }
.tbb-ah .tbb-ah-svg .s-label--sm { font-size: 14px; }
.tbb-ah .tbb-ah-svg .s-small  { fill: var(--s-muted); font-size: 11px; font-weight: 500; }
.tbb-ah .tbb-ah-svg .s-mono   { fill: var(--s-fg); font-family: var(--tbb-ah-font-mono); font-size: 12px; font-weight: 500; }
.tbb-ah .tbb-ah-svg .s-mono--lg { font-size: 17px; }
.tbb-ah .tbb-ah-svg .s-free   { fill: var(--s-ok); font-weight: 600; }

/* Hero: helix, orbits, pulses, exam pills */
.tbb-ah .tbb-ah-svg .s-orbit { transform-box: view-box; transform-origin: 280px 280px; }
.tbb-ah .tbb-ah-svg .s-rung { transform-box: fill-box; transform-origin: center; }
.tbb-ah .tbb-ah-svg .s-rung__bar { stroke: var(--s-line-strong); stroke-width: 2; }
.tbb-ah .tbb-ah-svg .s-rung__a   { fill: var(--s-hl); }
.tbb-ah .tbb-ah-svg .s-rung__b   { fill: var(--s-fg); }
.tbb-ah .tbb-ah-svg .s-dot       { fill: var(--s-hl); }
.tbb-ah .tbb-ah-svg .s-pulse {
  fill: none;
  stroke: var(--s-hl);
  stroke-width: 3;
  stroke-dasharray: .08 .92;
  stroke-dashoffset: 1;
  opacity: 0;
}
.tbb-ah .tbb-ah-svg .s-ping {
  fill: none;
  stroke: var(--s-hl);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Quiz: the right option, its tick and the score ring (finished state) */
.tbb-ah .tbb-ah-svg .s-ok-row  { fill: none; stroke: var(--s-ok); stroke-width: 1.2; }
.tbb-ah .tbb-ah-svg .s-ok-dot  { fill: var(--s-ok); }
.tbb-ah .tbb-ah-svg .s-ok-tick { fill: none; stroke: var(--s-on-ok); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tbb-ah .tbb-ah-svg .s-ring-track { fill: none; stroke: var(--s-line); stroke-width: 6; }
.tbb-ah .tbb-ah-svg .s-ring { fill: none; stroke: var(--s-fg); stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: .2; }

/* Papers: label cycle, timeline sweep */
.tbb-ah .tbb-ah-svg .s-cycle { opacity: 0; }
.tbb-ah .tbb-ah-svg .s-cycle.is-first { opacity: 1; }
.tbb-ah .tbb-ah-svg .s-sweep { fill: none; stroke: var(--s-hl); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tbb-ah .tbb-ah-svg .s-year { transform-box: fill-box; transform-origin: center; }

/* Path: the route drawn, every stage lit */
.tbb-ah .tbb-ah-svg .s-draw  { fill: none; stroke: var(--s-hl); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tbb-ah .tbb-ah-svg .s-stage { fill: var(--s-hl); }

/* Art inside a card (feature rows) */
.tbb-ah .tbb-ah-art { justify-content: center; padding: 16px; }

/* Hero art: centred, edges faded */
.tbb-ah .tbb-ah-hero__media {
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 70%, transparent);
          mask-image: radial-gradient(60% 60% at 50% 50%, #000 70%, transparent);
}
.tbb-ah .tbb-ah-hero__media .tbb-ah-svg { max-width: 480px; margin-inline: auto; }

@media (max-width: 767px) {
  .tbb-ah .tbb-ah-hero__media .tbb-ah-svg { max-width: 380px; }
  .tbb-ah .tbb-ah-hero__media {
    -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 75%, transparent);
            mask-image: radial-gradient(75% 75% at 50% 50%, #000 75%, transparent);
  }
}
@media (max-width: 639px) {
  /* The hero art scales down a lot on phones: keep the exam names legible */
  .tbb-ah .tbb-ah-art-hero .s-label { font-size: 17px; }
}

/* ── Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Hero */
  .tbb-ah .tbb-ah-svg .s-orbit { animation: tbb-ah-spin 60s linear infinite; }
  .tbb-ah .tbb-ah-svg .s-orbit--rev { animation-duration: 40s; animation-direction: reverse; }
  .tbb-ah .tbb-ah-svg .s-rung { animation: tbb-ah-helix 4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.33s); }
  .tbb-ah .tbb-ah-svg .s-pulse { opacity: 1; animation: tbb-ah-pulse 3.5s linear infinite; animation-delay: calc(var(--n, 0) * .5s); }
  .tbb-ah .tbb-ah-svg .s-ping { animation: tbb-ah-ping 3.5s ease-out infinite; animation-delay: calc(var(--n, 0) * .5s + 3.1s); }

  /* Quiz: tick the right answer, fill the ring, reset, repeat */
  .tbb-ah .tbb-ah-svg :is(.s-ok-row, .s-ok-dot) { animation: tbb-ah-ok 6s infinite; }
  .tbb-ah .tbb-ah-svg .s-ok-tick { animation: tbb-ah-tick 6s infinite; }
  .tbb-ah .tbb-ah-svg .s-ring { animation: tbb-ah-ring 6s infinite; }

  /* Papers: three exams take turns on the top sheet, the year line sweeps */
  .tbb-ah .tbb-ah-svg .s-cycle { animation: tbb-ah-cycle 9s infinite; animation-delay: calc((3 - var(--n, 0)) * -3s); }
  .tbb-ah .tbb-ah-svg .s-float { animation: tbb-ah-float 4.5s ease-in-out infinite; }
  .tbb-ah .tbb-ah-svg .s-sweep { animation: tbb-ah-sweep 6s var(--tbb-ah-ease) infinite; }
  .tbb-ah .tbb-ah-svg .s-year { animation: tbb-ah-year 6s infinite; animation-delay: calc(var(--n, 0) * .36s); }

  /* Path: draw the route, light the stages in turn */
  .tbb-ah .tbb-ah-svg .s-draw { animation: tbb-ah-draw 7s linear infinite; }
  .tbb-ah .tbb-ah-svg .s-stage { opacity: 0; animation: tbb-ah-stage-0 7s linear infinite; }
  .tbb-ah .tbb-ah-svg .s-stage--1 { animation-name: tbb-ah-stage-1; }
  .tbb-ah .tbb-ah-svg .s-stage--2 { animation-name: tbb-ah-stage-2; }
  .tbb-ah .tbb-ah-svg .s-stage--3 { animation-name: tbb-ah-stage-3; }
  .tbb-ah .tbb-ah-svg .s-stage--4 { animation-name: tbb-ah-stage-4; }
  .tbb-ah .tbb-ah-svg .s-arrive { opacity: 0; animation: tbb-ah-arrive 7s linear infinite; }
}

@keyframes tbb-ah-spin   { to { transform: rotate(360deg); } }
@keyframes tbb-ah-helix  { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes tbb-ah-pulse  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tbb-ah-ping   { 0% { opacity: .7; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes tbb-ah-ok     { 0%, 20% { opacity: 0; } 26%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tbb-ah-tick   { 0%, 24% { stroke-dashoffset: 1; opacity: 1; } 32%, 88% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tbb-ah-ring   { 0%, 30% { stroke-dashoffset: 1; } 70%, 88% { stroke-dashoffset: .2; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes tbb-ah-cycle  { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tbb-ah-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tbb-ah-sweep  { 0% { stroke-dashoffset: 1; } 70%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tbb-ah-year   { 0%, 100% { fill: var(--s-panel); } 8%, 60% { fill: var(--s-hl-soft); } }
@keyframes tbb-ah-draw   { 0% { stroke-dashoffset: 1; opacity: 1; } 60% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tbb-ah-stage-0 { 0% { opacity: 0; } 2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tbb-ah-stage-1 { 0%, 14% { opacity: 0; } 16%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tbb-ah-stage-2 { 0%, 29% { opacity: 0; } 31%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tbb-ah-stage-3 { 0%, 44% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tbb-ah-stage-4 { 0%, 59% { opacity: 0; } 61%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tbb-ah-arrive { 0%, 59% { opacity: 0; } 61%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }