/* ============================================================
   maintenance-visuals.css — detailed looping SVG scenes replacing
   the four Three.js cards in "Your site stays strong".
   Flat, on-brand, single 2px stroke weight (set globally in
   service-visuals.css). Loaded after main.css.
   ============================================================ */

/* The label (.card-header) is position:absolute, pinned to the card top
   (Webflow scroll-reveal heading). The generous top padding reserves clear
   space for it so the visual never crowds it. height:auto overrides
   Webflow's height:100% (which capped the card and clipped the visual). */
.card-row43_card-image-wrapper {
  height: auto;
  padding: 5rem 1.25rem 1.75rem;
  justify-content: flex-start;
}
/* 2rem of breathing room below the (absolute) header before the visual */
.card-row43_card-image-wrapper .card-header { padding-bottom: 2rem; }

.fd-card-viz {
  width: 100%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}
.fd-loop {
  width: 100%;
  max-width: 212px;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---- ALWAYS AVAILABLE: server rack, LEDs blink, signal waves ---- */
@keyframes fd-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.fd-loop--uptime .l1 { animation: fd-led 1.8s ease-in-out infinite; }
.fd-loop--uptime .l2 { animation: fd-led 1.8s ease-in-out 0.3s infinite; }
.fd-loop--uptime .l3 { animation: fd-led 1.8s ease-in-out 0.6s infinite; }
.fd-loop--uptime .l4 { animation: fd-led 1.8s ease-in-out 0.9s infinite; }
@keyframes fd-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.fd-loop--uptime .w1 { animation: fd-wave 2.2s ease-out infinite; }
.fd-loop--uptime .w2 { animation: fd-wave 2.2s ease-out 0.4s infinite; }

/* ---- GET FOUND EASY: magnifier scans, top rank pulses, arrow rises ---- */
@keyframes fd-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(58px); } }
.fd-loop--seo .mag { transform-box: fill-box; animation: fd-scan 3.6s ease-in-out infinite; }
@keyframes fd-hit { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.fd-loop--seo .hit { animation: fd-hit 3.6s ease-in-out infinite; }
@keyframes fd-rise { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-4px); opacity: 0.6; } }
.fd-loop--seo .arrow { transform-box: fill-box; animation: fd-rise 2s ease-in-out infinite; }

/* ---- FRESH CONTENT: blocks refresh in sequence, refresh icon spins ---- */
@keyframes fd-refresh {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  42% { transform: scaleX(0.3); opacity: 0.3; }
  58% { transform: scaleX(0.3); opacity: 0.3; }
}
.fd-loop--content .cblk { transform-box: fill-box; transform-origin: left center; }
.fd-loop--content .k1 { animation: fd-refresh 3.6s ease-in-out infinite; }
.fd-loop--content .k2 { animation: fd-refresh 3.6s ease-in-out 0.15s infinite; }
.fd-loop--content .k3 { animation: fd-refresh 3.6s ease-in-out 0.3s infinite; }
.fd-loop--content .k4 { animation: fd-refresh 3.6s ease-in-out 0.45s infinite; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-loop--content .refresh { transform-box: fill-box; transform-origin: center; animation: fd-spin 3.6s linear infinite; }

/* ---- 24-7 PROTECTED: pulse rings radiate, scan line sweeps ---- */
@keyframes fd-ring {
  0% { transform: scale(0.55); opacity: 0.5; }
  80% { opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}
.fd-loop--vault .ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fd-loop--vault .r1 { animation: fd-ring 2.8s ease-out infinite; }
.fd-loop--vault .r2 { animation: fd-ring 2.8s ease-out 1.4s infinite; }
@keyframes fd-sweep { 0%, 100% { transform: translateY(-13px); opacity: 0; } 50% { transform: translateY(13px); opacity: 1; } }
.fd-loop--vault .scan { transform-box: fill-box; animation: fd-sweep 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fd-loop * { animation: none !important; }
}