/* NUTRITION RAGE — 07 MOTION — reveals, hover, cursor, hero, marquee, curtain.
   02-base.css owns the [data-nr-reveal] base state and its 2 s CSS failsafe, so
   content is never permanently invisible. This file only adds the polish, and
   the reduced-motion block at the bottom removes every transform. */

/* reveal — the transition the observer drives */
[data-nr-reveal]{transition:opacity var(--nr-med) var(--nr-ease-out),transform var(--nr-med) var(--nr-ease-out)}
[data-nr-reveal].is-revealed{opacity:1;transform:none}

/* card hover — lift, glow, and the image scale, all under 400ms */
.nr-card--link,.nr-tile,.nr-locrow,.nr-storecard,.nr-art{
  transition:transform var(--nr-med) var(--nr-ease-out),border-color var(--nr-med) var(--nr-ease),box-shadow var(--nr-med) var(--nr-ease-out);
}
.nr-card--link:hover,.nr-art:hover,.nr-locrow:hover{
  transform:translateY(-3px);border-color:rgba(140,255,62,.34);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(140,255,62,.08);
}
.nr-art__media img,.nr-gal__img{transition:transform var(--nr-med) var(--nr-ease-out)}
.nr-art:hover .nr-art__media img{transform:scale(1.04)}

/* magnetic buttons — desktop pointer only, driven by magnet.js */
[data-nr-magnet]{transition:transform var(--nr-fast) var(--nr-ease-out)}
@media(hover:none),(pointer:coarse){[data-nr-magnet]{transform:none !important}}

/* custom cursor */
.nr-cursor__dot{transition:transform .05s linear,opacity var(--nr-fast) var(--nr-ease)}
.nr-cursor__ring{transition:transform .13s var(--nr-ease-out),width var(--nr-fast) var(--nr-ease),height var(--nr-fast) var(--nr-ease),opacity var(--nr-fast) var(--nr-ease)}
.nr-cursor.is-over .nr-cursor__ring{width:52px;height:52px;margin-left:-26px;margin-top:-26px;border-color:var(--nr-rage)}
.nr-cursor.is-down .nr-cursor__dot{transform:scale(1.8)}

/* hero — parallax layer plus the animated grid field, masked radially */
.nr-hero__layer{will-change:transform;transition:transform .1s linear}
.nr-hero__layer::after{content:"";
  position:absolute;inset:-10%;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(140,255,62,.10) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(140,255,62,.10) 0 1px,transparent 1px 54px);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);
  animation:nr-drift 26s linear infinite;
}
@keyframes nr-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(54px,54px,0)}}

[data-nr-count]{font-variant-numeric:tabular-nums}

/* marquee — CSS only, pauses on hover */
.nr-marquee__row{animation:nr-marquee 34s linear infinite;will-change:transform}
.nr-marquee:hover .nr-marquee__row,.nr-marquee:focus-within .nr-marquee__row{animation-play-state:paused}
@keyframes nr-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* curtain — removes itself, with a hard failsafe so it can never trap the page */
.nr-curtain{animation:nr-curtain-out .5s var(--nr-ease-out) 1.2s forwards}
@keyframes nr-curtain-out{to{opacity:0;visibility:hidden}}
.nr-curtain__mark{animation:nr-pulse 1.1s var(--nr-ease) infinite alternate}
@keyframes nr-pulse{from{transform:scale(.94)}to{transform:scale(1.04)}}

/* drawers, scrim, toast and the quick view */
.nr-drawer.is-open{box-shadow:-24px 0 80px rgba(0,0,0,.66)}
.nr-quickview__panel{animation:nr-rise .32s var(--nr-ease-out) both}
@keyframes nr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- reduced motion: no transforms anywhere, nothing longer than a blink ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  [data-nr-reveal],[data-nr-reveal].is-revealed{opacity:1 !important;transform:none !important;animation:none !important}
  .nr-card--link:hover,.nr-art:hover,.nr-locrow:hover,.nr-tile:hover,.nr-btn:active,
  .nr-art:hover .nr-art__media img,.nr-curtain__mark,.nr-hero__layer::after,.nr-hero__layer,
  [data-nr-magnet],.nr-marquee__row,.nr-quickview__panel,.nr-cursor__dot,.nr-cursor__ring{
    transform:none !important;
  }
  .nr-marquee__row,.nr-hero__layer::after,.nr-curtain__mark{animation:none !important}
  .nr-cursor{display:none !important}
  .nr-curtain{animation:none !important;opacity:0;visibility:hidden}
}