/* JDRC_PIT_MEMBER_MOTION_V1 */
:root{
  --jdrc-motion-accent: 76, 229, 214;
  --jdrc-motion-blue: 96, 165, 250;
  --jdrc-motion-violet: 167, 139, 250;
  --jdrc-motion-ease: cubic-bezier(.2,.8,.2,1);
}
html.jdrc-motion-ready{scroll-behavior:smooth}

/* Reveal system */
html.jdrc-motion-ready .jdrc-motion-item{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  transition:
    opacity .62s var(--jdrc-motion-ease),
    transform .62s var(--jdrc-motion-ease),
    filter .62s var(--jdrc-motion-ease);
  transition-delay:var(--jdrc-motion-delay,0ms);
  filter:saturate(.88);
}
html.jdrc-motion-ready .jdrc-motion-item.jdrc-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:saturate(1);
}

/* Main animated surfaces */
.jdrc-motion-surface{
  --jdrc-tilt-x:0deg;
  --jdrc-tilt-y:0deg;
  --jdrc-lift:0px;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:
    transform .22s var(--jdrc-motion-ease),
    box-shadow .28s var(--jdrc-motion-ease),
    border-color .28s var(--jdrc-motion-ease),
    filter .28s var(--jdrc-motion-ease);
}
.jdrc-motion-surface.jdrc-motion-visible{
  transform:perspective(1000px) rotateX(var(--jdrc-tilt-x)) rotateY(var(--jdrc-tilt-y)) translate3d(0,var(--jdrc-lift),0);
}
.jdrc-motion-surface:hover,
.jdrc-motion-surface:focus-within{
  --jdrc-lift:-4px;
  border-color:rgba(var(--jdrc-motion-accent),.34);
  box-shadow:0 18px 45px rgba(0,0,0,.30),0 0 0 1px rgba(var(--jdrc-motion-accent),.08),0 0 34px rgba(var(--jdrc-motion-blue),.09);
}
.jdrc-motion-sheen{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
  opacity:0;
  transition:opacity .25s ease;
}
.jdrc-motion-sheen::before{
  content:"";
  position:absolute;
  width:52%;
  height:180%;
  left:-70%;
  top:-40%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),rgba(var(--jdrc-motion-accent),.10),transparent);
}
.jdrc-motion-surface:hover>.jdrc-motion-sheen,
.jdrc-motion-surface:focus-within>.jdrc-motion-sheen{opacity:1}
.jdrc-motion-surface:hover>.jdrc-motion-sheen::before,
.jdrc-motion-surface:focus-within>.jdrc-motion-sheen::before{animation:jdrcMotionSheen .9s var(--jdrc-motion-ease)}
@keyframes jdrcMotionSheen{to{left:130%}}

/* Premium/featured cards get a restrained living glow. */
.jdrc-motion-glow{
  box-shadow:0 0 0 1px rgba(var(--jdrc-motion-accent),.10),0 12px 30px rgba(0,0,0,.22);
}
.jdrc-motion-glow::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-2;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(var(--jdrc-motion-accent),.18),transparent 35%,rgba(var(--jdrc-motion-violet),.14) 70%,transparent);
  background-size:220% 220%;
  opacity:.45;
  animation:jdrcMotionGlow 7s ease-in-out infinite alternate;
}
@keyframes jdrcMotionGlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* Hero/header energy */
.jdrc-motion-hero{position:relative;overflow:hidden}
.jdrc-motion-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:280px;
  height:280px;
  right:-120px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--jdrc-motion-accent),.14),rgba(var(--jdrc-motion-blue),.055) 43%,transparent 70%);
  animation:jdrcHeroDrift 9s ease-in-out infinite alternate;
}
@keyframes jdrcHeroDrift{to{transform:translate3d(-45px,35px,0) scale(1.13)}}

/* Live state chips */
.jdrc-motion-status{position:relative}
.jdrc-motion-status::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid currentColor;
  opacity:0;
  animation:jdrcStatusPulse 3.2s ease-out infinite;
}
@keyframes jdrcStatusPulse{0%,55%{transform:scale(.96);opacity:0}70%{opacity:.22}100%{transform:scale(1.14);opacity:0}}

/* Numbers react when server-authoritative values update. */
.jdrc-motion-value{font-variant-numeric:tabular-nums}
.jdrc-motion-value-pulse{animation:jdrcValuePulse .52s var(--jdrc-motion-ease)}
@keyframes jdrcValuePulse{0%{transform:scale(1)}45%{transform:scale(1.075);text-shadow:0 0 18px rgba(var(--jdrc-motion-accent),.55)}100%{transform:scale(1)}}

/* Buttons get a short physical press + ripple. */
.button.jdrc-motion-button{position:relative;overflow:hidden;isolation:isolate;transition:transform .16s ease,box-shadow .2s ease,filter .2s ease}
.button.jdrc-motion-button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.button.jdrc-motion-button:active{transform:translateY(0) scale(.985)}
.jdrc-motion-ripple{
  position:absolute;
  z-index:-1;
  width:12px;
  height:12px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.28);
  transform:translate(-50%,-50%) scale(0);
  animation:jdrcRipple .6s ease-out forwards;
}
@keyframes jdrcRipple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}

/* Pit feed posts slide in slightly differently so a refresh feels alive. */
.pit-feed-post-list>.jdrc-motion-item{transform:translate3d(-14px,14px,0) scale(.99)}
.pit-feed-post-list>.jdrc-motion-item.jdrc-motion-visible{transform:translate3d(0,0,0) scale(1)}

/* Active navigation/tab accent. */
.pit-feed-tab,.jdrc-motion-tab{position:relative;overflow:hidden}
.pit-feed-tab::after,.jdrc-motion-tab::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:2px;height:2px;
  transform:scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,rgba(var(--jdrc-motion-accent),0),rgba(var(--jdrc-motion-accent),.95),rgba(var(--jdrc-motion-blue),.9),rgba(var(--jdrc-motion-accent),0));
  transition:transform .25s var(--jdrc-motion-ease);
}
.pit-feed-tab.active::after,.pit-feed-tab:hover::after,.jdrc-motion-tab:hover::after{transform:scaleX(1)}

/* Success spark burst; JS creates only a few short-lived particles. */
.jdrc-motion-spark{
  position:fixed;
  z-index:99999;
  width:7px;height:7px;
  border-radius:2px;
  pointer-events:none;
  background:rgb(var(--jdrc-motion-accent));
  box-shadow:0 0 12px rgba(var(--jdrc-motion-accent),.7);
  animation:jdrcSpark .72s ease-out forwards;
}
@keyframes jdrcSpark{to{transform:translate3d(var(--jdrc-spark-x),var(--jdrc-spark-y),0) rotate(220deg) scale(.2);opacity:0}}

/* Mobile keeps the reveal/glow but avoids GPU-heavy tilt. */
@media (max-width:760px),(hover:none),(pointer:coarse){
  .jdrc-motion-surface.jdrc-motion-visible{transform:translate3d(0,var(--jdrc-lift),0)}
  .jdrc-motion-surface:hover{--jdrc-lift:-2px}
  .jdrc-motion-glow::after{animation-duration:10s}
}

@media (prefers-reduced-motion:reduce){
  html.jdrc-motion-ready{scroll-behavior:auto}
  html.jdrc-motion-ready .jdrc-motion-item,
  html.jdrc-motion-ready .jdrc-motion-item.jdrc-motion-visible,
  .jdrc-motion-surface,.jdrc-motion-surface.jdrc-motion-visible,
  .button.jdrc-motion-button{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .jdrc-motion-glow::after,.jdrc-motion-hero::after,.jdrc-motion-status::after,.jdrc-motion-sheen::before,.jdrc-motion-spark{animation:none!important}
  .jdrc-motion-spark{display:none!important}
}