/* King Louie's — shared site-wide motion/cohesion layer. Purely additive:
   doesn't touch any page's existing .reveal/IntersectionObserver fade-up,
   just layers GSAP-driven stagger + a few Magic-UI-style hover effects on
   top, scoped to classes every page already shares (.btn.primary, .opt-card,
   .res-card, .art-card, .card-grid, .art-row, .res-grid). */

/* Shimmer sweep on primary CTAs */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn.primary:hover::after{animation:kl-shimmer 1.1s ease-in-out;}
@keyframes kl-shimmer{from{left:-60%}to{left:140%}}

/* Animated gradient-border glow + cursor spotlight on cards */
@property --kl-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes kl-border-spin{to{--kl-angle:360deg}}
.opt-card,.res-card,.art-card{position:relative}
.opt-card::before,.res-card::before,.art-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--kl-angle,0deg),transparent 0%,var(--blood-glow,#E21D1D) 12%,transparent 24%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;z-index:2;
}
.opt-card:hover::before,.res-card:hover::before,.art-card:hover::before{opacity:1;animation:kl-border-spin 2.4s linear infinite}
.opt-card::after,.res-card::after,.art-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--kl-x,50%) var(--kl-y,50%),rgba(226,29,29,.16),transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.opt-card:hover::after,.res-card:hover::after,.art-card:hover::after{opacity:1}

@media (prefers-reduced-motion: reduce){
  .btn.primary::after{display:none}
  .opt-card::before,.res-card::before,.art-card::before,
  .opt-card::after,.res-card::after,.art-card::after{display:none}
}