/* WL-VPN Brand System 2.0 — motion
   Requires tokens.css. Ready-made animated files are in animations/ (see README.md).
   Rules: one easing (signal), movement always left → right, no bounce / glitch / flicker. */

/* 1. Logo reveal — plays ONCE on load (use inline SVG with these classes,
      or simply use animations/wl-vpn-logo-reveal.svg in an <img>) */
.wl-reveal .wl-perimeter { stroke-dasharray: 100; animation: wl-draw 900ms var(--wl-ease-signal) both; }
.wl-reveal .wl-node      { transform-box: fill-box; transform-origin: center; animation: wl-pop 420ms 720ms var(--wl-ease-signal) both; }
.wl-reveal .wl-tunnel    { stroke-dasharray: 100; animation: wl-draw 540ms 1080ms var(--wl-ease-signal) both; }
.wl-reveal .wl-word-1    { animation: wl-slide 540ms 1380ms var(--wl-ease-signal) both; }
.wl-reveal .wl-dash      { transform-box: fill-box; transform-origin: left center; animation: wl-grow 420ms 1560ms var(--wl-ease-signal) both; }
.wl-reveal .wl-word-2    { animation: wl-slide 540ms 1680ms var(--wl-ease-signal) both; }

/* 2. Connecting — loader for apps/dashboards (1.4s loop) */
.wl-connecting .wl-tunnel { stroke-dasharray: 18 82; animation: wl-flow 1.4s linear infinite; }
.wl-connecting .wl-node   { animation: wl-breathe 1.4s ease-in-out infinite; }

/* 3. Connected — idle ring from the node (2.4s loop) */
.wl-connected .wl-ring { transform-box: fill-box; transform-origin: center; animation: wl-ring 2.4s var(--wl-ease-signal) infinite; }

/* 4. Signal route — spark travelling along a route path (3s loop) */
.wl-route-live { stroke-dasharray: 10 90; animation: wl-flow 3s linear infinite; }

@keyframes wl-draw    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes wl-pop     { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wl-slide   { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes wl-grow    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wl-flow    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes wl-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes wl-ring    { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wl-reveal *, .wl-connecting *, .wl-connected *, .wl-route-live { animation: none !important; }
  .wl-connecting .wl-tunnel, .wl-route-live { stroke-dasharray: none; }
}