/* ---------- Hero: fit the first screen, no dead space (from synex-site-v2) ---------- */

.hero-image-bg {
  min-height: 0;
  background-position: 70% bottom;
  padding-bottom: 150px;                /* room for the wave at the bottom of the blob image */
}
.hero {
  position: relative;
  min-height: 0;
  padding-bottom: 40px;
}
.hero-headline {
  margin-top: 110px;
}
.mission {
  margin-top: 0;
}

@media (min-width: 768px) {
  .hero-image-bg {
    background-position: center bottom;
    padding-bottom: 170px;
  }
  .hero {
    min-height: clamp(540px, 74vh, 740px);
  }
  .hero-headline {
    margin-top: clamp(64px, 13vh, 150px);
  }
}

@media (max-width: 767px) {
  /* Let the headline wrap naturally instead of stranding "of" on its own line. */
  .hero-headline br { display: none; }
}

/* ---------- Hero illustration ---------- */

.sci-hero {
  display: block;
  width: min(80%, 360px);
  max-width: 520px;
  height: auto;
  margin: 32px auto 0;                  /* phones/tablets: under the call to action */
  overflow: visible;
}

@media (min-width: 1000px) {
  .sci-hero {
    margin: 0;
    position: absolute;
    right: 2%;
    top: 50%;
    width: min(46%, 560px);
    transform: translateY(-46%);
    pointer-events: none;
  }
}

.sci-hero * {
  transform-box: fill-box;
  transform-origin: center;
}

.sci-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* 8 s loop: field lines draw, scattered spins snap into line and precess,
   then everything scatters and the cycle starts again. */
.sci-hero .sci-spin { transform: rotate(var(--r)); }
.sci-hero.is-active .sci-spin {
  animation: sci-align 8s cubic-bezier(.3, .8, .3, 1) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes sci-align {
  0%, 6%   { transform: rotate(var(--r)); }
  24%      { transform: rotate(0deg); }
  34%      { transform: rotate(14deg); }
  46%      { transform: rotate(-14deg); }
  58%      { transform: rotate(14deg); }
  70%      { transform: rotate(-14deg); }
  80%      { transform: rotate(0deg); }
  94%, 100% { transform: rotate(var(--r)); }
}
.sci-hero.is-active .sci-field path {
  animation: sci-lines 8s ease-in-out infinite;
  animation-delay: calc(var(--k) * 180ms);
}
@keyframes sci-lines {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  22%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  94%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}

.sci-hero.is-paused, .sci-hero.is-paused * {
  animation-play-state: paused !important;
}

/* Reduced motion: aligned, lines drawn, no animation. */
.sci-hero.is-static, .sci-hero.is-static * {
  animation: none !important;
  transition: none !important;
}
.sci-hero.is-static .sci-spin { transform: rotate(0deg); }
.sci-hero.is-static .sci-field path { stroke-dashoffset: 0; }