/* Shared slow blue waves behind the site's white reading surfaces. */
.home-theme {
  isolation: isolate;
  background: #eef7fd;
  --line: #d9e7f1;
}

.ambient-waves {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(160deg, #f5faff 5%, #e9f5fd 55%, #f3f9fe 100%);
}

.ambient-waves > svg {
  display: block;
  width: 110%;
  height: 110%;
  margin: -3% -5%;
  opacity: .9;
  filter: blur(10px);
}

.ambient-wave {
  transform-origin: center;
}

/* Keep the translucent layers soft while bringing them closer to TelePlan blue. */
.ambient-wave--one > path:first-child { fill: #74acd7; }
.ambient-wave--one > path:nth-child(2) { fill: #a5c8e7; }
.ambient-wave--two > path:first-child { fill: #689dcb; }

.home-theme .conversation-hero,
.home-theme .solutions,
.home-theme .phone-section,
.home-theme .voice-section,
.home-theme .contact-section,
.home-theme .voice-hero-band,
.home-theme .voice-screening,
.home-theme .voice-get-in-touch {
  background: transparent;
}

.home-theme .integration-section,
.home-theme .custom-section,
.home-theme .voice-practice {
  background: #e9f5fc75;
  border-block: 1px solid #d6e8f280;
}

.home-theme .provider-strip {
  background: #ffffffb8;
  border-block: 1px solid #dae8f1;
}

.home-theme .conversation-panel {
  border-color: #d2e4f0;
  box-shadow: 0 20px 60px #1b527b0c;
}

.home-theme .header-inner {
  background: #ffffffed;
}

.home-theme .header.is-floating .header-inner {
  background: #ffffffed;
}

.home-theme footer {
  background: #e9f4fcbb;
}

.home-theme .scroll-fade--top {
  background: linear-gradient(to bottom, #eef7fd 0%, #eef7fdd9 24%, #eef7fd00 100%);
}

.home-theme .scroll-fade--bottom {
  background: linear-gradient(to top, #eef7fd 0%, #eef7fdd9 24%, #eef7fd00 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .home-theme main {
    animation: page-enter 380ms ease-out both;
  }
  .ambient-wave--one {
    animation: ambient-tide 32s ease-in-out -12s infinite alternate;
  }
  .ambient-wave--two {
    animation: ambient-tide 42s ease-in-out -29s infinite alternate-reverse;
  }
}

@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ambient-tide {
  from { transform: translate(-150px, -38px) rotate(-0.8deg); }
  to { transform: translate(150px, 38px) rotate(0.8deg); }
}

@media (forced-colors: active) {
  .ambient-waves { display: none; }
}