/*
 * ROI Calculator V2 — bespoke component chrome + animation.
 *
 * Ported 1:1 from the approved mockup. Layout is applied as DS utility classes
 * in calculator_v2.html.twig; this file holds the component chrome (inputs,
 * chips, progress bar, tooltip), JS-toggled states and keyframes.
 *
 * COLOUR RULE: reference SEMANTIC tokens DIRECTLY (var(--color-…)); never
 * primitives, no intermediate aliases. Translucent box-shadows use raw rgba,
 * matching how the DS itself defines its shadow tokens. See COLORS.md.
 */

/* ---- Step visibility: input stage (steps 1–3) vs results (step 4) -------- */
.roi2-results {
    display: none;
}
.roi2[data-step='4'] .roi2-stage {
    display: none;
}
.roi2[data-step='4'] .roi2-results {
    display: flex;
}

/* All step panels are stacked into a single CSS-grid cell, so the left card's
   height is fixed to the TALLEST panel (steps 1–3 don't shift height) — with no
   JS measuring, so there's no load-time resize jump. Only the results screen
   (a separate container) is free to size differently. */
.roi2-left {
    display: grid;
}
.roi2-panel {
    grid-area: 1 / 1;
}

/* ---- Shell: tinted panel — constant width across all steps AND the results,
   so the container never resizes during the final transition ---------------- */
/* tint follows the active step: purple for the input steps, blue on results */
.roi2-tint {
    background-color: var(--color-surface-accent-purple-lightest);
    transition: background-color 0.6s ease;
}
.roi2[data-step='4'] .roi2-tint {
    background-color: var(--color-surface-accent-blue-lightest);
}

/* ---- Input controls (shared by the step inputs and the HubSpot form) ------ */
.roi2-control,
.roi2 #roi2-lead-form .hs-input:not([type='checkbox']):not([type='radio']) {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-gray-strong);
    border-radius: 8px;
    /* background-color (not the `background` shorthand) so it doesn't wipe the
       select chevron's background-image set below */
    background-color: var(--color-background-light);
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
/* HubSpot inputs can't take the .text-label utility, so set the type here */
.roi2 #roi2-lead-form .hs-input:not([type='checkbox']):not([type='radio']) {
    font-size: 16px;
    line-height: 1.5;
}
.roi2-control::placeholder,
.roi2 #roi2-lead-form .hs-input::placeholder {
    color: var(--color-text-tertiary);
}
.roi2-control:focus,
.roi2-control:focus-within,
.roi2 #roi2-lead-form .hs-input:focus {
    outline: none;
    border-color: var(--color-text-accent-purple);
    box-shadow: none;
}

/* select: hide native chevron, draw our own (stroke = text-tertiary #737373) */
select.roi2-control,
.roi2 #roi2-lead-form select.hs-input {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5 6 8l3.5-3.5' stroke='%23737373' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    /* pin the size: @tailwindcss/forms sets `background-size: 1.5em` on <select>,
       which otherwise scales this chevron up ~2× and makes it look thick */
    background-size: 14px 14px;
}
select.roi2-control {
    color: var(--color-text-tertiary);
}
select.roi2-control.is-filled {
    color: var(--color-text-primary);
}
/* HubSpot selects (e.g. employee count): grey placeholder like the industry
   select. HubSpot adds `.is-placeholder` to the <select> while the empty option is
   shown; the `.hs-form` ancestor lifts specificity above the shared input rule so
   this wins. Once a real value is picked the class drops → text-primary. */
.roi2 #roi2-lead-form .hs-form select.hs-input.is-placeholder {
    color: var(--color-text-tertiary);
}

/* affix control (leading "%") — border lives on the wrapper, input is bare */
.roi2-affix {
    display: flex;
    align-items: center;
    gap: 8px;
}
.roi2-affix-prefix {
    color: var(--color-text-tertiary);
}

/* copy-prompt banner — soft neutral shadow (Figma 4127:1495) */
.roi2-banner {
    box-shadow: 0 2px 2px 0 var(--color-shadow-neutral);
}

.roi2-affix input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-primary);
}

/* ---- Chips (tools, step 2) / rows (use cases, step 3) -------------------- */
.roi2-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--color-border-gray-strong);
    background: var(--color-surface-default);
    font-size: 14px;
    color: var(--color-text-secondary);
    user-select: none;
    transition:
        transform 0.12s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.roi2-opt i {
    font-size: 14px;
    flex: 0 0 auto;
}
.roi2-opt:hover {
    border-color: var(--color-border-accent-purple-strong);
}
.roi2-opt:active {
    transform: scale(0.96);
}
.roi2-opt.is-on {
    background-color: var(--color-surface-accent-purple-light);
    border-color: var(--color-text-accent-purple);
    color: var(--color-text-accent-purple);
    font-weight: 600;
}

/* ---- Step number pill ---------------------------------------------------- */
.roi2-step-num {
    background-color: var(--color-surface-accent-purple-light);
    color: var(--color-text-accent-purple);
}
.roi2-step-num.is-pop {
    animation: roi2-num-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes roi2-num-pop {
    0% {
        transform: scale(0.5);
    }
    60% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* ---- Segmented controls (ambition / mode / currency) --------------------- */
.roi2-seg-btn {
    cursor: pointer;
    transition:
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* selected pill — white, hairline border + soft drop shadow (Figma 4127:1468) */
.roi2-seg-btn.is-on {
    background-color: var(--color-background-light);
    color: var(--color-text-primary);
    border-color: var(--color-border-gray);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ---- Left column slide between steps (JS drives the transform) ----------- */
.roi2-left {
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s ease;
}

/* ---- Progress bar (ported 1:1) ------------------------------------------- */
.roi2-progress {
    position: relative;
    width: 100%;
    height: 23px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-surface-accent-status-green-lightest);
    border: 1px solid var(--color-border-accent-status-green);
    box-shadow:
        inset 0 -2px 4px rgba(0, 201, 80, 0.06),
        inset 0 4px 4px rgba(0, 201, 80, 0.06);
}
.roi2-progress-fill {
    position: relative;
    height: 100%;
    /* Seed the initial fill so the bar is visible on first paint, before the
       controller connects (JS module load can lag a beat). Matches START_FILL
       (0.06) in roi-calculator-v2-controller.js; connect() then sets the exact
       width with transitions off, so there's no jump. */
    width: 6%;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-surface-accent-status-green);
    box-shadow:
        0 4px 5px 0 var(--color-shadow-accent-status-green) inset,
        0 -4px 4px 0 var(--color-shadow-accent-status-green-strong) inset;
    transition: width 0.9s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* moving shine sprite — travels a FIXED pixel distance (via transform) so its
   speed is constant regardless of how full the bar is; the fill's
   overflow:hidden clips it to the current fill width. Skewed into a diagonal. */
.roi2-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 -4px 4px rgba(0, 0, 0, 0.1),
        inset 0 4px 5px rgba(255, 255, 255, 0.4);
    filter: blur(6px);
    /* animate transform (not `left`) so the blur stays smooth. No will-change:
       promoting this to its own layer made the parent fill re-clip it every
       frame during the width animation, which is what janked the bar. */
    animation: roi2-shine 6s linear infinite;
}
@keyframes roi2-shine {
    0% {
        transform: translateX(-40px) skewX(-10deg);
    }
    100% {
        transform: translateX(440px) skewX(-10deg);
    }
}
/* Flash on advance. Done as an opacity pulse on a separate white overlay
   (::before) rather than `filter: brightness` on the fill itself — the fill
   contains the blurred sprite (::after), and animating a filter over a blurred
   subtree forces the browser to re-render the blur every frame, which stuttered
   the bar on "Next". Opacity on an overlay is GPU-composited and cheap. */
.roi2-progress-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-background-light);
    opacity: 0;
    pointer-events: none;
}
.roi2-progress.is-boost .roi2-progress-fill::before {
    animation: roi2-fill-pulse 0.6s ease;
}
@keyframes roi2-fill-pulse {
    0%,
    100% {
        opacity: 0;
    }
    45% {
        opacity: 0.22;
    }
}

/* ---- Completion checkmark ------------------------------------------------ */
.roi2-check {
    display: none;
}
/* tighten the gap between the checkmark and the copy once complete */
.roi2-right.is-done {
    gap: 1rem;
}
.roi2-right.is-done .roi2-check {
    display: flex;
    animation: roi2-check-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.roi2-right.is-done .roi2-progress-wrap {
    display: none;
}
@keyframes roi2-check-pop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Results: savings number + masked driver amounts -------------------- */
.roi2-savings {
    color: var(--color-text-accent-blue);
    font-weight: 700;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
/* real values stay blurred; re-blur/settle on every recalc */
.roi2-amt {
    filter: blur(5px);
    user-select: none;
}
.roi2-amt.is-recalc {
    animation: roi2-amt-recalc 0.5s ease;
}
@keyframes roi2-amt-recalc {
    0% {
        opacity: 0.2;
        filter: blur(9px);
    }
    100% {
        opacity: 1;
        filter: blur(5px);
    }
}

/* ---- Results reveal ------------------------------------------------------ */
.roi2-results {
    animation: roi2-results-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes roi2-results-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- Form submitted: success state + slide-out/shrink choreography -------- */
/* centre the success content in the form card before it slides out to the right
   and the results box shrinks to fit the content column (JS drives the width /
   transform transitions). */
.roi2-lead.is-submitted {
    justify-content: center;
}
.roi2-done-check {
    display: inline-flex;
    animation: roi2-check-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ---- "?" help badge on the step-1 field labels (ported from the prototype) --
   reuses the floating tooltip via its data-tip-title / data-tip-body attrs. */
.roi2-help {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-border-gray-strong);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-tertiary);
    cursor: help;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}
.roi2-help:hover {
    border-color: var(--color-text-accent-purple);
    color: var(--color-text-accent-purple);
}

/* ---- Results: cap the left column content width ------------------------- */
.roi2-results-content {
    max-width: 580px;
}

/* Desktop results: the box AND the shell hug the content+form instead of
   filling the full shell width (the cap above sizes the content; these wrap it
   and stay centred). Scoped to the results step only — the wizard steps keep
   their full width. */
@media (min-width: 1024px) {
    .roi2[data-step='4'] .roi2-results {
        width: fit-content;
        margin-inline: auto;
    }
    .roi2[data-step='4'] .roi2-shell {
        width: fit-content;
    }
}

/* ---- Mobile (single column): flatten the two columns into one and set the
   reading order — number, table, form, banner, restart. --------------------- */
@media (max-width: 1023px) {
    .roi2-results-content {
        display: contents; /* promote its children so the form can slot between them */
    }
    .roi2-results {
        align-items: center;
        gap: 2rem;
    }
    .roi2-results .roi2-r-number {
        order: 1;
    }
    .roi2-results [data-roi-calculator-v2-target='drivers'] {
        order: 2;
    }
    .roi2-results .roi2-lead {
        order: 3;
    }
    .roi2-results .roi2-banner {
        order: 4;
    }
    .roi2-results .roi2-r-restart {
        order: 5;
    }
}

/* ---- Hover tooltip (step 3 use cases, ported 1:1) ----------------------- */
.roi2-tip {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(4px);
    box-shadow:
        0 -6px 16px -6px rgba(10, 13, 18, 0.1),
        0 10px 24px -6px rgba(10, 13, 18, 0.14);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}
.roi2-tip.is-shown {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.roi2-tip::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--color-background-light);
    transform: translateY(-50%) rotate(45deg);
}
/* type applied via text-body-sm utilities in the template; only chrome here */
.roi2-tip-title {
    position: relative;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.roi2-tip-body {
    position: relative;
    color: var(--color-text-secondary);
}

/* ---- HubSpot lead form (styling hijacked to match Figma 4131:1889) --------
   HubSpot injects its own markup; we restyle its classes. Font sizes are set in
   px here because we can't attach DS utility classes to HubSpot-generated
   elements; colours stay on semantic tokens.

   SPECIFICITY: every rule below is scoped through #roi2-lead-form (the stable id
   on the lead-form wrapper). HubSpot injects a default stylesheet scoped to the
   form's dynamic `#hsForm_<guid>` id (specificity 1,1,0) — a plain `.roi2 .hs-*`
   class rule (0,x,0) loses to it even with !important. Routing through our own id
   gives `.roi2 #roi2-lead-form .hs-*` (1,2,0), which beats HubSpot's id rule
   outright. `css:'' via suppressStyles` is still requested (belt-and-suspenders),
   but must not be relied on — some HubSpot form types ignore it. Because that
   reset may or may not be present, we also neutralise the browser defaults it
   would otherwise cover.

   CASCADE LAYER: app.css's global `.hubspot-form` rules live in @layer components
   and use Tailwind's trailing-`!` (→ !important). For !important declarations a
   LAYERED rule beats an UNLAYERED one regardless of specificity — so an unlayered
   `.roi2 #roi2-lead-form .hs-button { … !important }` still loses to app's
   `.hubspot-form .hs-button { …! }`. The whole block below is therefore wrapped in
   @layer components too; inside the same layer specificity decides again, and our
   #roi2-lead-form scope (1,2,0) beats app's (0,2,0). */
@layer components {
    .roi2 #roi2-lead-form .hs-form fieldset {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .roi2 #roi2-lead-form .hs-form ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .roi2 #roi2-lead-form .hs-form input,
    .roi2 #roi2-lead-form .hs-form select,
    .roi2 #roi2-lead-form .hs-form textarea,
    .roi2 #roi2-lead-form .hs-form button {
        font-family: inherit;
    }

    /* inputs share .roi2-control styling (see "Input controls" above). Each field
   reserves space for its error below the input (absolute) so the layout never
   shifts when a message appears — mirrors the step-1 fields' reserved row. */
    .roi2 #roi2-lead-form .hs-form-field {
        position: relative;
        padding: 0; /* strip HubSpot's default field padding */
        margin-bottom: 32px;
    }
    .roi2 #roi2-lead-form .hs-form-field .input {
        margin: 0; /* strip HubSpot's default input-wrapper margin */
    }
    .roi2 #roi2-lead-form .hs-form-field > label {
        display: block;
        padding: 0; /* remove HubSpot's default label padding; keep the 6px margin */
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--color-text-primary);
    }
    /* required asterisk → small red-light badge (Figma). HubSpot's literal "*" is
       hidden (font-size:0) and redrawn via ::before so we can optically centre it —
       the asterisk glyph sits high in its line box, so flex-centring alone leaves it
       too high. */
    .roi2 #roi2-lead-form .hs-form-required {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        border-radius: 4px;
        background: var(--color-surface-accent-status-red-light);
        font-size: 0;
        vertical-align: middle;
    }
    .roi2 #roi2-lead-form .hs-form-required::before {
        content: '*';
        position: absolute;
        top: 50%;
        left: 50%;
        /* centre the box, then nudge down ~2.5px so the high-sitting glyph reads
           optically centred in the 12px badge */
        transform: translate(-50%, calc(-50% + 2.5px));
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        color: var(--color-surface-accent-status-red);
    }

    /* pull the consent row in from HubSpot's default ~36px list indent to 8px */
    .roi2 #roi2-lead-form .legal-consent-container ul.inputs-list {
        margin: 0;
        padding: 0;
    }
    .roi2 #roi2-lead-form .hs-form-booleancheckbox {
        margin-left: 8px;
        padding-left: 0;
    }

    /* consent checkbox — replicates the DS Checkbox component's `.checkbox` */
    .roi2 #roi2-lead-form .hs-form-booleancheckbox-display {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        /* drop app.css's global `.hubspot-form label { pb-1 }` (4px bottom padding) */
        padding-bottom: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--color-text-tertiary);
    }
    .roi2 #roi2-lead-form .hs-form-booleancheckbox-display > span {
        /* !important beats app.css's global `.hubspot-form … > span { ml-9! }`
       (margin-left: 36px !important) — the flex `gap` handles the 8px spacing. */
        margin: 0 !important;
    }
    .roi2 #roi2-lead-form .hs-form-booleancheckbox input[type='checkbox'] {
        appearance: none;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-top: 3px;
        border-radius: 4px;
        background: var(--color-surface-default);
        border: 1px solid var(--color-border-gray-strong);
        cursor: pointer;
    }
    .roi2
        #roi2-lead-form
        .hs-form-booleancheckbox
        input[type='checkbox']:checked {
        background-color: var(--color-surface-accent-blue);
        border-color: var(--color-surface-accent-blue);
        outline: 2px solid var(--color-border-accent-blue-strong);
        outline-offset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 4l2 2 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 8px 8px;
    }
    .roi2
        #roi2-lead-form
        .hs-form-booleancheckbox
        input[type='checkbox']:focus {
        box-shadow: none;
    }
    .roi2
        #roi2-lead-form
        .hs-form-booleancheckbox
        input[type='checkbox']:focus-visible {
        border-color: var(--color-surface-accent-blue);
        outline: 4px solid var(--color-border-accent-blue-strong);
        outline-offset: 0;
    }

    /* legal / rich text */
    .roi2 #roi2-lead-form .legal-consent-container,
    .roi2 #roi2-lead-form .hs-richtext {
        font-size: 14px;
        line-height: 1.5;
        color: var(--color-text-tertiary);
    }
    /* privacy-policy notice — breathing room around the text */
    .roi2 #roi2-lead-form .hs-richtext {
        padding: 12px;
    }
    .roi2 #roi2-lead-form .hs-richtext a,
    .roi2 #roi2-lead-form .legal-consent-container a {
        color: var(--color-text-accent-blue);
        text-decoration: none;
    }

    /* hide HubSpot's error summary block (the per-field messages are enough) */
    .roi2 #roi2-lead-form .hs_error_rollup {
        display: none;
    }

    /* validation messages — sit in the reserved space, so they don't shift layout */
    .roi2 #roi2-lead-form .hs-error-msgs {
        position: absolute;
        top: 100%;
        left: 0;
        margin: 4px 0 0;
        padding: 0;
        list-style: none;
    }
    .roi2 #roi2-lead-form .hs-error-msg,
    .roi2 #roi2-lead-form .hs-error-msgs label {
        font-size: 12px;
        line-height: 18px;
        /* !important: beats app.css's layered `.hs-error-msg { text-red-500! }` */
        color: var(--color-text-accent-status-red) !important;
    }

    /* submit — Fancy primary (blue): copies .button--fancy.button--blue */
    .roi2 #roi2-lead-form .hs-submit .actions {
        margin-top: 0;
    }
    .roi2 #roi2-lead-form .hs-button {
        box-sizing: border-box;
        width: 100%;
        /* 16px gap above the button (overrides app.css's `.hs-button { mt-8 }` = 32px) */
        margin-top: 16px;
        /* !important on colour/bg/border/radius/padding: app.css's global
       `.hubspot-form .hs-button` sets `text-primary-dark-blue! rounded-full!
       px-6 py-3!` (all !important). We match with !important + the higher
       (#roi2-lead-form id) specificity so the Figma fancy-blue button wins. */
        padding: 12px 20px !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        cursor: pointer;
        color: var(--color-text-inverse-primary) !important;
        background: var(--color-surface-accent-blue) !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow:
            0 2px 1px var(--color-shadow-neutral-dark),
            inset 0 2px 6px var(--color-shadow-accent-blue),
            inset 0 -3px 14px var(--color-shadow-accent-blue-strong);
        transition: background-color 0.3s ease;
    }
    .roi2 #roi2-lead-form .hs-button:hover {
        background: var(--color-surface-accent-blue-dark) !important;
    }
    /* force white label over HubSpot's own button colour (incl. any inner span) */
    .roi2 #roi2-lead-form input.hs-button,
    .roi2 #roi2-lead-form .hs-button,
    .roi2 #roi2-lead-form .hs-button * {
        color: var(--color-text-inverse-primary) !important;
    }
} /* @layer components */

@media (prefers-reduced-motion: reduce) {
    .roi2-progress-fill::after {
        animation: none;
    }
}