/* =========================================================
   DOTS MEDIA
   ABOUT SECTION
   ========================================================= */

.about {
  position: relative;
  z-index: 2;

  max-width: 1400px;
  margin: 0 auto;

  padding: 40px 60px 0;

  display: grid;
  grid-template-columns: 1fr 1.05fr;

  gap: 60px;

  align-items: center;
}

.about-text h2 {
    color: #fff;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    margin: 20px 0 22px;
}



/* =========================================================
   ABOUT TAG
   No scroll animation — appears with the rest of the static
   section chrome, only the paragraphs and image animate.
   ========================================================= */

.about-tag {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #cfcfcf;

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 2px;
  text-transform: uppercase;

  margin-bottom: 20px;
}


/* =========================================================
   ABOUT TEXT
   Each <p> fades up one after another once the section enters
   the viewport. about.js adds "in-view" to .about and sets a
   staggered transition-delay on each paragraph.
   ========================================================= */

.about-text p {
  color: #a9a9a9;

  font-size: 16.5px;
  line-height: 1.7;

  max-width: 500px;

  margin-bottom: 26px;

  opacity: 0;
  transform: translateY(24px);

  transition: opacity 0.6s ease, transform 0.6s ease;
  /* per-paragraph stagger delay is set inline by about.js —
     kept well ahead of the duration above so each paragraph
     is basically finished before the next one starts. */
}

.about.in-view .about-text p {
  opacity: 1;
  transform: translateY(0);
}

.about-text p.highlight {
  color: #ffffff;
  font-weight: 500;
}


/* =========================================================
   ABOUT DOT INDICATOR
   ========================================================= */

.about-dot-indicator {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #ffffff;

  margin-top: 30px;
}


/* =========================================================
   ABOUT IMAGE
   Slides in from the right, once the section enters view.
   ========================================================= */

.about-image {
  position: relative;

  border-radius: 20px;
  overflow: hidden;

  height: 560px;

  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transform: translateX(130px);

  transition:
    opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about.in-view .about-image {
  opacity: 1;
  transform: translateX(0);
}

.about-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}