/* ============================================
   ART — hover animations for the isometric drawings
   Drawings: assets/images/art/ (generated by tools/lotus-art/build.js, which
   labels the moving parts with the art-* classes below). Inlining:
   assets/js/art.js swaps an <img data-art> for its SVG, as a .art-slot, the
   first time the visitor heads for it — until then, and without JS, it is the
   static picture.

   A drawing plays while its host (.art-host — a menu tile, a hub card) is
   hovered on a pointer device, keyboard-focused, or marked .is-playing (the
   Capabilities preview). One idea per drawing, about a second, and only while
   engaged: nothing loops on its own. Reduced motion keeps the "on" states
   (lit screen, headlights, stocked shelves) without any movement.
   ============================================ */

.art-slot {
  display: block;
}

.art-slot > svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Beams, lifted drones and falling air may step just outside the drawing. */
  overflow: visible;
}

/* Every drawing lifts a little. */
.art-root {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease-out);
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-root {
  transform: translateY(-4%);
}

/* ── Screens power on (displays, laptop) — the old CRT line, then the picture ── */
.art-lit {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.18s ease;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-lit {
  opacity: 1;
  animation: art-power 0.55s var(--ease-out) both;
}

@keyframes art-power {
  0%   { transform: scale(0.04, 0.03); }
  35%  { transform: scale(1, 0.03); }
  70%  { transform: scale(1, 1.04); }
  100% { transform: none; }
}

/* ── Headlights (automotive) ── */
.art-headlight {
  transition: fill 0.2s ease;
}

.art-beams {
  opacity: 0;
  transition: opacity 0.2s ease;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-headlight {
  fill: #FFFEF4;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-beams {
  opacity: 1;
  animation: art-lights-on 0.6s linear both;
}

@keyframes art-lights-on {
  0%   { opacity: 0; }
  14%  { opacity: 0.9; }
  26%  { opacity: 0.15; }
  44%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ── Rotors (UAV): blades spin in each rotor's ellipse; the drone lifts off ── */
.art-blade {
  transform-origin: 0 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-blade {
  animation: art-spin 0.16s linear infinite;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-disc {
  fill-opacity: 0.62;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art--unit-uav .art-root {
  animation: art-liftoff 0.5s var(--ease-out) both, art-bob 1.6s ease-in-out 0.5s infinite;
}

@keyframes art-spin {
  to { transform: rotate(360deg); }
}

@keyframes art-liftoff {
  from { transform: none; }
  to   { transform: translateY(-9%); }
}

@keyframes art-bob {
  0%, 100% { transform: translateY(-9%); }
  50%      { transform: translateY(-13%); }
}

/* ── Battery gauge charges (energy storage) ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-bar {
  animation: art-charge 1.8s ease-in-out infinite;
}

.art-bar-2 { animation-delay: 0.2s; }
.art-bar-3 { animation-delay: 0.4s; }
.art-bar-4 { animation-delay: 0.6s; }

@keyframes art-charge {
  0%, 6%    { fill: #D8D2CA; }
  18%, 82%  { fill: #3BA55C; }
  100%      { fill: #D8D2CA; }
}

/* ── Current down the cable (EV charger) ── */
.art-pulse {
  opacity: 0;
  stroke-dasharray: 16 84;
  transition: opacity 0.2s ease;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-pulse {
  opacity: 1;
  animation: art-flow 0.9s linear infinite;
}

@keyframes art-flow {
  from { stroke-dashoffset: 16; }
  to   { stroke-dashoffset: -84; }
}

/* ── Status LEDs (rack, monitor, charger, depot bench) ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-led {
  animation: art-blink calc(0.7s + var(--i, 0) * 0.13s) steps(1, end) calc(var(--i, 0) * -0.29s) infinite;
}

@keyframes art-blink {
  0%   { opacity: 1; }
  55%  { opacity: 0.22; }
}

/* ── Traces sweep (patient monitor, depot scope) ── */
.art-trace {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-trace {
  animation: art-sweep 1.4s linear infinite;
}

.art-trace--2 { animation-delay: 0.3s; }

@keyframes art-sweep {
  0%       { stroke-dashoffset: 100; }
  72%, 100% { stroke-dashoffset: 0; }
}

/* ── The arm works (robotics): shoulder and elbow swing in the arm's plane,
   the wrist counter-rotates by their sum so the gripper stays level ── */
.art-j {
  transform-origin: 0 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-j1 { animation: art-j1 2.4s ease-in-out infinite; }
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-j2 { animation: art-j2 2.4s ease-in-out infinite; }
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-j3 { animation: art-j3 2.4s ease-in-out infinite; }

@keyframes art-j1 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes art-j2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(24deg); } }
@keyframes art-j3 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }

/* ── Conveyors: the belt runs and a carton rides it (assembly, rollers) ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-belt {
  animation: art-belt 0.5s linear infinite;
}

@keyframes art-belt {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}

.art-rider {
  opacity: 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-rider {
  animation: art-ride 2.6s linear infinite;
}

@keyframes art-ride {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

.art-roll {
  transform-origin: 0 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-roll {
  animation: art-spin 0.9s linear infinite reverse;
}

/* ── Shelves stock up, carton by carton (warehousing) ── */
.art-stock {
  opacity: 0;
  transform: translate(var(--sx), var(--sy));
  transition: opacity 0.15s ease, transform 0.15s ease;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-stock {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease-out) calc(var(--i) * 45ms), transform 0.45s var(--ease-out) calc(var(--i) * 45ms);
}

/* ── Depot bench: the magnifier catches the light ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-glint {
  animation: art-glint 1.6s ease-in-out infinite;
}

@keyframes art-glint {
  0%, 100% { fill: #CFE0F2; }
  50%      { fill: #FFFFFF; }
}

/* ── Cleanroom: laminar air falls from the filters; the tech works ── */
.art-air circle {
  opacity: 0;
}

:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-air circle {
  animation: art-fall 1.5s linear calc(var(--i, 0) * -0.13s) infinite;
}

@keyframes art-fall {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.85; }
  100% { transform: translateY(26px); opacity: 0; }
}

/* ── The flag flies (US Manufacturing Partner) ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art-flag {
  animation: art-wave 1.3s ease-in-out infinite;
}

@keyframes art-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  30%      { transform: skewY(-4deg) scaleX(0.96); }
  70%      { transform: skewY(3deg) scaleX(0.98); }
}

/* ── Other industries: the carton hops ── */
:is(.can-hover .art-host:hover, .art-host:focus-visible, .art-host.is-playing) .art--unit-other .art-root {
  animation: art-hop 0.7s var(--ease-out) both;
}

@keyframes art-hop {
  0%   { transform: none; }
  35%  { transform: translateY(-13%); }
  60%  { transform: translateY(0) scaleY(0.94); }
  80%  { transform: translateY(-5%); }
  100% { transform: translateY(-4%); }
}

@media (prefers-reduced-motion: reduce) {
  .art-slot *,
  .art-slot *::before,
  .art-slot *::after {
    animation: none !important;
    transition: none !important;
  }
}