/* Animated figures on the home page (hero, laser, Air Pointer, watch laser and mouse, shared clipboard): inline SVG + CSS, no script.
   Base styles are the still pose shown with prefers-reduced-motion; content-visibility skips them off screen. */
.motion {
  width: min(100%, 520px);
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #ecebe6;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(22, 22, 63, 0.22);
  content-visibility: auto;
  contain-intrinsic-size: auto 390px;
}
.motion svg { display: block; width: 100%; height: 100%; font-family: var(--font); }

/* Laser: the dot follows the presenter's phone over the slide */
.m-dot { transform: translate(205px, 110px); animation: m-dot 7s ease-in-out infinite; }
.m-tilt { transform-origin: 129px 312px; animation: m-tilt 7s ease-in-out infinite; }
@keyframes m-dot {
  0%, 100% { transform: translate(240px, 140px); }
  20% { transform: translate(120px, 72px); }
  40% { transform: translate(85px, 200px); }
  60% { transform: translate(205px, 110px); }
  80% { transform: translate(360px, 145px); }
}
@keyframes m-tilt {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(-16deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(14deg); }
}

/* Air Pointer: the phone sways, the cursor sweeps across the TV */
.m-cursor { transform: translate(300px, 90px); animation: m-cursor 5s ease-in-out infinite; }
.m-sway { transform-origin: 240px 358px; animation: m-sway 5s ease-in-out infinite; }
@keyframes m-cursor {
  0%, 50%, 100% { transform: translate(240px, 122px); }
  25% { transform: translate(360px, 70px); }
  75% { transform: translate(110px, 180px); }
}
@keyframes m-sway {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(14deg) translateY(-6px); }
  75% { transform: rotate(-14deg) translateY(4px); }
}

/* Shared clipboard: select, copy, fly to the phone, paste */
.m-select { transform-origin: 56px 112px; animation: m-select 6s ease-in-out infinite; }
.m-chip { opacity: 0; animation: m-chip 6s ease-in-out infinite; }
.m-pill { animation: m-pill 6s ease-in-out infinite; }
.m-paste { animation: m-paste 6s ease-in-out infinite; }
@keyframes m-select {
  0%, 5% { transform: scaleX(0); }
  20%, 85% { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}
@keyframes m-chip {
  0%, 22% { opacity: 0; transform: translate(56px, 112px); }
  26% { opacity: 1; transform: translate(56px, 112px); }
  44% { opacity: 1; transform: translate(343px, 132px) scale(0.68); }
  50%, 100% { opacity: 0; transform: translate(343px, 132px) scale(0.68); }
}
@keyframes m-pill {
  0%, 46% { opacity: 0; }
  50%, 85% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes m-paste {
  0%, 56% { opacity: 0; }
  60%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Hero: the laser walks over the slide, Next is pressed, the next slide comes in */
.h-dot { transform: translate(160px, 210px); animation: h-dot 10s ease-in-out infinite; }
.h-slide2 { opacity: 0; animation: h-slide2 10s ease-in-out infinite; }
.h-next { animation: h-next 10s ease-in-out infinite; }
.h-ring { transform-origin: 36px 32px; animation: h-ring 2s ease-out infinite; }
@keyframes h-dot {
  0%, 100% { transform: translate(113px, 230px); }
  12% { transform: translate(163px, 200px); }
  24% { transform: translate(263px, 136px); }
  38% { transform: translate(400px, 180px); }
  48% { transform: translate(300px, 170px); }
  62% { transform: translate(190px, 140px); }
  76% { transform: translate(360px, 157px); }
  88% { transform: translate(380px, 221px); }
}
@keyframes h-slide2 {
  0%, 46% { opacity: 0; }
  50%, 92% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes h-next {
  0%, 42%, 52%, 100% { fill: #d6363c; }
  46% { fill: #ff7a7e; }
}
@keyframes h-ring {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Watch laser: raise the arm and the dot appears and follows; lower it and it pauses */
.w-arm { transform-origin: 96px 246px; transform: rotate(-22deg); animation: w-arm 8s ease-in-out infinite; }
.w-dot { transform: translate(303px, 117px); animation: w-dot 8s ease-in-out infinite; }
.w-paused { opacity: 0; animation: w-paused 8s ease-in-out infinite; }
@keyframes w-arm {
  0%, 12%, 74%, 100% { transform: rotate(70deg); }
  22% { transform: rotate(-22deg); }
  36% { transform: rotate(-32deg); }
  50% { transform: rotate(-12deg); }
  62% { transform: rotate(-24deg); }
}
@keyframes w-dot {
  0%, 18% { opacity: 0; transform: translate(303px, 117px); }
  22% { opacity: 1; transform: translate(303px, 117px); }
  36% { opacity: 1; transform: translate(250px, 82px); }
  50% { opacity: 1; transform: translate(390px, 140px); }
  62% { opacity: 1; transform: translate(300px, 112px); }
  68%, 100% { opacity: 0; transform: translate(300px, 112px); }
}
@keyframes w-paused {
  0%, 14% { opacity: 1; }
  18%, 72% { opacity: 0; }
  78%, 100% { opacity: 1; }
}

/* Watch mouse: the hand slides on the desk, the pointer follows in the same plane; a finger tap clicks */
.w-hand { animation: w-hand 7s ease-in-out infinite; }
.w-cursor { transform: translate(200px, 110px); animation: w-cursor 7s ease-in-out infinite; }
.w-tap, .w-click { opacity: 0; }
.w-tap { transform-origin: 240px 232px; animation: w-tap 7s ease-out infinite; }
.w-click { animation: w-click 7s ease-out infinite; }
@keyframes w-hand {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(0, -26px); }
  40%, 58% { transform: translate(64px, -26px); }
  78% { transform: translate(-30px, 18px); }
}
@keyframes w-cursor {
  0%, 100% { transform: translate(200px, 110px); }
  20% { transform: translate(200px, 64px); }
  40%, 58% { transform: translate(300px, 64px); }
  78% { transform: translate(150px, 140px); }
}
@keyframes w-tap {
  0%, 44% { opacity: 0; transform: scale(.6); }
  46% { opacity: 1; transform: scale(.6); }
  54%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes w-click {
  0%, 45% { opacity: 0; transform: translate(302px, 68px) scale(.4); }
  47% { opacity: 1; transform: translate(302px, 68px) scale(.4); }
  56%, 100% { opacity: 0; transform: translate(302px, 68px) scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .motion svg *, .h-art * { animation: none !important; }
}