/* ============================================================
   SECTION 2 — about.css  (Rewrite)
   Scroll-driven word highlight: grey → white as user reads
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BACKGROUND BRIDGE — smooth gradient from hero purple → black
   This sits at the very top of the about section so the
   colour transition from section 1 feels seamless.
══════════════════════════════════════════════════════════ */
.about-section {
  position       : relative;
  min-height     : 100vh;
  display        : flex;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 120px 24px;
  /* Pure dark — the gradient bridge is a pseudo-element */
  background     : #05050e;
  overflow       : hidden;
}

/* Top gradient bridge — meets hero's purple orb that bleeds downward */
.about-section::before {
  content   : '';
  position  : absolute;
  top       : 0; left: 0; right: 0;
  height    : 560px;
  background: linear-gradient(
    to bottom,
    rgba(72, 18, 185, 0.28) 0%,
    rgba(55, 12, 155, 0.16) 30%,
    rgba(30,  6, 90, 0.06) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index   : 0;
}

/* Subtle noise grain */
.about-section::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  opacity   : 0.016;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
  z-index   : 0;
}

/* ══════════════════════════════════════════════════════════
   CONTENT WRAPPER
══════════════════════════════════════════════════════════ */
.about-content {
  position  : relative;
  z-index   : 1;
  max-width : 780px;
  margin    : 0 auto;
}

/* ══════════════════════════════════════════════════════════
   AVATAR STACK
══════════════════════════════════════════════════════════ */
.avatar-stack {
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 44px;
  opacity        : 0;
  transform      : translateY(12px);
  transition     : opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                   transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.avatar-stack.visible { opacity: 1; transform: translateY(0); }

.avatar-item {
  width          : 40px;
  height         : 40px;
  border-radius  : 10px; /* squircle shape */
  border         : 2px solid #05050e;
  margin-left    : -10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : 'Inter', sans-serif;
  font-size      : 0.75rem;
  font-weight    : 700;
  color          : rgba(255,255,255,0.9);
  flex-shrink    : 0;
  transition     : transform 0.2s ease;
}
.avatar-item:first-child   { margin-left: 0; }
.avatar-item:nth-child(1)  { background: url('../images/student_1.png') center/cover; }
.avatar-item:nth-child(2)  { background: url('../images/student_2.png') center/cover; }
.avatar-item:nth-child(3)  { background: url('../images/student_3.png') center/cover; }
.avatar-item:nth-child(4)  { background: url('../images/student_4.png') center/cover; }
.avatar-item:hover         { transform: translateY(-3px) scale(1.08); z-index: 2; }

.avatar-plus {
  width          : 40px;
  height         : 40px;
  border-radius  : 10px; /* squircle shape */
  border         : 2px solid rgba(255,255,255,0.12);
  background     : rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : 'Inter', sans-serif;
  font-size      : 1rem;
  font-weight    : 500;
  color          : rgba(255,255,255,0.55);
  margin-left    : -10px;
  flex-shrink    : 0;
}

/* ══════════════════════════════════════════════════════════
   STATEMENT TEXT — scroll-driven word highlight
══════════════════════════════════════════════════════════ */
.about-statement {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(1.65rem, 3.8vw, 3rem);
  font-weight   : 500;           /* medium — not heavy */
  line-height   : 1.30;
  letter-spacing: -0.018em;
  margin        : 0;

  /* enter from below once section is in view */
  opacity  : 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s,
              transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.about-statement.visible {
  opacity  : 1;
  transform: translateY(0);
}

/* Every word: starts dim grey */
.about-statement .word {
  display    : inline;
  color      : rgba(255,255,255,0.20);
  transition : color 0.12s ease;
}

/* Highlighted word: bright white */
.about-statement .word.lit {
  color: rgba(255,255,255,0.95);
}

.about-dot { display: none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .about-section    { min-height: auto; padding: 90px 24px; }
  .about-content    { max-width: 640px; }
}

/* Small tablet */
@media (max-width: 768px) {
  .about-section    { padding: 72px 20px; }
  .about-statement  { font-size: clamp(1.4rem, 5vw, 2.2rem); }
}

/* Mobile */
@media (max-width: 480px) {
  .about-section    { min-height: auto; padding: 56px 16px; }
  .about-content    { max-width: 100%; }
  .about-statement  { font-size: clamp(1.2rem, 6.5vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; }
  .avatar-item,
  .avatar-plus      { width: 34px; height: 34px; }
  .avatar-stack     { margin-bottom: 28px; }
}

/* Extra small */
@media (max-width: 360px) {
  .about-section    { padding: 44px 14px; }
  .about-statement  { font-size: 1.15rem; }
}