/* Performance layer. Same look, less work per frame. Loaded last so it wins over tm.css / rx.css. */

/* ── Cursor v2 look ─────────────────────────────────────────────
   No "difference" blending (it re-blends the whole page under the cursor every frame).
   Movement and scaling are driven by JS transforms, so CSS only animates colours. */
.tm-cursor{contain:layout style}
.tm-cursor,.tm-cursor--dot,.tm-cursor--halo,.tm-cursor-pulse,.tm-ripple{mix-blend-mode:normal!important}
.tm-cursor--dot>i{
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 4px #fff,0 0 12px rgba(255,255,255,.9),0 0 28px rgba(255,255,255,.45)!important;
  transition:none!important}
.tm-cursor--halo>i{
  border:1.5px solid rgba(255,255,255,.42)!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 18px rgba(255,255,255,.10)!important;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease!important}
.tm-cursor--halo[data-mode=hover]>i{border-color:rgba(255,255,255,.85)!important;background:rgba(255,255,255,.07)!important;box-shadow:0 0 22px rgba(255,255,255,.16)!important}
.tm-cursor--halo[data-mode=mag]>i{border-color:rgba(255,255,255,.95)!important;background:rgba(255,255,255,.05)!important;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 26px rgba(255,255,255,.22)!important}
.tm-cursor--halo[data-mode=view]>i{border-color:#fff!important;background:#fff!important;box-shadow:0 12px 40px -10px rgba(255,255,255,.6)!important}
.tm-cursor--halo.is-down>i{border-color:#fff!important}
.tm-cursor-pulse{border-color:rgba(255,255,255,.85);box-shadow:0 0 12px rgba(255,255,255,.35)}

/* ── Frosted-glass blur on things that are always on screen ─────
   Blur behind fixed elements is recalculated every frame the video or page underneath moves.
   Solid dark tints look the same on a black site. Blur stays on pop-up backdrops. */
.fm-header,.tm-gift__tab,.tm-totop-fab,.tm-sfx-btn,.tm-buybar,.tm-dots,.tm-status,.tm-compare__tag,
.rx-st,.rx-btn--ghost,.rx-pcard__num{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.fm-header{background:rgba(3,3,3,.9)!important}
.tm-gift__tab,.tm-totop-fab,.tm-sfx-btn{background:rgba(12,12,12,.95)!important}
.rx-st,.rx-pcard__num,.tm-status,.tm-compare__tag{background:rgba(0,0,0,.82)!important}
.rx-btn--ghost{background:rgba(255,255,255,.08)}

/* ── Layers: things with big shadows/blur that move get their own GPU layer,
   so the expensive part is drawn once and only moved afterwards ── */
.rx-hero__mark,.rx-signal__fx img,.tm-gift__svg,.tm-gift__glow,.rx-hero__glow,.tm-bg__video{will-change:transform}

/* ── Sections that are scrolled out of view pause their looping animations (perf.js) ── */
.tm-offscreen,.tm-offscreen *,.tm-offscreen *::before,.tm-offscreen *::after{animation-play-state:paused!important}

/* ── Loader preview: only blur behind its loading popup while it is open ── */
.relay-app .loading-overlay{backdrop-filter:none!important}
.relay-app .loading-overlay.on{backdrop-filter:blur(6px)!important}

/* ── Lite mode (slow devices only, see perf.js). Looks the same: the video holds its current frame
   and the background shapes stop drifting; only effects that repaint every frame are calmed. ── */
html.tm-lite .tm-bg *{animation-play-state:paused!important}
html.tm-lite *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tm-lite .tm-hero__title .tm-hl,html.tm-lite .tm-trial::before,html.tm-lite .tm-trial__btn,
html.tm-lite .tm-dot,html.tm-lite .tm-sdot,html.tm-lite .tm-dcount__dot--on,html.tm-lite .st-pulse__dot,
html.tm-lite .tm-sbanner__scan,html.tm-lite .tm-guarantee::after,html.tm-lite .tm-trial__shine{animation-play-state:paused!important}