/* ============================================================================
 * icon-motion.css — animated line icons for EasySteamFarm
 *
 * The "Flaticon animated icons" feel, done with pure CSS on the SVGs the app
 * already ships: the stroke draws itself on, then icons react to hover with a
 * short, purposeful micro-motion (arrow dips, gear turns, card flips, …).
 *
 * No library, no extra requests, no licensing — and it costs nothing at idle
 * because every animation is either one-shot (`forwards`) or hover-triggered.
 *
 * Load AFTER the page's own styles:  <link rel="stylesheet" href="icon-motion.css">
 * ==========================================================================*/

/* Reusable draw-on. 150 comfortably exceeds the path length of a 24×24 icon,
   so the line appears to be drawn, and always ends fully visible. */
@keyframes imDraw { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
/* same curve, DIFFERENT name: re-applying an already-running animation name does
   not restart it, so hover needs its own keyframes to actually redraw. */
@keyframes imDrawHover { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
/* continuous brand motion (never idle): the mark breathes, the arrow keeps
   dropping and the tray stroke keeps re-flowing. */
@keyframes imMarkPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(3,196,161,.4)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 9px rgba(3,196,161,.8)); }
}
@keyframes imArrowLoop {
  0%   { transform: translateY(-1.6px); opacity: .7; }
  45%  { transform: translateY(2px);    opacity: 1; }
  70%  { transform: translateY(1px);    opacity: 1; }
  100% { transform: translateY(-1.6px); opacity: .7; }
}
@keyframes imFlow {
  0%   { stroke-dashoffset: 150; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -150; }
}
@keyframes imArrow {
  0%, 86%, 100% { transform: translateY(0); }
  91%           { transform: translateY(2.4px); }
  96%           { transform: translateY(0); }
}
@keyframes imFadeIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes imSpin   { to { transform: rotate(360deg); } }
@keyframes imTick   { 0%{transform:translateY(0)} 40%{transform:translateY(-2px)} 100%{transform:translateY(0)} }

@media (prefers-reduced-motion: no-preference) {

  /* ---------------------------------------------------------------- brand --
     ALWAYS in motion but SLOW and calm: one shared, longer cycle so the mark
     never looks frantic — and it does NOT speed up on hover or navigation. */
  .logo svg, .brand-mark svg {
    transform-origin: center;
    animation: imMarkPulse 6s ease-in-out infinite;
  }
  .logo svg > *, .brand-mark svg > * {
    transform-box: fill-box;
    transform-origin: center;
  }
  /* arrow shaft + head = the first two paths of the mark */
  .logo svg > path:nth-child(1), .logo svg > path:nth-child(2),
  .brand-mark svg > path:nth-child(1), .brand-mark svg > path:nth-child(2) {
    animation: imArrowLoop 5s cubic-bezier(.5,0,.5,1) infinite;
  }
  .logo svg > path:nth-child(2), .brand-mark svg > path:nth-child(2) { animation-delay: .18s; }
  /* the tray / remaining strokes keep re-drawing themselves, slowly */
  .logo svg > *:nth-child(n+3), .brand-mark svg > *:nth-child(n+3) {
    stroke-dasharray: 150;
    animation: imFlow 7s linear infinite;
  }

  /* ------------------------------------------------------- feature cards --
     Card icons draw themselves when the card scrolls into view, and lift on
     hover. `.reveal.visible` is set by the site's IntersectionObserver.      */
  .card .ico svg > *, .plan-ico svg > *, .step .ico svg > * {
    stroke-dasharray: 150; stroke-dashoffset: 150;
    transform-box: fill-box; transform-origin: center;
  }
  .reveal.visible .ico svg > *, .card:hover .ico svg > *,
  .plan:hover .plan-ico svg > *, .step:hover .ico svg > * {
    animation: imDraw 1.3s cubic-bezier(.55,0,.35,1) forwards;
  }
  .reveal.visible .ico svg > *:nth-child(2) { animation-delay: .18s; }
  .reveal.visible .ico svg > *:nth-child(3) { animation-delay: .36s; }
  /* cards that are already on screen (above the fold) must not stay invisible */
  .card .ico svg > * { animation: imDraw 1.3s .2s cubic-bezier(.55,0,.35,1) forwards; }
  .card .ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .card:hover .ico { transform: translateY(-3px) scale(1.05); }

  /* ------------------------------------------------------------- sidebar --
     Panel / AdminCP nav: icons draw once on page open (staggered), and on HOVER
     they redraw + fill with accent — the same treatment as the user dropdown. */
  .nav-item svg > * {
    transform-box: fill-box; transform-origin: center;
    stroke-dasharray: 150;
    /* resting state is fully drawn: if the animation never runs (page opened in a
       background tab, reduced motion, older browser) the icon is still visible */
    stroke-dashoffset: 0;
    animation: imDraw 1.35s cubic-bezier(.55,0,.35,1);
  }
  .nav-item:nth-of-type(2) svg > * { animation-delay: .1s; }
  .nav-item:nth-of-type(3) svg > * { animation-delay: .2s; }
  .nav-item:nth-of-type(4) svg > * { animation-delay: .3s; }
  .nav-item:nth-of-type(5) svg > * { animation-delay: .4s; }
  .nav-item:nth-of-type(6) svg > * { animation-delay: .5s; }
  .nav-item:nth-of-type(7) svg > * { animation-delay: .6s; }
  .nav-item:nth-of-type(8) svg > * { animation-delay: .7s; }
  .nav-item:nth-of-type(n+9) svg > * { animation-delay: .8s; }
  .nav-item svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .nav-item:hover svg { transform: translateX(1.5px) scale(1.12); }
  /* hover redraw — identical feel to .ud-item in the user dropdown */
  .nav-item:hover svg > * {
    animation: imDrawHover .45s cubic-bezier(.65,0,.35,1) forwards !important;
    animation-delay: 0s !important;
  }
  /* filled icons (Discord) can't be drawn — fade them in once instead */
  .nav-item svg[fill="currentColor"] > * { stroke-dasharray: none; animation: imFadeIn .8s ease; }

  /* ------------------------------- dashboard / admin panel-head icons --
     Draw once when the page opens, not on hover. */
  .panel-head svg > *, .ps-card svg > *, .kpi svg > * {
    transform-box: fill-box; transform-origin: center;
    stroke-dasharray: 150; stroke-dashoffset: 0;
    animation: imDraw 1.4s .15s cubic-bezier(.55,0,.35,1);
  }

  /* --------------------------------------------------- menus & icon buttons */
  .ud-item svg > *, .icon-btn svg > * { transform-box: fill-box; transform-origin: center; }
  .ud-item:hover svg > * {
    stroke-dasharray: 150;
    animation: imDraw .45s cubic-bezier(.65,0,.35,1) forwards;
  }
  .ud-item svg, .icon-btn svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .ud-item:hover svg { transform: scale(1.12); }
  .icon-btn:hover svg { transform: scale(1.14); }
  .icon-btn:hover svg > * { animation: imTick .45s ease; }

  /* --------------------------------------------------------- site top nav */
  .nav-links a svg, .btn svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .nav-links a:hover svg, .btn:hover svg { transform: translateY(-1px) scale(1.08); }

  /* ----------------------------------------------------- pricing tick list */
  .plan li svg > *, .perk svg > * { transform-box: fill-box; transform-origin: center; }
  .plan:hover li svg > *, .perk:hover svg > * {
    stroke-dasharray: 150;
    animation: imDraw .4s cubic-bezier(.65,0,.35,1) forwards;
  }
}

/* While the page-transition loader covers the screen, hold every draw-on icon at
   its start state and run NO animation. The moment the loader is removed the
   `body.ld-on` class goes away, the rules below stop applying, and each icon
   animation starts fresh — so the redraw is actually visible to the user. */
body.ld-on .nav-item svg > *,
body.ld-on .panel-head svg > *,
body.ld-on .ps-card svg > *,
body.ld-on .kpi svg > *,
body.ld-on .card .ico svg > *,
body.ld-on .logo svg > *,
body.ld-on .brand-mark svg > * {
  animation: none !important;
  stroke-dashoffset: 150 !important;
}
body.ld-on .logo svg, body.ld-on .brand-mark svg { animation: none !important; }

/* Never animate while the tab is hidden (zero background CPU), and respect a
   user's reduced-motion setting by leaving every icon in its final state. */
body.tab-hidden svg *, body.tab-hidden svg { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- touch --
   Phones/tablets have no hover, so anything that only animates on :hover would
   never play. Make every hover-only icon fully visible, and let the brand mark
   keep its continuous motion (it needs no pointer). */
@media (hover: none) {
  .card .ico svg > *, .plan-ico svg > *, .step .ico svg > *,
  .ud-item svg > *, .icon-btn svg > *, .plan li svg > *, .perk svg > * {
    stroke-dashoffset: 0 !important;
  }
  /* draw them once when they appear instead of on hover */
  .card .ico svg > * { animation: imDraw 1.3s .15s cubic-bezier(.55,0,.35,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .logo svg, .brand-mark svg,
  .logo svg *, .brand-mark svg *, .card .ico svg *, .nav-item svg *, .ud-item svg *, .plan li svg * {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transform: none !important;
  }
}