/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   View transitions (router-driven)
   ========================================================================== */

/* v12: a view arrives with a short cross-fade, not a rise; its cards do
   not animate in one by one (REDESIGN-PLAN section 5, step 1). */
.view-enter {
  animation: fade-in var(--dur-fast) var(--ease-standard) both;
}

.view-leave {
  animation: fade-in var(--dur-fast) var(--ease-standard) reverse both;
}

/* .stagger-item stays on the markup (print.css and form.css refer to it)
   but no longer animates. */

/* ==========================================================================
   Entry motion (the look of 26.10, "ruchA"; js/components/entry-motion.js)

   Played once when a view is first shown - a page load or a navigation to
   it - never on a refresh: the script puts these classes on the parts that
   exist at that moment and takes them off when it is over (hard rule 11: a
   card rebuilt later has nothing to replay). Each part rises 8px out of a
   short blur, 30ms after the one before (--tb-d; quicker since 26.10); the equity line draws
   itself and the area under it fades in. Flat: no colour, no glow.
   ========================================================================== */

.tb-rise {
  /* backwards, not both: once risen a part holds no transform or filter, so a menu opened in it at once is placed
     against the screen, not the moving part (review 26.10). */
  animation: tb-rise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--tb-d, 0ms);
}

@keyframes tb-rise {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* The chart sets --tb-len (the line's length) and, when it is painted while the
   motion is already running, a negative delay, only while the motion plays
   (charts.js heroChart). */
.tb-line--draw {
  stroke-dasharray: var(--tb-len);
  animation: tb-draw 500ms cubic-bezier(0.3, 0.7, 0.2, 1) 80ms both;
}

.tb-area--fade {
  animation: tb-fade 320ms ease-out 240ms both;
}

@keyframes tb-draw {
  from { stroke-dashoffset: var(--tb-len); }
  to { stroke-dashoffset: 0; }
}

@keyframes tb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-rise,
  .tb-line--draw,
  .tb-area--fade {
    animation: none !important;
  }
}

/* ==========================================================================
   Utility animation classes
   ========================================================================== */

.anim-scale-in {
  animation: scale-in var(--dur-base) var(--ease-spring) both;
}

/* Press feedback for any clickable element */
.press-scale {
  transition: transform var(--dur-instant) var(--ease-spring-snappy);
}

.press-scale:active {
  transform: scale(0.97);
}