/* Pixel-style generation reveal — mirrors in-app loader feel (HTML/GSAP comps). */
.video-hero.hw-pixel-reveal-target,
.preview-frame.hw-pixel-reveal-target,
.clip-trim-phone.hw-pixel-reveal-target {
  position: relative;
}

.hw-pixel-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: 1;
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 22%, transparent) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 18%, transparent) 0 1px,
      transparent 1px 10px
    ),
    radial-gradient(
      ellipse 80% 70% at 50% 45%,
      color-mix(in srgb, var(--accent) 28%, #0c0c0e) 0%,
      #050506 55%,
      #000 100%
    );
  background-size: 10px 10px, 10px 10px, 100% 100%;
  animation: hw-pixel-shimmer 0.55s steps(6) infinite;
}

@keyframes hw-pixel-shimmer {
  0% {
    filter: brightness(0.92);
  }
  50% {
    filter: brightness(1.08);
  }
  100% {
    filter: brightness(0.92);
  }
}

.hw-pixel-reveal-target.is-pixelating .ec-poster,
.hw-pixel-reveal-target.is-pixelating > img,
.hw-pixel-reveal-target.is-pixelating img:first-of-type {
  image-rendering: pixelated;
  transform: scale(1.1);
  transform-origin: 50% 50%;
  filter: blur(10px) saturate(0.35) contrast(1.2);
}