/* ============================================================
   Armaan Press — Icon FX (advanced icon animations)
   Loaded on staff, portal and public tracking pages. Everything
   here is additive: if this file fails to load, the UI simply
   shows the same plain steppers/alerts it always did.
   ============================================================ */

/* ---------------- Live Progress stage icons ---------------- */
/* The JS swaps each .stepper-circle's number for a stage icon.
   done  -> green check (one-time pop when it scrolls into view)
   active-> stage-specific looping animation (paused for others)
   todo  -> dimmed static icon */

.stepper-circle .st-ic {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  will-change: transform;
}

/* One-time pop-in for completed checkmarks */
@keyframes stPopIn {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
.stepper-node.st-done .st-ic { animation: stPopIn .45s cubic-bezier(.34,1.56,.64,1) both; }

/* Current-stage looping animations — each stage gets a motion that
   matches its meaning. All GPU-friendly (transform/opacity only). */
@keyframes stPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 0 0 0 var(--st-glow, rgba(216,17,66,.55)); }
  70%  { box-shadow: 0 0 0 4px rgba(255,255,255,0), 0 0 0 9px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); }
}
.stepper-node.st-active .stepper-circle {
  animation: stPulseRing 1.8s ease-out infinite;
}

@keyframes stBounce   { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-3px);} }
@keyframes stWiggle   { 0%,100% { transform: rotate(-10deg);} 50% { transform: rotate(10deg);} }
@keyframes stSpin     { from { transform: rotate(0);} to { transform: rotate(360deg);} }
@keyframes stPenWrite { 0%,100% { transform: translate(0,0) rotate(0);} 25% { transform: translate(-1.5px,1px) rotate(-8deg);} 50% { transform: translate(1px,-1px) rotate(4deg);} 75% { transform: translate(-1px,.5px) rotate(-4deg);} }
@keyframes stFly      { 0%,100% { transform: translate(0,0);} 30% { transform: translate(2px,-2px);} 60% { transform: translate(-1px,1px);} }
@keyframes stStamp    { 0%,60%,100% { transform: scale(1) rotate(0);} 70% { transform: scale(1.35) rotate(-8deg);} 80% { transform: scale(.95) rotate(0);} }
@keyframes stPrint    { 0%,100% { transform: translateY(0);} 20% { transform: translateY(1.5px);} 40% { transform: translateY(-1px);} 60% { transform: translateY(1px);} 80% { transform: translateY(-.5px);} }
@keyframes stScan     { 0%,100% { transform: translateX(-2px); opacity:.75;} 50% { transform: translateX(2px); opacity:1;} }
@keyframes stTruck    { 0%,100% { transform: translateX(-2px);} 50% { transform: translateX(2.5px);} }
@keyframes stParty    { 0%,100% { transform: scale(1) rotate(-6deg);} 50% { transform: scale(1.18) rotate(8deg);} }
@keyframes stCoin     { 0%,100% { transform: rotateY(0);} 50% { transform: rotateY(180deg);} }
@keyframes stLock     { 0%,90%,100% { transform: rotate(0);} 93% { transform: rotate(-8deg);} 96% { transform: rotate(8deg);} }

.st-active .st-anim-bounce { animation: stBounce  1.1s ease-in-out infinite; }
.st-active .st-anim-wiggle { animation: stWiggle  1.2s ease-in-out infinite; }
.st-active .st-anim-spin   { animation: stSpin    2.2s linear infinite; }
.st-active .st-anim-pen    { animation: stPenWrite 1.3s ease-in-out infinite; }
.st-active .st-anim-fly    { animation: stFly     1.4s ease-in-out infinite; }
.st-active .st-anim-stamp  { animation: stStamp   1.8s ease-in-out infinite; }
.st-active .st-anim-print  { animation: stPrint   1.0s ease-in-out infinite; }
.st-active .st-anim-scan   { animation: stScan    1.2s ease-in-out infinite; }
.st-active .st-anim-truck  { animation: stTruck   1.2s ease-in-out infinite; }
.st-active .st-anim-party  { animation: stParty   1.3s ease-in-out infinite; }
.st-active .st-anim-coin   { animation: stCoin    1.6s ease-in-out infinite; }
.st-active .st-anim-lock   { animation: stLock    2.4s ease-in-out infinite; }

/* Upcoming (todo) stages: keep the icon but dim + freeze it. */
.stepper-node.st-todo .st-ic { opacity: .55; filter: grayscale(.6); animation: none; }

/* Active stage label emphasis */
.stepper-node.st-active .stepper-label { color: var(--text-primary, #1a1a1f); font-weight: 800; }

/* Animated progress line "flow" into the current stage */
@keyframes stLineFlow { from { background-position: 0 0; } to { background-position: 18px 0; } }
.stepper-line.st-flow {
  background: repeating-linear-gradient(90deg, #0f9d58 0 6px, #7fd4ab 6px 12px);
  background-size: 18px 2px;
  animation: stLineFlow .9s linear infinite;
}

/* ---------------- Success overlay (Razorpay-style) ---------------- */
.fx-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,16,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.fx-overlay.show { opacity: 1; }
.fx-overlay.hide { opacity: 0; }

.fx-card {
  background: #fff; color: #1a1a1f;
  border-radius: 20px; padding: 30px 34px 26px;
  width: min(320px, 86vw); text-align: center;
  transform: scale(.7); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.fx-overlay.show .fx-card { transform: scale(1); opacity: 1; }

@media (prefers-color-scheme: dark) {
  .fx-card { background: #1f1f27; color: #f4f4f6; }
}
body.dark-mode .fx-card, [data-theme="dark"] .fx-card { background: #1f1f27; color: #f4f4f6; }

/* SVG check: circle sweep + tick stroke draw, like payment gateways */
.fx-check { width: 92px; height: 92px; margin: 0 auto 14px; display: block; }
.fx-check .fx-circle {
  fill: none; stroke: #0f9d58; stroke-width: 3;
  stroke-dasharray: 166; stroke-dashoffset: 166;
  animation: fxCircle .6s cubic-bezier(.65,0,.45,1) forwards;
}
.fx-check .fx-tick {
  fill: none; stroke: #fff; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: fxTick .35s cubic-bezier(.65,0,.45,1) .55s forwards;
}
.fx-check .fx-fill {
  fill: #0f9d58; opacity: 0; transform-origin: center;
  animation: fxFill .3s ease .5s forwards;
}
@keyframes fxCircle { to { stroke-dashoffset: 0; } }
@keyframes fxTick   { to { stroke-dashoffset: 0; } }
@keyframes fxFill   { to { opacity: 1; } }

@keyframes fxCardPulse { 0% { transform: scale(1);} 40% { transform: scale(1.03);} 100% { transform: scale(1);} }
.fx-overlay.show .fx-card.fx-pulse { animation: fxCardPulse .4s ease .8s; }

.fx-title  { font-size: 17px; font-weight: 800; margin: 2px 0 4px; }
.fx-amount { font-size: 26px; font-weight: 900; letter-spacing: .3px; margin: 2px 0 6px; color: #0f9d58; }
.fx-sub    { font-size: 12.5px; color: #8a8a95; }

/* Confetti pieces inside the card */
.fx-confetti { position: absolute; top: -8px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; }
@keyframes fxConfettiFall {
  0%   { transform: translateY(-10px) rotate(0);       opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(360px) rotate(540deg);  opacity: 0; }
}

/* ---------------- Micro icon pop (inline, next to alerts) ---------------- */
.fx-mini {
  display: inline-block; margin-right: 6px;
  animation: stPopIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .stepper-node.st-active .stepper-circle,
  .st-active .st-ic, .stepper-line.st-flow,
  .fx-check .fx-circle, .fx-check .fx-tick, .fx-check .fx-fill,
  .fx-confetti, .fx-mini, .stepper-node.st-done .st-ic { animation: none !important; }
  .fx-check .fx-circle, .fx-check .fx-tick { stroke-dashoffset: 0; }
  .fx-check .fx-fill { opacity: 1; }
}