/* Breakout Vietnam — shared motion & pointer layer. Loaded on every page after the page's own CSS. */

/* Scroll progress: a thin "equity line" across the top */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#f5c249,#26d07c);box-shadow:0 0 10px rgba(38,208,124,.6)}

/* Nav gets depth once you scroll */
.nav{transition:box-shadow .3s,background-color .3s}
body.fx-scrolled .nav{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* TradingView-style crosshair that follows the pointer */
.fx-xh{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;transition:opacity .25s}
body.fx-xh-on .fx-xh{opacity:1}
.fx-xh i{position:absolute;display:block;will-change:transform}
.fx-xh .h{left:0;right:0;top:0;border-top:1px dashed rgba(227,232,240,.26)}
.fx-xh .v{top:0;bottom:0;left:0;border-left:1px dashed rgba(227,232,240,.26)}
.fx-xh .ty,.fx-xh .tx{font:600 10.5px 'JetBrains Mono',ui-monospace,monospace;color:#0a0d13;background:#d9e0ea;padding:2px 6px;border-radius:3px;white-space:nowrap}
.fx-xh .ty{right:0;top:0}
.fx-xh .tx{bottom:0;left:0}
.fx-xh .dot{width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:#26d07c;box-shadow:0 0 0 4px rgba(38,208,124,.18)}
@media (hover:hover) and (pointer:fine){ body.fx-xh-on, body.fx-xh-on a, body.fx-xh-on button{cursor:crosshair} }

/* Pointer spotlight on panels */
.fx-glow{transition:border-color .25s,transform .25s,box-shadow .25s}
.fx-glow:hover{border-color:rgba(38,208,124,.35)!important;
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(38,208,124,.09),transparent 45%)}

/* Magnetic primary buttons */
.fx-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .15s,box-shadow .25s;will-change:transform}
.fx-mag:hover{box-shadow:0 8px 28px rgba(38,208,124,.35)}

/* Click = fill ripple */
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:fx-rip .6s ease-out forwards}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}

/* Scroll reveal with stagger */
.fx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--fx-d,0s)}
.fx-reveal.in{opacity:1;transform:none}

/* Images: slow zoom on hover, parallax on scroll */
.fx-zoom{overflow:hidden}
.fx-zoom img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fx-zoom:hover img{transform:scale(1.06)}
img.fx-par{will-change:transform}

/* Live value flash (tick up) */
.fx-tick{animation:fx-tick .6s ease-out}
@keyframes fx-tick{0%{color:#26d07c;text-shadow:0 0 14px rgba(38,208,124,.7)}100%{text-shadow:none}}

/* Reduced motion: no travel or parallax, but keep gentle fades and pointer feedback. */
@media (prefers-reduced-motion:reduce){
  .fx-reveal{transform:none;transition:opacity .5s ease}
  .fx-zoom:hover img{transform:none}
}