/* ── The venn — what you know vs what people attend to ─────────
   Motion thesis: the reader is carried ACROSS one object, not shown two
   events. The clunk in the previous version was a dead beat — the section
   finished arriving, stopped, then the circles started. So the phases now
   overlap and every part of the sequence is driven by one timeline:

     entry    the discs settle up and out as the section rises over the hero,
              so arriving and moving are a single gesture
     contain  the pair travels one step left, eased rather than linear, so it
              reads as considered rather than mechanical
     copy     each circle's words are tied to where that circle is, so text is
              never caught half-off the edge of the screen

   Geometry is expressed in diameters. The two discs sit in one element and the
   slide moves exactly the distance between their centres, so the overlap is
   constant by construction rather than by coincidence. */
.venn {
  /* Deliberately taller than most viewports. The disc runs past the top and
     foot of the screen while it is pinned; you see its top as it comes in and
     its bottom as it leaves. */
  --venn-d: min(94vw, 1060px);
  --venn-overlap: 0.17;                        /* fraction of a diameter */
  --venn-step: calc(var(--venn-d) * (1 - var(--venn-overlap)));

  color: var(--color-white);
  position: relative;
  z-index: 1;
  /* Clips the horizontal travel without clipping the disc vertically. `clip`
     rather than `hidden` so this does not become a scroll container and take
     the view timeline with it. */
  overflow-x: clip;
}

/* The stage sticks within this, not within the section. A sticky element's
   siblings scroll straight past it, so with the ticker as a sibling of a stage
   pinned for the whole section, the ticker crossed the discs on its way up.
   Ending the sticky range here releases the stage before the ticker arrives.

   Deep enough that the travel is a slow, deliberate move rather than a flick:
   roughly one viewport of settle, one of travel, one of hold. */
.venn-track {
  height: 300vh;
  position: relative;
}

/* The section's own background, masked so it fades in over 75px. This is what
   softens the crossing over the hero portrait — the discs above it keep their
   hard edges, which is why the fade lives on a background layer rather than on
   the section or the stage. */
.venn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-grey);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 75px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 75px);
}

/* The stage is the height of the disc, not the viewport, and pins at a
   negative offset so the disc sits centred and overflowing while held. That is
   what lets the disc scroll in and out naturally: before the pin it rises from
   below and its top crops away; after the pin it carries on up and its foot
   comes into view. Nothing clips it vertically. */
.venn-stage {
  position: sticky;
  top: calc((100vh - var(--venn-d)) / 2);
  height: var(--venn-d);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Offset back down to the top of the viewport, since the stage's own top sits
   above it while pinned. */
.venn-label {
  position: absolute;
  top: calc((var(--venn-d) - 100vh) / 2 + var(--space-lg));
  left: var(--pad-h);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  z-index: 4;
}

.venn-diagram {
  position: relative;
  /* The stage is a flex column; without this it would shrink the disc. */
  flex-shrink: 0;
  width: calc(var(--venn-d) + var(--venn-step));
  height: var(--venn-d);
  margin-left: calc(50vw - var(--venn-d) / 2);
  will-change: transform;
}

.venn-circle {
  position: absolute;
  top: 0;
  width: var(--venn-d);
  height: var(--venn-d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.venn-circle--know {
  left: 0;
  z-index: 1;
  background-color: rgb(36 36 36 / 90%);
}

/* One step along, so the pair overlaps by --venn-overlap of a diameter */
.venn-circle--attention {
  left: var(--venn-step);
  z-index: 0;
  background-color: rgb(255 102 0 / 90%);
  color: var(--color-ink);
}

/* ── Copy ─────────────────────────────────────────────────────
   Proportions measured off the Figma at 1:1: a 990px disc carries a 64px
   heading and 20px body — 6.5% and 2.0% of the diameter, a 3.2x ratio. The
   heading runs the full 58% chord; the body sits narrower at 44% of the
   diameter, which is what gives the Figma's line breaks. */
.venn-circle-copy {
  width: 66%;
  text-align: center;
  font-family: var(--font-body);
  font-size: calc(var(--venn-d) * 0.02);
  line-height: 1.45;
}

.venn-circle-copy p {
  max-width: 67%;                       /* 44% of the diameter */
  margin-inline: auto;
  margin-bottom: 0.85em;
}

.venn-circle-copy p:last-child {
  margin-bottom: 0;
}

/* Centred within the copy block, as the Figma has it. What the label sets is
   where that block starts, not the alignment of the type inside it — the two
   share a hanging line, but the heading still centres on the disc. */
.venn-heading {
  font-family: var(--font-display);
  font-size: calc(var(--venn-d) * 0.065);
  font-weight: 800;
  line-height: 1.06;
  /* Small, because em here is relative to a 69px heading — the leading on its
     own last line already carries most of the space to the quote. */
  margin-bottom: 0.28em;
}

/* "Everything you know" holds one line and sets the width of the heading
   block; the two white lines are broken manually beneath it, as in the Figma.
   No nowrap — the block is simply wide enough to carry it. */
.venn-heading-accent {
  color: var(--color-orange);
  display: block;
}

.venn-quote {
  font-style: italic;
  opacity: 0.92;
}

.venn-kicker {
  font-weight: 500;
}

.venn-start {
  font-family: var(--font-display);
  font-size: calc(var(--venn-d) * 0.048);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-white);
}

.venn-circle-copy .venn-start {
  margin-top: 0.55em;
  margin-bottom: 0.06em;
}

.venn-circle-copy .venn-earn {
  font-weight: 500;
  margin-bottom: 0;
}

/* ── Ticker ───────────────────────────────────────────────────
   After the track, so it arrives only once the discs have scrolled away. It
   never shares the viewport with them. */
.venn-ticker {
  position: relative;
  z-index: 1;
  padding: var(--space-md) 0 var(--space-md);
}

/* ── Choreography ─────────────────────────────────────────────
   One timeline, three jobs, deliberately overlapping so there is no beat where
   nothing is moving. Behind @supports and a reduced-motion guard: without
   either, both discs and both blocks of copy sit visible and static, and the
   section still reads top to bottom. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .venn-track {
      view-timeline-name: --venn-scroll;
    }

    /* The discs settle as the section rises — arriving and moving become one
       gesture rather than two. */
    .venn-circle {
      animation: venn-settle linear both;
      animation-timeline: --venn-scroll;
      animation-range: entry 20% entry 100%;
    }

    /* The travel. Eased, not linear: slow to leave, quick through the middle,
       slow to arrive. Linear is what made it feel mechanical. */
    .venn-diagram {
      animation: venn-slide both;
      animation-timeline: --venn-scroll;
      animation-range: contain 6% contain 88%;
      animation-timing-function: cubic-bezier(0.72, 0, 0.28, 1);
    }

    /* Copy is tied to where its own circle is, so a block is never caught
       half-off the edge — each fades while its disc is still well in frame. */
    /* The two ranges overlap deliberately. Held apart, there was a stretch
       mid-travel with neither block visible — not a beat, a hole. Allowing for
       the holds inside each keyframe, the dark copy is gone by 44% and the
       orange has begun arriving at 40%, so one is always handing over to the
       other. */
    .venn-circle--know .venn-circle-copy {
      animation: venn-copy-out linear both;
      animation-timeline: --venn-scroll;
      animation-range: contain 18% contain 44%;
    }

    .venn-circle--attention .venn-circle-copy {
      animation: venn-copy-in linear both;
      animation-timeline: --venn-scroll;
      animation-range: contain 40% contain 66%;
    }

    /* The label belongs to the first disc; it goes with it. */
    .venn-label {
      animation: venn-copy-out linear both;
      animation-timeline: --venn-scroll;
      animation-range: contain 8% contain 26%;
    }
  }
}

@keyframes venn-settle {
  from {
    transform: translateY(6vh) scale(0.94);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes venn-slide {
  to {
    transform: translateX(calc(var(--venn-step) * -1));
  }
}

@keyframes venn-copy-out {
  0%, 30% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2.5vw);
  }
}

@keyframes venn-copy-in {
  0% {
    opacity: 0;
    transform: translateX(2.5vw);
  }

  70%, 100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Responsive ───────────────────────────────────────────────
   The disc has to carry the same copy in far less width, so it runs wider than
   the viewport and the overlap tightens. */
@media (max-width: 767px) {
  /* The disc runs to twice the viewport width here and crops hard, as it
     already does on desktop. Everything inside is a proportion of the
     diameter, so a disc sized to fit the screen forced the body type under
     14px and pushed the copy block out past the curve. A bigger disc lets the
     copy sit at a small fraction of it and still read at 16px. */
  .venn {
    --venn-d: min(200vw, 760px);
    --venn-overlap: 0.12;
  }

  .venn-track {
    height: 300vh;
  }

  .venn-circle-copy {
    width: 42%;
    font-size: calc(var(--venn-d) * 0.021);
  }

  .venn-circle-copy p {
    max-width: 100%;
  }

  .venn-heading {
    font-size: calc(var(--venn-d) * 0.04);
  }

  .venn-start {
    font-size: calc(var(--venn-d) * 0.034);
  }
}

@media (min-width: 768px) {
  .venn-label {
    font-size: 15px;
  }
}

/* ── Reduced motion ───────────────────────────────────────────
   Not "the same thing, still". Without the slide, the sequence has no way to
   deliver the second circle: the orange disc sits a step to the right, mostly
   off screen, with its copy unreachable — and the reader gets 300vh of empty
   scrolling to find that out.

   So the section becomes what it is arguing, laid out rather than performed:
   the two discs stack, still overlapping by the same 17% of a diameter, both
   sets of words legible at once. The venn survives; only the travel goes. */
@media (prefers-reduced-motion: reduce) {
  .venn-track {
    height: auto;
  }

  .venn-stage {
    position: static;
    height: auto;
    display: block;
    padding: var(--space-xl) 0;
  }

  .venn-label {
    position: static;
    display: block;
    margin: 0 var(--pad-h) var(--space-md);
  }

  .venn-diagram {
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .venn-circle {
    position: static;
    flex-shrink: 0;
  }

  /* The overlap is the argument, so it survives — turned through 90 degrees */
  .venn-circle--attention {
    margin-top: calc(var(--venn-d) * -0.17);
  }
}