/*!
 * SMTP & IP Warming animated flow — scoped styles
 * Class root: .smtp-flow
 * Strictly scoped: every selector starts with .smtp-flow to prevent leakage.
 * No !important. No global resets. Safe to load globally; affects only the widget.
 */

.smtp-flow {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  /* Allow widget to bleed slightly outside hero column on desktop for impact */
  margin: 0 auto;
}

.smtp-flow .smtp-flow-svg,
.smtp-flow object {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* Reserve the 850x550 intrinsic ratio so the box never collapses to 0
     height while the SVG loads — eliminates layout shift (CLS). */
  aspect-ratio: 850 / 550;
  /* No box-shadow, no border-radius — transparent, blends with site bg */
}

/* Server LEDs blink */
.smtp-flow .server-led {
  animation: smtpFlowLedBlink 1.4s ease-in-out infinite;
  transform-origin: center;
}
.smtp-flow .led-1 { animation-delay: 0s; }
.smtp-flow .led-2 { animation-delay: 0.45s; }
.smtp-flow .led-3 { animation-delay: 0.9s; }
@keyframes smtpFlowLedBlink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Gears rotating */
.smtp-flow .gear-spin {
  animation: smtpFlowGearSpin 6s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.smtp-flow .gear-spin-slow {
  animation: smtpFlowGearSpin 12s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes smtpFlowGearSpin {
  to { transform: rotate(360deg); }
}

/* Paper plane gentle bob */
.smtp-flow .plane-bob {
  animation: smtpFlowPlaneBob 2.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes smtpFlowPlaneBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}

/* Analytics bars subtle pulse */
.smtp-flow .bar {
  animation: smtpFlowBarPulse 2s ease-in-out infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
.smtp-flow .bar-1 { animation-delay: 0s; }
.smtp-flow .bar-2 { animation-delay: 0.2s; }
.smtp-flow .bar-3 { animation-delay: 0.4s; }
.smtp-flow .bar-4 { animation-delay: 0.6s; }
@keyframes smtpFlowBarPulse {
  0%, 100% { transform: scaleY(0.85); }
  50%      { transform: scaleY(1); }
}

/* SMTP arrows pulse forward */
.smtp-flow .smtp-arrows g {
  animation: smtpFlowArrowPulse 2.2s ease-in-out infinite;
  transform-origin: left center;
  transform-box: fill-box;
}
.smtp-flow .smtp-arrows g:nth-child(2) { animation-delay: 1.1s; }
@keyframes smtpFlowArrowPulse {
  0%, 100% { transform: translateX(0);  filter: brightness(1); }
  50%      { transform: translateX(4px); filter: brightness(1.15); }
}

/* Cloud subtle breathing */
.smtp-flow .node-cloud path {
  animation: smtpFlowCloudBreath 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes smtpFlowCloudBreath {
  0%, 100% { transform: scale(1);     filter: brightness(1); }
  50%      { transform: scale(1.015); filter: brightness(1.03); }
}

/* ========================================================================
   RESPONSIVE: bigger on desktop, optimised for mobile
   ======================================================================== */

/* Desktop: standard fit, no bleed — parent col-lg-5 dictates width */
@media (min-width: 1200px) {
  .smtp-flow {
    width: 100%;
    /* Slight scale up for impact while staying inside container */
    max-width: 100%;
  }
}

/* Tablet: standard sizing, no bleed */
@media (min-width: 768px) and (max-width: 1199px) {
  .smtp-flow {
    width: 100%;
    transform: none;
    margin-left: 0;
  }
}

/* Mobile: slightly larger viewBox area to keep text legible */
@media (max-width: 767px) {
  .smtp-flow {
    width: 100%;
    transform: none;
    margin: 12px auto 24px;
    /* Ensure SVG has minimum visual height on small screens */
    min-height: 240px;
  }
  .smtp-flow object {
    width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .smtp-flow .server-led,
  .smtp-flow .gear-spin,
  .smtp-flow .gear-spin-slow,
  .smtp-flow .plane-bob,
  .smtp-flow .bar,
  .smtp-flow .smtp-arrows g,
  .smtp-flow .node-cloud path {
    animation: none;
  }
}