/* =========================================================================
   custom.css — HUSKY / products-filter.com visual refresh overlay
   -------------------------------------------------------------------------
   Loads AFTER the inlined critical CSS, so every rule here overrides the
   base site by source order (same specificity) or by a slightly higher
   specificity where the base uses compound selectors.
   Nothing in the original style.min.css is edited.

   Direction: keep the brand blue, but borrow the "modern gradient" energy
   of the reference design by shifting the accent toward a blue -> indigo ->
   soft-violet gradient. Blue stays dominant; the violet only appears at the
   far end of gradients and on decorative accents.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens — redefined / added. Because this :root block is parsed after
   the base one, these values win wherever the site already uses the vars.
   ------------------------------------------------------------------------- */
:root {
    /* Primary blue is kept exactly as before */
    --blue: #2f55d4;
    --blue-2: #4f6be6;
    --blue-3: #7b74f0;          /* soft indigo-violet — the "modern" pop, still blue family */

    /* Signature gradients (reused everywhere so the site feels cohesive) */
    --grad-brand: linear-gradient(118deg, #2f55d4 0%, #4f6be6 48%, #7b74f0 100%);
    --grad-text: linear-gradient(96deg, #2f55d4 0%, #6d6ef2 100%);
    --grad-deep: linear-gradient(125deg, #223da0 0%, #2f55d4 42%, #5b6ef0 100%);
    --grad-wash: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);

    /* Softer, deeper shadows for the "lifted card" look */
    --shadow-card: 0 12px 34px -14px rgba(47, 85, 212, .20);
    --shadow-card-hover: 0 22px 50px -18px rgba(47, 85, 212, .34);
    --ring: rgba(47, 85, 212, .14);
}

/* Faint page-wide vertical wash so white cards read as "lifted" */
body {
    background: var(--grad-wash);
    background-attachment: fixed;
}

/* -------------------------------------------------------------------------
   2. Gradient headings — applied ONLY to the accent <em> words the site
   already highlights, plus the big stat numbers. Body text stays solid for
   readability.
   ------------------------------------------------------------------------- */
.hero h1 em,
.page-hero h1 em,
.shop-hero-text h1 em,
.section-head h2 em,
.featured-article h2 em,
.benefits-head h2 em,
.reviews-head h2 em,
.achievements-head h2 em,
.getstarted-head h2 em,
.faq-head h2 em,
.newsletter h2 em,
.stat-num,
.achievement-num,
.error-num {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Keep the italic look the site gives some accents */
.hero h1 em,
.section-head h2 em {
    font-style: italic;
}

/* -------------------------------------------------------------------------
   3. Hero — flat white becomes a soft two-point gradient mesh.
   ------------------------------------------------------------------------- */
.hero {
    background:
        radial-gradient(1200px 520px at 88% -12%, rgba(123, 116, 240, .16), transparent 60%),
        radial-gradient(900px 520px at -5% 115%, rgba(47, 85, 212, .10), transparent 55%),
        #fff;
}

/* -------------------------------------------------------------------------
   4. Cards — one consistent "lifted" treatment across every card type.
   ------------------------------------------------------------------------- */
.feature-card,
.benefit-card,
.getstarted-item,
.topic-card,
.achievement-item,
.article-card,
.article-card-v2,
.sidebar-card {
    border-radius: 18px;
    border-color: var(--ring);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-card:hover,
.benefit-card:hover,
.getstarted-item:hover,
.topic-card:hover,
.achievement-item:hover,
.article-card:hover,
.article-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(47, 85, 212, .28);
}

/* Gradient top-accent that wipes in on hover (feature + benefit cards) */
.feature-card,
.benefit-card {
    position: relative;
    overflow: hidden;
}

.feature-card::after,
.benefit-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.feature-card:hover::after,
.benefit-card:hover::after {
    transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   5. Icon chips — from pale-blue squares to gradient badges with white glyphs.
   !important is used only where the base has hover-compound rules that would
   otherwise reset the background.
   ------------------------------------------------------------------------- */
.feature-icon,
.benefit-icon,
.getstarted-icon,
.achievement-icon,
.extensions-info-icon,
.step-icon {
    background: var(--grad-brand) !important;
    box-shadow: 0 8px 20px -8px rgba(47, 85, 212, .55);
}

.feature-icon svg,
.benefit-icon svg,
.getstarted-icon svg,
.achievement-icon svg,
.extensions-info-icon svg,
.step-icon svg {
    fill: #fff !important;
    color: #fff;
}

/* -------------------------------------------------------------------------
   6. Reviews — the block that looked weakest. Green cards become clean white
   cards with a gradient hairline, a large ghost quote glyph and a lift.
   ------------------------------------------------------------------------- */
.review-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    transition: transform .22s ease, box-shadow .22s ease;
}

/* Top gradient hairline */
.review-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
}

/* Big decorative gradient quote mark */
.review-item::before {
    content: "\201C";
    position: absolute;
    top: -22px;
    right: 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 120px;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .13;
    pointer-events: none;
}

.review-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

/* Recolor the text that was tuned for the old green card */
.review-item p {
    color: var(--text);
    position: relative;
    z-index: 1;
}

.review-author {
    border-top-color: var(--ring);
}

.review-author a {
    color: var(--blue);
}

.review-author span {
    color: var(--text-muted);
}

.review-author::before {
    color: var(--blue);
}

.review-stars svg {
    fill: #f5a623;
}

/* Downloads-page review widget (.hlxr-card) has its own in-body <style>,
   so these overrides use a `body` prefix to raise specificity above it. */
body .hlxr-card {
    border: 1px solid var(--ring);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    transition: transform .22s ease, box-shadow .22s ease;
}

body .hlxr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Gradient avatar/initial if the widget renders one */
body .hlxr-card .hlxr-avatar,
body .hlxr-card .hlxr-card-top img {
    background: var(--grad-brand);
}

/* -------------------------------------------------------------------------
   7. Buttons — the primary button gets the brand gradient; the 3D press
   shadow from the base file is preserved.
   ------------------------------------------------------------------------- */
.btn-blue,
.btn.btn-blue {
    background: var(--grad-brand);
}

/* -------------------------------------------------------------------------
   8. CTA + newsletter — deeper, richer gradients for section rhythm.
   ------------------------------------------------------------------------- */
.cta-free-inner {
    background: var(--grad-deep);
}

.newsletter {
    background: linear-gradient(135deg, #eef2fe 0%, #e3e8fc 100%);
}

/* Featured-article panel: soft blue tint instead of the pink wash */
.featured-article {
    background: linear-gradient(135deg, #f4f7ff, #e9eefc);
    border-color: var(--ring);
}

/* -------------------------------------------------------------------------
   9. Scroll reveal.
   The `.reveal` class is added by custom.js ONLY to blocks that start below
   the fold, so if JS is disabled or fails, nothing is ever hidden.
   ------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
        transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* -------------------------------------------------------------------------
   10. "What is the purpose" block — flat centered text becomes a lifted
   white panel on a soft gradient field, with a gradient heading and a
   decorative ghost quote. Composition (centered) is kept.
   ------------------------------------------------------------------------- */
.purpose-section {
    position: relative;
    overflow: hidden;
    padding-top: 72px;
    padding-bottom: 72px;
    background:
        radial-gradient(760px 420px at 10% -5%, rgba(47, 85, 212, .10), transparent 60%),
        radial-gradient(680px 440px at 94% 110%, rgba(123, 116, 240, .13), transparent 58%),
        linear-gradient(180deg, #f5f7ff 0%, #eef2fe 100%);
}

.purpose-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    padding: 54px 56px;
}

/* Large ghost quote glyph in the panel corner */
.purpose-inner::before {
    content: "\201C";
    position: absolute;
    top: -8px;
    left: 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 140px;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .10;
    pointer-events: none;
}

/* Gradient heading + short gradient rule under it */
.purpose-inner h2 {
    position: relative;
    margin-bottom: 8px;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.purpose-inner h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    margin: 18px auto 0;
    background: var(--grad-brand);
}

/* Body paragraphs: a touch darker than the washed-out grey */
.purpose-inner p {
    color: #4a4f5c;
    line-height: 1.8;
}

/* Lead paragraph becomes a real intro: bigger, solid (not italic), darker */
.purpose-inner .purpose-lead {
    font-size: 18px;
    font-style: normal;
    color: var(--text);
    line-height: 1.75;
    margin-bottom: 22px;
}

/* The plugin name inside the lead picks up the brand gradient */
.purpose-inner .purpose-lead strong {
    font-weight: 700;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
    .purpose-inner {
        padding: 34px 22px;
        border-radius: 18px;
    }
}

/* -------------------------------------------------------------------------
   11. Tools list ("filter tools you get with HUSKY") — static blue bullets
   become gradient check badges; the screenshot image gets a lifted frame;
   a short gradient rule under the heading ties it to the purpose block.
   ------------------------------------------------------------------------- */
.tools-visual img {
    box-shadow: var(--shadow-card);
    border: 1px solid var(--ring);
}

.tools-content h2 {
    position: relative;
}

.tools-content h2::after {
    content: "";
    display: block;
    width: 230px;
    height: 4px;
    border-radius: 4px;
    margin: 16px 0 0;
    background: var(--grad-brand);
    margin: 0 auto;
}

/* Custom gradient check badge, overriding the static circle-2.svg bullet */
.tools-list li {
    padding-left: 44px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.tools-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 26px;
    height: 26px;
    border-radius: 20px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
        var(--grad-brand);
    box-shadow: 0 6px 14px -7px rgba(47, 85, 212, .55);
}

/* Titles stay bold and dark; linked titles keep the brand blue */
.tools-list li strong {
    color: var(--text);
    font-weight: 700;
}

.tools-list li strong a {
    color: var(--blue);
}

.tools-list li strong a:hover {
    color: var(--blue-3);
}

/* -------------------------------------------------------------------------
   12. Newsletter block — soft panel gains depth (frame, shadow, decorative
   blob), gradient eyebrow pill, gradient Subscribe button, branded focus.
   ------------------------------------------------------------------------- */
.newsletter {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ring);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    background: linear-gradient(135deg, #eef2fe 0%, #e6ebfd 55%, #eae7fe 100%);
}

/* Soft decorative glow in the top-right corner */
.newsletter::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(123, 116, 240, .30), transparent 70%);
    pointer-events: none;
}

/* Keep the real content above the glow */
.newsletter > * {
    position: relative;
    z-index: 1;
}

/* Eyebrow becomes a gradient pill */
.newsletter .tag {
    background: var(--grad-brand);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px -8px rgba(47, 85, 212, .60);
}

/* Subscribe button picks up the brand gradient (markup uses .btn, not .btn-blue) */
.newsletter-form .btn {
    background: var(--grad-brand);
}

/* Branded focus ring on the email field */
.newsletter-form input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(47, 85, 212, .14);
    outline: none;
}

/* -------------------------------------------------------------------------
   13. Hero tags — "plump" pills with a 2px iridescent (gradient) border and
   a light fill, so they read as tags, not like the filled buttons below.
   Technique: white padding-box + gradient border-box on a transparent border.
   ------------------------------------------------------------------------- */
.hero-tag,
.hlxc-head .tag{
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        var(--grad-brand) border-box;
    border: 2px solid transparent;
    border-radius: 22px;
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--blue);
    box-shadow: 0 6px 16px -10px rgba(47, 85, 212, .40);
}

.hlxc-head .tag{
    margin-bottom: 15px;
}

.hlxc-head p{
    width: fit-content;
}

/* Newsletter eyebrow keeps the filled-gradient look; match the pill size */
.newsletter .tag {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
}

/* -------------------------------------------------------------------------
   14. Hero subtitle — gradient text on the intro paragraph (wrapped in <em>).
   Same blue -> indigo -> violet family as the tags/buttons, but in DARKER
   tones: stays on-brand, reads clearly on every line, and sits distinctly
   below the brighter H1 instead of merging with it.
   ------------------------------------------------------------------------- */
.hero p em {
    background: linear-gradient(170deg, rgb(42, 73, 290) 0%, rgb(222, 156, 247) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* -------------------------------------------------------------------------
   15. "Live" green accent — a fresh colour the blue theme doesn't have,
   used as a small pulsing status dot in the hero tags and next to the first
   statistic ("active installs"). Signals that the plugin is alive/active.
   ------------------------------------------------------------------------- */
:root {
    --live: #22c55e;
}

/* Pulsing dot inside each hero tag */
.hero-tag::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--live);
    animation: huskyPing 1.8s ease-out infinite;
}

/* Slower "thinking" dot next to the first statistic (active installs) */
.stats-strip .stat-item:first-child .stat-label::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--live);
    animation: huskyPing 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hero-tag::before,
    .stats-strip .stat-item:first-child .stat-label::before {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   16. Stats strip — filled with a light linear gradient in the brand palette
   (blue -> violet) so it reads as a distinct band that fits the blue style,
   while the gradient numerals, labels and green dot stay fully readable.
   ------------------------------------------------------------------------- */
.stats-strip {
    background: linear-gradient(170deg, #e9edfd 0%, #fff 55%, #f0eafc 100%);
    border-top-color: rgba(47, 85, 212, .12);
    border-bottom-color: rgba(47, 85, 212, .12);
}

.stats-strip .stat-item {
    border-right-color: rgba(47, 85, 212, .10);
}

a, strong{
    background: var(--grad-text) text;
}


.btn-free{
    background: linear-gradient(20deg, rgb(42, 73, 190) 0%, rgb(22, 256, 247) 100%);
}

.btn-free:hover{
     background: linear-gradient(120deg, rgb(42, 73, 190) 0%, rgb(22, 256, 247) 100%);
}


/* -------------------------------------------------------------------------
   17. Downloads-page reviews (.hlxr-card) — match the homepage .review-item:
   gradient top hairline + ghost quote glyph + lift. Border/radius/shadow and
   hover are already applied in section 6 (body .hlxr-card). The `body` prefix
   raises specificity above the widget's in-body inline <style>.
   ------------------------------------------------------------------------- */
body .hlxr-card {
    position: relative;
    overflow: hidden;
}

/* Keep the card content above the decorative quote */
body .hlxr-card > * {
    position: relative;
    z-index: 1;
}

/* Top gradient hairline (clipped to the rounded corners by overflow:hidden) */
body .hlxr-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
    z-index: 2;
}

/* Large ghost quote glyph */
body .hlxr-card::before {
    content: "\201C";
    position: absolute;
    top: -22px;
    right: 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 120px;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .12;
    z-index: 0;
    pointer-events: none;
}


/* -------------------------------------------------------------------------
   18. Downloads page intro — the m213 paragraph becomes the same lifted white
   panel as .purpose-inner on the homepage, with the ghost quote glyph.
   Scoped with :has(+ .downloads-page) so the other .page-hero pages
   (codex, video, articles, changelog, sitemap, translations) stay untouched.
   ------------------------------------------------------------------------- */
.page-hero:has(+ .downloads-page) p {
    position: relative;
    z-index: 1;
    max-width: 860px;          /* base rule caps it at 520px */
    margin: 28px auto 10px;
    padding: 46px 52px;
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    font-size: 16px;
    line-height: 1.85;
    color: #4a4f5c;
}

/* Large decorative gradient quote in the panel corner */
.page-hero:has(+ .downloads-page) p::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    left: 26px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 140px;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .10;
    pointer-events: none;
}

/* Short gradient rule under the H1, same accent as the purpose block */
.page-hero:has(+ .downloads-page) h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    margin: 18px auto 0;
    background: var(--grad-brand);
}

@media (max-width: 640px) {
    .page-hero:has(+ .downloads-page) p {
        padding: 32px 22px;
        border-radius: 18px;
    }
}

/* -------------------------------------------------------------------------
   19. Downloads landing — every follow-up paragraph inside a copy block
   becomes a cream "note plate" in monospace with a check marker, like the
   reference design. The `body` prefix outranks the page's in-document
   <style> rule (.hlx-copy p), which loads after custom.css.
   ------------------------------------------------------------------------- */
body.page-downloads .hlx-copy p:not(:first-of-type),
body.page-downloads .hlx-head p,
body.page-downloads .hlxc-head p{
    position: relative;
    margin: 16px 0 0;
    padding: 15px 20px 15px 46px;
    background: #f5f1e8;
    border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    line-height: 1.75;
    color: #4d5260;
    margin: 0 auto;
}

/* Check marker */
body .hlx-copy p:not(:first-of-type)::before {
    content: "\2713";
    position: absolute;
    left: 19px;
    top: 15px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--live, #22c55e);
}

/* Keep inline links and emphasis readable on the cream plate */
body .hlx-copy p:not(:first-of-type) a {
    color: var(--blue);
}

body .hlx-copy p:not(:first-of-type) strong {
    color: #2b2f3a;
}

@media (max-width: 640px) {
    body .hlx-copy p:not(:first-of-type) {
        padding: 13px 15px 13px 40px;
        font-size: 13px;
    }
}


/* -------------------------------------------------------------------------
   20. Downloads final CTA (.hlx-cta) — same treatment as the homepage
   newsletter panel: soft brand gradient, corner glow, gradient eyebrow pill,
   gradient primary button. The `body` prefix outranks the page's own
   in-document <style>. The old pink top line (::before) is repurposed
   as the glow blob.
   ------------------------------------------------------------------------- */
body .hlx-cta {
    background: linear-gradient(135deg, #eef2fe 0%, #e6ebfd 55%, #eae7fe 100%);
    border: 1px solid var(--ring);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}

/* Corner glow (replaces the old 3px pink line) */
body .hlx-cta::before {
    top: -120px;
    left: auto;
    right: -90px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(123, 116, 240, .30), transparent 70%);
    pointer-events: none;
}

/* Keep the content above the glow */
body .hlx-cta > * {
    position: relative;
    z-index: 1;
}

/* Eyebrow becomes a gradient pill */
body .hlx-cta .tag {
    background: var(--grad-brand);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    box-shadow: 0 6px 16px -9px rgba(47, 85, 212, .60);
}


/* -------------------------------------------------------------------------
   21. Page header bar — same gradient and hairlines as the newsletter panel.
   Only rendered on non-home pages by the template, so no page scoping needed.
   ------------------------------------------------------------------------- */
.page-header-bar,
.page-hero,
.page-hero::after{
    /* background: linear-gradient(135deg, #eef2fe 0%, #e6ebfd 55%, #eae7fe 100%);*/
    border-top: 1px solid var(--ring);
    border-bottom: 1px solid var(--ring);
}


@keyframes huskyPing {
    0%   {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
    }
    70%  {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}