/**
 * Haunted Scratches
 * Texture spettrale e incisioni SVG indipendenti dal contenuto del modulo.
 * Il JS costruisce una scena una sola volta; il movimento è affidato al CSS.
 */

.eqev-effect--haunted-scratches .eqev-showcase__effect-layer::before,
.eqev-effect--haunted-scratches .eqev-showcase__effect-layer::after {
  display: none !important;
}

.eqev-haunted-scene,
.eqev-haunted-card-scene,
.eqev-haunted-grain,
.eqev-haunted-spectral {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.eqev-haunted-scene,
.eqev-haunted-card-scene {
  display: block;
  overflow: hidden;
}

.eqev-haunted-grain {
  z-index: 0;
  background:
    repeating-radial-gradient(circle at 17% 29%, color-mix(in srgb, var(--eqev-effect-b, #f2eee8) 22%, transparent) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(103deg, transparent 0 7px, color-mix(in srgb, var(--eqev-effect-a, #c62b30) 12%, transparent) 8px, transparent 9px 21px);
  background-size: 29px 31px, 41px 47px;
  mix-blend-mode: screen;
  opacity: calc(.08 + var(--eqev-effect-strength, .58) * .16);
  animation: eqevHauntedGrain calc(var(--eqev-effect-duration, 30s) * .34) steps(8, end) infinite alternate;
}

.eqev-haunted-spectral {
  z-index: 1;
  inset: -8%;
  width: 116%;
  height: 116%;
  background:
    linear-gradient(102deg, transparent 12%, color-mix(in srgb, var(--eqev-effect-a, #c62b30) 28%, transparent) 35%, transparent 52%),
    linear-gradient(78deg, transparent 44%, color-mix(in srgb, var(--eqev-effect-b, #f2eee8) 18%, transparent) 53%, transparent 62%);
  mix-blend-mode: screen;
  opacity: calc(.12 + var(--eqev-effect-strength, .58) * .2);
  transform: translate3d(-3%, 0, 0);
  animation: eqevHauntedInterference var(--eqev-effect-duration, 30s) cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.eqev-haunted-scene {
  z-index: 2;
  overflow: visible;
  mix-blend-mode: screen;
}

.eqev-haunted-fine,
.eqev-haunted-scars,
.eqev-haunted-dust {
  transform-box: fill-box;
  transform-origin: center;
}

.eqev-haunted-fine {
  fill: none;
  stroke: var(--eqev-effect-b, #f2eee8);
  stroke-width: calc(.35px + var(--eqev-effect-strength, .58) * .75px);
  stroke-linecap: round;
  opacity: calc(.15 + var(--eqev-effect-strength, .58) * .28);
  animation: eqevHauntedFine calc(var(--eqev-effect-duration, 30s) * .76) steps(13, end) infinite alternate;
}

.eqev-haunted-fine path:nth-child(3n) {
  stroke: var(--eqev-effect-a, #c62b30);
  opacity: .78;
}

.eqev-haunted-scars {
  fill: none;
  stroke: var(--eqev-effect-a, #c62b30);
  stroke-width: calc(.75px + var(--eqev-effect-strength, .58) * 1.45px);
  stroke-linecap: square;
  stroke-linejoin: bevel;
  opacity: calc(.28 + var(--eqev-effect-strength, .58) * .42);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--eqev-effect-a, #c62b30) 42%, transparent));
  animation: eqevHauntedScars var(--eqev-effect-duration, 30s) steps(9, end) infinite alternate-reverse;
}

.eqev-haunted-scars path:nth-child(even) {
  stroke: var(--eqev-effect-b, #f2eee8);
  opacity: .62;
}

.eqev-haunted-dust {
  fill: var(--eqev-effect-b, #f2eee8);
  opacity: calc(.16 + var(--eqev-effect-strength, .58) * .25);
  animation: eqevHauntedDust calc(var(--eqev-effect-duration, 30s) * .52) steps(6, end) infinite alternate;
}

.eqev-showcase__slide.is-active.eqev-effect--haunted-scratches:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-glass {
  inset: -17px;
  display: block;
  overflow: visible;
  opacity: 1;
  contain: layout style;
}

.eqev-haunted-card-scene {
  overflow: visible;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--eqev-effect-a, #c62b30) 18%, transparent));
}

.eqev-haunted-card-edge {
  fill: none;
  stroke: var(--eqev-effect-a, #c62b30);
  stroke-width: calc(.8px + var(--eqev-effect-strength, .58) * 1.1px);
  stroke-dasharray: 92 11 31 7 148 13;
  vector-effect: non-scaling-stroke;
  opacity: calc(.52 + var(--eqev-effect-strength, .58) * .34);
  animation: eqevHauntedBorder var(--eqev-effect-duration, 30s) steps(12, end) infinite;
}

.eqev-haunted-card-edge--inner {
  stroke: var(--eqev-effect-b, #f2eee8);
  stroke-width: calc(.45px + var(--eqev-effect-strength, .58) * .7px);
  stroke-dasharray: 17 8 74 14 45 6;
  opacity: calc(.34 + var(--eqev-effect-strength, .58) * .32);
  animation-direction: reverse;
  animation-duration: calc(var(--eqev-effect-duration, 30s) * 1.18);
}

.eqev-haunted-card-slashes {
  fill: none;
  stroke: var(--eqev-effect-b, #f2eee8);
  stroke-width: calc(.7px + var(--eqev-effect-strength, .58) * .7px);
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  opacity: calc(.26 + var(--eqev-effect-strength, .58) * .34);
  animation: eqevHauntedSlash calc(var(--eqev-effect-duration, 30s) * .62) steps(8, end) infinite alternate;
}

.eqev-haunted-grain,
.eqev-haunted-spectral,
.eqev-haunted-fine,
.eqev-haunted-scars,
.eqev-haunted-dust,
.eqev-haunted-card-edge,
.eqev-haunted-card-slashes {
  animation-play-state: paused;
}

.eqev-showcase__background.is-active .eqev-haunted-grain,
.eqev-showcase__background.is-active .eqev-haunted-spectral,
.eqev-showcase__background.is-active .eqev-haunted-fine,
.eqev-showcase__background.is-active .eqev-haunted-scars,
.eqev-showcase__background.is-active .eqev-haunted-dust,
.eqev-showcase__slide.is-active .eqev-haunted-card-edge,
.eqev-showcase__slide.is-active .eqev-haunted-card-slashes {
  animation-play-state: running;
}

.eqev-showcase--effects-paused .eqev-haunted-grain,
.eqev-showcase--effects-paused .eqev-haunted-spectral,
.eqev-showcase--effects-paused .eqev-haunted-fine,
.eqev-showcase--effects-paused .eqev-haunted-scars,
.eqev-showcase--effects-paused .eqev-haunted-dust,
.eqev-showcase--effects-paused .eqev-haunted-card-edge,
.eqev-showcase--effects-paused .eqev-haunted-card-slashes,
.eqev-showcase--haunted-out .eqev-haunted-grain,
.eqev-showcase--haunted-out .eqev-haunted-spectral,
.eqev-showcase--haunted-out .eqev-haunted-fine,
.eqev-showcase--haunted-out .eqev-haunted-scars,
.eqev-showcase--haunted-out .eqev-haunted-dust,
.eqev-showcase--haunted-out .eqev-haunted-card-edge,
.eqev-showcase--haunted-out .eqev-haunted-card-slashes {
  animation-play-state: paused !important;
}

.eqev-showcase[data-haunted-quality="lite"] .eqev-haunted-fine path:nth-child(n + 25),
.eqev-showcase[data-haunted-quality="lite"] .eqev-haunted-dust circle:nth-child(n + 13),
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-fine path:nth-child(n + 19),
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-dust circle:nth-child(n + 9) {
  display: none;
}

.eqev-showcase[data-haunted-quality="lite"] .eqev-haunted-scars,
.eqev-showcase[data-haunted-quality="lite"] .eqev-haunted-card-scene,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-scars,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-card-scene {
  filter: none;
}

.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-grain,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-spectral,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-fine,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-scars,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-dust,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-card-edge,
.eqev-showcase[data-haunted-quality="static"] .eqev-haunted-card-slashes,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-grain,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-spectral,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-fine,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-scars,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-dust,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-card-edge,
.eqev-showcase[data-haunted-quality="static-pending"] .eqev-haunted-card-slashes {
  animation: none !important;
}

.eqev-showcase[data-haunted-quality="disabled"] .eqev-effect--haunted-scratches .eqev-showcase__effect-layer,
.eqev-showcase[data-haunted-quality="disabled"] .eqev-effect--haunted-scratches .eqev-showcase__card-glass {
  display: none !important;
  opacity: 0 !important;
}

@keyframes eqevHauntedGrain {
  0% { background-position: 0 0, 0 0; opacity: calc(.07 + var(--eqev-effect-strength, .58) * .14); }
  45% { background-position: 13px -9px, -7px 11px; }
  100% { background-position: -11px 8px, 15px -6px; opacity: calc(.11 + var(--eqev-effect-strength, .58) * .18); }
}

@keyframes eqevHauntedInterference {
  0% { transform: translate3d(-3%, 0, 0) skewX(-1deg); }
  48% { transform: translate3d(2%, -1%, 0) skewX(.7deg); }
  100% { transform: translate3d(4%, 1%, 0) skewX(-.4deg); }
}

@keyframes eqevHauntedFine {
  0% { transform: translate3d(-3px, -7px, 0); opacity: .36; }
  57% { transform: translate3d(2px, 6px, 0); opacity: .62; }
  100% { transform: translate3d(-1px, 11px, 0); opacity: .44; }
}

@keyframes eqevHauntedScars {
  0% { transform: translate3d(-2px, 1px, 0); opacity: .52; }
  42% { transform: translate3d(3px, -1px, 0); opacity: .78; }
  100% { transform: translate3d(1px, 2px, 0); opacity: .6; }
}

@keyframes eqevHauntedDust {
  from { transform: translate3d(0, -5px, 0); opacity: .28; }
  to { transform: translate3d(2px, 8px, 0); opacity: .52; }
}

@keyframes eqevHauntedBorder {
  from { stroke-dashoffset: 0; transform: translate3d(-.4px, .3px, 0); }
  to { stroke-dashoffset: -188; transform: translate3d(.7px, -.5px, 0); }
}

@keyframes eqevHauntedSlash {
  from { transform: translate3d(-1px, 0, 0); opacity: .35; }
  to { transform: translate3d(1px, 1px, 0); opacity: .7; }
}

@media (max-width: 820px), (pointer: coarse) {
  .eqev-showcase__slide.is-active.eqev-effect--haunted-scratches:is(.eqev-effect-scope--both, .eqev-effect-scope--card) .eqev-showcase__card-glass {
    inset: -12px;
  }

  .eqev-haunted-spectral { inset: -3%; width: 106%; height: 106%; }
}

@media (prefers-reduced-motion: reduce) {
  .eqev-haunted-grain,
  .eqev-haunted-spectral,
  .eqev-haunted-fine,
  .eqev-haunted-scars,
  .eqev-haunted-dust,
  .eqev-haunted-card-edge,
  .eqev-haunted-card-slashes {
    animation: none !important;
  }
}
