/* Lightweight SVG motion. Every illustration stays legible with motion disabled. */
.motion-icon{display:block;width:32px;height:32px;flex-shrink:0;overflow:visible}
.motion-icon .icon-accent{color:inherit}
.motion-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:49px;height:49px;border-radius:12px;background:#e8eee5;color:var(--ink);transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.motion-badge .motion-icon{width:29px;height:29px}
.work-choice>span.motion-badge{background:#ffffff0d;color:#f4d835;border:1px solid #a8ccc52e;margin:0!important}
.work-choice[aria-pressed=true]>span.motion-badge{background:var(--yellow);color:var(--ink);border-color:transparent;box-shadow:0 4px 0 #073c4210}
.work-choice.is-route-preview{border-color:var(--yellow)}
.work-choice.is-route-preview>span.motion-badge{background:var(--yellow);color:var(--ink)}
.example-switcher .motion-icon{width:25px;height:25px}
.evidence-header .motion-icon{width:25px;height:25px}
.case-title-with-icon{display:flex;align-items:center;gap:13px}
.case-title-with-icon>span:last-child{min-width:0}
.case-title-with-icon .motion-badge{background:var(--yellow);width:52px;height:52px}
.problem-option>.motion-badge{width:45px;height:45px;margin:0;background:#e4ebe1}
.problem-option:focus-visible>.motion-badge{background:var(--yellow);box-shadow:0 4px 0 #073c4210}
.map-sources>div{border:1px solid transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.map-sources .motion-icon{width:27px;height:27px;color:#5c7b75}
.map-sources>div.is-route-active{background:#fff9d7;border-color:var(--yellow);box-shadow:inset -3px 0 var(--yellow)}
.map-sources>div.is-route-active .motion-icon{color:var(--ink)}
.map-junction .map-connections{stroke:#618b8a;stroke-width:1.2}
.map-connections path{opacity:.45;transition:stroke .25s ease,opacity .25s ease}
.map-connections path.is-route-active{opacity:1;stroke:var(--yellow);stroke-width:2}
.hero-icon-scene{display:flex;align-items:center;position:relative;height:62px;margin:0 0 14px;padding-inline:13px 5px;gap:0;direction:rtl}
.scene-file{display:grid;place-items:center;background:#fffcdf;width:47px;height:51px;border:1px solid #073c4233;border-radius:6px;box-shadow:0 3px 0 #073c4210}
.scene-file .motion-icon{width:28px;height:28px}
.scene-file-back{transform:rotate(10deg);margin-inline-end:-29px;position:relative;z-index:0;align-self:flex-start}
.scene-file-front{transform:rotate(-7deg);position:relative;z-index:1;margin-top:8px}
.scene-trail{display:flex;align-items:center;gap:7px;flex:1;margin-inline:17px;position:relative}
.scene-trail:before{content:"";position:absolute;inset-inline:0;top:50%;border-top:1px dashed #073c4250}
.scene-trail i{display:block;width:5px;height:5px;background:var(--ink);border-radius:50%;position:relative;opacity:.6}
.scene-trail i:nth-child(2){margin-inline:auto}
.scene-destination{display:grid;place-items:center;width:53px;height:53px;background:var(--ink);color:var(--yellow);border-radius:50%}
.scene-destination .motion-icon{width:31px;height:31px}
.scene-after .scene-file-back{transform:translateX(4px) rotate(0);background:#e4ecdc}
.scene-after .scene-file-front{transform:rotate(0);margin-top:5px}
.scene-after .scene-trail:before{border-top-style:solid}
.scene-after .scene-destination{border-radius:12px;background:#fffcec;color:var(--ink);box-shadow:0 3px 0 #073c4220}
.calculator-disclosure>summary>.motion-badge{background:var(--yellow)}

@media(hover:hover){
  .problem-option:hover>.motion-badge{background:var(--yellow);box-shadow:0 4px 0 #073c4210}
}
@media(prefers-reduced-motion:no-preference){
  .icon-playing .icon-draw{animation:icon-stroke .68s ease both}
  .icon-playing .icon-shift{animation:icon-nudge .65s cubic-bezier(.2,.7,.3,1) both}
  .icon-playing [data-icon-kind=hassala] .icon-accent{animation:icon-check-pop .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:24px 23px}
  .icon-playing .icon-bar{animation:icon-bar-grow .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:16px 24px}
  .icon-playing .icon-bar:nth-child(2){animation-delay:70ms}
  .icon-playing .icon-bar:nth-child(3){animation-delay:140ms}
  .icon-playing .icon-hand{animation:icon-clock .8s ease both;transform-origin:16px 16px}
  .icon-playing [data-icon-kind=wholesale] .icon-core{animation:icon-tag .7s ease both;transform-origin:9px 9px}
  .hero-reality-state:not([hidden]) .scene-file-front{animation:scene-sort .7s cubic-bezier(.2,.7,.3,1)}
  .hero-reality-state:not([hidden]) .scene-trail i{animation:scene-signal .8s ease both}
  .hero-reality-state:not([hidden]) .scene-trail i:nth-child(2){animation-delay:.12s}
  .hero-reality-state:not([hidden]) .scene-trail i:nth-child(3){animation-delay:.24s}
  .hero-reality-state:not([hidden]) .scene-destination .icon-hand{animation:icon-clock .9s ease both;transform-origin:16px 16px}
  .hero-reality-state:not([hidden]) .scene-destination .icon-draw{animation:icon-stroke .8s .15s ease both}
  .map-connections path.is-route-active{animation:route-arrive .65s ease both}
}
@keyframes icon-stroke{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:.4}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}
@keyframes icon-nudge{0%{transform:translateY(0)}35%{transform:translateY(-2.5px)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
@keyframes icon-check-pop{0%{transform:scale(.65)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes icon-bar-grow{0%{transform:scaleY(.35)}75%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
@keyframes icon-clock{0%{transform:rotate(-55deg)}75%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@keyframes icon-tag{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}65%{transform:rotate(4deg)}}
@keyframes scene-sort{from{translate:11px 4px;opacity:.5}to{translate:0 0;opacity:1}}
@keyframes scene-signal{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.6);opacity:1}100%{transform:scale(1);opacity:.6}}
@keyframes route-arrive{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:.4}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}
@media(min-width:901px) and (max-width:1200px){.work-choice>.motion-badge{width:37px;height:40px}.work-choice>.motion-badge .motion-icon{width:26px;height:26px}.work-choice>.icon{display:none}.map-sources .motion-icon{width:22px;height:22px}}
@media(max-width:650px){
  .work-choice{position:relative;flex-wrap:wrap;align-content:center;gap:8px}
  .work-choice>.motion-badge{width:32px;height:32px;border-radius:8px}
  .work-choice>.motion-badge .motion-icon{width:23px;height:23px}
  .work-choice>.choice-info{flex-basis:100%;order:2}
  .work-choice>.icon{margin-inline-start:auto}
  .map-sources .motion-icon{width:26px;height:26px}
  .map-sources>div,.work-choice{min-height:128px}
  .map-junction{background:repeating-linear-gradient(to bottom,transparent 0px,transparent 63px,#accfca 63px,#accfca 64px,transparent 64px,transparent 138px)}
  .example-switcher .motion-icon{width:21px;height:21px}
  .evidence-header .motion-icon{width:21px;height:21px}
  .case-title-with-icon{gap:11px}
  .case-title-with-icon .motion-badge{width:42px;height:44px;border-radius:10px}
  .case-title-with-icon .motion-icon{width:27px;height:27px}
  .problem-option>.motion-badge{width:39px;height:39px;border-radius:9px}
  .problem-option>.motion-badge .motion-icon{width:26px;height:26px}
  .hero-icon-scene{height:57px;margin-bottom:14px}
  .calculator-disclosure>summary>.motion-badge{width:40px;height:40px}
}
@media(max-width:360px){.example-switcher .motion-icon{width:18px;height:18px}.case-title-with-icon{gap:8px}.case-title-with-icon .motion-badge{width:36px;height:40px}.work-choice>.icon{width:13px}}
@media(prefers-reduced-motion:reduce){
  .motion-icon *,.hero-icon-scene *,.map-connections path{animation:none!important;transition:none!important}
  .motion-icon .icon-draw,.map-connections path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .motion-badge,.map-sources>div{transition:none!important}
}
