.intro.has-topo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.intro.has-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/askseo-hero-pattern.svg?v=20260926-centered") right center / cover no-repeat;
  pointer-events: none;
  animation: topo-drift 24s ease-in-out infinite alternate;
}

/* very slow drift so the lines feel alive */
@keyframes topo-drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.04) translate(-1%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .intro.has-topo::before { animation: none; }
}

/* on phones, fade the pattern back so the headline stays readable */
@media (max-width: 768px) {
  .intro.has-topo::before { opacity: 0.45; background-position: 70% center; }
}

.motion-paused .intro.has-topo::before { animation-play-state: paused; }

@media(min-width:761px){
  .intro.has-topo .intro-bottom{display:block}
  .intro.has-topo .intro-bottom .text-link{display:inline-flex;margin-top:26px;max-width:none}
}

/* A stationary feather keeps the drifting contours soft at both section edges. */
.intro.has-topo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#fafbf8 0%,#fafbf8f2 3%,#fafbf8a6 9%,#fafbf833 16%,#fafbf800 23%,#f9fbf500 73%,#f9fbf533 82%,#f9fbf5a6 91%,#f9fbf5f2 97%,#f9fbf5 100%)}
.intro.has-topo+.home-work{border-top:0}