/*!
 * Smoking Gun Glitch Image — frontend styles (v1.1.0)
 * All rules scoped under .sg-glitch / .sg-carousel to avoid global Elementor bleed.
 */

/* ============== Wrappers ============== */

.sg-glitch-wrapper {
  margin: 0;
  display: inline-block;
  max-width: 100%;
}

.sg-carousel {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* ============== Glitch core (shared) ============== */

.sg-glitch {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  line-height: 0;
  isolation: isolate;
  cursor: pointer;
  vertical-align: top;
  width: 100%;
}

.sg-glitch--carousel { outline: none; }
.sg-glitch--carousel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sg-glitch__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.sg-glitch:not([style*="aspect-ratio"]) .sg-glitch__img--from { position: relative; }
.sg-glitch:not([style*="aspect-ratio"]) .sg-glitch__img--to   { position: absolute; }

.sg-glitch__img--from { z-index: 1; }
.sg-glitch__img--to   { z-index: 2; opacity: 0; }

/* RGB split */
.sg-glitch::before,
.sg-glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--glitch-to);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.sg-glitch::before { mix-blend-mode: screen; filter: url(#sg-glitch-red); }
.sg-glitch::after  { mix-blend-mode: screen; filter: url(#sg-glitch-cyan); }

/* Slice bands */
.sg-glitch__slice {
  position: absolute;
  inset: 0;
  background-image: var(--glitch-to);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  clip-path: inset(var(--slice-top, 30%) 0 var(--slice-bottom, 60%) 0);
}

/* Scanlines */
.sg-glitch__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.4) 2px,
    rgba(0, 0, 0, 0.4) 3px
  );
  mix-blend-mode: multiply;
}

/* ============== ENTRY ============== */
.sg-glitch.is-entering .sg-glitch__img--from { animation: sg-from-out 0.3s steps(1, end) forwards; }
.sg-glitch.is-entering .sg-glitch__img--to   { animation: sg-to-in   0.3s steps(1, end) forwards; }
.sg-glitch.is-entering::before { animation: sg-rgb-red  var(--rgb-dur, 0.3s) steps(1, end) 1; }
.sg-glitch.is-entering::after  { animation: sg-rgb-cyan var(--rgb-dur, 0.3s) steps(1, end) 1; }

.sg-glitch.is-entering .sg-glitch__slice {
  animation-name: var(--slice-anim, sg-slice-a);
  animation-duration: var(--slice-duration, 0.3s);
  animation-timing-function: steps(1, end);
  animation-delay: var(--slice-delay, 0s);
  animation-iteration-count: 1;
}

.sg-glitch.is-entering .sg-glitch__scanlines { animation: sg-scanlines 0.3s steps(1, end) 1; }

.sg-glitch.is-hovered .sg-glitch__img--from { opacity: 0; }
.sg-glitch.is-hovered .sg-glitch__img--to   { opacity: 1; }

/* ============== EXIT (hover-mode only) ============== */
.sg-glitch.is-exiting .sg-glitch__img--from { animation: sg-from-in 0.22s steps(1, end) forwards; }
.sg-glitch.is-exiting .sg-glitch__img--to   { animation: sg-to-out  0.22s steps(1, end) forwards; }
.sg-glitch.is-exiting::before { animation: sg-rgb-red-out  0.22s steps(1, end) 1; }
.sg-glitch.is-exiting::after  { animation: sg-rgb-cyan-out 0.22s steps(1, end) 1; }

.sg-glitch.is-exiting .sg-glitch__slice {
  animation-name: var(--slice-anim, sg-slice-a);
  animation-duration: var(--slice-duration, 0.22s);
  animation-timing-function: steps(1, end);
  animation-delay: var(--slice-delay, 0s);
  animation-iteration-count: 1;
}
.sg-glitch.is-exiting .sg-glitch__scanlines { animation: sg-scanlines 0.22s steps(1, end) 1; }

.sg-glitch.is-exiting::before,
.sg-glitch.is-exiting::after,
.sg-glitch.is-exiting .sg-glitch__slice {
  background-image: var(--glitch-from);
}

/* ============== KEYFRAMES ============== */

@keyframes sg-from-out {
  0%, 18% { opacity: 1; } 25% { opacity: 0; } 32% { opacity: 1; } 40%, 100% { opacity: 0; }
}
@keyframes sg-to-in {
  0%, 22% { opacity: 0; } 28% { opacity: 1; } 35% { opacity: 0; } 42%, 100% { opacity: 1; }
}
@keyframes sg-from-in {
  0%, 12% { opacity: 0; } 18% { opacity: 1; } 24% { opacity: 0; } 30%, 100% { opacity: 1; }
}
@keyframes sg-to-out {
  0%, 10% { opacity: 1; } 16% { opacity: 0; } 22% { opacity: 1; } 30%, 100% { opacity: 0; }
}

@keyframes sg-rgb-red {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; transform: translate(calc(var(--rgb-r, -18px) * 0.55), 2px); }
  16%  { opacity: 0.8; transform: translate(calc(var(--rgb-r, -18px) * -0.35), -1px); }
  24%  { opacity: 1; transform: translate(var(--rgb-r, -18px), 2px); }
  34%  { opacity: 0.6; transform: translate(calc(var(--rgb-r, -18px) * -0.25), 3px); }
  48%  { opacity: 1; transform: translate(calc(var(--rgb-r, -18px) * 0.3), -2px); }
  62%  { opacity: 0.5; transform: translate(calc(var(--rgb-r, -18px) * -0.45), 1px); }
  76%  { opacity: 0.85; transform: translate(calc(var(--rgb-r, -18px) * 0.2), 0); }
  88%  { opacity: 0.4; transform: translate(calc(var(--rgb-r, -18px) * -0.15), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes sg-rgb-cyan {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; transform: translate(calc(var(--rgb-c, 18px) * 0.55), -2px); }
  16%  { opacity: 0.8; transform: translate(calc(var(--rgb-c, 18px) * -0.35), 1px); }
  24%  { opacity: 1; transform: translate(var(--rgb-c, 18px), -2px); }
  34%  { opacity: 0.6; transform: translate(calc(var(--rgb-c, 18px) * -0.25), -3px); }
  48%  { opacity: 1; transform: translate(calc(var(--rgb-c, 18px) * 0.3), 2px); }
  62%  { opacity: 0.5; transform: translate(calc(var(--rgb-c, 18px) * -0.45), -1px); }
  76%  { opacity: 0.85; transform: translate(calc(var(--rgb-c, 18px) * 0.2), 0); }
  88%  { opacity: 0.4; transform: translate(calc(var(--rgb-c, 18px) * -0.15), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes sg-rgb-red-out {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 1; transform: translate(calc(var(--rgb-r, -18px) * -0.5), -1px); }
  30%  { opacity: 0.6; transform: translate(calc(var(--rgb-r, -18px) * 0.3), 2px); }
  50%  { opacity: 1; transform: translate(calc(var(--rgb-r, -18px) * -0.7), 0); }
  70%  { opacity: 0.4; transform: translate(calc(var(--rgb-r, -18px) * 0.15), -1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sg-rgb-cyan-out {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 1; transform: translate(calc(var(--rgb-c, 18px) * -0.5), 1px); }
  30%  { opacity: 0.6; transform: translate(calc(var(--rgb-c, 18px) * 0.3), -2px); }
  50%  { opacity: 1; transform: translate(calc(var(--rgb-c, 18px) * -0.7), 0); }
  70%  { opacity: 0.4; transform: translate(calc(var(--rgb-c, 18px) * 0.15), 1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes sg-slice-a {
  0%   { opacity: 0; transform: translate(0, 0); }
  6%   { opacity: 1; transform: translate(calc(var(--amp, 40px) * -1.3), var(--y, 0px)); }
  14%  { opacity: 0.7; transform: translate(calc(var(--amp, 40px) * 0.75), calc(var(--y, 0px) * -1.5)); }
  22%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -1.75), calc(var(--y, 0px) * 0)); }
  32%  { opacity: 0.4; transform: translate(calc(var(--amp, 40px) * 0.45), calc(var(--y, 0px) * 0.5)); }
  44%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -0.6), calc(var(--y, 0px) * -1)); }
  58%  { opacity: 0.8; transform: translate(calc(var(--amp, 40px) * 1), calc(var(--y, 0px) * 0.5)); }
  72%  { opacity: 0.5; transform: translate(calc(var(--amp, 40px) * -0.25), 0); }
  85%  { opacity: 0.3; transform: translate(calc(var(--amp, 40px) * 0.15), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sg-slice-b {
  0%   { opacity: 0; transform: translate(0, 0); }
  5%   { opacity: 1; transform: translate(calc(var(--amp, 40px) * 1.5), calc(var(--y, 0px) * -0.5)); }
  13%  { opacity: 0.5; transform: translate(calc(var(--amp, 40px) * -0.8), calc(var(--y, 0px) * 1.5)); }
  20%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * 2), 0); }
  30%  { opacity: 0.7; transform: translate(calc(var(--amp, 40px) * -0.45), calc(var(--y, 0px) * -1)); }
  42%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * 0.6), calc(var(--y, 0px) * 0.5)); }
  55%  { opacity: 0.4; transform: translate(calc(var(--amp, 40px) * -1.1), 0); }
  68%  { opacity: 0.9; transform: translate(calc(var(--amp, 40px) * 0.35), calc(var(--y, 0px) * 1)); }
  82%  { opacity: 0.2; transform: translate(calc(var(--amp, 40px) * -0.2), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sg-slice-c {
  0%   { opacity: 0; transform: translate(0, 0); }
  7%   { opacity: 1; transform: translate(calc(var(--amp, 40px) * -0.9), calc(var(--y, 0px) * 0.5)); }
  15%  { opacity: 0.6; transform: translate(calc(var(--amp, 40px) * 1.3), calc(var(--y, 0px) * -1)); }
  24%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -0.55), var(--y, 0px)); }
  35%  { opacity: 0.8; transform: translate(calc(var(--amp, 40px) * 0.75), 0); }
  48%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -1.55), calc(var(--y, 0px) * -0.5)); }
  62%  { opacity: 0.3; transform: translate(calc(var(--amp, 40px) * 0.4), calc(var(--y, 0px) * 0.5)); }
  76%  { opacity: 0.7; transform: translate(calc(var(--amp, 40px) * -0.2), 0); }
  90%  { opacity: 0.4; transform: translate(calc(var(--amp, 40px) * 0.1), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sg-slice-d {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; transform: translate(calc(var(--amp, 40px) * 1.05), var(--y, 0px)); }
  16%  { opacity: 0.4; transform: translate(calc(var(--amp, 40px) * -0.65), calc(var(--y, 0px) * -0.5)); }
  26%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * 1.5), 0); }
  38%  { opacity: 0.9; transform: translate(calc(var(--amp, 40px) * -0.4), calc(var(--y, 0px) * 1.5)); }
  52%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * 0.7), calc(var(--y, 0px) * -1)); }
  66%  { opacity: 0.5; transform: translate(calc(var(--amp, 40px) * -0.95), 0); }
  80%  { opacity: 0.7; transform: translate(calc(var(--amp, 40px) * 0.25), calc(var(--y, 0px) * 0.5)); }
  92%  { opacity: 0.2; transform: translate(calc(var(--amp, 40px) * -0.15), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes sg-slice-e {
  0%   { opacity: 0; transform: translate(0, 0); }
  6%   { opacity: 1; transform: translate(calc(var(--amp, 40px) * -0.8), calc(var(--y, 0px) * -1)); }
  14%  { opacity: 0.6; transform: translate(calc(var(--amp, 40px) * 1.15), calc(var(--y, 0px) * 0.5)); }
  22%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -1.4), var(--y, 0px)); }
  33%  { opacity: 0.7; transform: translate(calc(var(--amp, 40px) * 0.5), 0); }
  46%  { opacity: 1; transform: translate(calc(var(--amp, 40px) * -0.65), calc(var(--y, 0px) * -0.5)); }
  60%  { opacity: 0.4; transform: translate(calc(var(--amp, 40px) * 0.9), calc(var(--y, 0px) * 0.5)); }
  74%  { opacity: 0.8; transform: translate(calc(var(--amp, 40px) * -0.3), 0); }
  88%  { opacity: 0.3; transform: translate(calc(var(--amp, 40px) * 0.15), 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes sg-scanlines {
  0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: 0; }
  36% { opacity: 0.9; } 50% { opacity: 0.3; } 68% { opacity: 0.7; }
  82% { opacity: 0.2; } 100% { opacity: 0; }
}

/* ============== Caption ============== */
.sg-glitch__caption {
  display: block;
  margin-top: 12px;
  line-height: 1.4;
}

/* ============== Carousel — Navigation Arrows ============== */
.sg-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 0;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  border-radius: 0;
}
.sg-carousel__nav:hover { background-color: rgba(0, 0, 0, 0.95); }
.sg-carousel__nav:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sg-carousel__nav--prev { left: 12px; }
.sg-carousel__nav--next { right: 12px; }
.sg-carousel__nav svg { display: block; }

/* ============== Carousel — Pagination Dots ============== */
.sg-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.sg-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.sg-carousel__dot:hover { transform: scale(1.2); }
.sg-carousel__dot.is-active { background-color: #000; }
.sg-carousel__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
  .sg-glitch.is-entering *,
  .sg-glitch.is-exiting *,
  .sg-glitch.is-entering::before, .sg-glitch.is-entering::after,
  .sg-glitch.is-exiting::before,  .sg-glitch.is-exiting::after { animation: none !important; }
  .sg-glitch.is-hovered .sg-glitch__img--from { opacity: 0; transition: opacity 0.15s; }
  .sg-glitch.is-hovered .sg-glitch__img--to   { opacity: 1; transition: opacity 0.15s; }
}