/*
 * Restrained production adaptations of React Bits DotGrid, SpotlightCard,
 * AnimatedList, Magnet and StarBorder. Chain color remains data-only; bone stays
 * the brand neutral. Runtime is desktop/fine-pointer only (see effects.js).
 */

/* DotGrid — ambient depth behind the application, never above readable data. */
.rb-dot-grid{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;pointer-events:none;opacity:.8;mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%)}
body>.page{position:relative}
body>.top,body>.page{z-index:1}
body>.top{z-index:50}
body>.scanline{z-index:60}
html[data-reactbits="static"] body:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.2;background-image:radial-gradient(circle,rgba(237,231,217,.32) 0 .65px,transparent .8px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 72%)}

/* SpotlightCard — a local light response, not a permanent glow. */
.rb-spotlight{--rb-x:50%;--rb-y:50%;position:relative;isolation:isolate}
.rb-spotlight:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(310px circle at var(--rb-x) var(--rb-y),color-mix(in srgb,var(--accent) 8%,transparent),rgba(237,231,217,.018) 36%,transparent 72%);transition:opacity .42s var(--editorial-ease)}
.rb-spotlight.rb-spotlight-live:after,.rb-spotlight:focus-within:after{opacity:1}
.upcoming-card.rb-spotlight:after,.detail-card.rb-spotlight:after,.lightbox-inner.rb-spotlight:after{z-index:0}
.upcoming-card.rb-spotlight>*,.detail-card.rb-spotlight>*,.lightbox-inner.rb-spotlight>*{position:relative;z-index:1}

/* AnimatedList — one quiet entrance per row and mode, with short staggering. */
.rb-enter{animation:rb-list-enter .38s var(--editorial-ease) both;animation-delay:calc(var(--rb-i,0) * 22ms)}
@keyframes rb-list-enter{from{opacity:0;transform:translateY(9px);clip-path:inset(0 0 15% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}

/* Magnet — travel is capped to 6px in JS and restricted to primary controls. */
.rb-magnet{transform:translate3d(var(--rb-mx,0),var(--rb-my,0),0);transition:transform .48s var(--editorial-ease),border-color .2s ease,color .2s ease;will-change:transform}
.rb-magnet.rb-magnet-live{transition-duration:.16s}

/* StarBorder — a one-pixel moving edge on selected controls only. */
.rb-star-active{position:relative;isolation:isolate;overflow:hidden}
.rb-star-active:before{content:"";position:absolute;z-index:2;inset:0;padding:1px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 68%,color-mix(in srgb,var(--accent) 84%,white 16%) 79%,transparent 91%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rb-star-border 5.8s linear infinite}
@keyframes rb-star-border{to{transform:rotate(360deg)}}

/* A little more spatial hierarchy without cardifying every row. */
.panel.rb-spotlight{border-color:color-mix(in srgb,var(--brand) 17%,transparent)}
.telemetry-strip.rb-spotlight{border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.system-card.rb-spotlight{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 5%,#0b0b0a),#0b0b0a 62%)}

@media(max-width:760px),(hover:none),(pointer:coarse){
  .rb-dot-grid{display:none}
  .rb-magnet{transform:none!important;will-change:auto}
  .rb-spotlight:after{display:none}
  .rb-enter{animation:none}
  .rb-star-active:before{animation:none;opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  .rb-dot-grid{display:none}
  .rb-enter,.rb-star-active:before{animation:none!important}
  .rb-magnet{transform:none!important;transition:none!important;will-change:auto}
  .rb-spotlight:after{display:none}
}