/* ============ HERO — generative "look rendering to life" background ============
   Replaces the video backdrop on the slate. A graded tile field assembles
   frame by frame with a light sweep and a slow camera push, sitting behind
   the slate board + headline. Lives at z-index 0; .slate::after veil (z1)
   keeps the type legible. */

.slate .hero-gen{position:absolute;inset:-2% -2% 0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,transparent 97%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,transparent 97%)}

.slate .hg-cam{position:absolute;inset:0;animation:fzCamPush 13s cubic-bezier(.2,.55,.2,1) both}
.slate .hg-grid{position:absolute;inset:-2%;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);gap:5px;overflow:hidden;
  filter:saturate(.92) brightness(.88)}
.slate .hg-t{border-radius:3px;animation:fzTileIn .5s ease both,fzPulse 2.6s ease-in-out infinite}

.slate .hg-sweep{position:absolute;top:-20%;bottom:-20%;width:42%;left:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,221,170,.42),transparent);
  mix-blend-mode:screen;animation:fzSweep 3.4s cubic-bezier(.4,0,.6,1) infinite}

.slate .hg-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 42%,rgba(8,8,9,.10) 0%,rgba(8,8,9,.86) 100%);
  animation:fzFadeIn 1.2s ease 1s both}

/* the latent-noise denoise reveal (signature.js) plays nicely here too:
   blur the bloom while the prompt types, then sharpen into the look */
.slate .hero-gen{transition:filter 1.7s cubic-bezier(.4,0,.2,1)}
.slate:not(.denoised) .hg-grid{filter:saturate(.3) brightness(.5) contrast(1.5) blur(20px)}
.slate.denoised  .hg-grid{filter:saturate(.92) brightness(.88)}

@keyframes fzCamPush{0%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes fzFadeUp{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fzFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fzTileIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@keyframes fzPulse{0%,100%{filter:brightness(.82) saturate(.85)}50%{filter:brightness(1.22) saturate(1.16)}}
@keyframes fzSweep{0%{transform:translateX(-130%) skewX(-12deg)}100%{transform:translateX(230%) skewX(-12deg)}}

@media(prefers-reduced-motion:reduce){
  .slate .hg-cam{animation:none;transform:scale(1)}
  .slate .hg-t{animation:none;opacity:1}
  .slate .hg-sweep{display:none}
  .slate .hg-vig{animation:none;opacity:1}
  .slate:not(.denoised) .hg-grid,.slate.denoised .hg-grid{filter:saturate(.92) brightness(.88)}
}