/* ============================================================
   INVESTRA - motion layer styles (motion.css, Round 17). Pairs with motion.js.
   Curve = the author site's expo-out (var(--ease-out) is the same cubic-bezier(.16,1,.3,1)).
   ============================================================ */
:root { --mo-ease: cubic-bezier(.16, 1, .3, 1); --mo-dur: .75s; }

/* reveals: a calm rise with the stagger delay motion.js sets per element */
.fade-up, .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease), box-shadow .3s ease, border-color .3s ease, background-color .3s ease; transition-delay: var(--rv-d, 0ms), var(--rv-d, 0ms), 0s, 0s, 0s; }
.fade-up.visible, .rv.visible { opacity: 1; transform: none; }
.scale-in { opacity: 0; transform: scale(.965); transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease); transition-delay: var(--rv-d, 0ms); }
.scale-in.visible { opacity: 1; transform: none; }
.fade-in { opacity: 0; transition: opacity .7s var(--mo-ease); transition-delay: var(--rv-d, 0ms); }
.fade-in.visible { opacity: 1; }
.fade-up.reveal-left { transform: translateX(-22px); }
.fade-up.reveal-scale { transform: scale(.975); }
.fade-up.reveal-left.visible, .fade-up.reveal-scale.visible { transform: none; }

/* re-entrance for panels and swapped views (Motion.enter) */
@keyframes moEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mo-enter { animation: moEnter .7s var(--mo-ease) both; }
/* one-off pop for lists (Motion.stagger) */
@keyframes moPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.mo-pop { animation: moPop .6s var(--mo-ease) both; animation-delay: var(--rv-d, 0ms); }

/* page leave: the content settles back before the next page loads */
.content { transition: opacity .23s ease, transform .23s ease; }
html.mo-leave .content { opacity: 0; transform: translateY(-6px); }

/* buttons, chips and cards share the same easing on hover */
.glass, .kpi-card, .aura-card, .chip, .pickchip, .tab-btn, .astra-tab, .sg-pill, .mm-mode { transition-timing-function: var(--mo-ease); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .rv, .scale-in, .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-enter, .mo-pop { animation: none !important; }
  html.mo-leave .content { opacity: 1; transform: none; }
}
@media print { .fade-up, .rv, .scale-in, .fade-in { opacity: 1 !important; transform: none !important; } }

/* R18: the page background (assets/js/cosmos-bg.js), under the app shell */
.cosmos-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@media print { .cosmos-bg { display: none !important; } }

/* R20 performance: cards no longer re-blur the page behind them on every frame (that, over the animated background, was
   the main source of scroll lag - measured). A near-opaque glass tint keeps the look; small floating UI keeps its blur. */
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg-card) 90%, transparent); }