/* ==========================================================================
   Launch Labs — "Venn" experiment (Emotion + Logic -> website). A SEPARATE
   prototype — it does NOT touch or reuse the existing Emotion/Logic
   (.el-scroll) section, nor any other experiment.

   Pinned, scroll-scrubbed on near-black: a red EMOTION circle (left) and a
   white LOGIC circle (right) start apart, slide together into a Venn, a
   small CHOOSE label appears in the intersection, then a real Launch Labs
   website image is revealed THROUGH the intersection and the intersection
   grows until the website fills the viewport, becoming the .venn-site below.

   Crispness: circles are true SVG <circle> geometry with animated r/cx (no
   CSS scaling of small DOM nodes); the intersection is a real nested
   clipPath (circle ∩ circle); the website is revealed through that clip.
   Everything stays sharp at any scale. Palette strictly #010202 / #D92632 /
   #FFFFFF. All selectors namespaced .venn / .venn-site. Motion in js/venn.js
   (GSAP + ScrollTrigger, already loaded — no new library).

   To revert: delete this file, js/venn.js, the .venn + .venn-site markup and
   their <link>/<script> lines.
   ========================================================================== */

.venn {
  position: relative;
  background: #010202;
}

.venn__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #010202;
}

.venn__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.venn__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.venn__label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  will-change: transform, opacity;
}

.venn__label-title {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.venn__label-title--sm {
  font-size: clamp(0.85rem, 1.9vw, 1.3rem);
  letter-spacing: 0.18em;
}

.venn__label-sub {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  letter-spacing: 0.02em;
}

.venn__label--emotion { color: #FFFFFF; }
.venn__label--logic { color: #010202; }
.venn__label--choice { color: #FFFFFF; }

/* ==========================================================================
   The emerged website section — the intersection, expanded into the next
   canvas. Full-bleed cover of the same image the mask revealed, so the
   handoff from the pinned stage is seamless (image -> identical image).
   ========================================================================== */
.venn-site {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #010202;
}

.venn-site__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* matches the SVG image's xMidYMid slice */
  display: block;
}

/* Reduced motion — js/venn.js renders a static combined still (Venn with the
   website already in the intersection) and does not pin/animate. */
@media (prefers-reduced-motion: reduce) {
  .venn__stage {
    height: 100vh;
    min-height: 34rem;
  }
}