/* =========================================================
   FireFly Glitch Image + Subtle VHS (always-on)
   File: /css/glitch-image.css

   Usage:
   <div class="glitch-img glitch-vhs" style="--glitch-url:url('/images/neon_no_bg.png');">
     <img id="imgIndexHeaderImage" src="/images/neon_no_bg.png" class="img-fluid" alt="FireFly Main Logo">
   </div>

   Notes:
   - Image-only (no text attr tricks)
   - No global selectors
   - Always-on *subtle* VHS (scanlines + grain jitter + tiny wobble)
   - Respects prefers-reduced-motion
   ========================================================= */

/* -------------------------
   Base Glitch Wrapper
   ------------------------- */
.glitch-img{
  /* REQUIRED: must match the image src */
  --glitch-url: none;

  /* Glitch tuning */
  --glitch-intensity: 10px;     /* layer jump distance */
  --glitch-opacity: 0.55;       /* ghost visibility (keep subtle) */
  --glitch-blend: screen;       /* screen/lighten both work */
  --glitch-hue-a: 160deg;       /* cyan-ish */
  --glitch-hue-b: 300deg;       /* magenta-ish */
  --glitch-sat: 1.25;           /* saturation boost */
  --glitch-speed-a: 2200ms;
  --glitch-speed-b: 2800ms;

  /* Presentation */
  --glitch-radius: 0px;         /* set e.g. 18px if you want rounded */
  --glitch-shadow: 0 14px 45px rgba(0,0,0,.55);

  position: relative;
  display: inline-block;
  isolation: isolate;
  border-radius: var(--glitch-radius);
  filter: drop-shadow(var(--glitch-shadow));
}

/* Base image */
.glitch-img > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--glitch-radius);
  position: relative;
  z-index: 1;
}

/* Two ghost copies */
.glitch-img::before,
.glitch-img::after{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--glitch-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  border-radius: var(--glitch-radius);
  opacity: var(--glitch-opacity);
  mix-blend-mode: var(--glitch-blend);
  pointer-events: none;
  z-index: 2;

  /* Helps Safari behave with clip-path animation */
  -webkit-mask-image: linear-gradient(#000, #000);
}

/* Cyan layer */
.glitch-img::before{
  filter: hue-rotate(var(--glitch-hue-a)) saturate(var(--glitch-sat));
  transform: translate3d(calc(var(--glitch-intensity) * -1), 0, 0);
  animation: glitchShiftA var(--glitch-speed-a) infinite steps(1, end);
}

/* Magenta layer */
.glitch-img::after{
  filter: hue-rotate(var(--glitch-hue-b)) saturate(var(--glitch-sat));
  transform: translate3d(var(--glitch-intensity), 0, 0);
  animation: glitchShiftB var(--glitch-speed-b) infinite steps(1, end);
}

/* -------------------------
   Glitch slice animations
   (hand-tuned, intentionally abrupt)
   ------------------------- */
@keyframes glitchShiftA{
  0%,100% { clip-path: inset(0 0 0 0); transform: translate3d(-6px, 0, 0); }
  10%     { clip-path: inset(12% 0 72% 0); transform: translate3d(-12px, -2px, 0); }
  20%     { clip-path: inset(60% 0 20% 0); transform: translate3d(-4px, 2px, 0); }
  30%     { clip-path: inset(35% 0 45% 0); transform: translate3d(-14px, 0, 0); }
  40%     { clip-path: inset(80% 0 5% 0);  transform: translate3d(-8px, 2px, 0); }
  50%     { clip-path: inset(0 0 0 0);     transform: translate3d(-6px, 0, 0); }
  60%     { clip-path: inset(20% 0 65% 0); transform: translate3d(-16px, -1px, 0); }
  70%     { clip-path: inset(55% 0 25% 0); transform: translate3d(-5px, 1px, 0); }
  80%     { clip-path: inset(10% 0 80% 0); transform: translate3d(-13px, 0, 0); }
  90%     { clip-path: inset(45% 0 35% 0); transform: translate3d(-7px, -2px, 0); }
}

@keyframes glitchShiftB{
  0%,100% { clip-path: inset(0 0 0 0); transform: translate3d(6px, 0, 0); }
  12%     { clip-path: inset(70% 0 10% 0); transform: translate3d(12px, 2px, 0); }
  24%     { clip-path: inset(25% 0 60% 0); transform: translate3d(4px, -2px, 0); }
  36%     { clip-path: inset(50% 0 30% 0); transform: translate3d(15px, 0, 0); }
  48%     { clip-path: inset(5% 0 85% 0);  transform: translate3d(9px, -1px, 0); }
  60%     { clip-path: inset(0 0 0 0);     transform: translate3d(6px, 0, 0); }
  72%     { clip-path: inset(65% 0 15% 0); transform: translate3d(16px, 1px, 0); }
  84%     { clip-path: inset(30% 0 55% 0); transform: translate3d(5px, -1px, 0); }
  92%     { clip-path: inset(40% 0 40% 0); transform: translate3d(13px, 2px, 0); }
}

/* =========================================================
   Subtle VHS (always-on)
   Add class: .glitch-vhs
   - scanlines
   - tiny grain jitter (via background position)
   - slight vignette + dust specks
   - gentle wobble
   ========================================================= */

.glitch-vhs{
  /* VHS tuning (keep subtle) */
  --vhs-scan-opacity: 0.10;
  --vhs-vignette: 0.30;     /* 0..1 */
  --vhs-dust: 0.10;         /* dust specks strength */
  --vhs-wobble: 1;          /* 0/1 */

  /* Overlays (no external images needed) */
  background-image:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0, var(--vhs-scan-opacity)) 0px,
      rgba(0,0,0, var(--vhs-scan-opacity)) 1px,
      rgba(255,255,255, 0) 2px,
      rgba(255,255,255, 0) 4px
    ),
    /* vignette */
    radial-gradient(120% 80% at 50% 40%,
      rgba(0,0,0, 0),
      rgba(0,0,0, var(--vhs-vignette))
    ),
    /* a few tiny dust specks (screen blended) */
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255, var(--vhs-dust)), transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255, calc(var(--vhs-dust) * 0.8)), transparent 60%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255, calc(var(--vhs-dust) * 0.7)), transparent 60%),
    radial-gradient(1px 1px at 35% 85%, rgba(255,255,255, calc(var(--vhs-dust) * 0.6)), transparent 60%);

  background-blend-mode: overlay, normal, screen, screen, screen, screen;
  border-radius: var(--glitch-radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);

  /* Slight VHS softness */
  filter:
    drop-shadow(var(--glitch-shadow))
    saturate(1.06)
    contrast(1.03);
}

/* Always-on subtle motion */
@media (prefers-reduced-motion: no-preference){
  .glitch-vhs{
    will-change: transform, background-position, filter;
    animation:
      vhsGrain 900ms steps(2, end) infinite,
      vhsWobble 6.5s ease-in-out infinite;
  }

  /* Grain jitter by shifting overlay backgrounds */
  @keyframes vhsGrain{
    0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    25%  { background-position: 8px -6px, 0 0, 0 0, 0 0, 0 0, 0 0; }
    50%  { background-position: -10px 7px, 0 0, 0 0, 0 0, 0 0, 0 0; }
    75%  { background-position: 6px 10px, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  }

  /* Gentle tape wobble (kept tiny) */
  @keyframes vhsWobble{
    0%,100% { transform: translate3d(0,0,0) skewX(0deg); }
    12%     { transform: translate3d(0.5px, 0, 0) skewX(-0.12deg); }
    24%     { transform: translate3d(-0.7px, 0.2px, 0) skewX(0.10deg); }
    38%     { transform: translate3d(0.6px, -0.2px, 0) skewX(-0.08deg); }
    56%     { transform: translate3d(-0.6px, 0, 0) skewX(0.14deg); }
    73%     { transform: translate3d(0.6px, 0.2px, 0) skewX(-0.10deg); }
    90%     { transform: translate3d(-0.4px, -0.2px, 0) skewX(0.06deg); }
  }
}

/* Reduced motion: keep the VHS look but stop movement */
@media (prefers-reduced-motion: reduce){
  .glitch-img::before,
  .glitch-img::after{
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 0.28;
    transform: translate3d(0,0,0);
  }

  .glitch-vhs{
    animation: none !important;
  }
}