/* =========================================================
   HERO GLINT (ISOLATED)
   Does NOT touch global colors or typography.
   Runs when JS adds .vbs-glint-run to the target spans.
   ========================================================= */

/* Target spans */
.vbs-header .vbs-hero-glint,
.vbs-header .vbs-hero-glint-sub{
  position: relative;
  display: inline-block;
}

/* Shared overlay base */
.vbs-header .vbs-hero-glint::after,
.vbs-header .vbs-hero-glint-sub::after{
  content:"";
  position:absolute;
  left:-220%;
  right:-220%;
  top:-200%;
  bottom:-200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 56%
  );
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-420%) translateY(-38%);
}

/* Title: slightly stronger */
.vbs-header .vbs-hero-glint.vbs-glint-run::after{
  animation: vbsHeroGlintTitle 8s ease-in-out 1;
}

/* Subtitle: longer travel kept, slightly softer peak */
.vbs-header .vbs-hero-glint-sub::after{
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,0.78) 50%,
    rgba(255,255,255,0) 55%
  );
}
.vbs-header .vbs-hero-glint-sub.vbs-glint-run::after{
  animation: vbsHeroGlintSub 8s ease-in-out 1;
}

@keyframes vbsHeroGlintTitle{
  0%   { transform: translateX(-420%) translateY(-38%); opacity: 0; }
  14%  { opacity: .22; }
  40%  { opacity: .75; }
  74%  { opacity: .32; }
  100% { transform: translateX(420%) translateY(-38%); opacity: 0; }
}

@keyframes vbsHeroGlintSub{
  0%   { transform: translateX(-420%) translateY(-38%); opacity: 0; }
  16%  { opacity: .16; }
  44%  { opacity: .52; }
  78%  { opacity: .24; }
  100% { transform: translateX(420%) translateY(-38%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .vbs-header .vbs-hero-glint::after,
  .vbs-header .vbs-hero-glint-sub::after{ display:none !important; }
}