/* TP CONTEXT / LIVE09 - grid backgrounds + subtle animated HOME demonstration.
   Scope: static presentation only. No market data, API, workers or notifications. */
:root { --tp-background-grid-step: 48px; }
/* All non-home routes: a subtle grid behind the site's existing opaque cards. */
body:not(.tpx-home-active) {
  background-color: #06111d !important;
  background-image:
    linear-gradient(to bottom, rgba(73,153,208,.052) 1px, transparent 1px),
    linear-gradient(to right, rgba(73,153,208,.052) 1px, transparent 1px),
    radial-gradient(ellipse at 78% 5%, rgba(15,93,151,.10), transparent 48%),
    radial-gradient(ellipse at 15% 60%, rgba(14,77,130,.06), transparent 55%),
    linear-gradient(180deg, #06111b 0%, #050e18 100%) !important;
  background-size:
    var(--tp-background-grid-step) var(--tp-background-grid-step),
    var(--tp-background-grid-step) var(--tp-background-grid-step),
    auto, auto, auto !important;
  background-attachment: fixed !important;
}
/* Existing legal/Journal/Studio pseudo backgrounds would double the lines. */
body.tp-legal-page::before,
body.studio-v07::before,
body:has(#journalR22Root)::before { display:none !important; }
/* The Home keeps its matching 48px visual grid intact. No layout changes. */
/* R31 demonstration chart only — NEVER the user's MT5 graph. */
body.tpx-home-active .tpx-r31-market-chart .tpx-r31-chart-stage { position:relative; isolation:isolate; overflow:hidden; }
body.tpx-home-active .tpx-r31-market-chart .tp-motion-playhead {
  position:absolute; top:12%; bottom:8%; left:0; width:1px;
  border-left:1px solid rgba(82,185,243,.28);
  box-shadow:0 0 12px 3px rgba(66,155,215,.09);
  z-index:2; pointer-events:none;
  animation:tp-home-demo-sweep 14s linear infinite;
}
body.tpx-home-active .tpx-r31-market-chart .tp-motion-playhead::after {
  content:''; position:absolute; top:-1px; left:-2px; width:5px; height:5px;
  border-radius:50%; background:#68caff; box-shadow:0 0 12px rgba(68,188,246,.66);
}
body.tpx-home-active .tpx-r31-market-chart .tp-motion-caption {
  position:absolute; right:16px; bottom:8px; z-index:3; pointer-events:none;
  color:rgba(144,193,216,.72); font-size:9px; font-weight:650;
  letter-spacing:.06em; text-transform:uppercase;
  background:rgba(5,16,28,.74); border:1px solid rgba(58,139,196,.15);
  padding:4px 8px; border-radius:6px;
}
body.tpx-home-active .tpx-r31-market-chart svg .tp-motion-recent-candle {
  animation:tp-home-demo-candle 7.8s ease-in-out infinite;
  animation-delay:var(--tp-demo-delay,0s);
  transform-box:fill-box; transform-origin:50% 100%;
}
body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-last-price-line,
body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-last-price-box {
  animation:tp-home-demo-price 3.5s ease-in-out infinite;
}
body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-setup-dot {
  animation:tp-home-demo-marker 3.6s ease-in-out infinite;
}
body.tpx-home-active .tpx-r31-market-chart .tpx-r31-live-dot {
  animation:tp-home-demo-live 2.7s ease-in-out infinite;
}
@keyframes tp-home-demo-sweep {
  0% { left:4%; opacity:0; }
  6% { opacity:.52; }
  89% { opacity:.52; }
  100% { left:96%; opacity:0; }
}
@keyframes tp-home-demo-candle {
  0%,66%,100% { opacity:1; transform:scaleY(1); }
  73% { opacity:.48; transform:scaleY(.84); }
  82% { opacity:1; transform:scaleY(1); }
}
@keyframes tp-home-demo-price { 0%,100% {opacity:.58} 50% {opacity:1} }
@keyframes tp-home-demo-marker { 0%,100% {opacity:.7} 50% {opacity:1} }
@keyframes tp-home-demo-live { 0%,100% {opacity:.65;box-shadow:0 0 0 0 rgba(75,179,236,.20)} 50% {opacity:1;box-shadow:0 0 0 5px rgba(75,179,236,.05)} }
@media (prefers-reduced-motion:reduce) {
  body.tpx-home-active .tpx-r31-market-chart .tp-motion-playhead {display:none!important}
  body.tpx-home-active .tpx-r31-market-chart svg .tp-motion-recent-candle,
  body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-last-price-line,
  body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-last-price-box,
  body.tpx-home-active .tpx-r31-market-chart svg .tpx-r31-setup-dot,
  body.tpx-home-active .tpx-r31-market-chart .tpx-r31-live-dot {animation:none!important}
}