/* Road To Pro — smooth motion layer (loaded last on every page).
   Rule: nothing jumps. Boxes never lift or scale on hover; borders, glows and colours fade in slowly,
   and every curve eases out without overshoot. */
:root { --sm-e: cubic-bezier(.22, .61, .36, 1); --sm-t: .65s; }

/* no overshoot anywhere (games and live trackers excluded) */
body *:not(.aim-arena *):not(.xh-arena *):not(.react):not(.sound *):not(#bossHl):not(.game *),
body *:not(.aim-arena *):not(.xh-arena *):not(.react):not(.sound *):not(#bossHl):not(.game *)::before,
body *:not(.aim-arena *):not(.xh-arena *):not(.react):not(.sound *):not(#bossHl):not(.game *)::after { transition-timing-function: var(--sm-e) !important; }

/* ---------- boxes & cards: calm hover (no lift / no scale), slow border + glow ---------- */
:is(.sys-i, .bx, .pt, .plan, .faq-list details, .legal section,
    .card, .mission, .demo, .hm, .map, .pro, .stat, .tier, .tip, .kpi, .rv-i, .pcard, .lu, .cpt, .ann-v, .cd, .okr, .hl-th,
    .elo-card, .spin-card, .boss-mini, .wd, .shop-item, .badge, .nf, .qa, .ha-i, .wt, .hist, .player-card, .quote-card, .coach-note,
    .plan-c, .gw-c, .lnode-b, .mpick, .bp-cell, .tag, .pl-card, .sys-card, .q-card, .panel, .c-map, .c-sk, .prem-lock, .trial-note) {
  transition-property: opacity, transform, border-color, box-shadow, background-color, color, filter, outline-color !important;
  transition-duration: var(--sm-t) !important;
}
:is(.bx, .pt, .plan, .card, .mission, .demo, .hm, .map, .pro, .stat, .tier, .tip, .kpi, .rv-i, .pcard, .lu, .cpt, .ann-v, .cd, .okr, .hl-th,
    .elo-card, .spin-card, .boss-mini, .wd, .shop-item, .badge, .nf, .qa, .ha-i, .wt, .hist, .plan-c, .gw-c, .lnode-b, .mpick, .tag,
    .pl-card, .sys-card, .q-card, .c-map, .kpi.link, .lift):hover { transform: none !important; }
.sys-i:hover { transform: none; }
.sys-i { transform: none !important; }
.sys-i.reveal:not(.in) { transform: translateY(24px) !important; }

/* inner details may still move a little — slowly */
:is(.bx-i, .m-ico, .si-ico, .nf-ico, .ci-ico, .mp, .go, .play, .sys-emo, .gw-img img, .pc-photo img, .bi, .mini-mis div, .mini-card, .sys-i li, .nf-go, .pl-go, .sys-ico, .bh-ico) {
  transition: transform .8s var(--sm-e), opacity .6s var(--sm-e), color .5s var(--sm-e), filter .6s var(--sm-e) !important;
}
.bx:hover .mini-mis div:nth-child(1) { transform: translateX(3px); } .bx:hover .mini-mis div:nth-child(2) { transform: translateX(5px); } .bx:hover .mini-mis div:nth-child(3) { transform: translateX(7px); }
.bx:hover .mini-card { transform: none; }
.bx:hover .bx-i { transform: rotate(-6deg) scale(1.06); }

/* the red glow / spotlight inside boxes fades in slowly instead of popping */
.bx::after, .sys-glow, .sys-i::before, .sys-i::after, .pl-card::before { transition: opacity .9s var(--sm-e), transform 1s var(--sm-e) !important; }
.bx:hover { border-color: rgba(227, 22, 31, .4) !important; box-shadow: 0 24px 60px -34px rgba(227, 22, 31, .6) !important; }

/* ---------- buttons: no jump, the colour glows in ---------- */
:is(.btn, button.primary, button.ghost, button.danger, .btn-done, .filebtn, .btnlink, .btn-prem, .pill, a.pill, .icon-btn, .lang-sw button, .top-nav a, .tabs a, .day-picker button, .quiz-opts button, .qz-o, .cnav-i, .oq-opts button, .onb-unsure, .in-go, .in-skip, .in-mute) {
  transition-property: transform, opacity, border-color, box-shadow, background-color, color, filter !important;
  transition-duration: .55s !important;
}
:is(.btn, button.primary, button.ghost, button.danger, .btn-done, .filebtn, .btnlink, .btn-prem, a.pill, .icon-btn, .day-picker button, .tag, .lang-btn, .powered, .in-go):hover { transform: none !important; }
:is(.quiz-opts button, .qz-o, .cnav-i, .oq-opts button, .nf.link):hover { transform: translateX(2px) !important; }
:is(.btn, button.primary, button.ghost, .btn-done):active { transform: scale(.985) !important; transition-duration: .2s !important; }

/* landing .btn: hover colour as an overlay that fades (a gradient swap would snap) */
.btn.primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #ff6a71, var(--red-hot, #ff3b44) 45%, var(--red, #e3161f)); opacity: 0; transition: opacity .6s var(--sm-e); pointer-events: none; }
.btn.primary:hover { background: linear-gradient(135deg, var(--red-hot, #ff3b44), var(--red, #e3161f) 45%, var(--red-deep, #8f0d14)) !important; box-shadow: 0 14px 34px -10px rgba(227, 22, 31, .75) !important; }
.btn.primary:hover::before { opacity: 1; }
.btn::after { transition: left 1.1s var(--sm-e) !important; }
.btn:not(.primary):hover { border-color: rgba(227, 22, 31, .6) !important; background-color: rgba(227, 22, 31, .07) !important; }

/* nav underline grows slowly */
.top-nav a::after { transition: transform .6s var(--sm-e) !important; }
.tab-ind, #tabInd { transition: transform .6s var(--sm-e), width .6s var(--sm-e), opacity .4s var(--sm-e) !important; }

@media (prefers-reduced-motion: reduce) { :root { --sm-t: .01ms; } }
.btn.primary.loading::before { inset: auto; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: none; opacity: 1; border-radius: 50%; z-index: 1; }