/* Hi Auto case study: animated Figma frames (built from Figma frame 1766:7223).
   Each .ha-stage holds an .ha-art drawn at the Figma frame's own pixel size;
   hi-auto-anim.js scales it to the box. */
@font-face{font-family:'HA Inter';src:url('fonts/Inter-HiAuto.woff2') format('woff2');font-weight:100 900;font-display:swap}

.ha-stage{--sky:#e7eefb;--mist:#c4d1e8;--purple:#5729ff;--lime:#b0ff39;--orange:#ff5b09;
  position:relative;width:100%;aspect-ratio:var(--sw)/var(--sh);overflow:hidden;font-family:'HA Inter',Inter,system-ui,sans-serif;font-weight:700;color:#000;line-height:1.2}
.ha-art{position:absolute;left:0;top:0;width:calc(var(--sw)*1px);height:calc(var(--sh)*1px);transform-origin:0 0;transform:scale(var(--k,1))}
.ha-art *{box-sizing:border-box;margin:0}
.ha-art p,.ha-art span,.ha-art div{font-family:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;text-transform:none;max-width:none;padding:0}
.ha-art p{line-height:1.2}
.ha-art .a{position:absolute}
.ha-art .a>img,.ha-art img.a{display:block;max-width:none}
.ha-art .a>img{position:absolute;inset:0;width:100%;height:100%}
.ha-art .fx{transform:scaleX(-1)}
.ha-art .cc{display:flex;align-items:center;justify-content:center}
.ha-art .a.cc>img{position:static;inset:auto}
.ha-art .maru{font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1}
.ha-art .bub{background:#fff}
.ha-art .nw{white-space:nowrap}

/* ---------- idle motion ---------- */
@keyframes ha-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ha-bob-s{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ha-peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ha-float{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(0,-7px) rotate(-1.5deg)}66%{transform:translate(0,3px) rotate(1deg)}}
@keyframes ha-shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-2px) rotate(-2deg)}40%{transform:translateX(2px) rotate(2deg)}60%{transform:translateX(-1.5px) rotate(-1deg)}80%{transform:translateX(1px) rotate(1deg)}}
@keyframes ha-wob{0%,100%{transform:scale(1,1)}30%{transform:scale(1.03,.97)}60%{transform:scale(.98,1.02)}}
@keyframes ha-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ha-spin{to{transform:rotate(360deg)}}
@keyframes ha-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes ha-wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.ha-bob{animation:ha-bob 3.2s ease-in-out infinite}
.ha-bob-s{animation:ha-bob-s 2.6s ease-in-out infinite}
.ha-peek{animation:ha-peek 3.4s ease-in-out infinite}
.ha-float{animation:ha-float 5s ease-in-out infinite}
.ha-shake{animation:ha-shake 1.3s ease-in-out infinite;transform-origin:50% 100%}
.ha-wob{animation:ha-wob 3.4s ease-in-out infinite;transform-origin:50% 100%}
.ha-blink{animation:ha-blink 4.2s infinite;transform-origin:center}
/* eye dots blink shut into a round-capped stroke, same language as the brows */
.ha-eye{animation-duration:4.2s}
.ha-eye>img{animation:ha-eye-dot steps(1,end) infinite;animation-duration:inherit;animation-delay:inherit}
.ha-eye::after{content:"";position:absolute;left:-22%;right:-22%;top:50%;height:3.2px;margin-top:-1.6px;border-radius:3px;background:#000;opacity:0;
  animation:ha-eye-line steps(1,end) infinite;animation-duration:inherit;animation-delay:inherit}
/* either a dot or a line, never both: hard switch at the same instant */
@keyframes ha-eye-dot{0%{opacity:1}93%{opacity:0}97%{opacity:1}}
@keyframes ha-eye-line{0%{opacity:0}93%{opacity:1}97%{opacity:0}}
.ha-spin{animation:ha-spin 14s linear infinite}
.ha-wiggle{animation:ha-wiggle 3.5s ease-in-out infinite}

/* ---------- entrances (run when the stage scrolls in: .ha-in) ---------- */
.ha-pop{opacity:0;transform:scale(.4);transition:opacity .4s,transform .8s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
.ha-in .ha-pop{opacity:1;transform:none}
.ha-grow{transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
.ha-in .ha-grow{transform:none}
.ha-growx{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.ha-in .ha-growx{transform:none}
.ha-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.ha-in .ha-wipe{clip-path:inset(0 0 0 0)}
.ha-rise{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.ha-in .ha-rise{opacity:1;transform:none}

/* walk in from the left and stop (Employee Training) */
.ha-walk{transform:translateX(var(--from))}
.ha-in .ha-walk{transform:none;transition:transform var(--dur) cubic-bezier(.6,0,.3,1) var(--wd)}   /* drive in and brake, like the traffic row */
@keyframes ha-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}


/* paused while off screen */
.ha-stage:not(.ha-live) *,.ha-stage:not(.ha-live) *::after,.ha-stage:not(.ha-live) *::before{animation-play-state:paused!important}   /* pseudo-elements too, or the blink line drifts out of sync with the dot */

/* ?still freezes everything (clean screenshots) */
.ha-still .ha-stage *,.ha-still .ha-stage *::after{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  .ha-stage *{animation:none!important;transition:none!important}
  .ha-pop,.ha-grow,.ha-growx,.ha-rise{opacity:1!important;transform:none!important}
  .ha-wipe{clip-path:none!important}
}

/* ---------- 17: Better / Faster / Smarter traffic ---------- */
.ha-stage .ha-pill{display:block;flex:none;padding:9.04px 42.72px 13.97px;border-radius:50.94px 50.94px 50.94px 0;font-size:60.8px;line-height:1.3;letter-spacing:-.608px;white-space:nowrap;will-change:transform}
.ha-stage .ha-arr{display:block;flex:none;width:103.48px;height:101.88px;will-change:transform}

/* ---------- 14: checklist ticks on, one row at a time ---------- */
.ha-ck{position:absolute;left:0;top:var(--y);width:500px;height:28px}
.ha-ck i{position:absolute;left:109.53px;top:4.21px;width:385.87px;height:18.7px;background:#e7eefb;border-radius:14.8px}
.ha-ck b{position:absolute;left:71.31px;top:0;width:27.12px;height:27.12px;background:#b0ff39;border-radius:14.8px}
.ha-stage .ha-ck img{position:absolute;left:75.52px;top:4.21px;width:18.7px;height:18.7px}
.ha-stage .ha-ck b,.ha-stage .ha-ck img{animation:ha-tick 7s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes ha-tick{0%,6%{transform:scale(0)}12%{transform:scale(1.25)}16%,86%{transform:scale(1)}92%,100%{transform:scale(0)}}

/* ---------- 22: pie fills to 96% accuracy ---------- */
@property --ha-p{syntax:'<number>';inherits:false;initial-value:0}
@property --ha-q{syntax:'<number>';inherits:false;initial-value:0}
.ha-pie{border-radius:50%;background:conic-gradient(#5729ff 0 calc(var(--ha-p)*1%),#c1ff1f 0 calc((var(--ha-p) + var(--ha-q))*1%),transparent 0)}
.ha-in .ha-pie{--ha-p:96;--ha-q:4;transition:--ha-p 1.8s cubic-bezier(.22,1,.36,1) .4s,--ha-q .5s ease-out 2.1s}

/* ---------- 23b: performance bars fill ---------- */
.ha-fill{width:var(--h);transition:width 1.6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.ha-in .ha-fill{width:var(--w)}

/* ---------- 26a: pie fills to 93% / 26b: pins land one by one, then the summary bubble ---------- */
.ha-pie93{border-radius:50%;background:conic-gradient(#5729ff 0 calc(var(--ha-p)*1%),#d9d9d9 0)}
.ha-in .ha-pie93{--ha-p:93;transition:--ha-p 1.6s cubic-bezier(.22,1,.36,1) .3s}
.ha-pin{opacity:0;transform:translateY(-36px);transition:opacity .25s,transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
.ha-in .ha-pin{opacity:1;transform:none}

/* frame-by-frame mascots (27a/27b): hold on frame 1 until every frame is decoded, so nothing flashes empty */
.project-media-animated:not(.ha-frames-ready) .frame-animation{animation-play-state:paused!important}

/* ---------- 265: BEEP! blinks twice, left then right ---------- */
@keyframes ha-beep{0%{opacity:0}4%{opacity:1}10%{opacity:0}16%{opacity:1}22%,100%{opacity:0}}
/* starts the moment the section is on screen: blink blink, pause, other side */
.ha-beep{opacity:0}
.ha-in .ha-beep{animation:ha-beep 3s steps(1,end) infinite}

/* ---------- 7: the small Better / Faster / Smarter row inside the middle post ---------- */
.ha-stage .ha-pill-s{display:block;flex:none;height:25.9px;padding:0 14.4px;line-height:25.9px;border-radius:12.95px 12.95px 12.95px 0;font-size:15.47px;letter-spacing:-.15px;white-space:nowrap;color:#000;will-change:transform}
.ha-stage .ha-arr-s{display:block;flex:none;width:26.3px;height:25.9px;will-change:transform}

/* 17: the word row runs past the card to the edge of the screen (page bg is white too) */
html,body{overflow-x:clip}
.ha-stage.ha-bleed{overflow:visible}
.project-media:has(.ha-bleed){overflow:visible}

/* ---------- 10: hi auto is there from the start; the construction (frame, grid, robot outline, x1) builds around it, clears, repeats ---------- */
@keyframes ha10-frame{0%,6.67%{stroke-dashoffset:1}21.11%,84.44%{stroke-dashoffset:0}92.22%,100%{stroke-dashoffset:1}}
@keyframes ha10-v0{0%,12.22%{transform:scaleY(0)}23.33%,84.44%{transform:scaleY(1)}92.22%,100%{transform:scaleY(0)}}
@keyframes ha10-v1{0%,13.89%{transform:scaleY(0)}25.00%,84.44%{transform:scaleY(1)}92.22%,100%{transform:scaleY(0)}}
@keyframes ha10-v2{0%,15.56%{transform:scaleY(0)}26.67%,84.44%{transform:scaleY(1)}92.22%,100%{transform:scaleY(0)}}
@keyframes ha10-v3{0%,17.22%{transform:scaleY(0)}28.33%,84.44%{transform:scaleY(1)}92.22%,100%{transform:scaleY(0)}}
@keyframes ha10-h0{0%,15.56%{transform:scaleX(0)}27.78%,84.44%{transform:scaleX(1)}92.22%,100%{transform:scaleX(0)}}
@keyframes ha10-h1{0%,17.22%{transform:scaleX(0)}29.44%,84.44%{transform:scaleX(1)}92.22%,100%{transform:scaleX(0)}}
@keyframes ha10-bot{0%,26.67%{stroke-dashoffset:1}41.11%,84.44%{stroke-dashoffset:0}92.22%,100%{stroke-dashoffset:1}}
@keyframes ha10-x1{0%,38.89%{opacity:0}43.33%,84.44%{opacity:1}92.22%,100%{opacity:0}}
.ha-in .ha10-frame{animation:ha10-frame 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-v0{animation:ha10-v0 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-v1{animation:ha10-v1 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-v2{animation:ha10-v2 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-v3{animation:ha10-v3 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-h0{animation:ha10-h0 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-h1{animation:ha10-h1 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-bot{animation:ha10-bot 9.0s cubic-bezier(.22,1,.36,1) infinite}
.ha-in .ha10-x1{animation:ha10-x1 9.0s cubic-bezier(.22,1,.36,1) infinite}

/* ---------- 1a: the word row drives in once, front car first, and parks ---------- */
.ha-drive{transform:translateX(var(--from))}
.ha-in .ha-drive{transform:none;transition:transform 1.4s cubic-bezier(.6,0,.3,1) var(--d)}

/* ---------- 20: people photos open inside the sentence (live text, matched to the original image) ---------- */
.ha-art .ha-pp{left:55.5px;top:146px;width:1300px;font-size:49.5px;line-height:61.5px;letter-spacing:.35px;color:#000;white-space:nowrap}
.ha-slot{position:relative;display:inline-block;vertical-align:baseline;height:36px;width:0;margin:0;transition:width 1.2s cubic-bezier(.65,0,.35,1),margin 1.2s cubic-bezier(.65,0,.35,1);transition-delay:var(--d)}
.ha-slot .ph{position:absolute;left:0;width:var(--w);height:var(--h);overflow:hidden;border-radius:30px;transform:scale(.04);opacity:0;
  transition:transform 1.2s cubic-bezier(.65,0,.35,1),opacity .25s;transition-delay:var(--d)}
.ha-stage .ha-slot .ph img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ha-slot.up .ph{bottom:-3px;transform-origin:0 100%}   /* top row grows up and to the right */
.ha-slot.down .ph{top:0;transform-origin:0 0}          /* lower rows grow down and to the right */
.ha-in .ha-slot{width:var(--w);margin:0 0 0 10px}
.ha-in .ha-slot .ph{transform:none;opacity:1}

/* ---------- The Problem: the baby cries, mom leans in (desktop 18 + phone 15a); the Purpose-Built mom (2) leans too ---------- */
@keyframes ha-tear-l{to{stroke-dashoffset:10.8}}
@keyframes ha-tear-r{to{stroke-dashoffset:-10.8}}
.ha-tear-l{animation:ha-tear-l .45s linear infinite}
.ha-tear-r{animation:ha-tear-r .45s linear infinite}
@keyframes ha-sob{0%,100%{transform:scaleY(1)}25%{transform:scaleY(1.22)}50%{transform:scaleY(.9)}75%{transform:scaleY(1.15)}}
.ha-sob{transform-box:fill-box;transform-origin:50% 40%;animation:ha-sob .9s ease-in-out infinite}
@keyframes ha-shudder{0%,100%{transform:translate(0,0)}20%{transform:translate(-.6px,.4px)}40%{transform:translate(.6px,-.3px)}60%{transform:translate(-.4px,.3px)}80%{transform:translate(.4px,0)}}
.ha-shudder{animation:ha-shudder .3s linear infinite}
@keyframes ha-lean{0%,30%,100%{transform:none}45%,70%{transform:translate(5px,3px) rotate(3deg)}}
.ha-mom{transform-origin:640px 400px;animation:ha-lean 3.2s cubic-bezier(.65,0,.35,1) infinite}
.ha-mom2{transform-origin:1200px 760px;animation:ha-lean 3.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ha-brows{0%,40%,100%{transform:none}44%{transform:translateY(-4px)}48%{transform:translateY(0)}52%{transform:translateY(-3px)}56%{transform:none}}
.ha-brows{animation:ha-brows 3.2s ease-out infinite}

/* 3b drive-thru: the car pulls in calm from the right and stops; the baby bursts into tears, mom grows worried brows;
   they drive off left still crying, and the next calm car follows at once */
.ha-dt .ha-dt-clip{overflow:visible!important;clip-path:inset(0 -3000px 0 -3000px)}
@keyframes ha-dt-car{0%{transform:translateX(460px);animation-timing-function:cubic-bezier(.15,.6,.3,1)}18.571%,81.429%{transform:none;animation-timing-function:cubic-bezier(.6,0,.85,.35)}100%{transform:translateX(-490px)}}
.ha-dt .ha-dt-car{animation:ha-dt-car 7.0s infinite}
@keyframes ha-dt-on{0%,21.429%{opacity:0}21.429%,100%{opacity:1}}
@keyframes ha-dt-off{0%,21.429%{opacity:1}21.429%,100%{opacity:0}}
.ha-dt .ha-dt-cry{animation:ha-dt-on 7.0s steps(1,end) infinite}
@keyframes ha-dt-tl{0%,21.429%{stroke-dashoffset:0;animation-timing-function:linear}21.443%{stroke-dashoffset:0;animation-timing-function:linear}100%{stroke-dashoffset:237.6}}
@keyframes ha-dt-tr{0%,21.429%{stroke-dashoffset:0;animation-timing-function:linear}21.443%{stroke-dashoffset:0;animation-timing-function:linear}100%{stroke-dashoffset:-237.6}}
.ha-dt .ha-tear-l{animation:ha-dt-tl 7.0s infinite}.ha-dt .ha-tear-r{animation:ha-dt-tr 7.0s infinite}
@keyframes ha-dt-sob{0%,21.429%{transform:scaleY(1);animation-timing-function:ease-in-out}24.702%{transform:scaleY(1.22);animation-timing-function:ease-in-out}27.976%{transform:scaleY(0.9);animation-timing-function:ease-in-out}31.250%{transform:scaleY(1.15);animation-timing-function:ease-in-out}34.524%{transform:scaleY(1);animation-timing-function:ease-in-out}37.798%{transform:scaleY(1.22);animation-timing-function:ease-in-out}41.071%{transform:scaleY(0.9);animation-timing-function:ease-in-out}44.345%{transform:scaleY(1.15);animation-timing-function:ease-in-out}47.619%{transform:scaleY(1);animation-timing-function:ease-in-out}50.893%{transform:scaleY(1.22);animation-timing-function:ease-in-out}54.167%{transform:scaleY(0.9);animation-timing-function:ease-in-out}57.440%{transform:scaleY(1.15);animation-timing-function:ease-in-out}60.714%{transform:scaleY(1);animation-timing-function:ease-in-out}63.988%{transform:scaleY(1.22);animation-timing-function:ease-in-out}67.262%{transform:scaleY(0.9);animation-timing-function:ease-in-out}70.536%{transform:scaleY(1.15);animation-timing-function:ease-in-out}73.810%{transform:scaleY(1);animation-timing-function:ease-in-out}77.083%{transform:scaleY(1.22);animation-timing-function:ease-in-out}80.357%{transform:scaleY(0.9);animation-timing-function:ease-in-out}83.631%{transform:scaleY(1.15);animation-timing-function:ease-in-out}86.905%{transform:scaleY(1);animation-timing-function:ease-in-out}90.179%{transform:scaleY(1.22);animation-timing-function:ease-in-out}93.452%{transform:scaleY(0.9);animation-timing-function:ease-in-out}96.726%{transform:scaleY(1.15);animation-timing-function:ease-in-out}100.000%{transform:scaleY(1);animation-timing-function:ease-in-out}}
@keyframes ha-dt-shud{0%,21.429%{transform:translate(0px,0px);animation-timing-function:linear}22.302%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}23.175%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}24.048%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}24.921%{transform:translate(0.4px,0px);animation-timing-function:linear}25.794%{transform:translate(0px,0px);animation-timing-function:linear}26.667%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}27.540%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}28.413%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}29.286%{transform:translate(0.4px,0px);animation-timing-function:linear}30.159%{transform:translate(0px,0px);animation-timing-function:linear}31.032%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}31.905%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}32.778%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}33.651%{transform:translate(0.4px,0px);animation-timing-function:linear}34.524%{transform:translate(0px,0px);animation-timing-function:linear}35.397%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}36.270%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}37.143%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}38.016%{transform:translate(0.4px,0px);animation-timing-function:linear}38.889%{transform:translate(0px,0px);animation-timing-function:linear}39.762%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}40.635%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}41.508%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}42.381%{transform:translate(0.4px,0px);animation-timing-function:linear}43.254%{transform:translate(0px,0px);animation-timing-function:linear}44.127%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}45.000%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}45.873%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}46.746%{transform:translate(0.4px,0px);animation-timing-function:linear}47.619%{transform:translate(0px,0px);animation-timing-function:linear}48.492%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}49.365%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}50.238%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}51.111%{transform:translate(0.4px,0px);animation-timing-function:linear}51.984%{transform:translate(0px,0px);animation-timing-function:linear}52.857%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}53.730%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}54.603%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}55.476%{transform:translate(0.4px,0px);animation-timing-function:linear}56.349%{transform:translate(0px,0px);animation-timing-function:linear}57.222%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}58.095%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}58.968%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}59.841%{transform:translate(0.4px,0px);animation-timing-function:linear}60.714%{transform:translate(0px,0px);animation-timing-function:linear}61.587%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}62.460%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}63.333%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}64.206%{transform:translate(0.4px,0px);animation-timing-function:linear}65.079%{transform:translate(0px,0px);animation-timing-function:linear}65.952%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}66.825%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}67.698%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}68.571%{transform:translate(0.4px,0px);animation-timing-function:linear}69.444%{transform:translate(0px,0px);animation-timing-function:linear}70.317%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}71.190%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}72.063%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}72.937%{transform:translate(0.4px,0px);animation-timing-function:linear}73.810%{transform:translate(0px,0px);animation-timing-function:linear}74.683%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}75.556%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}76.429%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}77.302%{transform:translate(0.4px,0px);animation-timing-function:linear}78.175%{transform:translate(0px,0px);animation-timing-function:linear}79.048%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}79.921%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}80.794%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}81.667%{transform:translate(0.4px,0px);animation-timing-function:linear}82.540%{transform:translate(0px,0px);animation-timing-function:linear}83.413%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}84.286%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}85.159%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}86.032%{transform:translate(0.4px,0px);animation-timing-function:linear}86.905%{transform:translate(0px,0px);animation-timing-function:linear}87.778%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}88.651%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}89.524%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}90.397%{transform:translate(0.4px,0px);animation-timing-function:linear}91.270%{transform:translate(0px,0px);animation-timing-function:linear}92.143%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}93.016%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}93.889%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}94.762%{transform:translate(0.4px,0px);animation-timing-function:linear}95.635%{transform:translate(0px,0px);animation-timing-function:linear}96.508%{transform:translate(-0.6px,0.4px);animation-timing-function:linear}97.381%{transform:translate(0.6px,-0.3px);animation-timing-function:linear}98.254%{transform:translate(-0.4px,0.3px);animation-timing-function:linear}99.127%{transform:translate(0.4px,0px);animation-timing-function:linear}100.000%{transform:translate(0px,0px);animation-timing-function:linear}}
.ha-dt .ha-sob{animation:ha-dt-sob 7.0s infinite}.ha-dt .ha-shudder{animation:ha-dt-shud 7.0s infinite}
@keyframes ha-dt-lean{0%,27.143%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}35.714%,67.143%{transform:translate(5px,3px) rotate(3deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}75.714%,100%{transform:none}}
@keyframes ha-dt-brows{0%,21.429%{opacity:0;transform:none}21.443%{opacity:1;transform:translateY(-5px)}24.000%{opacity:1;transform:none}26.000%{opacity:1;transform:translateY(-3px)}28.571%,100%{opacity:1;transform:none}}
.ha-dt .ha-mom{animation:ha-dt-lean 7.0s infinite}.ha-dt .ha-brows{animation:ha-dt-brows 7.0s ease-out infinite}
/* ?still / reduced motion show the Figma pose (crying); the calm look only exists inside the loop */
.ha-dt .ha-dt-calm{opacity:0}
@keyframes ha-dt-calm{0%,21.429%{opacity:1}21.429%,100%{opacity:0}}
.ha-dt .ha-dt-calm{animation:ha-dt-calm 7.0s steps(1,end) infinite}
/* the dotted arc is drawn out of the eye, drop by drop, then keeps flowing */
@keyframes ha-dt-drip{0%,21.429%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.3,0,.6,1)}44.286%,100%{stroke-dashoffset:0}}
.ha-dt .ha-dt-drip{animation:ha-dt-drip 7.0s infinite}

/* five figure photos in one row; on phones they become a swipeable strip */
.project-gallery-grid.ha-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.ha-five .project-media img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
@media (max-width:768px){
  .project-gallery-grid.ha-five{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .project-gallery-grid.ha-five::-webkit-scrollbar{display:none}
  .ha-five .project-media{flex:0 0 44%;scroll-snap-align:start}
}