/* Course landing pages (/ssc, /bcs-course and their /en copies; ssc-landing.js). Only these pages load it, after /styles.css,
   and it reuses the BCS landing blocks there (.bcs-hero, .bcs-stats, .bcs-why, .bcs-sample, the tool
   picture classes tl-* and omr-*). Colour variables only. html.ssc-js is set in <head>; without the
   script, or with reduced motion, every picture shows its finished state. */

.ssc-hero { padding-bottom: 32px; }

/* "What you get" player: five short scenes, one at a time, with step buttons and a pause button. */
.ssc-player { width: 100%; max-width: 460px; margin: 0 auto; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-alt); }
.ssc-player-h { margin: 0 0 10px; color: var(--accent); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.ssc-screen { position: relative; }
.ssc-screen svg { display: block; width: 100%; height: auto; overflow: visible; }
.ssc-prog { display: block; height: 4px; margin: 8px 0 0; border-radius: 4px; background: var(--border); overflow: hidden; }
.ssc-prog i { display: block; width: 0; height: 100%; background: var(--accent); }
.ssc-player.is-playing .ssc-prog i { animation: ssc-prog var(--scene, 5.5s) linear both; }
.ssc-player.is-paused .ssc-prog i, .ssc-player.is-paused .ssc-scene * { animation-play-state: paused !important; }
@keyframes ssc-prog { to { width: 100%; } }
.ssc-cap { min-height: 3em; margin: 10px 0; font-weight: 600; }
.ssc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.ssc-steps button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; cursor: pointer; }
.ssc-steps button:hover { border-color: var(--accent); }
.ssc-steps button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 700; }
.ssc-steps .ssc-pause { margin-left: auto; border-color: var(--accent); color: var(--accent); font-weight: 600; }

.ssc-scene:not(.is-on) { display: none; }
.sc-bg { fill: var(--bg); stroke: var(--border); stroke-width: 2; }
.sc-k { fill: var(--accent); font-size: 11px; font-weight: 700; }
.sc-t { fill: var(--text); font-size: 17px; font-weight: 800; }
.sc-s { fill: var(--text); font-size: 12px; }
.sc-b { font-weight: 800; fill: var(--accent); }
.sc-sm { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.sc-l { text-anchor: start; }
.sc-r { text-anchor: end; }
.sc-acc { fill: var(--good); font-weight: 700; }
.sc-big { fill: var(--accent); font-size: 22px; font-weight: 800; }
.sc-shell { fill: none; stroke: var(--border); stroke-width: 2; }
.sc-shell.a-draw { stroke: var(--muted); stroke-dasharray: 1; }
.sc-nuc { fill: var(--accent); }
.sc-nuct { fill: var(--accent-text); font-size: 13px; font-weight: 800; text-anchor: middle; }
.sc-e { fill: var(--map-in); }
.sc-e1 { fill: var(--good); }
.sc-orbit { transform-box: view-box; transform-origin: 100px 134px; }
.sc-wire { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; }
.sc-flow { fill: none; stroke: var(--map-in); stroke-width: 3; stroke-dasharray: 3 13; stroke-linecap: round; }
.sc-gap { fill: var(--bg); }
.sc-bat, .sc-res { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-bulb { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.sc-glow { fill: var(--accent); opacity: 0.85; transform-box: fill-box; transform-origin: center; }
.sc-track { stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.sc-fill { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.sc-knob { fill: var(--bg); stroke: var(--accent); stroke-width: 3; translate: 110px 0; }
.sc-opt { fill: var(--bg-alt); stroke: var(--border); stroke-width: 1.5; }
.sc-o { fill: var(--text); font-size: 13px; font-weight: 600; }
.sc-right { fill: var(--good-bg); stroke: var(--good); stroke-width: 2; }
.sc-tick { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-tap { fill: var(--accent); opacity: 0; }
.sc-exp { fill: var(--badge-bg); stroke: var(--accent); stroke-width: 1.5; }
.sc-card { fill: var(--bg-alt); stroke: var(--accent); stroke-width: 2; }
.sc-card-b { fill: var(--accent); }
.sc-c { fill: var(--text); font-size: 14px; font-weight: 700; text-anchor: middle; }
.sc-cb { fill: var(--accent-text); font-size: 22px; font-weight: 800; text-anchor: middle; }
.sc-flip { transform-box: fill-box; transform-origin: center; }
.sc-front { opacity: 0; }
.sc-pill { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 1.5; }
.sc-pill-ok { fill: var(--good-bg); stroke: var(--good); stroke-width: 2.5; }
.sc-pill-warn { fill: var(--badge-bg); stroke: var(--accent); }
.sc-pt { fill: var(--text); font-size: 11px; font-weight: 700; text-anchor: middle; }
.sc-ring { fill: none; stroke: var(--border); stroke-width: 9; }
.sc-ring-on { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--ring, 0.16); transform-box: fill-box; transform-origin: center; rotate: -90deg; }
.sc-score { fill: var(--text); font-size: 28px; font-weight: 800; text-anchor: middle; }
.sc-bar0 { fill: var(--border); }
.sc-bar { fill: var(--good); }
.sc-bar-low { fill: var(--bad); }

/* Shared entrance helpers for the player, the tool pictures and the lab. */
.ssc-page .a-rise, .ssc-page .a-pop, .ssc-page .a-fade, .ssc-page .a-draw, .ssc-page .a-grow {
  animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; animation-delay: var(--d, 0s);
}
.ssc-page .a-pop, .ssc-page .a-grow { transform-box: fill-box; transform-origin: center; }
.ssc-page .a-grow { transform-origin: left center; }
.ssc-page .a-draw { stroke-dasharray: 1; }

@media (prefers-reduced-motion: no-preference) {
  .ssc-js .ssc-scene.is-on .a-rise, .ssc-js .ssc-tools > li.is-in .a-rise { animation-name: gr-rise; }
  .ssc-js .ssc-scene.is-on .a-pop, .ssc-js .ssc-tools > li.is-in .a-pop { animation-name: gr-pop; }
  .ssc-js .ssc-scene.is-on .a-fade, .ssc-js .ssc-tools > li.is-in .a-fade { animation-name: gr-fade; }
  .ssc-js .ssc-scene.is-on .a-draw, .ssc-js .ssc-tools > li.is-in .a-draw { animation-name: gr-draw; animation-duration: 1.4s; animation-timing-function: ease-in-out; }
  .ssc-js .ssc-scene.is-on .a-grow { animation-name: gr-grow; animation-duration: 0.9s; }
  .ssc-js .ssc-scene.is-on .sc-ring-on { animation: ssc-ring 1.6s 0.3s ease-in-out both; }
  .ssc-js .ssc-scene.is-on .sc-orbit { animation: ssc-orbit 3s 2.2s linear both; }
  .ssc-js .ssc-scene.is-on .sc-flow { animation: ssc-flow 1.2s linear 4; }
  .ssc-js .ssc-scene.is-on .sc-glow { animation: ssc-glow 2.2s 0.3s ease-in-out both; }
  .ssc-js .ssc-scene.is-on .sc-knob { animation: ssc-knob 2.2s 0.3s ease-in-out both; }
  .ssc-js .ssc-scene.is-on .sc-fill { animation: ssc-fill 2.2s 0.3s ease-in-out both; }
  .ssc-js .ssc-scene.is-on .sc-tap { animation: ssc-tap 1.4s 0.1s ease-out both; }
  .ssc-js .ssc-scene.is-on .sc-front { animation: ssc-hide 1.8s 0.6s both; }
  .ssc-js .ssc-scene.is-on .sc-back { animation: ssc-show 1.8s 0.6s both; }
  .ssc-js .ssc-tools > li.is-in .tt-swing { animation: ssc-swing 1.6s ease-in-out 2 both; }
  .ssc-js .ssc-tools > li.is-in .tt-card { animation: ssc-flipin 1s 0.1s both; }
  .ssc-js .ssc-tools > li:not(.is-in) * { animation-play-state: paused; }
  .lab-flow { animation: ssc-flow var(--flow, 1.2s) linear infinite; }
  .ssc-lab.is-still .lab-flow { animation: none; }
}
@keyframes ssc-ring { from { stroke-dashoffset: 1; } to { stroke-dashoffset: var(--ring, 0.16); } }
@keyframes ssc-orbit { to { rotate: 360deg; } }
@keyframes ssc-flow { to { stroke-dashoffset: -16; } }
@keyframes ssc-glow { from { opacity: 0.08; scale: 0.5; } }
@keyframes ssc-knob { from { translate: 0 0; } }
@keyframes ssc-fill { from { stroke-dasharray: 20 200; } to { stroke-dasharray: 130 200; } }
@keyframes ssc-tap { 0% { opacity: 0; translate: -40px 50px; } 40% { opacity: 0.55; } 70% { opacity: 0.55; translate: 0 0; scale: 1; } 85% { scale: 0.7; } 100% { opacity: 0; translate: 0 0; } }
@keyframes ssc-hide { 0%, 45% { opacity: 1; scale: 1 1; } 50%, 100% { opacity: 0; scale: 0 1; } }
@keyframes ssc-show { 0%, 50% { scale: 0 1; } 100% { scale: 1 1; } }
@keyframes ssc-swing { 0%, 100% { rotate: 22deg; } 50% { rotate: -22deg; } }
@keyframes ssc-flipin { 0% { scale: 0 1; } 100% { scale: 1 1; } }
.sc-fill { stroke-dasharray: 130 200; }
.sc-back { scale: 1 1; }
.tt-swing { transform-box: view-box; transform-origin: 110px 10px; }
.tt-play { fill: var(--accent); }
.tt-wave { fill: none; stroke: var(--map-in); stroke-width: 3; stroke-linecap: round; }
.tt-string { stroke: var(--muted); stroke-width: 2; }
.tt-bob { fill: var(--accent); }
.tt-arc { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 5; }
.tt-card { transform-box: fill-box; transform-origin: center; }

/* Best feature: the live Ohm's law lab. */
.ssc-lab-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ssc-lab-in { grid-template-columns: 1fr 1.1fr; gap: 48px; } }
.ssc-lab-in h2 { margin: 0 0 10px; }
.ssc-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.ssc-lab { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.ssc-lab svg { display: block; width: 100%; height: auto; }
.lab-glow { fill: var(--accent); opacity: 0.5; transition: opacity 0.25s, r 0.25s; }
.lab-meter { fill: var(--badge-bg); stroke: var(--accent); stroke-width: 2; }
.ssc-sliders { display: grid; gap: 12px; margin: 12px 0 0; }
@media (min-width: 520px) { .ssc-sliders { grid-template-columns: 1fr 1fr; } }
.ssc-sliders label { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-weight: 600; }
.ssc-sliders output { color: var(--accent); font-weight: 800; }
.ssc-sliders input { grid-column: 1 / -1; width: 100%; min-height: 44px; accent-color: var(--accent); }
.ssc-result { margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--badge-bg); font-size: 1.15rem; font-weight: 800; text-align: center; }
.ssc-note { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Glimpse of tools. */
.ssc-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ssc-tool { display: flex; flex-direction: column; height: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt); color: var(--text); text-decoration: none; transition: border-color 0.15s, translate 0.15s; }
.ssc-tool:hover, .ssc-tool:focus-visible { border-color: var(--accent); translate: 0 -2px; }
.ssc-tool svg { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 8px; overflow: visible; }
.ssc-tool h3 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; }
.ssc-tool p { margin: 0; color: var(--muted); font-size: 0.92rem; }
@media (min-width: 700px) { .ssc-tools { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .ssc-tool:hover, .ssc-tool:focus-visible { translate: none; } }

.ssc-try { max-width: 760px; }
.ssc-try h2 { margin: 0 0 14px; }
.ssc-opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ssc-opts button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ssc-opts button:hover:not(:disabled) { border-color: var(--accent); }
.ssc-opts button:disabled { cursor: default; }
.ssc-opts b { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); }
.ssc-opts .is-right { border-color: var(--good); background: var(--good-bg); }
.ssc-opts .is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.ssc-fb { margin: 12px 0 0; }
.ssc-fb p { margin: 0 0 8px; }
.ssc-fb .t-good { color: var(--good); font-weight: 700; }
.ssc-fb .t-bad { color: var(--bad); font-weight: 700; }

/* Start: four steps. */
.ssc-path { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1000px; margin: 20px auto; padding: 0; list-style: none; text-align: left; counter-reset: none; }
.ssc-path a { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; height: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt); color: var(--text); text-decoration: none; }
.ssc-path a:hover, .ssc-path a:focus-visible { border-color: var(--accent); }
.ssc-path b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 1.15rem; }
.ssc-path span { display: flex; flex-direction: column; color: var(--muted); font-size: 0.92rem; }
.ssc-path strong { color: var(--text); font-size: 1.05rem; }
@media (min-width: 860px) { .ssc-path { grid-template-columns: repeat(4, 1fr); gap: 12px; } .ssc-path a { flex-direction: row; align-items: center; } }
.ssc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ssc-trust li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); color: var(--muted); font-size: 0.92rem; }
.ssc-trust b { color: var(--text); }
@media (max-width: 640px) { .ssc-page .section { padding: 44px 0; } }

/* Clock-angle lab (/bcs-course): the BCS trick |30H − 5.5M| with hands that follow the sliders. */
.lab-face { fill: var(--bg-alt); stroke: var(--text); stroke-width: 3; }
.lab-tickm { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.lab-num { fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; }
.lab-hh { stroke: var(--text); stroke-width: 6; stroke-linecap: round; }
.lab-mh { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.lab-pin { fill: var(--text); }
.lab-angle { fill: var(--accent); font-size: 26px; font-weight: 800; text-anchor: middle; }
.lab-time { fill: var(--muted); font-size: 13px; font-weight: 700; text-anchor: middle; }