/* =========================================================================
   PREMIUM MOTION — entrance/reveal animation styles
   Loaded after styles.css / redesign.css / phase2.css, only adds motion.
   ========================================================================= */

.pm-reveal{
  opacity: 0;
  transform: translateY(22px) scale(.98);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--pm-delay, 0ms);
  will-change: opacity, transform;
}
.pm-reveal.pm-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* KPI cards get a slightly larger rise + a soft glow pulse on arrival,
   since these are the first thing the eye lands on. */
.exec-kpi.pm-reveal{ transform: translateY(28px) scale(.96); }
.exec-kpi.pm-reveal.pm-visible{
  animation: pmKpiGlow 1.1s cubic-bezier(.16,1,.3,1);
}
@keyframes pmKpiGlow{
  0%   { box-shadow: 0 0 0 rgba(210,174,109,0); }
  35%  { box-shadow: 0 0 26px rgba(210,174,109,.16); }
  100% { box-shadow: 0 0 0 rgba(210,174,109,0); }
}

/* Sidebar nav: quick cascading entrance on first load only */
.nav-scroll .tabbtn{
  animation: pmNavIn .5s cubic-bezier(.16,1,.3,1) both;
}
.nav-scroll .tabbtn:nth-child(1){ animation-delay: .02s; }
.nav-scroll .tabbtn:nth-child(2){ animation-delay: .06s; }
.nav-scroll .tabbtn:nth-child(3){ animation-delay: .10s; }
.nav-scroll .tabbtn:nth-child(4){ animation-delay: .14s; }
.nav-scroll .tabbtn:nth-child(5){ animation-delay: .18s; }
.nav-scroll .tabbtn:nth-child(n+6){ animation-delay: .20s; }
@keyframes pmNavIn{
  from{ opacity: 0; transform: translateX(-8px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* Hero trend line: dash-offset animated from JS, this just sets the base */
#heroTrendPath{ stroke-dashoffset: 0; }

/* Hero win/draw/loss prediction bars grow in smoothly whenever their width
   is (re)assigned — the JS layer replays this by toggling width via rAF. */
#heroWinBar, #heroDrawBar, #heroLossBar{
  transition: width .9s cubic-bezier(.16,1,.3,1);
}

/* Chart canvases: subtle lift-in so the whole panel doesn't just "pop" */
canvas.pm-reveal{
  transform: translateY(10px) scale(.985);
}

@media (prefers-reduced-motion: reduce){
  .pm-reveal, .pm-reveal.pm-visible{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .nav-scroll .tabbtn{ animation: none !important; }
}