/* Soft research seam between the hero and the first content section. */
.hero-transition {
  position: relative;
  z-index: 8;
  height: 0;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
}

.hero-transition__wash {
  position: absolute;
  z-index: -3;
  top: -154px;
  left: 0;
  right: 0;
  height: 174px;
  background: linear-gradient(180deg, rgba(220, 238, 255, 0) 0%, rgba(229, 242, 255, 0.38) 35%, rgba(255, 255, 255, 0.88) 76%, #fff 100%);
}

.hero-transition__wash::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  filter: blur(26px);
}

.hero-transition__glass {
  position: absolute;
  z-index: -1;
  top: -45px;
  left: 50%;
  width: min(360px, 44vw);
  height: 74px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
  box-shadow: 0 12px 38px rgba(64, 132, 218, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  filter: blur(0.2px);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

.hero-transition__orbit {
  position: absolute;
  z-index: 0;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.34), 0 0 48px rgba(105, 176, 255, 0.14);
}

.hero-transition__orbit--wide {
  top: -80px;
  width: min(920px, 78vw);
  height: 154px;
}

.hero-transition__orbit--inner {
  top: -42px;
  width: min(510px, 48vw);
  height: 92px;
  opacity: 0.66;
  transform: translateX(-50%) rotate(5deg);
}

.hero-transition__float {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: absolute;
  z-index: 2;
  translate: var(--parallax-x) var(--parallax-y);
  animation: seamFloat 8s ease-in-out infinite;
  will-change: translate;
}

.hero-transition__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(221, 239, 255, 0.2));
  box-shadow: 0 12px 28px rgba(35, 104, 190, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(13px) saturate(130%);
  -webkit-backdrop-filter: blur(13px) saturate(130%);
}

.hero-transition__icon img {
  width: 24px;
  height: 24px;
  opacity: 0.72;
  filter: brightness(0) invert(1);
}

.hero-transition__float--insights {
  top: -108px;
  left: 14%;
  animation-delay: -2.2s;
}

.hero-transition__float--transcripts {
  top: -30px;
  left: 28%;
  transform: scale(0.78);
  animation-delay: -5.4s;
}

.hero-transition__float--search {
  top: -100px;
  right: 15%;
  transform: scale(0.9);
  animation-delay: -4.1s;
}

.hero-transition__float--quotes {
  top: -24px;
  right: 28%;
  transform: scale(0.74);
  animation-delay: -1.1s;
}

.hero-transition__spark {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  translate: var(--parallax-x) var(--parallax-y);
  background: rgba(255, 255, 255, 0.82);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.8));
  animation: sparkPulse 4.6s ease-in-out infinite;
}

.hero-transition__spark--one {
  top: -78px;
  left: 38%;
}

.hero-transition__spark--two {
  top: -118px;
  right: 37%;
  width: 8px;
  height: 8px;
  animation-delay: -2.1s;
}

@keyframes seamFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -9px; }
}

@keyframes sparkPulse {
  0%, 100% { opacity: 0.42; scale: 0.82; }
  50% { opacity: 0.9; scale: 1; }
}

@media (max-width: 720px) {
  .hero-transition__float--insights { left: 8%; }
  .hero-transition__float--search { right: 8%; }
  .hero-transition__float--transcripts,
  .hero-transition__float--quotes { display: none; }
  .hero-transition__orbit--wide { width: 112vw; }
  .hero-transition__orbit--inner { width: 72vw; }
}

@media (max-width: 520px) {
  .hero-transition__wash { top: -126px; height: 148px; }
  .hero-transition__glass { top: -36px; width: 58vw; height: 58px; }
  .hero-transition__icon { width: 46px; height: 46px; border-radius: 14px; }
  .hero-transition__icon img { width: 20px; height: 20px; }
  .hero-transition__float--insights { top: -82px; }
  .hero-transition__float--search { top: -72px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-transition__float,
  .hero-transition__spark { animation: none; }
}