/* ExaminerPrep site effects (fx). Loaded on every page after site.css.
   Every effect is progressive: without JS the page looks exactly as before.
   All motion stops under prefers-reduced-motion; nothing animates in print. */

/* ---------- 1. Laser border (gold beam running round the edge) ---------- */
@property --ep-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.laser{position:relative}
.laser::before{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ep-a),transparent 0 55%,rgba(226,198,126,.25) 65%,#E2C67E 78%,#FFFFFF 85%,#E2C67E 91%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:epLaser 3s linear infinite}
.laser-slow::before{animation-duration:5s}
.site-h .laser::before,.ab-card.laser::before{background:conic-gradient(from var(--ep-a),transparent 0 55%,rgba(138,100,22,.25) 65%,#8A6416 76%,#E2C67E 84%,#8A6416 91%,transparent 97%)}
@keyframes epLaser{to{--ep-a:360deg}}

/* ---------- 2. Graph paper on dark heroes and bands ---------- */
.x .hero,.cta-band{--fx-x:-999px;--fx-y:-999px;position:relative;
  background-image:linear-gradient(transparent,transparent),
    linear-gradient(rgba(226,198,126,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(226,198,126,.07) 1px,transparent 1px),
    linear-gradient(rgba(226,198,126,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(226,198,126,.03) 1px,transparent 1px);
  background-size:auto,80px 80px,80px 80px,16px 16px,16px 16px;animation:fxPaper 60s linear infinite}
.cta-band{background-size:auto,48px 48px,48px 48px,12px 12px,12px 12px}
@keyframes fxPaper{to{background-position:0 0,80px 80px,80px 80px,16px 16px,16px 16px}}

/* ---------- 3. Shine sweep on gold buttons ---------- */
.btn-gold:not(.laser),.site-h .btn:not(.laser){position:relative;overflow:hidden}
.btn-gold:not(.laser)::after,.site-h .btn:not(.laser)::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);pointer-events:none}
.btn-gold:not(.laser):hover::after,.btn-gold:not(.laser):focus-visible::after,.site-h .btn:not(.laser):hover::after{animation:fxShine .7s ease}
@keyframes fxShine{to{left:130%}}

/* ---------- 4. Arrow nudge and drawn underline ---------- */
.fx-arr{display:inline-block;transition:transform .2s}
a:hover>.fx-arr,a:focus-visible>.fx-arr,a:hover .go>.fx-arr,a:focus-visible .go>.fx-arr{transform:translateX(5px)}
a:hover>.fx-arr.l,a:focus-visible>.fx-arr.l{transform:translateX(-5px)}
.simpn a,.site-f a,.learnbar .lb-l+a~a{text-decoration:none;background:linear-gradient(#C9A227,#C9A227) 0 100%/0 2px no-repeat;transition:background-size .3s}
.simpn a:hover,.site-f a:hover,.simpn a:focus-visible,.site-f a:focus-visible{background-size:100% 2px}

/* ---------- 5. Spotlight border on card grids ---------- */
.fx-glow{--mx:-999px;--my:-999px;position:relative}
.fx-glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(200px circle at var(--mx) var(--my),#C9A227,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ---------- 6. Gentle 3D tilt ---------- */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out;will-change:transform}

/* ---------- 7. Reveal on scroll ---------- */
.fx-r{opacity:0;transform:translateY(18px)}
.fx-r.fx-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1) calc(var(--i,0)*90ms),transform .6s cubic-bezier(.2,.7,.3,1) calc(var(--i,0)*90ms)}

/* ---------- 8. Sticky header that shrinks ---------- */
.fx-stick .site-h{position:sticky;top:0;z-index:40;transition:box-shadow .25s,background-color .25s}
.fx-stick .site-h .wrap{transition:padding .25s}
.fx-stick.fx-scrolled .site-h{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(10,20,40,.08)}
.fx-stick.fx-scrolled .site-h .wrap{padding-top:6px;padding-bottom:6px}
.fx-stick.fx-scrolled .site-h .motto{display:none}

/* ---------- 9. Reading progress bar ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,#C9A227,#E2C67E);transform-origin:left;transform:scaleX(0)}

/* ---------- 10. "On this page" contents that follows you ---------- */
.fx-toc{display:none}
@media (min-width:1360px){
  .fx-toc{display:block;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s;position:fixed;top:120px;left:calc(50% + 480px);width:200px;max-height:calc(100vh - 160px);overflow:auto;z-index:5;font:13.5px/1.4 var(--sans)}
  .fx-toc.vis{opacity:1;visibility:visible;transform:none}
  .fx-toc p{margin:0 0 8px;font:600 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .fx-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .fx-toc a{display:block;padding:5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
  .fx-toc a:hover{color:var(--navy)}
  .fx-toc a.on{color:var(--navy);border-left-color:#C9A227;font-weight:600}
}

/* ---------- 11. Worked solutions and mark schemes, one step at a time ---------- */
.fx-hid{display:none!important}
.fx-step-in{animation:fxStep .35s ease}
@keyframes fxStep{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.fx-stepbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 2px}
.fx-stepbar button{font:600 13.5px var(--sans);padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--navy);cursor:pointer}
.fx-stepbar .fx-next{background:#C9A227;border-color:#C9A227;color:#13233F}
.fx-stepbar .fx-n{font-size:13px;color:var(--muted)}
.fx-stepbar button:focus-visible{outline:2px solid #C9A227;outline-offset:2px}

/* ---------- 12. Command-term hover cards ---------- */
.fx-ct{position:relative;border-bottom:2px dotted #C9A227;cursor:help;outline:none}
.fx-ct:focus-visible{background:var(--gold-bg);border-radius:3px}
.fx-ct .fx-ct-c{position:fixed;left:0;top:0;width:min(250px,75vw);display:none;padding:11px 13px;border-radius:10px;
  background:#13233F;color:#D5DCE8;font:400 13.5px/1.45 var(--sans);text-transform:none;letter-spacing:0;text-align:left;
  box-shadow:0 12px 30px rgba(4,10,24,.3);z-index:20;white-space:normal}
.fx-ct .fx-ct-c b{display:block;color:#E2C67E;font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.fx-ct .fx-ct-c::after{content:"";position:absolute;left:var(--ax,16px);top:100%;border:7px solid transparent;border-top-color:#13233F}
.fx-ct .fx-ct-c.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#13233F}
.fx-ct:hover .fx-ct-c,.fx-ct:focus .fx-ct-c{display:block;animation:fxTip .2s ease}
@keyframes fxTip{from{opacity:0}}

/* ---------- 13. Answer feedback ---------- */
.opt[data-state="right"]{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1)}
.opt[data-state="wrong"]{animation:fxShake .4s}
.fb-ok{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1)}.fb-bad{animation:fxShake .4s}
@keyframes fxPop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
@keyframes fxShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- 14. Skeleton while a test is built ---------- */
.fx-skel{margin:12px 0;max-width:620px}
.fx-skel i{display:block;height:14px;border-radius:6px;margin:10px 0;background:linear-gradient(90deg,var(--bg-alt) 0%,var(--line) 50%,var(--bg-alt) 100%) 0 0/200% 100%;animation:fxSk 1.1s linear infinite}
@keyframes fxSk{to{background-position:-200% 0}}

/* ---------- 15. Diagnostic: meters fill, score ring ---------- */
.dg-meter i{transform-origin:left;animation:fxFill 1.1s cubic-bezier(.3,.7,.3,1) both}
@keyframes fxFill{from{transform:scaleX(0)}}
.dg-tile.big.fx-has-ring{display:grid;grid-template-columns:120px 1fr;align-items:center;column-gap:18px;text-align:left}
.dg-tile.big.fx-has-ring>.fx-ring{grid-area:1/1;width:120px;height:120px;transform:rotate(-90deg)}
.dg-tile.big.fx-has-ring>b{grid-area:1/1;justify-self:center;position:relative;z-index:1;font-size:30px}
.dg-tile.big.fx-has-ring>span{grid-area:1/2}
.fx-ring circle{fill:none;stroke-width:9}.fx-ring .bg{stroke:rgba(150,160,180,.3)}
.fx-ring .fg{stroke:#C9A227;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1)}

/* ---------- 16. Flashcard turn ---------- */
.fc-card{transform-style:preserve-3d}

/* ---------- 17. Notes figures that draw themselves (handled in JS) ---------- */


/* ---------- 18. Physics & Maths animated figures (inserted into some notes pages) ---------- */
.fx-anim{margin:22px 0 26px;padding:18px 16px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-alt)}
.fx-anim svg{width:100%;max-width:460px;display:block;margin:auto}
.fx-anim figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.fx-anim figcaption b{color:var(--gold);font-weight:600}
.fx-anim .ax{stroke:var(--line);stroke-width:1.2}
.fx-anim text{font:12.5px var(--sans);fill:var(--muted)}
.fx-wave .w{fill:none;stroke:var(--navy);stroke-width:2.5}.fx-wave .g{stroke:var(--muted);stroke-dasharray:3 4}.fx-wave .p{fill:#C9A227;stroke:#13233F;stroke-width:1.5}
.fx-pend{max-width:230px!important}.fx-pend .sup{stroke:var(--navy);stroke-width:4}.fx-pend .eq{stroke:var(--line);stroke-dasharray:3 4}
.fx-pend .arm{transform-origin:100px 10px;animation:fxSwing 1.1s ease-in-out infinite alternate}
.fx-pend .arm line{stroke:var(--muted);stroke-width:2}.fx-pend .arm circle{fill:#C9A227;stroke:#13233F;stroke-width:2}
@keyframes fxSwing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.fx-proj .gnd{stroke:var(--muted);stroke-width:1.5}.fx-proj .tr{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.fx-proj .b{fill:var(--navy)}.fx-proj .vx{stroke:#C9A227;stroke-width:3}.fx-proj .vy{stroke:#1D5FA8;stroke-width:3}
.fx-proj .l1{fill:#8A6416}.fx-proj .l2{fill:#1D5FA8}
.fx-vec{max-width:380px!important}.fx-vec line{stroke-width:3.5}.fx-vec .a{stroke:var(--navy)}.fx-vec .ha{fill:var(--navy)}
.fx-vec .b{stroke:#1D5FA8}.fx-vec .hb{fill:#1D5FA8}.fx-vec .r{stroke:#C9A227;stroke-dasharray:1;stroke-dashoffset:1;animation:fxVr 4s ease-in-out infinite}
.fx-vec .hr{fill:#C9A227;opacity:0;animation:fxVt 4s infinite}.fx-vec text.v{font:italic 600 15px var(--serif);fill:var(--ink)}
.fx-vec .bm{animation:fxVb 4s ease-in-out infinite}.fx-vec .tr{opacity:0;animation:fxVt 4s infinite}.fx-vec .tb{opacity:0;animation:fxVt2 4s infinite}
@keyframes fxVb{0%,15%{transform:none}45%,100%{transform:translateX(140px)}}
@keyframes fxVr{0%,50%{stroke-dashoffset:1}75%,100%{stroke-dashoffset:0}}
@keyframes fxVt{0%,72%{opacity:0}80%,100%{opacity:1}}@keyframes fxVt2{0%,42%{opacity:0}50%,100%{opacity:1}}
.fx-orb{max-width:260px!important}.fx-orb .path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}.fx-orb .earth{fill:#1D5FA8}
.fx-orb .sat{fill:var(--navy)}.fx-orb line{stroke-width:3;stroke-linecap:round}.fx-orb .f{stroke:#C9A227}.fx-orb .hf{fill:#C9A227}.fx-orb .v{stroke:#1D5FA8}.fx-orb .hv{fill:#1D5FA8}
.fx-orb .spin{transform-origin:110px 110px;animation:fxOrb 6s linear infinite}
@keyframes fxOrb{to{transform:rotate(-360deg)}}
.fx-tan .c{fill:none;stroke:var(--navy);stroke-width:2.5}.fx-tan .t{stroke:#C9A227;stroke-width:2.5}.fx-tan .p{fill:#C9A227;stroke:#13233F;stroke-width:1.5}
.fx-tan .v{color:var(--ink);font-variant-numeric:tabular-nums}
[data-theme="dark"] .fx-proj .l1{fill:#E2C67E}[data-theme="dark"] .fx-proj .l2,[data-theme="dark"] .fx-proj .mh{fill:#7FB0E8}[data-theme="dark"] .fx-proj .vy{stroke:#7FB0E8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-proj .l1{fill:#E2C67E}:root:not([data-theme="light"]) .fx-proj .l2,:root:not([data-theme="light"]) .fx-proj .mh{fill:#7FB0E8}:root:not([data-theme="light"]) .fx-proj .vy{stroke:#7FB0E8}}

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .laser::before,.x .hero,.cta-band,.btn-gold::after,.site-h .btn::after,.opt[data-state],.fb-ok,.fb-bad,.fx-skel i,.dg-meter i,
  .fx-step-in,.fx-ct .fx-ct-c,.fx-pend .arm,.fx-orb .spin,.fx-vec .bm,.fx-vec .r,.fx-vec .hr,.fx-vec .tr,.fx-vec .tb{animation:none!important}
  .fx-r{opacity:1;transform:none}.fx-tilt{transform:none!important}
  .fx-vec .bm{transform:translateX(140px)}.fx-vec .r{stroke-dashoffset:0}.fx-vec .hr,.fx-vec .tr,.fx-vec .tb{opacity:1}
  .fx-pend .arm{transform:rotate(-22deg)}.fx-ring .fg{transition:none}
}
/* ---------- Print: plain, complete pages ---------- */
@media print{
  .laser::before,.fx-glow::after,.btn-gold::after,.fx-progress,.fx-toc,.fx-stepbar,.fx-anim,.fx-ring,.fx-ct .fx-ct-c{display:none!important}
  .fx-hid{display:revert!important}.fx-r{opacity:1!important;transform:none!important}
  .x .hero,.cta-band{background-image:none!important}.fx-stick .site-h{position:static}
}
.fx-orb .o1{fill:#8A6416}.fx-orb .o2{fill:#1D5FA8}
[data-theme="dark"] .fx-orb .o1{fill:#E2C67E}[data-theme="dark"] .fx-orb .o2{fill:#7FB0E8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-orb .o1{fill:#E2C67E}:root:not([data-theme="light"]) .fx-orb .o2{fill:#7FB0E8}}

/* ================= Chapter scenes (fx-scenes.js) ================= */
.fx-scene canvas{display:block;width:100%;height:100%}
.x .hero.fx-has-scene,.x .hero.fx-has-bg{overflow:hidden}
.x .hero.fx-has-scene>.wrap,.x .hero.fx-has-bg>.wrap{position:relative;z-index:1}
.fx-scene-bg{position:absolute;top:0;bottom:0;right:0;width:46%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
@media (min-width:980px){.x .hero.fx-has-scene>.wrap>*{max-width:54%}}
@media (max-width:979px){.fx-scene-bg{position:relative;width:auto;height:200px;margin:-28px 24px 32px;border-radius:12px;background:rgba(14,26,48,.55);-webkit-mask-image:none;mask-image:none;overflow:hidden}}
.fx-scene-full{position:absolute;inset:0;pointer-events:none;opacity:.55}
.fx-scene-band{position:relative;height:200px;margin:0 0 22px;border-radius:14px;overflow:hidden;background-color:#13233F;
  background-image:linear-gradient(rgba(226,198,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(226,198,126,.06) 1px,transparent 1px);background-size:40px 40px}
@media (max-width:600px){.fx-scene-band{height:170px}}

/* ================= Twin beams ================= */
@property --fx2a{syntax:"<angle>";initial-value:0deg;inherits:false}
.fx-twin{position:relative}
.x .fx-twin::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--fx2a),transparent 0 28%,#E2C67E 40%,#fff 44%,transparent 50%,transparent 78%,#7FB0E8 90%,#fff 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx2Spin 4s linear infinite}
@keyframes fx2Spin{to{--fx2a:360deg}}

/* ================= Light pulses on the graph paper ================= */
.fx-pulses{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-pulses i{position:absolute;display:block}
.fx-pulses .h{left:0;height:1px;width:160px;background:linear-gradient(90deg,transparent,#E2C67E,#fff);animation:fxPH 7s linear infinite;animation-delay:var(--d)}
.fx-pulses .v{top:0;width:1px;height:130px;background:linear-gradient(180deg,transparent,#7FB0E8,#fff);animation:fxPV 6.5s linear infinite;animation-delay:var(--d)}
@keyframes fxPH{from{transform:translateX(-180px)}to{transform:translateX(2400px)}}
@keyframes fxPV{from{transform:translateY(-150px)}to{transform:translateY(900px)}}
.x .hero>.wrap,.cta-band>*{position:relative;z-index:1}
.cta-band{overflow:hidden}

/* ================= Soft glow on titles (whole title, once, 1 s) ================= */
.fx-shine{animation:fxGlow 1s ease-out 1}
.x .hero .fx-shine,.x .hero h1.fx-shine{animation-name:fxGlowDark}
@keyframes fxGlow{0%{text-shadow:0 0 0 rgba(201,162,39,0)}45%{text-shadow:0 0 14px rgba(201,162,39,.55),0 0 30px rgba(226,198,126,.35)}100%{text-shadow:0 0 0 rgba(201,162,39,0)}}
@keyframes fxGlowDark{0%{text-shadow:0 0 0 rgba(226,198,126,0)}45%{text-shadow:0 0 16px rgba(244,215,122,.75),0 0 38px rgba(226,198,126,.45)}100%{text-shadow:0 0 0 rgba(226,198,126,0)}}

/* ---------- 4. Arrow nudge and drawn underline ---------- */
.fx-arr{display:inline-block;transition:transform .2s}
a:hover>.fx-arr,a:focus-visible>.fx-arr,a:hover .go>.fx-arr,a:focus-visible .go>.fx-arr{transform:translateX(5px)}
a:hover>.fx-arr.l,a:focus-visible>.fx-arr.l{transform:translateX(-5px)}
.simpn a,.site-f a,.learnbar .lb-l+a~a{text-decoration:none;background:linear-gradient(#C9A227,#C9A227) 0 100%/0 2px no-repeat;transition:background-size .3s}
.simpn a:hover,.site-f a:hover,.simpn a:focus-visible,.site-f a:focus-visible{background-size:100% 2px}

/* ---------- 5. Spotlight border on card grids ---------- */
.fx-glow{--mx:-999px;--my:-999px;position:relative}
.fx-glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(200px circle at var(--mx) var(--my),#C9A227,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ---------- 6. Gentle 3D tilt ---------- */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out;will-change:transform}

/* ---------- 7. Reveal on scroll ---------- */
.fx-r{opacity:0;transform:translateY(18px)}
.fx-r.fx-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1) calc(var(--i,0)*90ms),transform .6s cubic-bezier(.2,.7,.3,1) calc(var(--i,0)*90ms)}

/* ---------- 8. Sticky header that shrinks ---------- */
.fx-stick .site-h{position:sticky;top:0;z-index:40;transition:box-shadow .25s,background-color .25s}
.fx-stick .site-h .wrap{transition:padding .25s}
.fx-stick.fx-scrolled .site-h{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(10,20,40,.08)}
.fx-stick.fx-scrolled .site-h .wrap{padding-top:6px;padding-bottom:6px}
.fx-stick.fx-scrolled .site-h .motto{display:none}

/* ---------- 9. Reading progress bar ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,#C9A227,#E2C67E);transform-origin:left;transform:scaleX(0)}

/* ---------- 10. "On this page" contents that follows you ---------- */
.fx-toc{display:none}
@media (min-width:1360px){
  .fx-toc{display:block;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s;position:fixed;top:120px;left:calc(50% + 480px);width:200px;max-height:calc(100vh - 160px);overflow:auto;z-index:5;font:13.5px/1.4 var(--sans)}
  .fx-toc.vis{opacity:1;visibility:visible;transform:none}
  .fx-toc p{margin:0 0 8px;font:600 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .fx-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .fx-toc a{display:block;padding:5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
  .fx-toc a:hover{color:var(--navy)}
  .fx-toc a.on{color:var(--navy);border-left-color:#C9A227;font-weight:600}
}

/* ---------- 11. Worked solutions and mark schemes, one step at a time ---------- */
.fx-hid{display:none!important}
.fx-step-in{animation:fxStep .35s ease}
@keyframes fxStep{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.fx-stepbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 2px}
.fx-stepbar button{font:600 13.5px var(--sans);padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--navy);cursor:pointer}
.fx-stepbar .fx-next{background:#C9A227;border-color:#C9A227;color:#13233F}
.fx-stepbar .fx-n{font-size:13px;color:var(--muted)}
.fx-stepbar button:focus-visible{outline:2px solid #C9A227;outline-offset:2px}

/* ---------- 12. Command-term hover cards ---------- */
.fx-ct{position:relative;border-bottom:2px dotted #C9A227;cursor:help;outline:none}
.fx-ct:focus-visible{background:var(--gold-bg);border-radius:3px}
.fx-ct .fx-ct-c{position:fixed;left:0;top:0;width:min(250px,75vw);display:none;padding:11px 13px;border-radius:10px;
  background:#13233F;color:#D5DCE8;font:400 13.5px/1.45 var(--sans);text-transform:none;letter-spacing:0;text-align:left;
  box-shadow:0 12px 30px rgba(4,10,24,.3);z-index:20;white-space:normal}
.fx-ct .fx-ct-c b{display:block;color:#E2C67E;font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.fx-ct .fx-ct-c::after{content:"";position:absolute;left:var(--ax,16px);top:100%;border:7px solid transparent;border-top-color:#13233F}
.fx-ct .fx-ct-c.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#13233F}
.fx-ct:hover .fx-ct-c,.fx-ct:focus .fx-ct-c{display:block;animation:fxTip .2s ease}
@keyframes fxTip{from{opacity:0}}

/* ---------- 13. Answer feedback ---------- */
.opt[data-state="right"]{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1)}
.opt[data-state="wrong"]{animation:fxShake .4s}
.fb-ok{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1)}.fb-bad{animation:fxShake .4s}
@keyframes fxPop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
@keyframes fxShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- 14. Skeleton while a test is built ---------- */
.fx-skel{margin:12px 0;max-width:620px}
.fx-skel i{display:block;height:14px;border-radius:6px;margin:10px 0;background:linear-gradient(90deg,var(--bg-alt) 0%,var(--line) 50%,var(--bg-alt) 100%) 0 0/200% 100%;animation:fxSk 1.1s linear infinite}
@keyframes fxSk{to{background-position:-200% 0}}

/* ---------- 15. Diagnostic: meters fill, score ring ---------- */
.dg-meter i{transform-origin:left;animation:fxFill 1.1s cubic-bezier(.3,.7,.3,1) both}
@keyframes fxFill{from{transform:scaleX(0)}}
.dg-tile.big.fx-has-ring{display:grid;grid-template-columns:120px 1fr;align-items:center;column-gap:18px;text-align:left}
.dg-tile.big.fx-has-ring>.fx-ring{grid-area:1/1;width:120px;height:120px;transform:rotate(-90deg)}
.dg-tile.big.fx-has-ring>b{grid-area:1/1;justify-self:center;position:relative;z-index:1;font-size:30px}
.dg-tile.big.fx-has-ring>span{grid-area:1/2}
.fx-ring circle{fill:none;stroke-width:9}.fx-ring .bg{stroke:rgba(150,160,180,.3)}
.fx-ring .fg{stroke:#C9A227;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1)}

/* ---------- 16. Flashcard turn ---------- */
.fc-card{transform-style:preserve-3d}

/* ---------- 17. Notes figures that draw themselves (handled in JS) ---------- */


/* ---------- 18. Physics & Maths animated figures (inserted into some notes pages) ---------- */
.fx-anim{margin:22px 0 26px;padding:18px 16px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-alt)}
.fx-anim svg{width:100%;max-width:460px;display:block;margin:auto}
.fx-anim figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.fx-anim figcaption b{color:var(--gold);font-weight:600}
.fx-anim .ax{stroke:var(--line);stroke-width:1.2}
.fx-anim text{font:12.5px var(--sans);fill:var(--muted)}
.fx-wave .w{fill:none;stroke:var(--navy);stroke-width:2.5}.fx-wave .g{stroke:var(--muted);stroke-dasharray:3 4}.fx-wave .p{fill:#C9A227;stroke:#13233F;stroke-width:1.5}
.fx-pend{max-width:230px!important}.fx-pend .sup{stroke:var(--navy);stroke-width:4}.fx-pend .eq{stroke:var(--line);stroke-dasharray:3 4}
.fx-pend .arm{transform-origin:100px 10px;animation:fxSwing 1.1s ease-in-out infinite alternate}
.fx-pend .arm line{stroke:var(--muted);stroke-width:2}.fx-pend .arm circle{fill:#C9A227;stroke:#13233F;stroke-width:2}
@keyframes fxSwing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.fx-proj .gnd{stroke:var(--muted);stroke-width:1.5}.fx-proj .tr{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.fx-proj .b{fill:var(--navy)}.fx-proj .vx{stroke:#C9A227;stroke-width:3}.fx-proj .vy{stroke:#1D5FA8;stroke-width:3}
.fx-proj .l1{fill:#8A6416}.fx-proj .l2{fill:#1D5FA8}
.fx-vec{max-width:380px!important}.fx-vec line{stroke-width:3.5}.fx-vec .a{stroke:var(--navy)}.fx-vec .ha{fill:var(--navy)}
.fx-vec .b{stroke:#1D5FA8}.fx-vec .hb{fill:#1D5FA8}.fx-vec .r{stroke:#C9A227;stroke-dasharray:1;stroke-dashoffset:1;animation:fxVr 4s ease-in-out infinite}
.fx-vec .hr{fill:#C9A227;opacity:0;animation:fxVt 4s infinite}.fx-vec text.v{font:italic 600 15px var(--serif);fill:var(--ink)}
.fx-vec .bm{animation:fxVb 4s ease-in-out infinite}.fx-vec .tr{opacity:0;animation:fxVt 4s infinite}.fx-vec .tb{opacity:0;animation:fxVt2 4s infinite}
@keyframes fxVb{0%,15%{transform:none}45%,100%{transform:translateX(140px)}}
@keyframes fxVr{0%,50%{stroke-dashoffset:1}75%,100%{stroke-dashoffset:0}}
@keyframes fxVt{0%,72%{opacity:0}80%,100%{opacity:1}}@keyframes fxVt2{0%,42%{opacity:0}50%,100%{opacity:1}}
.fx-orb{max-width:260px!important}.fx-orb .path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}.fx-orb .earth{fill:#1D5FA8}
.fx-orb .sat{fill:var(--navy)}.fx-orb line{stroke-width:3;stroke-linecap:round}.fx-orb .f{stroke:#C9A227}.fx-orb .hf{fill:#C9A227}.fx-orb .v{stroke:#1D5FA8}.fx-orb .hv{fill:#1D5FA8}
.fx-orb .spin{transform-origin:110px 110px;animation:fxOrb 6s linear infinite}
@keyframes fxOrb{to{transform:rotate(-360deg)}}
.fx-tan .c{fill:none;stroke:var(--navy);stroke-width:2.5}.fx-tan .t{stroke:#C9A227;stroke-width:2.5}.fx-tan .p{fill:#C9A227;stroke:#13233F;stroke-width:1.5}
.fx-tan .v{color:var(--ink);font-variant-numeric:tabular-nums}
[data-theme="dark"] .fx-proj .l1{fill:#E2C67E}[data-theme="dark"] .fx-proj .l2,[data-theme="dark"] .fx-proj .mh{fill:#7FB0E8}[data-theme="dark"] .fx-proj .vy{stroke:#7FB0E8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-proj .l1{fill:#E2C67E}:root:not([data-theme="light"]) .fx-proj .l2,:root:not([data-theme="light"]) .fx-proj .mh{fill:#7FB0E8}:root:not([data-theme="light"]) .fx-proj .vy{stroke:#7FB0E8}}

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .laser::before,.x .hero,.cta-band,.btn-gold::after,.site-h .btn::after,.opt[data-state],.fb-ok,.fb-bad,.fx-skel i,.dg-meter i,
  .fx-step-in,.fx-ct .fx-ct-c,.fx-pend .arm,.fx-orb .spin,.fx-vec .bm,.fx-vec .r,.fx-vec .hr,.fx-vec .tr,.fx-vec .tb{animation:none!important}
  .fx-r{opacity:1;transform:none}.fx-tilt{transform:none!important}
  .fx-vec .bm{transform:translateX(140px)}.fx-vec .r{stroke-dashoffset:0}.fx-vec .hr,.fx-vec .tr,.fx-vec .tb{opacity:1}
  .fx-pend .arm{transform:rotate(-22deg)}.fx-ring .fg{transition:none}
}
/* ---------- Print: plain, complete pages ---------- */
@media print{
  .laser::before,.fx-glow::after,.btn-gold::after,.fx-progress,.fx-toc,.fx-stepbar,.fx-anim,.fx-ring,.fx-ct .fx-ct-c{display:none!important}
  .fx-hid{display:revert!important}.fx-r{opacity:1!important;transform:none!important}
  .x .hero,.cta-band{background-image:none!important}.fx-stick .site-h{position:static}
}
.fx-orb .o1{fill:#8A6416}.fx-orb .o2{fill:#1D5FA8}
[data-theme="dark"] .fx-orb .o1{fill:#E2C67E}[data-theme="dark"] .fx-orb .o2{fill:#7FB0E8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-orb .o1{fill:#E2C67E}:root:not([data-theme="light"]) .fx-orb .o2{fill:#7FB0E8}}

/* ================= Chapter scenes (fx-scenes.js) ================= */
.fx-scene canvas{display:block;width:100%;height:100%}
.x .hero.fx-has-scene,.x .hero.fx-has-bg{overflow:hidden}
.x .hero.fx-has-scene>.wrap,.x .hero.fx-has-bg>.wrap{position:relative;z-index:1}
.fx-scene-bg{position:absolute;top:0;bottom:0;right:0;width:46%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
@media (min-width:980px){.x .hero.fx-has-scene>.wrap>*{max-width:54%}}
@media (max-width:979px){.fx-scene-bg{position:relative;width:auto;height:200px;margin:-28px 24px 32px;border-radius:12px;background:rgba(14,26,48,.55);-webkit-mask-image:none;mask-image:none;overflow:hidden}}
.fx-scene-full{position:absolute;inset:0;pointer-events:none;opacity:.55}
.fx-scene-band{position:relative;height:200px;margin:0 0 22px;border-radius:14px;overflow:hidden;background-color:#13233F;
  background-image:linear-gradient(rgba(226,198,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(226,198,126,.06) 1px,transparent 1px);background-size:40px 40px}
@media (max-width:600px){.fx-scene-band{height:170px}}

/* ================= Twin beams ================= */
@property --fx2a{syntax:"<angle>";initial-value:0deg;inherits:false}
.fx-twin{position:relative}
.x .fx-twin::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--fx2a),transparent 0 28%,#E2C67E 40%,#fff 44%,transparent 50%,transparent 78%,#7FB0E8 90%,#fff 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx2Spin 4s linear infinite}
@keyframes fx2Spin{to{--fx2a:360deg}}

/* ================= Light pulses on the graph paper ================= */
.fx-pulses{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-pulses i{position:absolute;display:block}
.fx-pulses .h{left:0;height:1px;width:160px;background:linear-gradient(90deg,transparent,#E2C67E,#fff);animation:fxPH 7s linear infinite;animation-delay:var(--d)}
.fx-pulses .v{top:0;width:1px;height:130px;background:linear-gradient(180deg,transparent,#7FB0E8,#fff);animation:fxPV 6.5s linear infinite;animation-delay:var(--d)}
@keyframes fxPH{from{transform:translateX(-180px)}to{transform:translateX(2400px)}}
@keyframes fxPV{from{transform:translateY(-150px)}to{transform:translateY(900px)}}
.x .hero>.wrap,.cta-band>*{position:relative;z-index:1}
.cta-band{overflow:hidden}

/* ================= Gold shimmer on the motto ================= */
.logo .motto{background:linear-gradient(110deg,#A8861A 0%,#C9A227 35%,#F4D77A 50%,#C9A227 65%,#A8861A 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShim 5s ease-in-out infinite}
@keyframes fxShim{0%{background-position:100% 0}100%{background-position:-150% 0}}

/* ================= Rolling-digit counter ================= */
.fx-odo,.x .stats b.fx-odo{display:flex;align-items:flex-start;line-height:1.15}
.fx-odo>span{display:inline-block;height:1.15em;line-height:1.15em}
.fx-odo .c{overflow:hidden}
.fx-odo span,.fx-odo i,.x .stats b.fx-odo span,.x .stats b.fx-odo i{font:inherit;color:inherit;letter-spacing:inherit}
.fx-odo .c>span{display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.fx-odo .c i{font-style:normal;height:1.15em;line-height:1.15em}

/* ================= Orbiting electrons (loading) ================= */
.fx-atom{display:block;width:70px;height:70px;margin:6px 0 4px;color:var(--navy)}

@media (prefers-reduced-motion:reduce){.x .fx-twin::after,.fx-pulses i,.fx-shine,.logo .motto{animation:none!important}.fx-pulses{display:none}.fx-odo .c>span{transition:none}}
@media print{.fx-scene,.fx-pulses,.x .fx-twin::after{display:none!important}.logo .motto{color:#A8861A;background:none}}
.epfc-hero.fx-has-scene{position:relative;overflow:hidden}
.epfc-hero.fx-has-scene>*:not(.fx-scene){position:relative;z-index:1}
@media (min-width:980px){.epfc-hero.fx-has-scene>*:not(.fx-scene){max-width:54%}}
/* dropdown menu items: the same moving gold border as the Contact button, while the item is pointed at or focused */
.nav .nd-m a{position:relative}
.nav .nd-m a::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .15s;
  background:conic-gradient(from var(--ep-a),transparent 0 55%,rgba(138,100,22,.25) 65%,#8A6416 76%,#E2C67E 84%,#8A6416 91%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:epLaser 1.6s linear infinite}
.nav .nd-m a:hover::before,.nav .nd-m a:focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){.nav .nd-m a::before{animation:none;background:#C9A227}}
@media print{.nav .nd-m a::before{display:none}}
/* printing: drop everything that is expensive to render on paper, so the print preview opens quickly */
@media print{
  canvas,video,.fx-scene,.fx-mo,.ep-tour,.ep-cc,#ep-cc,.ep-print-wait{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important}
  .laser::before{display:none!important}
}
.ep-print-wait{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:10px;
  background:#13233F;color:#fff;border:1px solid #C9A227;border-radius:10px;padding:12px 18px;font:600 15px/1.2 var(--sans,system-ui,sans-serif);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.ep-print-wait i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#E2C67E;animation:epSpin .8s linear infinite}
@keyframes epSpin{to{transform:rotate(360deg)}}
/* "Save offline" button and the phone "Add to home screen" bar */
.ep-save.is-saved{border-color:#2F7D47;color:#2F7D47}
.ep-a2hs{position:fixed;left:10px;right:10px;bottom:10px;z-index:2147482000;display:flex;align-items:center;gap:10px;background:#13233F;color:#fff;
  border:1px solid #C9A227;border-radius:12px;padding:10px 10px 10px 12px;box-shadow:0 14px 34px rgba(0,0,0,.35);font:14px/1.35 var(--sans,system-ui,sans-serif)}
.ep-a2hs img{border-radius:8px;flex:none}
.ep-a2hs p{margin:0;flex:1;color:#E6EBF3}
.ep-a2hs b{color:#fff}
.ep-a2hs-go{flex:none;background:#C9A227;color:#13233F;border:0;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer}
.ep-a2hs-x{flex:none;background:transparent;color:#C8D1DF;border:0;font-size:22px;line-height:1;padding:4px 6px;cursor:pointer}
@media print{.ep-a2hs,.ep-save{display:none!important}}
/* shorter scenes, so the content starts sooner (kept moving, just less tall) */
.fx-scene-band{height:150px}
@media (max-width:600px){.fx-scene-band{height:110px;margin-bottom:16px}}
@media (max-width:979px){.fx-scene-bg{height:130px;margin:-20px 16px 22px}}