/* ---------- Hero: fit the first screen, no dead space ---------- */

.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);
  }
}

.sci.sci-hero {
  /* Phones/tablets: sits under the call to action, filling what was empty space. */
  width: min(80%, 360px);
  margin: 32px auto 0;
}
.sci-hero .sci-blobs { display: none; }

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

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

/* ---------- Scroll reveal (only when enhance.js has opted in) ---------- */

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Expert quotes (replaces the carousel) ---------- */

.quotes {
  max-width: 1212px;
}

.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.quote-card {
  position: relative;
  margin: 0;
  padding: 56px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(34, 34, 34, .04), 0 12px 32px rgba(111, 143, 227, .12);
  font-family: Montserrat, sans-serif;
  transition: transform .3s ease, box-shadow .3s ease;
}

.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(34, 34, 34, .04), 0 18px 40px rgba(111, 143, 227, .2);
}

.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 24px;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  color: #6F8FE3;
  opacity: .5;
}

.quote-card blockquote {
  margin: 0;
}

.quote-card blockquote p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #222222;
}

.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid #F1F4FC;
}

.quote-name {
  font-size: 14px;
  font-weight: 600;
}

.quote-card .quote-bio {
  font-size: 12px;
  color: #5b6472;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .quote-cards {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin: 0 auto;
  }
}

/* ---------- Core science illustrations ---------- */

.sci {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  overflow: visible;
}

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

.sci-blobs path {
  animation: sci-drift 14s ease-in-out infinite alternate;
}

.sci-blob-b {
  animation-duration: 18s !important;
  animation-direction: alternate-reverse !important;
}

@keyframes sci-drift {
  from { transform: translate(-6px, 4px) scale(1); }
  to   { transform: translate(6px, -4px) scale(1.03); }
}

.sci-spin {
  transition: transform 1.2s cubic-bezier(.3, .8, .3, 1);
  transition-delay: calc(var(--i) * 70ms);
}

.sci-body, .sci-dot {
  transition: fill .8s ease, stroke .8s ease, opacity .8s ease;
  transition-delay: calc(var(--i) * 80ms);
}

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

.sci-arrow path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Spins pointing sideways: the "tipped" orientation used in the originals. */
@keyframes sci-precess {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(14deg); }
  75% { transform: rotate(-14deg); }
}
@keyframes sci-precess-tipped {
  0%, 100% { transform: rotate(90deg); }
  25% { transform: rotate(104deg); }
  75% { transform: rotate(76deg); }
}

/* 01 Polarization (8 s loop): field lines draw, scattered spins snap into line
   and precess, then everything scatters and the cycle starts again. */
.sci-polarization .sci-spin { transform: rotate(var(--r)); }
.sci-polarization.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-polarization.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; }
}

/* 02 Excitation: a 6 s cycle. The pulse train fires left to right, the targeted
   protons tip over and glow, a small echo appears, then everything resets. */
.sci-excitation .sci-spin { transform: rotate(0deg); }
.sci-excitation .sci-arrow { opacity: 0; }
.sci-excitation.is-active .sci-pulse {
  animation: sci-fire 6s ease-in-out infinite;
  animation-delay: calc(var(--k) * .28s);
}
.sci-excitation.is-active .sci-arrow {
  animation: sci-arrow 6s ease-in-out infinite;
  animation-delay: calc(var(--k) * .28s + .2s);
}
.sci-excitation.is-active .sci-span {
  animation-delay: 1.5s;
}
@keyframes sci-fire {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  12%  { stroke-dashoffset: 0; opacity: 1; }
  78%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes sci-arrow {
  0%, 4% { opacity: 0; }
  14%    { opacity: 1; }
  78%    { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.sci-excitation.is-active .is-target .sci-spin {
  animation: sci-tip 6s cubic-bezier(.3, .8, .3, 1) infinite;
}
@keyframes sci-tip {
  0%, 26% { transform: rotate(0deg); }
  38%     { transform: rotate(90deg); }
  80%     { transform: rotate(90deg); }
  96%, 100% { transform: rotate(0deg); }
}
.sci-excitation.is-active .is-other .sci-spin {
  animation: sci-precess 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.3s);
}
.sci-glow { opacity: 0; }
.sci-excitation.is-active .sci-glow {
  animation: sci-glow 6s ease-out infinite;
}
@keyframes sci-glow {
  0%, 32% { opacity: 0; transform: scale(1); }
  36%     { opacity: .9; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(2); }
}
.sci-excitation.is-active .sci-echo {
  animation: sci-echo 6s ease-in-out infinite;
}
@keyframes sci-echo {
  0%, 38% { stroke-dashoffset: 1; opacity: 1; }
  50%     { stroke-dashoffset: 0; opacity: 1; }
  80%     { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* 03 Detection (7 s loop): the other protons drop out to outlines; the targeted
   ones precess and emit rings while the FID is traced; then the others return. */
.sci-detection .is-target .sci-spin { transform: rotate(90deg); }
.sci-detection.is-active .is-target .sci-spin {
  animation: sci-precess-tipped 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
.sci-detection.is-active .is-other .sci-body {
  animation: sci-hollow 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms);
}
.sci-detection.is-active .is-other .sci-dot {
  animation: sci-dot-out 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes sci-hollow {
  0%, 4%    { fill: #222222; }
  16%, 84%  { fill: rgba(34, 34, 34, 0); }
  96%, 100% { fill: #222222; }
}
@keyframes sci-dot-out {
  0%, 4%    { opacity: 1; }
  14%, 86%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
.sci-rings circle { opacity: 0; }
.sci-detection.is-active .sci-rings circle {
  animation: sci-ring 2.4s ease-out infinite;
  animation-delay: calc(1s + var(--k) * .8s);
}
@keyframes sci-ring {
  0%   { opacity: .8; transform: scale(.8); }
  100% { opacity: 0; transform: scale(2.6); }
}
.sci-detection.is-active .sci-fid {
  animation: sci-trace 7s ease-in-out infinite;
}
@keyframes sci-trace {
  0%, 14%  { stroke-dashoffset: 1; opacity: 1; }
  50%      { stroke-dashoffset: 0; opacity: 1; }
  82%      { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* 04 Quantification (7 s loop): only the targeted protons remain (carried over
   from step 3); their spectrum resolves, holds, fades and resolves again. */
.sci-quantification .is-other .sci-body { fill: transparent; stroke: #222222; transition: none; }
.sci-quantification .is-other .sci-dot  { opacity: 0; transition: none; }
.sci-quantification .is-target .sci-spin { transform: rotate(90deg); }
.sci-quantification.is-active .is-target .sci-spin {
  animation: sci-precess-tipped 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
.sci-quantification.is-active .sci-spectrum {
  animation: sci-resolve 7s ease-in-out infinite;
}
@keyframes sci-resolve {
  0%, 6%   { stroke-dashoffset: 1; opacity: 1; }
  44%      { stroke-dashoffset: 0; opacity: 1; }
  84%      { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Reduced motion / no tracking: show each illustration in its final state, no loops. */
.sci.is-static, .sci.is-static * {
  animation: none !important;
  transition: none !important;
}
.sci-excitation.is-static .sci-pulse,
.sci-excitation.is-static .sci-echo,
.sci-detection.is-static .sci-fid { stroke-dashoffset: 0; }
.sci-excitation.is-static .sci-arrow { opacity: 1; }
.sci-excitation.is-static .is-target .sci-spin { transform: rotate(90deg); }
.sci-polarization.is-static .sci-spin { transform: rotate(0deg); }
.sci-polarization.is-static .sci-field path,
.sci-quantification.is-static .sci-spectrum { stroke-dashoffset: 0; }
.sci-detection.is-static .is-other .sci-body { fill: transparent; }
.sci-detection.is-static .is-other .sci-dot { opacity: 0; }