/* Crisp vector robot; keep the established coffee and spark timing. */
.robot-filters{position:absolute;overflow:hidden;pointer-events:none}
.header{height:188px;gap:24px}
.header-brand{display:flex;align-items:center;gap:20px;flex-shrink:0}
.robot{--cycle:9s;position:relative;display:block;flex:none;width:129.2px;height:129.2px;padding:0;overflow:hidden;border:1px solid transparent;border-radius:19px;background:transparent;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
.robot:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.robot-stage{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 0 2px #e6faff88) drop-shadow(0 0 7px #499bff66)}
.robot-part{position:absolute;inset:0;background-image:url('assets/aptech-robot-vector.svg');background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.robot-body{clip-path:polygon(0 0,100% 0,100% 58.6%,61.7% 58.6%,61.7% 100%,0 100%)}
.robot-charge{position:absolute;inset:0;filter:drop-shadow(0 0 3px #fff2b1) drop-shadow(0 0 8px #d2fcff);opacity:0;animation:robot-charge var(--cycle) ease-in-out infinite}
.robot-charge .robot-part{clip-path:inset(9% 45% 76% 42%)}
.robot-mug{position:absolute;inset:0;animation:robot-lift var(--cycle) cubic-bezier(.42,0,.25,1) infinite;will-change:transform}
/* Pivot at the left rim: it stays at the mouth while the cup tips. */
.robot-mug-pivot{position:absolute;inset:0;transform-origin:61% 64%;animation:robot-tip var(--cycle) cubic-bezier(.4,0,.3,1) infinite;will-change:transform}
.robot-mug-ink{clip-path:inset(58% 5% 15% 61.7%)}
.robot-coffee{clip-path:inset(63.5% 28.2% 32.3% 61.7%);background-image:none;background-color:var(--bg);filter:none}
.robot-spark{position:absolute;left:49%;top:12%;width:25.5px;height:25.5px;margin:-12.75px 0 0 -12.75px;display:grid;place-items:center;font:25.5px/1 Georgia,serif;color:#fff5c3;text-shadow:0 0 5px #fff,0 0 12px #b8fbff;opacity:0;animation:robot-spark var(--cycle) ease-in-out infinite}
.robot-control{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#ffffff14;color:white;font:12px/1 Arial,sans-serif;pointer-events:none}
.robot[data-paused="true"] .robot-mug,.robot[data-paused="true"] .robot-mug-pivot,.robot[data-paused="true"] .robot-charge,.robot[data-paused="true"] .robot-spark{animation-play-state:paused}
@keyframes robot-lift{
  0%,12%,76%,100%{transform:translate(0,0)}
  30%,54%{transform:translate(-13.3%,-12%)}
}
@keyframes robot-tip{
  0%,28%,55%,100%{transform:perspective(260px) rotateX(0deg) rotateZ(0deg)}
  41%{transform:perspective(260px) rotateX(-30deg) rotateZ(-5deg)}
  43%{transform:perspective(260px) rotateX(-32deg) rotateZ(-6deg)}
}
@keyframes robot-charge{0%,70%,89%,100%{opacity:0}77%,82%{opacity:1}}
@keyframes robot-spark{0%,72%,89%,100%{opacity:0;transform:scale(.15) rotate(-20deg)}77%{opacity:1;transform:scale(1) rotate(0deg)}83%{opacity:.9;transform:translateY(-3px) scale(.75) rotate(16deg)}88%{opacity:0;transform:translateY(-7px) scale(.25) rotate(30deg)}}
@media(max-width:1000px){.header nav{gap:23px}.header-brand{gap:15px}.robot{width:115.6px;height:115.6px}.header{height:170px;gap:18px}}
@media(max-width:800px){.header nav{display:none}}
@media(max-width:700px){.header{height:148px;gap:14px}.header-brand{gap:13px}.robot{width:95.2px;height:95.2px;border-radius:16px}.header .brand{font-size:18px}.header .brand small{font-size:8px;letter-spacing:.24em}.header-cta{white-space:nowrap}.robot-control{width:20px;height:20px;right:5px;bottom:5px}}
@media(max-width:380px){.header{gap:8px}.header-brand{gap:10px}.robot{width:81.6px;height:81.6px}.header .brand{font-size:16px}.header-cta{padding:8px 10px}.header-cta span{margin-left:8px}}
@media(prefers-reduced-motion:reduce){.robot:not([data-motion="enabled"]) .robot-mug,.robot:not([data-motion="enabled"]) .robot-mug-pivot,.robot:not([data-motion="enabled"]) .robot-charge,.robot:not([data-motion="enabled"]) .robot-spark{animation:none}.robot:not([data-motion="enabled"]) .robot-charge,.robot:not([data-motion="enabled"]) .robot-spark{opacity:0}}
