.reveal-hero{
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
  background:#0b0c10;

  --x:50%;
  --y:50%;
  --r:480px;
}

/* Base background */
.reveal-base{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 600px at 70% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, #0b0c10, #0f1322);
}

/* Pattern layer (hover only) */
.reveal-pattern{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(circle at 1px 1px, rgba(155,112,29,.4) 1px, transparent 1.2px) 0 0 / 13px 13px,
    repeating-linear-gradient(135deg, rgba(255,255,255, 0) 0 1px, transparent 1px 14px);

  opacity:0;
  transition: 4.0s cubic-bezier(.22, 1, .36, 1);

  -webkit-mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0) 85%
);
    mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0) 85%  );
}

/* Reveal only on hover */
.reveal-hero:hover .reveal-pattern{
  opacity:1;
}

/* Content layer (always visible) */
.hero-content{
  position:relative;
  z-index:10;
  min-height:100vh;
  padding:64px;
  display:flex;
  flex-direction:column;
  /* justify-content:flex-end; */
}

/* Responsive */
@media (max-width:1200px){
  .reveal-hero{
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
  }
}