/* =====================================================================
   SPACE DESIGN — Animated service illustrations (services.html)
   Generated by tools/build-service-art.py — edit there, then re-run.
   Animations wait (paused) until main.js adds .is-in to the figure, so
   each scene plays as it scrolls into view. Without JS nothing is hidden;
   with reduced motion accessibility.css jumps straight to the end state.
   ===================================================================== */
.svc-media--art { aspect-ratio: 4 / 5; background: #F3F6F8; }
.svc-art { display: block; width: 100%; height: 100%; }
.js [data-reveal="image"] .svc-art { transform: scale(1.06); transition: transform 2200ms var(--ease-out); }
.js [data-reveal="image"].is-in .svc-art { transform: scale(1); }
@media (max-width: 900px) {
  .svc-media--art { max-height: none; width: 100%; max-width: 460px; margin-inline: auto; }
}

/* Entrances (once) */
.js .svc-media--art .art-rise   { animation: art-rise 800ms cubic-bezier(.2,.7,.2,1) both paused; }
.js .svc-media--art .art-fade   { animation: art-fade 900ms ease both paused; }

/* Ambient (loop) */
.js .svc-media--art .art-shimmer { animation: art-shimmer 6s ease-in-out infinite paused; }
.js .svc-media--art .art-sway   { transform-box: fill-box; transform-origin: 50% 100%; animation: art-sway 5s ease-in-out infinite paused; }
.js .svc-media--art .art-lamp   { transform-box: fill-box; transform-origin: 50% 0; animation: art-sway 6s ease-in-out infinite paused; }
.js .svc-media--art .art-glow   { animation: art-shimmer 3.5s ease-in-out infinite paused; }
.js .svc-media--art.is-in * { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .js .svc-media--art * { animation-delay: 0ms !important; }
}

/* Entrance delays: .ad-N waits N x 100 ms */
.js .svc-media--art .ad-4 { animation-delay: 400ms; }
.js .svc-media--art .ad-6 { animation-delay: 600ms; }
.js .svc-media--art .ad-7 { animation-delay: 700ms; }
.js .svc-media--art .ad-9 { animation-delay: 900ms; }
.js .svc-media--art .ad-10 { animation-delay: 1000ms; }
.js .svc-media--art .ad-12 { animation-delay: 1200ms; }

@keyframes art-rise    { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes art-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes art-shimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes art-sway    { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }