/* Ported from Demo UI subscription.html — HeyLeads marketing design system */

    /* Ambient Subtle Moving Grid & Radial Glow */
    @keyframes diagonalGridMove {
      0% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 0px 0px, 0px 0px;
      }
      100% {
        background-position: 100% 100%, 0% 0%, 50% 50%, 80px 80px, 80px 80px;
      }
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: 
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.09) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(16, 185, 129, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 50% 45%, rgba(6, 182, 212, 0.04) 0%, transparent 60%),
        linear-gradient(var(--ambient-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ambient-grid) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
      animation: diagonalGridMove 28s linear infinite;
      pointer-events: none;
      opacity: 0.85;
    }

    @media (prefers-reduced-motion: reduce) {
      body::before {
        animation: none;
      }
    }

    /* Motion Entrance */
    @keyframes panelCardPopIn {
      0% {
        opacity: 0.35;
        transform: translateY(14px) scale(0.985);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .card-pop-in {
      /* Stay visible even if the animation is delayed/interrupted */
      opacity: 1;
      animation: panelCardPopIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @media (prefers-reduced-motion: reduce) {
      .card-pop-in {
        animation: none !important;
        opacity: 1;
        transform: none;
      }
    }

    /* Wave Text Animation */
    @keyframes textHaloPulse {
      0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.55));
      }
      100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
      }
    }

    .autopilot-wave-text {
      background: linear-gradient(90deg, #38bdf8 0%, #c084fc 40%, #34d399 75%, #38bdf8 100%);
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textHaloPulse 4.5s ease-in-out infinite;
    }

    /* —— Living homepage motion —— */

    @keyframes heroGlowBreath {
      0%, 100% {
        opacity: 0.7;
        transform: scale(1) translate(0, 0);
      }
      50% {
        opacity: 1;
        transform: scale(1.12) translate(-12px, 8px);
      }
    }

    .hero-glow {
      animation: heroGlowBreath 8s ease-in-out infinite;
    }

    @keyframes productFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .product-shot--hero {
      animation: productFloat 6s ease-in-out infinite;
    }

    @keyframes trustPillPulse {
      0%, 100% { opacity: 0.75; }
      50% { opacity: 1; }
    }

    .trust-pill i {
      animation: trustPillPulse 3.5s ease-in-out infinite;
    }

    .trust-pill:nth-child(2) i { animation-delay: 0.4s; }
    .trust-pill:nth-child(3) i { animation-delay: 0.8s; }
    .trust-pill:nth-child(4) i { animation-delay: 1.2s; }

    @keyframes softShimmer {
      0% { background-position: -120% 0; }
      100% { background-position: 220% 0; }
    }

    .product-shot::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.035) 50%,
        transparent 60%
      );
      background-size: 200% 100%;
      animation: softShimmer 7s ease-in-out infinite;
      border-radius: inherit;
      opacity: 0.7;
    }

    [data-theme="light"] .product-shot::after {
      background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(99, 102, 241, 0.06) 50%,
        transparent 60%
      );
      background-size: 200% 100%;
    }

    /* Scroll reveal — elements start hidden, JS adds .is-visible */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.04s; }
    .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
    .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
    .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.22s; }
    .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.28s; }
    .reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.34s; }

    @keyframes iconBadgeGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
      50% { box-shadow: 0 0 14px -2px rgba(99, 102, 241, 0.35); }
    }

    .feature-card .icon-badge,
    .step-card .step-num {
      animation: iconBadgeGlow 4s ease-in-out infinite;
    }

    .feature-card:nth-child(2) .icon-badge { animation-delay: 0.5s; }
    .feature-card:nth-child(3) .icon-badge { animation-delay: 1s; }
    .feature-card:nth-child(4) .icon-badge { animation-delay: 1.5s; }
    .feature-card:nth-child(5) .icon-badge { animation-delay: 2s; }
    .feature-card:nth-child(6) .icon-badge { animation-delay: 2.5s; }

    @media (prefers-reduced-motion: reduce) {
      .hero-glow,
      .product-shot--hero,
      .trust-pill i,
      .product-shot::after,
      .feature-card .icon-badge,
      .step-card .step-num,
      .autopilot-wave-text {
        animation: none !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }