/* BRR/TDC Effects Pack — neon glow + soft shadows
   Tweakable palette via CSS variables. Defaults fit BRR red + TDC neon.
*/
:root{
  --brr-bg: #0b0b0d;
  --brr-surface: #121216;
  --brr-text: #ffffff;
  --brr-accent: #ff2455;       /* neon pink-red */
  --brr-accent-2: #c9ff2f;     /* acid green */
  --brr-accent-3: #ffd300;     /* neon yellow */
  --brr-outline: rgba(255,255,255,.08);
  --brr-shadow: 0 10px 30px rgba(0,0,0,.45);
  --brr-glow: 0 0 24px rgba(255, 36, 85, .55), 0 0 6px rgba(255, 36, 85, .55);
  --brr-glow-2: 0 0 24px rgba(201, 255, 47, .45), 0 0 6px rgba(201, 255, 47, .45);
  --brr-radius: 14px;
  --brr-speed: .18s;
}

/* Panels */
.brsl-panel,
#brrsl-cart-drawer .brrslc__panel,
.brrsl-qa-inlink,
.brsl-card, .brsl-card *:where(.card){
  background: var(--brr-surface);
  border: 1px solid var(--brr-outline);
  border-radius: var(--brr-radius);
  box-shadow: var(--brr-shadow);
}

/* Buttons */
.brsl-btn,
.brrsl-qa-btn,
#brrsl-cart-drawer .brrslc__panel .brrslc__cta button,
#brrsl-cart-drawer .brrslc__panel .brrslc__btn{
  position: relative;
  border-radius: 999px;
  transition: transform var(--brr-speed) ease, box-shadow var(--brr-speed) ease, filter var(--brr-speed) ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

.brsl-btn:hover,
.brrsl-qa-btn:hover,
#brrsl-cart-drawer .brrslc__panel .brrslc__cta button:hover,
#brrsl-cart-drawer .brrslc__panel .brrslc__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: var(--brr-shadow), var(--brr-glow);
}

/* Primary/secondary color hints if theme uses BRR classes */
.brsl-btn,
#brrsl-cart-drawer .brrslc__btn--primary,
#brrsl-cart-drawer .brrslc__cta button{
  background: var(--brr-accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.brsl-btn.brsl-buy{ background: var(--brr-accent-2); color:#000; }

/* Cards and collection items hover */
a.brrsl-qa-link .brrsl-qa-inlink{
  transition: opacity var(--brr-speed) ease, transform var(--brr-speed) ease, box-shadow var(--brr-speed) ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
a.brrsl-qa-link:hover .brrsl-qa-inlink{
  box-shadow: var(--brr-shadow), var(--brr-glow-2);
}

/* Drawer polish */
#brrsl-cart-drawer .brrslc__panel{
  backdrop-filter: blur(6px) saturate(105%);
}
#brrsl-cart-drawer .brrslc__row{
  border-radius: 12px;
  padding: 10px;
  transition: background var(--brr-speed) ease, box-shadow var(--brr-speed) ease;
}
#brrsl-cart-drawer .brrslc__row:hover{
  background: rgba(255,255,255,.03);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
#brrsl-cart-drawer .brrslc__left .brrslc__thumb{
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
}

/* Hero image subtle glow on hover */
#brsl-hero{
  transition: filter var(--brr-speed) ease, box-shadow var(--brr-speed) ease, transform var(--brr-speed) ease;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
#brsl-hero:hover{
  filter: saturate(1.08) contrast(1.02);
  box-shadow: var(--brr-shadow), 0 0 40px rgba(255,255,255,.05);
}

/* Accessibility respect: turn off heavy motion for users that prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}


/* === Cyber Scanline Sheen on Product Cards === */
.brsl-card{
  position: relative;
  overflow: hidden;
}
.brsl-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.0) 60%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  opacity: 0;
  transform: translateY(-10%);
  transition: opacity var(--brr-speed) ease, transform var(--brr-speed) ease;
}
.brsl-card::after{
  /* diagonal sheen swipe */
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 60%;
  height: 300%;
  transform: rotate(25deg);
  background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity var(--brr-speed) ease;
}
.brsl-card:hover::before{
  opacity: 1;
  transform: translateY(0);
}
.brsl-card:hover::after{
  opacity: .8;
  animation: brrSheen 0.9s ease-out forwards;
}
@keyframes brrSheen{
  0%   { left:-40%; }
  100% { left: 120%; }
}

/* Slight zoom on image for depth */
.brsl-card .brsl-imgwrap img{
  transform: scale(1);
  transition: transform var(--brr-speed) ease;
}
.brsl-card:hover .brsl-imgwrap img{
  transform: scale(1.03);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brsl-card:hover::after{ animation: none; opacity: .4; }
  .brsl-card .brsl-imgwrap img{ transform: none !important; }
}



/* === BRR/TDC VHS / Glitch mode for product cards === */
:root{
  --brr-vhs-scan-alpha: .07;
  --brr-vhs-noise-alpha: .04;
  --brr-vhs-chroma: .012; /* offset strength for RGB split */
  --brr-vhs-warp: 2px;    /* vertical tape warp amplitude */
}

/* Base prep */
.brsl-card{ backface-visibility: hidden; }

/* Static scanlines + noise overlays */
.brsl-card::before{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,var(--brr-vhs-scan-alpha)) 0px,
      rgba(255,255,255,var(--brr-vhs-scan-alpha)) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(transparent, rgba(0,0,0,.35));
}
.brsl-card::after{
  /* film grain / VHS noise */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, transparent, transparent);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity var(--brr-speed) ease;
}

/* Glitch chromatic aberration using colored shadows */
.brsl-card .brsl-imgwrap img{
  filter: contrast(1.04) saturate(1.04);
  box-shadow:
    calc(var(--brr-vhs-chroma) * 1px) 0 0 rgba(255,0,90,.25),
    calc(var(--brr-vhs-chroma) * -1px) 0 0 rgba(0,255,160,.25);
}

/* On hover, enable animated jitter, warp, and stronger noise */
.brsl-card:hover{
  animation: brrVhsJitter .12s steps(2,end) infinite;
}
.brsl-card:hover::after{ opacity: var(--brr-vhs-noise-alpha); }
.brsl-card:hover .brsl-imgwrap img{
  animation: brrVhsChroma .35s steps(4,end) infinite;
}

/* Occasional horizontal line tear ("tape warp") */
.brsl-card .brsl-imgwrap{
  position: relative;
}
.brsl-card .brsl-imgwrap::after{
  content:"";
  position:absolute; left:0; right:0;
  height:3px; top: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
  opacity: 0;
}
.brsl-card:hover .brsl-imgwrap::after{
  animation: brrVhsTear 1.3s linear infinite;
  opacity: .35;
}

/* Keyframes */
@keyframes brrVhsJitter{
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, calc(var(--brr-vhs-warp)), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes brrVhsChroma{
  0%   { filter: contrast(1.06) saturate(1.06) hue-rotate(0deg); }
  25%  { filter: contrast(1.05) saturate(1.05) hue-rotate(2deg); }
  50%  { filter: contrast(1.07) saturate(1.06) hue-rotate(-2deg); }
  75%  { filter: contrast(1.05) saturate(1.05) hue-rotate(1deg); }
  100% { filter: contrast(1.06) saturate(1.06) hue-rotate(0deg); }
}
@keyframes brrVhsTear{
  0%   { top: 20%; transform: translateX(-2px); }
  10%  { top: 60%; transform: translateX(2px); }
  20%  { top: 35%; transform: translateX(-1px); }
  30%  { top: 75%; transform: translateX(3px); }
  40%  { top: 50%; transform: translateX(0px); }
  50%  { top: 30%; transform: translateX(2px); }
  60%  { top: 70%; transform: translateX(-2px); }
  70%  { top: 40%; transform: translateX(1px); }
  80%  { top: 80%; transform: translateX(-1px); }
  90%  { top: 25%; transform: translateX(2px); }
  100% { top: 65%; transform: translateX(0px); }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce){
  .brsl-card:hover{ animation: none; }
  .brsl-card:hover .brsl-imgwrap img{ animation: none; }
  .brsl-card:hover::after{ opacity: .06; }
}



/* === BRR/TDC Smooth+Glitch Blend and Card Glow (merge.7) === */

/* Softer default card depth and glow */
.brsl-card{
  background: var(--brr-surface);
  border: 1px solid var(--brr-outline);
  border-radius: var(--brr-radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: box-shadow var(--brr-speed) ease, transform var(--brr-speed) ease, filter var(--brr-speed) ease;
}
.brsl-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 22px rgba(255, 36, 85, .18);
}

/* Keep the V5 sheen with milder swipe */
.brsl-card::after{
  opacity: 0;
}
.brsl-card:hover::after{
  opacity: .5;
  animation: brrSheen 1.2s ease-out forwards;
}

/* Tone down VHS bits from merge.6 */
:root{
  --brr-vhs-scan-alpha: .045;
  --brr-vhs-noise-alpha: .025;
  --brr-vhs-chroma: .006;
  --brr-vhs-warp: 1px;
}

/* Adjust scanlines to be subtle and only appear on hover */
.brsl-card::before{
  opacity: 0;
}
.brsl-card:hover::before{
  opacity: .7;
  transform: translateY(0);
}

.brsl-card:hover{
  /* gentle jitter only, fewer steps */
  animation: brrVhsJitter .18s steps(1,end) 4;
}
.brsl-card:hover .brsl-imgwrap img{
  /* tiny chroma shimmy then settle */
  animation: brrVhsChroma .45s steps(3,end) 1;
}

/* Reduce line tear frequency and opacity */
.brsl-card .brsl-imgwrap::after{
  opacity: 0;
}
.brsl-card:hover .brsl-imgwrap::after{
  opacity: .18;
  animation: brrVhsTear 1.8s linear 1;
}

/* Extra hover glow on hero images inside cards */
.brsl-card .brsl-imgwrap img{
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.brsl-card:hover .brsl-imgwrap img{
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 28px rgba(255,255,255,.06);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brsl-card:hover{ animation: none; }
  .brsl-card:hover .brsl-imgwrap img{ animation: none; }
  .brsl-card:hover::before{ opacity: .5; }
}



/* === merge.8: Minimal jitter preset === */
:root{
  --brr-vhs-chroma: .003;  /* very tiny RGB split */
  --brr-vhs-warp: 0.5px;   /* barely-there vertical wobble */
}

/* Disable continuous jitter; run a very quick single tick then stop */
.brsl-card:hover{
  animation: none; /* cancel previous jitter */
}
.brsl-card:hover .brsl-imgwrap img{
  animation: brrVhsChroma .28s steps(2,end) 1;
}

/* Subtle scanlines; a touch lighter */
.brsl-card:hover::before{
  opacity: .45;
}

/* Remove line-tear by default; opt-in only */
.brsl-card .brsl-imgwrap::after{ opacity: 0 !important; animation: none !important; }


/* Particles defaults; set --brr-particles:0 to disable */
:root{ --brr-particles: 1; --brr-part-density: 0.00012; --brr-part-size-min: 1.0; --brr-part-size-max: 2.8; --brr-part-speed: 0.06; --brr-part-link: 110; --brr-part-parallax: 12; }
#brr-particles{ background: radial-gradient(ellipse at 50% 120%, rgba(255,255,255,0.02), rgba(0,0,0,0)); }

/* merge.10: subtle red star/snow preset */
:root{ --brr-accent:#ff2455; --brr-part-density:0.00005; --brr-part-size-min:0.8; --brr-part-size-max:2.2; --brr-part-speed:0.04; }