/*! WindspeedSEO Visual System - body objects v1.4.2
 * Animated page objects (stat tiles, report track, quote cards, badge row, report history strip) first used on
 * SEO reporting software. Loads after ws-visual-heroes.css and reuses its ws-hx base rules and keyframes.
 */
/* owner: "I need more objects in the webpage. it is too dense with text. create some things and give them motion" */

/* --- stat tiles: a rotating gradient ring around an icon, a counting number, a short label */
html .elementor .ws-hx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
html .elementor .ws-hx .ws-hx-stat { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 18px; }
html .elementor .ws-hx-stat-ring { position: relative; isolation: isolate; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 9999px; display: grid; place-items: center; color: var(--ws-color-accent-data-blue-700); }
html .elementor .ws-hx-stat-ring::before { content: ""; display: block; position: absolute; inset: 0; z-index: -2; border-radius: 9999px; background: conic-gradient(from 0deg, rgba(76, 156, 200, .12), #4C9CC8, #A1CB45, rgba(161, 203, 69, .12)); }
html .elementor .ws-hx-stat-ring::after { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 9999px; background: #fff; }
html .elementor .ws-hx .ws-hx-stat-ring .ws-icon { width: 26px; height: 26px; }
html .elementor .ws-hx .ws-hx-stat-num.e-paragraph-base { display: block; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ws-text-primary); font-variant-numeric: tabular-nums; }
html .elementor .ws-hx .ws-hx-stat-label.e-paragraph-base { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ws-text-secondary); }
.ws-js .ws-in .ws-hx-stat-ring::before, .ws-js .ws-hx-stat.ws-in .ws-hx-stat-ring::before { animation: ws-hx-spin 7s linear infinite; }
.ws-js .ws-hx-stat-ring { scale: .6; opacity: 0; }
.ws-js .ws-in .ws-hx-stat-ring, .ws-js .ws-hx-stat.ws-in .ws-hx-stat-ring { scale: 1; opacity: 1; transition: scale 620ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--ws-delay, 0ms) + 250ms), opacity 400ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) + 250ms); }
@media (max-width: 767px) { html .elementor .ws-hx-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* --- report anatomy track: six stops on a line that fills, a runner laps it and each stop lights as it passes */
html .elementor .ws-hx-track { position: relative; padding: 6px 0 2px; }
html .elementor .ws-hx-track-line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 32px; height: 4px; border-radius: 9999px; background: var(--ws-color-neutral-200); z-index: 0; }
html .elementor .ws-hx-track-fill { position: absolute; inset: 0; border-radius: 9999px; background: linear-gradient(90deg, #4C9CC8, #A1CB45); transform-origin: left center; }
html .elementor .ws-hx-runner { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 9999px; background: #fff; border: 3px solid #83B422; box-shadow: 0 0 0 5px rgba(161, 203, 69, .25); opacity: 0; }
html .elementor .ws-hx-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
html .elementor .ws-hx-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
html .elementor .ws-hx-step-dot { width: 56px; height: 56px; border-radius: 9999px; display: grid; place-items: center; background: #fff; border: 2px solid var(--ws-color-accent-data-blue-200); color: var(--ws-color-accent-data-blue-700); box-shadow: 0 8px 20px -12px rgba(23, 33, 48, .4); }
html .elementor .ws-hx-step--ok .ws-hx-step-dot { border-color: var(--ws-color-brand-green-400); color: var(--ws-color-brand-green-700); background: var(--ws-color-brand-green-50); }
html .elementor .ws-hx .ws-hx-step-dot .ws-icon { width: 24px; height: 24px; }
html .elementor .ws-hx .ws-hx-step .ws-hx-strong.e-paragraph-base { font-size: 14px; }
html .elementor .ws-hx .ws-hx-step .ws-hx-small.e-paragraph-base { font-size: 12px; margin-top: 2px; }
html .elementor .ws-hx-step:nth-child(2) { --k: 1; } html .elementor .ws-hx-step:nth-child(3) { --k: 2; } html .elementor .ws-hx-step:nth-child(4) { --k: 3; }
html .elementor .ws-hx-step:nth-child(5) { --k: 4; } html .elementor .ws-hx-step:nth-child(6) { --k: 5; }
.ws-js .ws-hx-track .ws-hx-track-fill { transform: scaleX(0); }
.ws-js .ws-in .ws-hx-track .ws-hx-track-fill { transform: scaleX(1); transition: transform 2400ms var(--ws-ease-out) 300ms; }
.ws-js .ws-in .ws-hx-track .ws-hx-runner { animation: ws-hx-run 7.2s linear 2.8s infinite; }
@keyframes ws-hx-run { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ws-js .ws-hx-track .ws-hx-step-dot { opacity: 0; scale: .5; }
.ws-js .ws-in .ws-hx-track .ws-hx-step-dot { opacity: 1; scale: 1; transition: opacity 400ms var(--ws-ease-out) calc(300ms + var(--k, 0) * 380ms), scale 560ms cubic-bezier(.34, 1.56, .64, 1) calc(300ms + var(--k, 0) * 380ms);
  animation: ws-hx-stop 7.2s linear calc(2.8s + var(--k, 0) * 1.325s) infinite; }
@keyframes ws-hx-stop { 0%, 9%, 100% { box-shadow: 0 8px 20px -12px rgba(23, 33, 48, .4); translate: 0 0; } 3% { box-shadow: 0 0 0 7px rgba(161, 203, 69, .25), 0 10px 26px -8px rgba(83, 116, 24, .5); translate: 0 -4px; } }
@media (max-width: 767px) {
  html .elementor .ws-hx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  html .elementor .ws-hx-track-line { display: none; }
}

/* --- quote cards: a claim the report makes, with the evidence behind it sliding in underneath */
html .elementor .ws-hx-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
html .elementor .ws-hx .ws-hx-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
html .elementor .ws-hx .ws-hx-quote::after { content: "\201C"; position: absolute; right: 18px; top: 2px; font-size: 76px; line-height: 1; font-weight: 700; color: var(--ws-color-accent-data-blue-100); pointer-events: none; }
html .elementor .ws-hx .ws-hx-quote-text.e-paragraph-base { display: block; padding-right: 40px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ws-text-primary); }
html .elementor .ws-hx .ws-hx-evid { align-self: flex-start; padding: 5px 11px; }
html .elementor .ws-hx .ws-hx-evid .e-paragraph-base { font-size: 12px; }
.ws-js .ws-hx-quote .ws-hx-evid { opacity: 0; translate: -14px 0; }
.ws-js .ws-hx-quote.ws-in .ws-hx-evid, .ws-js .ws-in .ws-hx-quote .ws-hx-evid { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) + 700ms), translate 600ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) + 700ms); }
@media (max-width: 767px) { html .elementor .ws-hx-quotes { grid-template-columns: minmax(0, 1fr); } }

/* --- badge row: short proof points that pop in and bob gently */
html .elementor .ws-hx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
html .elementor .ws-hx .ws-hx-badge { display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 10px 18px 10px 12px; border-radius: 9999px; background: #fff; border: 1px solid var(--ws-border-default); box-shadow: 0 8px 20px -14px rgba(23, 33, 48, .35); }
html .elementor .ws-hx .ws-hx-badge .ws-hx-tick { width: 26px; height: 26px; }
html .elementor .ws-hx .ws-hx-badge .ws-hx-tick .ws-icon { width: 14px; height: 14px; }
html .elementor .ws-hx .ws-hx-badge .e-paragraph-base { font-size: 14px; font-weight: 600; color: var(--ws-text-primary); }
.ws-js .ws-hx-badges .ws-hx-badge { opacity: 0; scale: .8; }
.ws-js .ws-in .ws-hx-badges .ws-hx-badge, .ws-js .ws-hx-badges.ws-in .ws-hx-badge { opacity: 1; scale: 1; transition: opacity 400ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) * 2 + 200ms), scale 560ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--ws-delay, 0ms) * 2 + 200ms); animation: ws-hx-bob 4.8s ease-in-out calc(var(--ws-delay, 0ms) * 4 + 1.4s) infinite alternate; }
@keyframes ws-hx-bob { from { translate: 0 0; } to { translate: 0 -5px; } }

/* --- report history strip: period cards gliding past (the track and cards are styled structurally, as the
   children of the strip, because the site is at Elementor's 1,000 global class limit) */
html .elementor .ws-hx-history { overflow: hidden; padding: 14px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
html .elementor .ws-hx-history > .e-con { display: flex; gap: 16px; width: max-content; max-width: none; padding-right: 16px; }
html .elementor .ws-hx-history > .e-con > .e-con { width: 196px; flex: 0 0 196px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--ws-border-default); background: #fff; box-shadow: 0 10px 24px -16px rgba(23, 33, 48, .35); }
html .elementor .ws-hx-history > .e-con > .ws-comp-node--ok { border-color: var(--ws-color-brand-green-300); background: linear-gradient(180deg, var(--ws-color-brand-green-50), #fff 60%); }
html .elementor .ws-hx .ws-hx-history > .e-con > .ws-comp-node--ok .ws-hx-strong.e-paragraph-base { color: var(--ws-color-brand-green-800); }
html .elementor .ws-hx-history > .e-con > .e-con .ws-spark { width: 100%; max-width: 100%; height: 34px; margin-top: 4px; }
.ws-js .ws-in .ws-hx-history > .e-con, .ws-js .ws-hx-history.ws-in > .e-con { animation: ws-hx-marquee 46s linear infinite; }
html .elementor .ws-hx-history:hover > .e-con { animation-play-state: paused; }
@keyframes ws-hx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ws-js .ws-hx-stat-ring, .ws-js .ws-hx-track .ws-hx-step-dot, .ws-js .ws-hx-badges .ws-hx-badge, .ws-js .ws-hx-quote .ws-hx-evid { opacity: 1 !important; scale: 1 !important; translate: none !important; animation: none !important; transition: none !important; }
  .ws-js .ws-hx-track .ws-hx-track-fill { transform: none !important; transition: none !important; }
  .ws-js .ws-hx-track .ws-hx-runner, .ws-js .ws-hx-stat-ring::before, .ws-js .ws-hx-history > .e-con { animation: none !important; }
}
.ws-reduced .ws-hx-stat-ring::before, .ws-reduced .ws-hx-track .ws-hx-runner, .ws-reduced .ws-hx-history > .e-con, .ws-reduced .ws-hx-badges .ws-hx-badge { animation: none !important; }
.ws-reduced .ws-hx-track .ws-hx-track-fill { transform: none !important; }
