/* ==========================================================================
   Launch Labs — "Attention" experiment (directing attention). A SEPARATE,
   standalone prototype — it does NOT modify or reuse any existing section or
   any previous experiment. All selectors namespaced .attention / .attention-site.

   Deliberately SLOW: pinned for ~500vh with the animation distributed across
   the whole runway (long linear scrub, real holds), not compressed into a
   short burst. On a white field, one small red circle sits among ~24 black
   circles; the composition slowly organises itself so everything gives the
   red circle space (attention via negative space, not size); the black
   circles then physically leave the frame; finally the red circle expands
   from its centre until red fills the viewport and becomes the .attention-site
   below (identical #D92632 -> seamless, no fade).

   Crispness: circles are true SVG <circle> with animated r/cx/cy (never
   CSS-scaled DOM), so geometry is razor sharp at every size. Palette strictly
   #FFFFFF / #010202 / #D92632. Motion in js/attention.js (GSAP + ScrollTrigger,
   already loaded — no new library). To revert: delete this file, js/attention.js,
   the .attention + .attention-site markup and their <link>/<script> lines.
   ========================================================================== */

.attention {
  position: relative;
  background: #FFFFFF;
}

.attention__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}

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

.attention__dot { fill: #010202; }
.attention__red { fill: #D92632; }

/* ==========================================================================
   The emerged red section — the red circle expanded into the next canvas.
   Solid Launch red (identical to the circle) so the handoff from the pinned
   stage is seamless. White type; the CTA opens the SHAPE modal. Swappable
   stand-in destination.
   ========================================================================== */
.attention-site {
  position: relative;
  background: #D92632;
  color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem);
}

.attention-site__inner {
  max-width: 52rem;
  text-align: center;
}

.attention-site__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.attention-site__cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
}

.attention-site__btn {
  padding: 1.15rem 2.75rem;
  font-size: 0.9375rem;
}

body[data-theme="black"] .attention-site__btn {
  background: #FFFFFF;
  color: #010202;
  border: 1px solid #FFFFFF;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body[data-theme="black"] .attention-site__btn:hover {
    background: #010202;
    color: #FFFFFF;
    border-color: #010202;
    box-shadow: none;
  }
}

.attention-site__title,
.attention-site__cta {
  opacity: 0;
  transform: translateY(22px);
}

.attention-site.is-visible .attention-site__title {
  animation: attention-rise 0.9s var(--ease) forwards;
}

.attention-site.is-visible .attention-site__cta {
  animation: attention-rise 0.9s var(--ease) forwards;
  animation-delay: 0.25s;
}

@keyframes attention-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion — js/attention.js renders the balanced "perfect focus" still
   (red circle centred, black circles framing it) and does not pin/animate. */
@media (prefers-reduced-motion: reduce) {
  .attention__stage {
    height: 100vh;
    min-height: 34rem;
  }
}