/* ==========================================================================
   Animations - purposeful motion only. Everything here is disabled under
   prefers-reduced-motion (see bottom of file) or when the user turns motion
   off with the "Motion" toggle (html.no-motion).
   ========================================================================== */

/* Material flow dashes inside scenes */
@keyframes flow-dash { to { stroke-dashoffset: -48; } }
.scene-svg .flow-path { animation: flow-dash 2.4s linear infinite; }
.scene-svg .flow-path.flow-road { animation-duration: 3.6s; }

/* Vehicles and cartons drifting along their path (vars set per element in SVG) */
@keyframes drift {
  0%, 8% { transform: translate(0, 0); }
  50%, 58% { transform: translate(var(--mx), var(--my)); }
  100% { transform: translate(0, 0); }
}
.scene-svg .mover { animation: drift var(--md, 14s) ease-in-out var(--mdl, 0s) infinite; will-change: transform; }

/* Handheld scan LEDs */
@keyframes led { 0%, 70%, 100% { opacity: .15; } 75%, 90% { opacity: 1; } }
.scene-svg .scan-led { animation: led 3.2s ease-in-out infinite; }
.scene-svg g:nth-child(3n) .scan-led { animation-delay: -1.1s; }
.scene-svg g:nth-child(3n+1) .scan-led { animation-delay: -2.2s; }

/* Hotspot pulse ring */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,165,36,.55); } 70% { box-shadow: 0 0 0 12px rgba(245,165,36,0); } 100% { box-shadow: 0 0 0 0 rgba(245,165,36,0); } }
.hotspot .hotspot-num { animation: pulse 2.6s ease-out infinite; }
.hotspot:nth-child(2n) .hotspot-num { animation-delay: -1.3s; }
.hotspot.is-selected .hotspot-num, .hotspot[aria-pressed="true"] .hotspot-num { animation: none; }

/* Hotspots enter */
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -80%) scale(.85); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.hotspot { animation: pop-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
.hotspot:nth-child(1) { animation-delay: .05s; } .hotspot:nth-child(2) { animation-delay: .1s; }
.hotspot:nth-child(3) { animation-delay: .15s; } .hotspot:nth-child(4) { animation-delay: .2s; }
.hotspot:nth-child(5) { animation-delay: .25s; } .hotspot:nth-child(6) { animation-delay: .3s; }
.hotspot:nth-child(7) { animation-delay: .35s; } .hotspot:nth-child(8) { animation-delay: .4s; }
.hotspot:nth-child(9) { animation-delay: .45s; }

/* View transitions */
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.is-entering { animation: view-in .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes scene-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.scene-stage .scene-svg { animation: scene-in .6s ease-out both; }

/* Drawer content stagger */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.drawer.is-open .d-section { animation: rise .4s ease-out both; }
.drawer.is-open .d-section:nth-child(2) { animation-delay: .04s; }
.drawer.is-open .d-section:nth-child(3) { animation-delay: .08s; }
.drawer.is-open .d-section:nth-child(4) { animation-delay: .12s; }
.drawer.is-open .d-section:nth-child(5) { animation-delay: .16s; }

/* Department panel expand */
@keyframes expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dept-body { animation: expand .25s ease-out both; }

/* Flow diagram dots */
@keyframes dash-move { to { background-position: 18px 0; } }
.flow-step:not(:last-child)::after { animation: dash-move 1.2s linear infinite; }

/* Toast */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast:not([hidden]) { animation: toast-in .25s ease-out; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .scene-svg .mover { transform: none !important; }
  .scene-svg .plane { opacity: 1; transform: none !important; }
}
html.no-motion { scroll-behavior: auto; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition-duration: .01ms !important; }
html.no-motion .scene-svg .mover { transform: none !important; }
html.no-motion .scene-svg .plane { opacity: 1; transform: none !important; }

/* Cargo plane crossing the home scene above the port */
@keyframes fly {
  0% { transform: translate(calc(var(--fx) * -1), calc(var(--fy) * -1)); opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: 1; }
  74%, 100% { opacity: 0; }
  100% { transform: translate(var(--fx), var(--fy)); }
}
.scene-svg .plane { animation: fly 16s linear infinite; pointer-events: none; }