/* A little movement around the words, with the reading surface kept still. */
.catalog-intro{--intro-ribbon-opacity:.34;position:relative;isolation:isolate;overflow:clip}
.catalog-intro>.eyebrow,.catalog-intro>h1,.catalog-intro>.catalog-intro-copy,.catalog-intro>.catalog-nav{position:relative;z-index:1}
.services-intro-ribbon{position:absolute;top:42px;right:clamp(16px,3vw,48px);width:clamp(250px,31vw,430px);max-width:calc(100% - 32px);height:auto;pointer-events:none;user-select:none;color:var(--page-accent,#62476f);opacity:var(--intro-ribbon-opacity);z-index:0;overflow:visible}
.services-intro-ribbon .ribbon-line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.services-intro-ribbon .ribbon-echo{opacity:.62;stroke-width:1.1}
.services-intro-ribbon .ribbon-spark{fill:var(--page-light,#ddcbe6);stroke:currentColor;stroke-width:.65}
.services-intro-ribbon .ribbon-loop{transform-origin:230px 145px}
.services-intro-ribbon .ribbon-trail{transform-origin:250px 190px}
.catalog-intro.intro-motion-ready .services-intro-ribbon{opacity:0;transition:opacity 1.8s ease}
.catalog-intro.intro-motion-revealed .services-intro-ribbon{opacity:var(--intro-ribbon-opacity)}
.intro-motion-ready .ribbon-loop{animation:intro-ribbon-sway 18s ease-in-out infinite alternate;animation-play-state:paused}
.intro-motion-ready .ribbon-trail{animation:intro-ribbon-flutter 22s ease-in-out infinite alternate;animation-play-state:paused}
.intro-motion-running .ribbon-loop,.intro-motion-running .ribbon-trail{animation-play-state:running}
@keyframes intro-ribbon-sway{from{transform:translate(-3px,4px) rotate(-2deg)}to{transform:translate(4px,-5px) rotate(2deg)}}
@keyframes intro-ribbon-flutter{from{transform:translate(3px,-2px) rotate(1deg)}to{transform:translate(-4px,5px) rotate(-1.5deg)}}
@media(max-width:700px){.catalog-intro{--intro-ribbon-opacity:.25}.services-intro-ribbon{top:20px;right:16px;width:220px}}
html[data-motion=off] .catalog-intro .services-intro-ribbon{opacity:var(--intro-ribbon-opacity);transition:none}
html[data-motion=off] .services-intro-ribbon *{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.catalog-intro .services-intro-ribbon{opacity:var(--intro-ribbon-opacity);transition:none}.services-intro-ribbon *{animation:none!important;transform:none}}
