/* ==========================================================================
   Launch Labs — "Reveal portrait". A reusable scroll reveal: a 4:5 portrait
   rectangle whose clip-path mask races bottom-to-top to uncover the image,
   with a subtle rise and inner parallax for depth. GSAP ScrollTrigger drives
   it (see js/reveal-portrait.js); it fires once and never reverses.

   Default (no-JS / reduced motion / no GSAP) state is the fully revealed image
   — the JS sets the hidden start state itself, so nothing is ever permanently
   clipped without motion. Namespaced .reveal-portrait / .rp-demo; the reveal
   component is drop-in reusable on any <img>. Touches nothing else.
   ========================================================================== */

.reveal-portrait {
  position: relative;
  width: min(88vw, 30rem);
  aspect-ratio: 4 / 5;      /* portrait rectangle */
  margin: 0;
  overflow: hidden;         /* contain the inner image's scale/translate bleed */
  background: #0a0708;      /* tinted near-black behind the photo */
  will-change: transform, clip-path;
}

.reveal-portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ---- Demo host section (neutral). Only exists to show the reveal. ---- */
.rp-demo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 18vh, 12rem) clamp(1.5rem, 5vw, 4rem);
  background: #010202;
  color: #FFFFFF;
}