* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family: system-ui, sans-serif; }

@property --rv-r { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* palco em tela cheia, responsivo */
.stage {
  position: relative;
  width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden; background: #0a0a0a;
  --rv-x: 50%; --rv-y: 50%; --rv-r: 0px; --rv-edge: 45%;
  cursor: none;
}

/* as duas imagens ocupam a tela toda */
.full { position: absolute; inset: 0; }
.full img, img.full {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* a camada de cima (reveal) é mostrada só dentro da lanterna, com borda em degradê */
.reveal {
  -webkit-mask: radial-gradient(circle var(--rv-r) at var(--rv-x) var(--rv-y),
                #000 0, #000 var(--rv-edge), transparent 100%);
          mask: radial-gradient(circle var(--rv-r) at var(--rv-x) var(--rv-y),
                #000 0, #000 var(--rv-edge), transparent 100%);
  transition: --rv-r .3s ease;
  will-change: mask, -webkit-mask;
}

.content {
  position: absolute; z-index: 3; left: 6%; bottom: 8%;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); pointer-events: none;
}
.content h1 { font-size: clamp(2rem, 6vw, 5rem); }
.content p  { font-size: clamp(1rem, 2vw, 1.5rem); margin-top:.5rem; }