/* ============================================================
   Scroll Animations – anime.js-inspired
   ============================================================ */

/* ── Scroll Progress Bar ──────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--clr-cyan)   0%,
    var(--clr-teal)  50%,
    var(--clr-neon2) 100%
  );
  box-shadow:
    0 0 10px rgba(6, 182, 212, 0.7),
    0 0 24px rgba(6, 182, 212, 0.35);
  pointer-events: none;
  will-change: width;
}

/* ── Section label – slide in from left ──────────────────── */
.section-label.fade-in {
  transform: translateX(-22px);
  transition:
    opacity   0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.section-label.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Section-title underline reveal ──────────────────────── */
.sa-title-line {
  display: block;
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--clr-cyan),
    var(--clr-teal),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
  border-radius: 2px;
  margin-top: 0.4rem;
  opacity: 0.55;
}

.section-title.fade-in.visible .sa-title-line {
  transform: scaleX(1);
}

/* ── Divider – line draw from left ───────────────────────── */
.divider.fade-in {
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity   0.3s ease,
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.divider.fade-in.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ── About text – slide in from left ─────────────────────── */
.about-text.fade-in {
  transform: translateX(-38px);
  transition:
    opacity   0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.about-text.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Geo figure – scale + rotate entrance ────────────────── */
.geo-figure.fade-in {
  transform: scale(0.82) rotate(-6deg);
  transition:
    opacity   1.1s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.geo-figure.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Card grids – spring bounce entrance ─────────────────── */
.interests-grid .interest-card.fade-in,
.projects-grid  .project-card.fade-in,
.clinical-grid  .clinical-card.fade-in,
.stats-row      .stat-card.fade-in {
  transform: translateY(46px) scale(0.94);
  transition:
    opacity   0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.interests-grid .interest-card.fade-in.visible,
.projects-grid  .project-card.fade-in.visible,
.clinical-grid  .clinical-card.fade-in.visible,
.stats-row      .stat-card.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Research columns – slide in from opposite sides ─────── */
.research-cols .research-col.fade-in:nth-child(odd) {
  transform: translateX(-44px);
  transition:
    opacity   0.75s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.research-cols .research-col.fade-in:nth-child(even) {
  transform: translateX(44px);
  transition:
    opacity   0.75s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.research-cols .research-col.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Stat counter glow while animating ───────────────────── */
.stat-number.sa-counting {
  text-shadow:
    0 0 18px rgba(6, 182, 212, 0.8),
    0 0 36px rgba(6, 182, 212, 0.45);
  transition: text-shadow 0.3s ease;
}

/* ── Stat ring SVG wrapper ────────────────────────────────── */
.stat-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 0.5rem;
}

.stat-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.stat-ring-bg {
  fill:         none;
  stroke:       rgba(6, 182, 212, 0.12);
  stroke-width: 3;
}

.stat-ring-fill {
  fill:              none;
  stroke:            var(--clr-cyan, #06b6d4);
  stroke-width:      3;
  stroke-linecap:    round;
  /* circumference = 2π × 28 ≈ 175.93 px */
  stroke-dasharray:  175.93px;
  stroke-dashoffset: 175.93px;
}

.stat-number {
  position: relative;
  z-index:  1;
}

/* ── Nav active-section indicator ────────────────────────── */
.nav-links {
  position: relative; /* anchor for the indicator span */
}

.nav-indicator {
  position:      absolute;
  bottom:        -4px;
  left:          0;
  height:        2px;
  width:         40px;
  background:    linear-gradient(90deg, var(--clr-cyan, #06b6d4), var(--clr-teal, #14b8a6));
  box-shadow:    0 0 8px rgba(6, 182, 212, 0.7);
  border-radius: 2px;
  pointer-events: none;
  opacity:       0;
  transition:    opacity 0.3s ease, width 0.15s ease;
}

@media (max-width: 700px) {
  .nav-indicator { display: none; }
}

/* ── Scroll-progress glow pulse when near 100% ───────────── */
@keyframes sa-bar-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(6, 182, 212, 0.7),
      0 0 24px rgba(6, 182, 212, 0.35);
  }
  50% {
    box-shadow:
      0 0 22px rgba(6, 182, 212, 1),
      0 0 50px rgba(6, 182, 212, 0.7),
      0 0 90px rgba(6, 182, 212, 0.3);
  }
}

#scroll-progress.sa-bar-glow {
  animation: sa-bar-pulse 0.9s ease-in-out infinite;
}