/**
 * LeadPages universal SVG logo — sizing, theming, ring pulse.
 */
:root {
  --lp-logo-height: 52px;
}

.lp-logo-wrap {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  height: var(--lp-logo-height);
  width: auto;
  --lp-logo-accent: #2ecc8f;
  --lp-logo-ink: #13161b;
  --lp-logo-pulse-bg: transparent;
}

.lp-logo-wrap svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.leadpages-logo.lp-logo-wrap:not([style*="height"]) {
  height: var(--lp-logo-height);
}

.lp-shell-logo.lp-logo-wrap {
  height: var(--lp-logo-height);
}

#lp-landing .leadpages-logo.lp-logo-wrap {
  height: var(--lp-logo-height);
}

.wrap > .leadpages-logo.lp-logo-wrap:not(.lp-shell-logo) {
  height: var(--lp-logo-height);
}

/* Marketing site — light ink on dark chrome */
.nav .lp-logo-wrap,
.nav .leadpages-logo,
footer .lp-logo-wrap,
footer .leadpages-logo {
  width: auto !important;
  max-width: none !important;
  height: var(--lp-logo-height) !important;
  --lp-logo-ink: #f3f6fa;
  --lp-logo-pulse-bg: transparent;
}

/* Ring pulse — 7-phase ripple with glow phasing inner → outer, unified fade-out */
.lp-logo-pulse #inner-circle,
.lp-logo-pulse #outer-circle {
  fill: transparent;
}

.lp-logo-pulse #inner-circle {
  animation: lp-logo-ripple-inner 2.75s ease-in-out infinite;
  transform-origin: 153px 134px;
}

.lp-logo-pulse #outer-circle {
  animation: lp-logo-ripple-outer 2.75s ease-in-out infinite;
  transform-origin: 160px 134px;
}

/*
 * Glow never snaps via filter:none — always drop-shadow(0 0 0 transparent)
 * so intensity eases smoothly. Inner glow peaks early, hands off to outer,
 * then both fill + glow fade out together.
 */
@keyframes lp-logo-ripple-inner {
  0%,
  10%,
  76%,
  100% {
    fill: transparent;
    filter: drop-shadow(0 0 0 transparent);
  }

  /* Phase 2 — inner fill fades in, glow barely starting */
  15% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 45%, transparent);
    filter: drop-shadow(0 0 0 transparent);
  }

  19% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 80%, transparent);
    filter:
      drop-shadow(0 0 2px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 16%, transparent))
      drop-shadow(0 0 5px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 8%, transparent));
  }

  /* Phase 3 — inner at full accent, glow builds */
  24% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 4px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 42%, transparent))
      drop-shadow(0 0 10px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 22%, transparent));
  }

  28% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 6px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 65%, transparent))
      drop-shadow(0 0 14px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 35%, transparent));
  }

  /* Phase 4 — outer ring fading in; inner glow softens as energy moves outward */
  34% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 5px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 48%, transparent))
      drop-shadow(0 0 12px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 26%, transparent));
  }

  40% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 3px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 28%, transparent))
      drop-shadow(0 0 8px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 14%, transparent));
  }

  /* Phase 5 — both lit; inner keeps a soft halo, outer carries main glow */
  48%,
  54% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 2px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 14%, transparent))
      drop-shadow(0 0 5px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 7%, transparent));
  }

  /* Phase 6 — fill + glow fade out together */
  58% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 75%, transparent);
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 8%, transparent))
      drop-shadow(0 0 3px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 4%, transparent));
  }

  64% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 45%, transparent);
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 4%, transparent))
      drop-shadow(0 0 2px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 2%, transparent));
  }

  70% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 15%, transparent);
    filter: drop-shadow(0 0 0 transparent);
  }

  /* Phase 7 — rest on background */
  73% {
    fill: transparent;
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes lp-logo-ripple-outer {
  0%,
  10%,
  30%,
  76%,
  100% {
    fill: transparent;
    filter: drop-shadow(0 0 0 transparent);
  }

  /* Phases 2–3 — outer waits, no glow yet */
  32% {
    fill: transparent;
    filter: drop-shadow(0 0 0 transparent);
  }

  /* Phase 4 — outer fill + glow rise as inner hands off */
  36% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 45%, transparent);
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 8%, transparent))
      drop-shadow(0 0 3px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 4%, transparent));
  }

  40% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 80%, transparent);
    filter:
      drop-shadow(0 0 3px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 24%, transparent))
      drop-shadow(0 0 8px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 12%, transparent));
  }

  44% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 92%, transparent);
    filter:
      drop-shadow(0 0 4px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 38%, transparent))
      drop-shadow(0 0 10px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 20%, transparent));
  }

  /* Phase 5 — outer carries the main glow */
  50% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 5px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 52%, transparent))
      drop-shadow(0 0 12px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 28%, transparent));
  }

  54% {
    fill: var(--lp-logo-accent, #2ecc8f);
    filter:
      drop-shadow(0 0 6px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 65%, transparent))
      drop-shadow(0 0 14px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 35%, transparent));
  }

  /* Phase 6 — fill + glow fade out together */
  58% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 75%, transparent);
    filter:
      drop-shadow(0 0 5px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 48%, transparent))
      drop-shadow(0 0 11px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 24%, transparent));
  }

  64% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 45%, transparent);
    filter:
      drop-shadow(0 0 3px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 22%, transparent))
      drop-shadow(0 0 7px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 10%, transparent));
  }

  70% {
    fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 15%, transparent);
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 6%, transparent))
      drop-shadow(0 0 2px color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 3%, transparent));
  }

  /* Phase 7 — rest on background */
  73% {
    fill: transparent;
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* Respect reduced motion — workspace + visitor + system */
@media (prefers-reduced-motion: reduce) {
  .lp-logo-pulse #outer-circle,
  .lp-logo-pulse #inner-circle {
    animation: none !important;
  }
}

html[data-lp-reduced-motion="true"] .lp-logo-pulse #outer-circle,
html[data-lp-reduced-motion="true"] .lp-logo-pulse #inner-circle,
html[data-lp-visitor-motion="reduced"] .lp-logo-pulse #outer-circle,
html[data-lp-visitor-motion="reduced"] .lp-logo-pulse #inner-circle {
  animation: none !important;
}

/* Partner template pages — crisp logos, context-aware sizing */
body[data-pt-template] .pt-lp-badge-logo,
body[data-pt-template] .pt-lp-disclosure-logo {
  --lp-logo-height: 48px;
  image-rendering: -webkit-optimize-contrast;
  shape-rendering: geometricPrecision;
}
body[data-pt-template] .pt-lp-disclosure-logo {
  --lp-logo-height: 44px;
}
body[data-pt-template] .pt-lp-badge .lp-logo-pulse #inner-circle,
body[data-pt-template] .pt-lp-badge .lp-logo-pulse #outer-circle,
body[data-pt-template] .pt-lp-disclosure .lp-logo-pulse #inner-circle,
body[data-pt-template] .pt-lp-disclosure .lp-logo-pulse #outer-circle {
  animation: none !important;
  filter: none !important;
}
/* Subtle static accent ring on partner logos (no blur) */
body[data-pt-template] .pt-lp-badge-logo.lp-logo-pulse #inner-circle,
body[data-pt-template] .pt-lp-disclosure-logo.lp-logo-pulse #inner-circle {
  fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 35%, transparent);
}
body[data-pt-template] .pt-lp-badge-logo.lp-logo-pulse #outer-circle,
body[data-pt-template] .pt-lp-disclosure-logo.lp-logo-pulse #outer-circle {
  fill: color-mix(in srgb, var(--lp-logo-accent, #2ecc8f) 18%, transparent);
}

/* Footer strip logo */
.lp-foot-logo.lp-logo-wrap {
  height: var(--lp-logo-height);
}

/* Mobile /manage site picker — larger hero logo only */
@media (max-width: 767px) {
  #lp-landing .leadpages-logo,
  #lp-landing .leadpages-logo.lp-logo-wrap {
    height: 264px !important;
  }
}

/* Marketing / dark header variants */
.lp-logo-wrap[data-lp-logo-ink="light"] {
  --lp-logo-ink: #f3f6fa;
}

.lp-logo-wrap[data-lp-logo-ink="dark"] {
  --lp-logo-ink: #13161b;
}