/* Motion belongs to individual objects; illustrations stay still until interaction. */
.map-preview .preview-vector{display:block;width:100%;height:100%;object-fit:contain}
.catalog-group-heading{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:22px 2px 1px;font-size:13px;letter-spacing:.1px;color:#66765a;font-weight:500}
.catalog-group-heading::after{content:'';height:1px;flex:1;background:#dce2d3}
.catalog-group-heading:first-child{margin-top:0}
.motion-step,.motion-route-stop,.motion-radar-flash,.motion-schulte-number,.motion-sudoku-answer{transform-box:fill-box;transform-origin:center}
.motion-sudoku-answer{opacity:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .exercise-card{transition:border-color .22s,background-color .22s}
  .exercise-card:is(:hover,:focus-within){border-color:#c7d0ba;background:#f3f4ec}
  .exercise-card:is(:hover,:focus-within) .motion-step{animation:preview-step 2.8s ease-in-out var(--delay,0s) infinite}
  .exercise-card:is(:hover,:focus-within) .motion-route-stop{animation:preview-stop 2.8s ease-in-out var(--delay,0s) infinite}
  .exercise-card:is(:hover,:focus-within) .motion-route-line{stroke-dasharray:240;animation:preview-route 3.6s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-schulte-number{animation:preview-schulte 2.4s ease-in-out var(--delay,0s) infinite}
  .exercise-card:is(:hover,:focus-within) .motion-radar-flash{animation:preview-radar 2.2s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-sudoku-answer{animation:preview-answer 3s ease-in-out var(--delay,0s) infinite}
  .exercise-card:is(:hover,:focus-within) .motion-train-left{animation:preview-train-left 4.2s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-train-right{animation:preview-train-right 4.8s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-jet{animation:preview-jet 4.5s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-seaplane{animation:preview-seaplane 4.8s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-helicopter{animation:preview-helicopter 3.8s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-trail{animation:preview-dash 2s linear infinite}
  .exercise-card:is(:hover,:focus-within) .motion-parcel{animation:preview-parcel 3.8s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .motion-belt{animation:preview-dash 1.2s linear infinite}
  .exercise-card:is(:hover,:focus-within) .motion-target{animation:preview-target 3.4s ease-in-out infinite}
  .motion-target-0{--dx:22px;--dy:14px}.motion-target-1{--dx:-18px;--dy:17px}.motion-target-2{--dx:17px;--dy:-12px}
  .exercise-card:is(:hover,:focus-within) .motion-distractor{animation:preview-target 4.1s ease-in-out infinite reverse}
  .motion-distractor-0{--dx:17px;--dy:-15px}.motion-distractor-1{--dx:-13px;--dy:19px}.motion-distractor-2{--dx:19px;--dy:-7px}.motion-distractor-3{--dx:-17px;--dy:-13px}.motion-distractor-4{--dx:-15px;--dy:15px}
  .exercise-card:is(:hover,:focus-within) .vanishing-number{animation:preview-vanish 3.3s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .arithmetic-preview>span{animation:preview-step 2.6s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .arithmetic-preview>span:nth-of-type(2){animation-delay:.3s}
  .exercise-card:is(:hover,:focus-within) .arithmetic-preview>b{animation:preview-question 2.6s ease-in-out infinite}
  .exercise-card:is(:hover,:focus-within) .matrix-preview .memory-preview-cell.lit{animation:preview-cell 2.8s ease-in-out infinite}
  .matrix-preview .memory-preview-cell:nth-child(3n+1){animation-delay:.18s!important}.matrix-preview .memory-preview-cell:nth-child(3n+2){animation-delay:.36s!important}
  .exercise-card:is(:hover,:focus-within) .rapid-word-example{animation:preview-word 2.9s ease-in-out infinite}
}
@keyframes preview-step{0%,65%,100%{transform:translateY(0);opacity:1}25%{transform:translateY(-5px);opacity:.55}40%{transform:translateY(-2px);opacity:1}}
@keyframes preview-stop{0%,65%,100%{transform:scale(1);opacity:1}25%{transform:scale(1.15);opacity:.55}40%{transform:scale(1.03);opacity:1}}
@keyframes preview-route{0%,100%{stroke-dashoffset:0}45%,55%{stroke-dashoffset:240}}
@keyframes preview-schulte{0%,65%,100%{transform:scale(1)}30%{fill:#ed7543;transform:scale(1.25)}}
@keyframes preview-radar{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.2;transform:scale(.8)}70%{opacity:1;transform:scale(1.15)}}
@keyframes preview-answer{0%,15%,100%{opacity:0;transform:translateY(3px)}30%,75%{opacity:1;transform:translateY(0)}}
@keyframes preview-train-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-90px)}}
@keyframes preview-train-right{0%,100%{transform:translateX(0)}50%{transform:translateX(53px)}}
@keyframes preview-jet{0%,100%{transform:translate(0,0)}50%{transform:translate(-37px,-4px)}}
@keyframes preview-seaplane{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-14px)}}
@keyframes preview-helicopter{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-5px)}}
@keyframes preview-parcel{0%,100%{transform:translateY(0)}50%{transform:translateY(-62px)}}
@keyframes preview-dash{to{stroke-dashoffset:-28}}
@keyframes preview-target{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx),var(--dy))}}
@keyframes preview-vanish{0%,20%,100%{opacity:1;transform:rotate(-3deg) translateY(0)}40%,70%{opacity:0;transform:rotate(-3deg) translateY(5px)}}
@keyframes preview-question{0%,100%{transform:rotate(7deg)}40%{transform:rotate(-5deg) scale(1.06)}}
@keyframes preview-cell{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.3;transform:scale(.87)}}
@keyframes preview-word{0%,20%,100%{opacity:1;transform:translate(-50%,-50%)}40%,65%{opacity:0;transform:translate(-50%,calc(-50% - 5px))}}
@media(prefers-reduced-motion:reduce){.exercise-card,.exercise-art *{animation:none!important;transition:none!important}}
