/* ===== Flexa Glitter Hover – behoudt bestaande achtergrond ===== */
.flexa-hover{
  --fx-angle: 35deg;
  --fx-speed: .85s;                 /* snappy open/dicht */
  --fx-twinkle: 2.2s;
  --fx-sparkle-density: 14px;       /* afstand tussen lichtpuntjes */
  --fx-raise: 2px;                  /* subtiele lift */
  --fx-text:#fff;                   /* basiskleur tekst */
  --fx-contrast:.0;                 /* per metaal hieronder, is overlay */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  color: var(--fx-text);
}

/* Content altijd boven effectlagen */
.flexa-hover > *{ position: relative; z-index: 3; }

/* Varianten (alleen overlay-variabelen; raakt je bg niet) */
.flexa-bronze{   --fx-base:#924a00; --fx-hi:#d07a26; --fx-mid:#b86216; --fx-contrast:.22; }
.flexa-silver{   --fx-base:#c9cacb; --fx-hi:#f1f2f3; --fx-mid:#e1e2e3; --fx-contrast:.28; }
.flexa-gold{     --fx-base:#ba9b3f; --fx-hi:#f1d36b; --fx-mid:#d9bd58; --fx-contrast:.26; }
.flexa-platinum{ --fx-base:#0ab8ef; --fx-hi:#7be3ff; --fx-mid:#4fd2f7; --fx-contrast:.40; }

/* Shimmer sweep – losse laag; geen invloed op jouw bg */
.flexa-hover::before{
  content:"";
  position:absolute; inset:-40% -60%;
  background:
    linear-gradient(var(--fx-angle),
      transparent 0%,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.35) 48%,
      rgba(255,255,255,0) 58%,
      transparent 100%),
    linear-gradient(160deg, var(--fx-base) 0%, var(--fx-mid) 50%, var(--fx-base) 100%);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;

  opacity:0;
  transform: translateX(-60%) rotate(var(--fx-angle));
  transition: opacity .18s ease, transform var(--fx-speed) ease-in-out;
}
.flexa-hover:hover::before{
  opacity:.9;
  transform: translateX(60%) rotate(var(--fx-angle)); /* keert vanzelf terug bij mouseleave */
}

/* Twinkle + leesbaarheidsoverlay in één toplaag */
.flexa-hover::after{
  content:"";
  position:absolute; inset:0;
  background:
    /* twinkle-korrels */
    radial-gradient(circle at 10% 20%, var(--fx-hi) 0 20%, transparent 21%) var(--fx-sparkle-density) var(--fx-sparkle-density)/calc(var(--fx-sparkle-density)*2) calc(var(--fx-sparkle-density)*2),
    radial-gradient(circle at 70% 80%, var(--fx-hi) 0 20%, transparent 21%) 0 0/ calc(var(--fx-sparkle-density)*2) calc(var(--fx-sparkle-density)*2),
    /* donkere sluier voor leesbaarheid (tast bg niet aan) */
    linear-gradient(140deg,
      rgba(0,0,0,calc(var(--fx-contrast) + .10)) 0%,
      rgba(0,0,0,calc(var(--fx-contrast) * .85)) 45%,
      rgba(0,0,0,calc(var(--fx-contrast) * .35)) 100%);
  mix-blend-mode: normal;
  pointer-events:none;
  z-index:2;
  opacity:0.05;                        /* overlay staat altijd aan */
  animation:none;
  transition: opacity .2s ease;
}

/* Hover lift + schaduw */
.flexa-hover:hover{
  transform: translateY(calc(-1 * var(--fx-raise)));
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* Twinkle speelt alleen tijdens hover; stopt direct bij mouseleave */
.flexa-hover:hover::after{
  animation: flexa-twinkle var(--fx-twinkle) linear infinite;
}
@keyframes flexa-twinkle{
  0%   { filter: brightness(1.0); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1.0); }
}

/* Tekst/links contrastrijk boven overlay */
.flexa-hover h1, .flexa-hover h2, .flexa-hover h3, .flexa-hover h4,
.flexa-hover p, .flexa-hover a, .flexa-hover small{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Reduced motion: minimaliseer effecten */
@media (prefers-reduced-motion: reduce){
  .flexa-hover, .flexa-hover::before, .flexa-hover::after{
    animation:none !important; transition:none !important;
  }
}