/* =========================================================
   VELAEA Your Portfolio Motion
   - Professional count-up context + chart/card entrance motion
   - Scoped to body.portfolio-page only
========================================================= */

body.portfolio-page .yp-motion-item{
  opacity:0;
  transform:translateY(16px) scale(.992);
  filter:saturate(.92) brightness(.96);
  transition:
    opacity .62s cubic-bezier(.18,.82,.24,1),
    transform .62s cubic-bezier(.18,.82,.24,1),
    filter .62s cubic-bezier(.18,.82,.24,1),
    border-color .24s ease,
    box-shadow .24s ease;
  transition-delay:calc(var(--yp-index, 0) * 38ms);
  will-change:opacity, transform, filter;
}

body.portfolio-page .yp-motion-item.yp-is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:saturate(1) brightness(1);
}

body.portfolio-page .mt5-number-card,
body.portfolio-page .mt5-analytics-card,
body.portfolio-page .dashboard-backtest-summary > div,
body.portfolio-page .dashboard-backtest-card{
  position:relative;
  overflow:hidden;
}

body.portfolio-page .mt5-number-card::after,
body.portfolio-page .mt5-analytics-card::after,
body.portfolio-page .dashboard-backtest-summary > div::after,
body.portfolio-page .dashboard-backtest-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(242,199,106,.13) 42%, transparent 72%);
  transform:translateX(-120%);
  opacity:0;
}

body.portfolio-page .mt5-number-card.yp-is-visible::after,
body.portfolio-page .mt5-analytics-card.yp-is-visible::after,
body.portfolio-page .dashboard-backtest-summary > div.yp-is-visible::after,
body.portfolio-page .dashboard-backtest-card.yp-is-visible::after{
  animation:ypCardSheen .96s cubic-bezier(.18,.82,.24,1) both;
  animation-delay:calc(120ms + var(--yp-index, 0) * 28ms);
}

body.portfolio-page .mt5-number-card strong,
body.portfolio-page .mt5-analytics-card strong,
body.portfolio-page .dashboard-backtest-summary strong,
body.portfolio-page .dashboard-backtest-metrics strong{
  display:inline-block;
  transform:translateZ(0);
}

body.portfolio-page .mt5-chart-box,
body.portfolio-page .dashboard-backtest-info-card{
  position:relative;
  overflow:hidden;
}

body.portfolio-page .mt5-chart-box::after,
body.portfolio-page .dashboard-backtest-info-card::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:42%;
  left:-55%;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(242,199,106,.11), transparent);
  opacity:0;
  transform:skewX(-16deg);
}

body.portfolio-page .mt5-chart-box.yp-is-visible::after,
body.portfolio-page .dashboard-backtest-info-card.yp-is-visible::after{
  animation:ypChartSweep 1.08s ease-out both;
  animation-delay:220ms;
}

body.portfolio-page .portfolio-status-card.yp-is-visible,
body.portfolio-page .mt5-account-card.yp-is-visible,
body.portfolio-page .mt5-chart-box.yp-is-visible,
body.portfolio-page .dashboard-backtest-card.yp-is-visible{
  box-shadow:0 22px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(242,199,106,.03) inset;
}

body.portfolio-page .dashboard-backtest-card.yp-is-visible.active,
body.portfolio-page .mt5-portfolio-card.yp-is-visible.active,
body.portfolio-page [data-mt5-key].yp-is-visible.active,
body.portfolio-page [data-backtest-card].yp-is-visible.active{
  box-shadow:0 22px 56px rgba(242,199,106,.10), 0 0 0 1px rgba(242,199,106,.22) inset;
}

@keyframes ypCardSheen{
  0%{opacity:0;transform:translateX(-120%)}
  18%{opacity:.82}
  100%{opacity:0;transform:translateX(120%)}
}

@keyframes ypChartSweep{
  0%{opacity:0;left:-55%}
  20%{opacity:.74}
  100%{opacity:0;left:112%}
}

@media(max-width:768px){
  body.portfolio-page .yp-motion-item{
    transform:translateY(12px) scale(.996);
    transition-duration:.48s;
    transition-delay:calc(var(--yp-index, 0) * 22ms);
  }
  body.portfolio-page .mt5-number-card.yp-is-visible::after,
  body.portfolio-page .mt5-analytics-card.yp-is-visible::after,
  body.portfolio-page .dashboard-backtest-summary > div.yp-is-visible::after,
  body.portfolio-page .dashboard-backtest-card.yp-is-visible::after{
    animation-duration:.72s;
  }
}

@media (prefers-reduced-motion: reduce){
  body.portfolio-page .yp-motion-item,
  body.portfolio-page .yp-motion-item.yp-is-visible{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
  }
  body.portfolio-page .mt5-number-card::after,
  body.portfolio-page .mt5-analytics-card::after,
  body.portfolio-page .dashboard-backtest-summary > div::after,
  body.portfolio-page .dashboard-backtest-card::after,
  body.portfolio-page .mt5-chart-box::after,
  body.portfolio-page .dashboard-backtest-info-card::after{
    display:none!important;
  }
}