/* footer-dusk — animated campus scene at the top of the site footer (focusEDU whimsy pass).
   Scoped under .fd-  · transform/opacity only · pauses offscreen (footer-dusk.js)
   · prefers-reduced-motion shows one composed still frame. */
.fd-scene{position:relative;display:block;width:100%;height:210px;overflow:hidden;contain:paint;
  background:#19355c;pointer-events:none;user-select:none;
  --fx:1770;--x0:1300;--span:940}
.fd-svg{position:absolute;left:50%;bottom:0;display:block;height:100%;width:auto;max-width:none;aspect-ratio:32/3;
  transform:translateX(calc(var(--fx) / -32 * 1%))}
@media (min-width:640px){.fd-scene{height:clamp(230px,calc(12vw + 90px),300px);--fx:1640;--x0:600;--span:2100}}
@media (min-width:1024px){.fd-scene{--fx:1580;--x0:-80;--span:3360}}
@media (min-width:3000px){.fd-scene{--fx:1600}.fd-svg{min-width:100%}}

/* ---------- walkers: one shared gait, each figure sets --t (cycle s), --spd (units/s), --ph (phase) */
.fd-w{transform:translateX(calc(var(--rx) * 1px));animation:fd-walk linear infinite;
  animation-duration:calc(var(--span) / var(--spd) * 1s);
  animation-delay:calc(var(--span) / var(--spd) * var(--ph) * -1s)}
.fd-w.fd-l{animation-direction:reverse}
@keyframes fd-walk{from{transform:translateX(calc(var(--x0) * 1px))}to{transform:translateX(calc((var(--x0) + var(--span)) * 1px))}}
/* still-frame positions (reduced motion) — mobile first */
.fd-w1{--rx:1590}.fd-w2{--rx:1905}.fd-w3{--rx:1450}.fd-w5{--rx:1700}.fd-w6{--rx:2020}.fd-w7{--rx:1530}
@media (max-width:639.98px){.fd-w3,.fd-w6,.fd-w7{display:none}}
@media (min-width:640px){.fd-w1{--rx:1150}.fd-w2{--rx:1990}.fd-w3{--rx:1500}.fd-w5{--rx:2260}.fd-w6{--rx:1880}.fd-w7{--rx:960}}

.fd-th{transform-origin:0 -25px;transform:rotate(-15deg);animation:fd-th calc(var(--t) * 1s) infinite}
.fd-th.fd-f{transform:rotate(14deg)}
.fd-sh{transform-origin:0 -12.5px;transform:rotate(4deg);animation:fd-sh calc(var(--t) * 1s) linear infinite}
.fd-sh.fd-f{transform:rotate(26deg)}
.fd-ua{transform-origin:.2px -40.5px;transform:rotate(12deg);animation:fd-ua calc(var(--t) * 1s) ease-in-out infinite}
.fd-ua.fd-f{transform:rotate(-12deg)}
.fd-fa{transform-origin:.2px -33.4px;transform:rotate(-16deg);animation:fd-fa calc(var(--t) * 1s) ease-in-out infinite}
.fd-f{animation-delay:calc(var(--t) * -.5s)}
.fd-bob{animation:fd-bob calc(var(--t) * 1s) ease-in-out infinite}
.fd-lag,.fd-lag .fd-n{animation-delay:calc(var(--t) * -.3s)}
.fd-lag .fd-f{animation-delay:calc(var(--t) * -.8s)}
.fd-talk{transform-origin:.2px -33.4px;transform:rotate(-70deg);animation:fd-talk 6s ease-in-out infinite}
.fd-bag{transform-origin:-4.2px -26px;animation:fd-bag calc(var(--t) * 1s) ease-in-out infinite}
@keyframes fd-th{0%{transform:rotate(-20deg);animation-timing-function:linear}
  50%{transform:rotate(20deg);animation-timing-function:ease-in-out}100%{transform:rotate(-20deg)}}
@keyframes fd-sh{0%{transform:rotate(3deg)}15%{transform:rotate(9deg)}35%{transform:rotate(3deg)}50%{transform:rotate(10deg)}
  64%{transform:rotate(50deg)}82%{transform:rotate(22deg)}94%{transform:rotate(2deg)}100%{transform:rotate(3deg)}}
@keyframes fd-ua{0%,100%{transform:rotate(17deg)}50%{transform:rotate(-17deg)}}
@keyframes fd-fa{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-34deg)}}
@keyframes fd-bob{0%,50%,100%{transform:translateY(1.3px)}25%,75%{transform:translateY(-.3px)}}
@keyframes fd-talk{0%,28%{transform:rotate(-16deg)}38%{transform:rotate(-78deg)}46%{transform:rotate(-60deg)}
  55%{transform:rotate(-82deg)}65%{transform:rotate(-64deg)}76%,100%{transform:rotate(-16deg)}}
@keyframes fd-bag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* cyclist */
.fd-spin{animation:fd-spin .66s linear infinite}
.fd-crank{animation:fd-spin calc(var(--t) * 1s) linear infinite}
@keyframes fd-spin{to{transform:rotate(360deg)}}
@keyframes fd-bth-n{0.00%{transform:rotate(-65.0deg)} 4.17%{transform:rotate(-66.8deg)} 8.33%{transform:rotate(-66.9deg)} 12.50%{transform:rotate(-65.5deg)} 16.67%{transform:rotate(-62.7deg)} 20.83%{transform:rotate(-58.6deg)} 25.00%{transform:rotate(-53.7deg)} 29.17%{transform:rotate(-48.0deg)} 33.33%{transform:rotate(-42.0deg)} 37.50%{transform:rotate(-36.2deg)} 41.67%{transform:rotate(-31.1deg)} 45.83%{transform:rotate(-27.5deg)} 50.00%{transform:rotate(-26.1deg)} 54.17%{transform:rotate(-26.6deg)} 58.33%{transform:rotate(-28.1deg)} 62.50%{transform:rotate(-30.5deg)} 66.67%{transform:rotate(-33.3deg)} 70.83%{transform:rotate(-36.6deg)} 75.00%{transform:rotate(-40.3deg)} 79.17%{transform:rotate(-44.4deg)} 83.33%{transform:rotate(-48.8deg)} 87.50%{transform:rotate(-53.4deg)} 91.67%{transform:rotate(-58.0deg)} 95.83%{transform:rotate(-62.0deg)} 100.00%{transform:rotate(-65.0deg)}}
@keyframes fd-bsh-n{0.00%{transform:rotate(96.7deg)} 4.17%{transform:rotate(93.8deg)} 8.33%{transform:rotate(89.1deg)} 12.50%{transform:rotate(83.0deg)} 16.67%{transform:rotate(75.8deg)} 20.83%{transform:rotate(67.7deg)} 25.00%{transform:rotate(59.2deg)} 29.17%{transform:rotate(50.4deg)} 33.33%{transform:rotate(41.9deg)} 37.50%{transform:rotate(34.2deg)} 41.67%{transform:rotate(28.5deg)} 45.83%{transform:rotate(26.2deg)} 50.00%{transform:rotate(28.3deg)} 54.17%{transform:rotate(33.9deg)} 58.33%{transform:rotate(41.6deg)} 62.50%{transform:rotate(50.1deg)} 66.67%{transform:rotate(58.8deg)} 70.83%{transform:rotate(67.4deg)} 75.00%{transform:rotate(75.5deg)} 79.17%{transform:rotate(82.7deg)} 83.33%{transform:rotate(88.9deg)} 87.50%{transform:rotate(93.6deg)} 91.67%{transform:rotate(96.6deg)} 95.83%{transform:rotate(97.7deg)} 100.00%{transform:rotate(96.7deg)}}
.fd-bth-n{transform-origin:-7.0px -31.0px;transform:rotate(-65.5deg);animation:fd-bth-n calc(var(--t)*1s) linear infinite}
.fd-bsh-n{transform-origin:-7.0px -17.4px;transform:rotate(83.0deg);animation:fd-bsh-n calc(var(--t)*1s) linear infinite}
@keyframes fd-bth-f{0.00%{transform:rotate(-26.1deg)} 4.17%{transform:rotate(-26.6deg)} 8.33%{transform:rotate(-28.1deg)} 12.50%{transform:rotate(-30.5deg)} 16.67%{transform:rotate(-33.3deg)} 20.83%{transform:rotate(-36.6deg)} 25.00%{transform:rotate(-40.3deg)} 29.17%{transform:rotate(-44.4deg)} 33.33%{transform:rotate(-48.8deg)} 37.50%{transform:rotate(-53.4deg)} 41.67%{transform:rotate(-58.0deg)} 45.83%{transform:rotate(-62.0deg)} 50.00%{transform:rotate(-65.0deg)} 54.17%{transform:rotate(-66.8deg)} 58.33%{transform:rotate(-66.9deg)} 62.50%{transform:rotate(-65.5deg)} 66.67%{transform:rotate(-62.7deg)} 70.83%{transform:rotate(-58.6deg)} 75.00%{transform:rotate(-53.7deg)} 79.17%{transform:rotate(-48.0deg)} 83.33%{transform:rotate(-42.0deg)} 87.50%{transform:rotate(-36.2deg)} 91.67%{transform:rotate(-31.1deg)} 95.83%{transform:rotate(-27.5deg)} 100.00%{transform:rotate(-26.1deg)}}
@keyframes fd-bsh-f{0.00%{transform:rotate(28.3deg)} 4.17%{transform:rotate(33.9deg)} 8.33%{transform:rotate(41.6deg)} 12.50%{transform:rotate(50.1deg)} 16.67%{transform:rotate(58.8deg)} 20.83%{transform:rotate(67.4deg)} 25.00%{transform:rotate(75.5deg)} 29.17%{transform:rotate(82.7deg)} 33.33%{transform:rotate(88.9deg)} 37.50%{transform:rotate(93.6deg)} 41.67%{transform:rotate(96.6deg)} 45.83%{transform:rotate(97.7deg)} 50.00%{transform:rotate(96.7deg)} 54.17%{transform:rotate(93.8deg)} 58.33%{transform:rotate(89.1deg)} 62.50%{transform:rotate(83.0deg)} 66.67%{transform:rotate(75.8deg)} 70.83%{transform:rotate(67.7deg)} 75.00%{transform:rotate(59.2deg)} 79.17%{transform:rotate(50.4deg)} 83.33%{transform:rotate(41.9deg)} 87.50%{transform:rotate(34.2deg)} 91.67%{transform:rotate(28.5deg)} 95.83%{transform:rotate(26.2deg)} 100.00%{transform:rotate(28.3deg)}}
.fd-bth-f{transform-origin:-7.0px -31.0px;transform:rotate(-30.5deg);animation:fd-bth-f calc(var(--t)*1s) linear infinite}
.fd-bsh-f{transform-origin:-7.0px -17.4px;transform:rotate(50.1deg);animation:fd-bsh-f calc(var(--t)*1s) linear infinite}

/* ---------- lamps come on in sequence, then stay lit */
.fd-lon{animation:fd-lon 1.6s ease-out both;animation-delay:var(--ld)}
@keyframes fd-lon{0%{opacity:0}30%{opacity:.75}45%{opacity:.45}100%{opacity:1}}

/* ---------- sky */
.fd-tw{animation:fd-tw var(--d) ease-in-out infinite;animation-delay:var(--o)}
@keyframes fd-tw{0%,100%{opacity:.95}50%{opacity:.3}}
.fd-flag{transform-origin:1320.6px 8.4px;animation:fd-flag 3.4s ease-in-out infinite}
@keyframes fd-flag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.84) skewY(5deg)}}

/* ---------- the presentation (12 s: three slides, 4 s each) */
.fd-sl{opacity:0;animation:fd-sl 12s linear infinite}
.fd-sa{opacity:1;animation-delay:-.34s}
.fd-sb{animation-delay:-8.34s}
.fd-sc{animation-delay:-4.34s}
@keyframes fd-sl{0%{opacity:0}2.8%,33.3%{opacity:1}36.1%,100%{opacity:0}}
.fd-bar{animation:fd-bar 12s ease-out infinite;
  animation-delay:calc(var(--i) * .12s - 12.34s)}
@keyframes fd-bar{0%,3.5%{transform:scaleY(.06)}10%,60%{transform:scaleY(1)}60.1%,100%{transform:scaleY(.06)}}
/* the line is revealed by a slide-coloured cover that shrinks toward the right (transform only) */
.fd-wipe{transform-origin:116px 0;transform:scaleX(0);animation:fd-wipe 12s ease-in-out infinite;animation-delay:-8.34s}
@keyframes fd-wipe{0%,3.5%{transform:scaleX(1)}14%,60%{transform:scaleX(0)}60.1%,100%{transform:scaleX(1)}}
.fd-area{animation:fd-area 12s ease-in-out infinite;animation-delay:-8.34s}
@keyframes fd-area{0%,8%{opacity:0}16%,60%{opacity:1}60.1%,100%{opacity:0}}
.fd-dot{animation:fd-pop 12s ease-out infinite;
  animation-delay:calc(var(--dd) - 20.34s)}  /* each dot pops as the wipe reaches it */
@keyframes fd-pop{0%,4%{transform:scale(0)}7%,60%{transform:scale(1)}60.1%,100%{transform:scale(0)}}
.fd-org{animation:fd-org 12s ease-out infinite;animation-delay:calc(var(--i) * .25s - 16.34s)}
@keyframes fd-org{0%,4%{opacity:0}7%,60%{opacity:1}60.1%,100%{opacity:0}}

/* consultant: points to each new slide, then turns back to the table */
.fd-parm{transform-origin:130.6px 46px;transform:rotate(95deg);animation:fd-point 4s ease-in-out infinite}
.fd-pfa{transform-origin:130.6px 58.6px;transform:rotate(4deg);animation:fd-pfa 4s ease-in-out infinite}
.fd-gfa{transform-origin:142.8px 58.4px;transform:rotate(16deg);animation:fd-gfa 4s ease-in-out infinite}
.fd-chead{transform-origin:135.6px 41px;transform:rotate(-6deg);animation:fd-chead 4s ease-in-out infinite}
@keyframes fd-point{0%{transform:rotate(20deg)}11%{transform:rotate(95deg)}46%{transform:rotate(91deg)}60%,100%{transform:rotate(20deg)}}
@keyframes fd-pfa{0%{transform:rotate(-14deg)}11%,46%{transform:rotate(4deg)}60%,100%{transform:rotate(-14deg)}}
@keyframes fd-gfa{0%,48%{transform:rotate(16deg)}62%{transform:rotate(-14deg)}72%{transform:rotate(2deg)}84%{transform:rotate(-12deg)}100%{transform:rotate(16deg)}}
@keyframes fd-chead{0%{transform:rotate(3deg)}11%,46%{transform:rotate(-6deg)}60%,100%{transform:rotate(3deg)}}

/* faculty */
.fd-nod{animation:fd-nod 6s ease-in-out infinite}
@keyframes fd-nod{0%,38%{transform:translateY(0)}45%{transform:translateY(1.9px)}52%{transform:translateY(0)}
  59%{transform:translateY(1.9px)}66%,100%{transform:translateY(0)}}
.fd-tilt{transform-origin:206px 63px;animation:fd-tilt 9s ease-in-out infinite}
@keyframes fd-tilt{0%,30%{transform:rotate(0)}40%,70%{transform:rotate(5deg)}80%,100%{transform:rotate(0)}}
.fd-note{transform-origin:233px 60px;transform:rotate(-9deg);animation:fd-look 9s ease-in-out infinite}
@keyframes fd-look{0%,55%{transform:rotate(-9deg)}62%,90%{transform:rotate(1deg)}97%,100%{transform:rotate(-9deg)}}
.fd-pen{animation:fd-pen 9s linear infinite}
@keyframes fd-pen{0%,4%,8%,12%,16%,20%,24%,28%,32%,36%,40%,44%,48%,52%{transform:translate(0,0)}
  2%,10%,18%,26%,34%,42%,50%{transform:translate(-1.3px,.2px)}6%,14%,22%,30%,38%,46%{transform:translate(-2.4px,-.1px)}
  56%,96%{transform:translate(1.4px,-1.6px)}100%{transform:translate(0,0)}}

/* ---------- pause offscreen / reduced motion */
.fd-scene.fd-pause *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.fd-scene *{animation:none!important}}