/* YINDOR — motion.css · load AFTER css/style.css
   Subtle brand motion: flowing route dashes, pulsing waypoints, hero globe layout. */

@keyframes yn-dash-flow { to { background-position: 32px 0; } }
@keyframes yn-dash-march { to { stroke-dashoffset: -32; } }
@keyframes yn-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes yn-ring-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.45); } }

/* Hero route line: dashes flow toward the waypoint */
.route-line .dash {
  border-top: none;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--soot) 0 8px, transparent 8px 16px);
  animation: yn-dash-flow 1.6s linear infinite;
}

/* Pulsing waypoint dots (hero, nav contact, stealth card) */
.route-line .waypoint-dot,
.nav-contact .waypoint-dot,
.stealth-card .waypoint-dot { animation: yn-dot-pulse 2.6s ease-in-out infinite; }

/* Footer map: route marches toward Videolab, arrival ring pulses */
.footer-art path[stroke-dasharray] { animation: yn-dash-march 2.4s linear infinite; }
.footer-art circle[stroke-width="1.5"] {
  transform-box: fill-box; transform-origin: center;
  animation: yn-ring-pulse 2.6s ease-in-out infinite;
}

/* Work cards lift slightly on hover */
.work-card { transition: transform 250ms ease, opacity 180ms ease; }
.work-card:hover { transform: translateY(-4px); }

/* Hero globe layout */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.hero-globe { width: 380px; height: 380px; display: block; }
@media (max-width: 1100px) { .hero-globe { width: 300px; height: 300px; } }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-globe { display: none; } }

/* Accessibility: kill all of it for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .route-line .dash,
  .route-line .waypoint-dot,
  .nav-contact .waypoint-dot,
  .stealth-card .waypoint-dot,
  .footer-art path[stroke-dasharray],
  .footer-art circle[stroke-width="1.5"] { animation: none !important; }
  .work-card, .work-card:hover { transform: none; transition: none; }
}