/* PB About Hero Block */

section.pb-about-hero {
  background-color: var(--color-dark-blue);
  background-image:
    radial-gradient(ellipse at 65% 40%, #252848 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, #111224 0%, transparent 50%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: clamp(40px, 6vh, 80px) clamp(24px, 4vw, 80px);
  position: relative;
}

/* Grid overlay */
section.pb-about-hero .pb-about-hero-grid {
  animation: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 139px,
      rgba(255, 255, 255, 0.12) 139px,
      rgba(255, 255, 255, 0.12) 140px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 139px,
      rgba(255, 255, 255, 0.12) 139px,
      rgba(255, 255, 255, 0.12) 140px
    );
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes pb-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 140px 140px; }
}

/* Inner — vertical stack, centered, fills full height */
section.pb-about-hero .pb-about-hero-inner {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vh, 36px);
  margin: 0 auto;
  max-width: 1000px;
  min-height: 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

/* Label */
section.pb-about-hero .pb-about-hero-label {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-head);
  font-size: clamp(14px, 2vw, var(--typography-size-h2));
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

/* Title */
section.pb-about-hero .pb-about-hero-title {
  text-transform: uppercase;
  color: var(--color-beige);
  font-family: var(--font-head);
  font-size: clamp(32px, 5.5vw, 70px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

section.pb-about-hero .pb-about-hero-title em {
  color: #ffffff;
  font-style: normal;
}

/* Chart — middle */
section.pb-about-hero .pb-growth-chart {
  flex-shrink: 1;
  min-height: 0;
  width: min(820px, 92%);
}

section.pb-about-hero .pb-growth-svg {
  display: block;
  height: auto;
  max-height: 42vh;
  width: 100%;
}

/* Tagline */
section.pb-about-hero .pb-about-hero-tagline {
  border-top: 2px solid var(--color-red);
  color: var(--color-beige);
  font-family: var(--font-head);
  font-size: clamp(13px, 1.2vw, var(--typography-size-h3));
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.45;
  margin: 0;
  max-width: 1000px;
  padding-top: clamp(16px, 2.5vh, 28px);
  text-transform: uppercase;
  width: 100%;
}

/* ─── Line draw animations ─────────────────────────────── */

section.pb-about-hero .pb-growth-line,
section.pb-about-hero .pb-growth-line-glow {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: pb-draw 1.2s cubic-bezier(0.4, 0, 0.6, 1) 0.5s forwards;
}

section.pb-about-hero .pb-growth-line-steep,
section.pb-about-hero .pb-growth-line-steep-glow {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pb-draw 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

section.pb-about-hero .pb-area-clip-rect {
  animation: pb-clip-reveal 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

@keyframes pb-clip-reveal {
  from { width: 0; }
  to   { width: 420px; }
}

section.pb-about-hero .pb-growth-logo-mark {
  opacity: 0;
  transform-origin: 0px 0px;
  animation: pb-logo-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.65s forwards;
}

section.pb-about-hero .pb-growth-inflection-line {
  opacity: 0;
  animation: pb-fade-in 0.4s ease 1.7s forwards;
}

section.pb-about-hero .pb-growth-end-dot {
  opacity: 0;
  animation: pb-fade-in 0.4s ease 3.2s forwards;
}

section.pb-about-hero .pb-growth-end-pulse {
  animation: none;
  display: none;
}

/* ─── Keyframes ────────────────────────────────────────── */

@keyframes pb-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes pb-logo-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pb-fade-in {
  to { opacity: 1; }
}

@keyframes pb-end-pulse {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(3.2); }
}

/* ─── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  section.pb-about-hero .pb-growth-line,
  section.pb-about-hero .pb-growth-line-glow,
  section.pb-about-hero .pb-growth-line-steep,
  section.pb-about-hero .pb-growth-line-steep-glow,
  section.pb-about-hero .pb-growth-logo-mark,
  section.pb-about-hero .pb-growth-inflection-line,
  section.pb-about-hero .pb-growth-end-dot {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  section.pb-about-hero .pb-area-clip-rect {
    animation: none;
    width: 420px;
  }

  section.pb-about-hero .pb-growth-end-pulse {
    animation: none;
    display: none;
  }

  section.pb-about-hero .pb-about-hero-grid {
    animation: none;
  }
}

/* ─── Mobile ───────────────────────────────────────────── */

@media (max-width: 767px) {
  section.pb-about-hero {
    height: auto;
    min-height: 100vh;
    padding: 20px clamp(20px, 5vw, 40px) 48px;
  }

  section.pb-about-hero .pb-growth-chart {
    width: 100%;
  }

  section.pb-about-hero .pb-growth-svg {
    max-height: 60vw;
  }

  /* Kill the forever-running grid drift — animates background-position
     which is not GPU-composited and causes continuous paint on mobile. */
  section.pb-about-hero .pb-about-hero-grid {
    animation: none;
  }

  /* feGaussianBlur is expensive to rasterize on mobile GPUs — glow paths
     are purely decorative, hide them to reclaim the render budget. */
  section.pb-about-hero .pb-growth-line-glow,
  section.pb-about-hero .pb-growth-line-steep-glow {
    display: none;
  }

  /* Stop the infinite pulse that keeps running after the hero is loaded. */
  section.pb-about-hero .pb-growth-end-pulse {
    animation: none;
    display: none;
  }
}