/* btc-analysis.com  |  motion layer + fixes on the original graphite colours (variant B).
   Aurora Blue colours are kept in the project as theme-aurora.css if ever needed. */

:root { --fx-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---------- Motion ---------- */
/* Scroll reveal (only applied by fx.js to elements below the fold) */
.fx-rv { opacity: 0; transform: translate3d(0, 18px, 0); }
.fx-rv.fx-in { opacity: 1; transform: none;
  transition: opacity .6s var(--fx-ease) var(--fx-d, 0ms), transform .75s var(--fx-ease) var(--fx-d, 0ms); }

/* Cursor spotlight on panels (fine pointers only, set up by fx.js) */
@media (hover: hover) and (pointer: fine) {
  .fx-spot:hover { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.10), transparent 65%); }
  /* fx-spot-soft: dashboard metric tiles get a lighter glow */
  #dashboard .idx-metric-card.fx-spot:hover { background-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.065), transparent 65%); }
  .rpt-card.fx-spot:hover { background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.12), transparent 65%); }
}

/* Value update flash */
.fx-up { animation: fx-fu 1.2s ease; border-radius: 4px; }
.fx-dn { animation: fx-fd 1.2s ease; border-radius: 4px; }
@keyframes fx-fu { 0% { background-color: rgba(52, 211, 153, 0.25); } 100% { background-color: transparent; } }
@keyframes fx-fd { 0% { background-color: rgba(251, 113, 133, 0.25); } 100% { background-color: transparent; } }
.fx-num { font-variant-numeric: tabular-nums; }

/* LIVE ping */
.fx-ping { position: relative; }
.fx-ping::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid currentColor;
  opacity: 0; pointer-events: none; animation: fx-ping .9s var(--fx-ease); }
@keyframes fx-ping { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }


/* Sliding selection indicator (dashboard sidebar) */
.fx-ind { position: absolute; left: 6px; right: 6px; top: 0; height: 32px; border-radius: 8px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.20), rgba(34, 211, 238, 0.05));
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
  transition: transform .45s var(--fx-ease), opacity .2s; will-change: transform; opacity: 0; }
.fx-ind.on { opacity: 1; }
.fx-ind.fx-jump { transition: opacity .2s; }

/* Chart title crossfade */
.fx-swap { animation: fx-swap .45s var(--fx-ease); }
@keyframes fx-swap { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .fx-rv { opacity: 1 !important; transform: none !important; }
  .fx-up, .fx-dn, .fx-ping::after, .fx-swap { animation: none !important; }
  .fx-ind { transition: none !important; }
}

/* ---------- Dashboard page specifics ---------- */
.crumbs .live { border-radius: 999px !important; }
/* the sliding .fx-ind replaces the per-row highlight */
.fx-has-ind .dash-side [data-group] .idx-metric-card.ring-1 { background: transparent !important; }
.fx-has-ind .dash-side [data-group] .idx-metric-card.ring-1::before { display: none; }
.dash-side .idx-metric-card > p:nth-child(1) { transition: transform .3s var(--fx-ease); }
@media (hover: hover) { .dash-side .idx-metric-card:hover > p:nth-child(1) { transform: translateX(2px); } }
.dash-side .idx-metric-card, .nav-row { z-index: 1; }

/* Touch screens: nothing may appear on hover, otherwise iOS spends the first tap on "hover" (tap twice bug) */
.dash-side .idx-metric-card, .nav-row, .idx-metric-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
  .nav-star { opacity: .35 !important; }
  .nav-star.on { opacity: 1 !important; }
  .stat-hover:hover, .card-hover:hover, .rpt-card:hover { transform: none !important; }
}

/* Chart watermark logo: hide its dark square background */
.chart-watermark img { mix-blend-mode: screen; opacity: .3 !important; }