/* hero-reveal.css — full-bleed cursor-reveal hero (pairs with assets/js/hero-reveal.js) */

.reveal-hero {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  background: #0E0F0C;
  /* the pointer is tracked on window/section, so the hero never steals clicks
     from the headline / CTAs layered above it */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  contain: paint;
}

.reveal-hero__fallback,
.reveal-hero__canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
}

.reveal-hero__fallback {
  z-index: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.reveal-hero__canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-hero.is-ready .reveal-hero__canvas {
  opacity: 1;
}

/* legibility gradient toward the bottom / left where the headline sits */
.reveal-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(14, 15, 12, 0.88) 0%, rgba(14, 15, 12, 0.45) 30%, rgba(14, 15, 12, 0) 62%),
    linear-gradient(to right, rgba(14, 15, 12, 0.62) 0%, rgba(14, 15, 12, 0.18) 38%, rgba(14, 15, 12, 0) 60%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-hero__canvas { display: none; }
}