/* ==========================================================================
   Norhart motion: soft page fades, scroll reveal, colour transitions, edge fades.
   Everything that hides content is gated on <html class="js">, so without JS nothing stays invisible.
   ========================================================================== */
@view-transition{navigation:auto}
@keyframes nhPage{from{opacity:0}to{opacity:1}}
@keyframes nhVtOut{to{opacity:0}}
@keyframes nhVtIn{from{opacity:0}}
::view-transition-old(root){animation:nhVtOut .16s ease both}
::view-transition-new(root){animation:nhVtIn .3s ease both}

/* fallback: fast fade-in on load, gentle fade-out when leaving (JS adds .nh-leave) */
html.js:not(.nh-vt) body{animation:nhPage .3s ease-out backwards}
html.js.nh-leave:not(.nh-vt) body{opacity:0;transition:opacity .16s ease}

/* scroll reveal: fade + lift once */
html.js .nh-rv:not(.nh-in){opacity:0;transform:translateY(10px)}
html.js .nh-rv{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),border-color .18s ease,box-shadow .2s ease,background-color .18s ease}
html.js .nh-rv.nh-in{opacity:1;transform:none}

/* smooth colour changes on interaction + theme switches */
a,button,.btn,.glass,.card,.input,input,select,textarea,.nav-link,.tab,.row,.provider,.pill,.toc-link,.tab-bar a,.w-tab,.w-coin-btn,summary,.nh-clh{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .2s ease,opacity .18s ease,transform .2s ease}
html.nh-theming *,html.nh-theming *::before,html.nh-theming *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}

/* value changes: brief green (up) or blue (other) fade */
@keyframes nhUp{from{background-color:rgba(32,201,151,.30)}to{background-color:rgba(32,201,151,0)}}
@keyframes nhChg{from{background-color:rgba(59,130,246,.26)}to{background-color:rgba(59,130,246,0)}}
.nh-fl-up{animation:nhUp .9s ease-out;border-radius:5px}
.nh-fl-chg{animation:nhChg .9s ease-out;border-radius:5px}

/* soft fade-outs at the edges of scrollable areas (JS sets --fl/--fr/--ft/--fb: 0 = more content that way) */
.nh-fx{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,var(--fl,1)) 0,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,var(--fr,1)) 100%),linear-gradient(to bottom,rgba(0,0,0,var(--ft,1)) 0,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,var(--fb,1)) 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,rgba(0,0,0,var(--fl,1)) 0,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,var(--fr,1)) 100%),linear-gradient(to bottom,rgba(0,0,0,var(--ft,1)) 0,#000 26px,#000 calc(100% - 26px),rgba(0,0,0,var(--fb,1)) 100%);mask-composite:intersect}

@media print{.nh-rv{opacity:1!important;transform:none!important}.nh-fx{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.js body{animation:none!important}
  html.js .nh-rv:not(.nh-in){opacity:1;transform:none}
  html.js .nh-rv{transition:none}
  .nh-fl-up,.nh-fl-chg{animation:none}
  html.nh-theming *{transition:none!important}
}