/*
  FILE: about-ball.css
  PURPOSE: Visual styling for the small solid blue "travelling dot" --
  falls onto the connecting line on page load, then follows it as the
  page scrolls (see about-ball.js for the motion).

  Independent add-on, kept separate from about.css. To remove it
  entirely: delete this file, delete about-ball.js, and delete their
  2 script/link tags plus the .about-ball and .about-cta elements in
  index.html. Removing it also brings the header's static dot and the
  plain "get in touch" text section back into view (see rules below).
*/

.about-ball {
  position: absolute;
  z-index: 10; /* above text boxes, images and the line at every breakpoint */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0E55F9; /* matches the header dot and end circle */
  pointer-events: none;
  opacity: 0; /* about-ball.js reveals it once positioned */
  transition: opacity 0.2s ease; /* fades out when the CTA takes over, see about-ball.js's updateCta() */
}

/* "Get in touch" CTA: the real link the travelling ball reveals once
   scroll reaches the end. Positioned by about-ball.js at the line's
   final point, same spot as the hollow end circle (see syncLayout()).
   Tiny and invisible by default; visibility: hidden also keeps it out
   of the tab order while hidden. Grows via width/height rather than
   transform: scale so its text keeps a real font size throughout. */
.about-cta {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%); /* grows outward from its own centre point */
  z-index: 11; /* above the travelling ball, which fades out once this activates */
  width: 8px;
  height: 8px;
  overflow: hidden; /* clips the real text inside while the element is still tiny */
  border-radius: 50%;
  background: #0E55F9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: transparent; /* text stays invisible while small/growing */
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease, color 0.2s ease, visibility 0s 0.4s;
}

.about-cta--active {
  width: 175px;
  height: 175px;
  color: #fff;
  visibility: visible;
  opacity: 1;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease, color 0.2s ease 0.15s, visibility 0s;
}

/* Fallback shown only if this whole feature is removed. While present,
   the ball CTA above replaces it visually, so it's hidden here. */
.about-get-in-touch {
  display: none;
}

/* This is the same dot placed beside "About", not a second one.
   about-ball.js reads its real position/size to know where the
   travelling ball starts (see syncLayout()), so it stays in the
   layout; visibility: hidden keeps its geometry intact without
   painting it. */
.about-header__dot {
  visibility: hidden;
}