/*
 * AF After Content
 * Responsive sharing and call-to-action cards.
 * Lightweight transform/opacity attention animations.
 */

.afac-wrap {
    --afac-panel: #111e30;
    --afac-line: rgba(103, 232, 249, 0.52);
    --afac-card-line: rgba(103, 232, 249, 0.24);
    --afac-text: #f4f7fb;
    --afac-muted: #a8b5c8;
    --afac-accent: #67e8f9;
    --afac-green: #6ee7b7;
    --afac-dark: #06111d;

    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0.75rem 0 0;
    padding: 0;
    border: 0;
    color: var(--afac-text);
    font: inherit;
}

.afac-wrap *,
.afac-wrap *::before,
.afac-wrap *::after {
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Content-before-sharing card grid
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
}

/*
|--------------------------------------------------------------------------
| Call-to-action card
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-card {
    --afac-cta-color: var(--afac-accent);
    --afac-cta-rgb: 103, 232, 249;

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 210px;
    overflow: hidden;
    margin: 0;
    padding: 1.15rem;
    border: 1px solid var(--afac-card-line);
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        rgba(25, 38, 55, 0.98),
        rgba(13, 26, 43, 0.98)
    );
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.16);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

/* Lightweight platform-colored card accent. */
.afac-wrap .afac-card::before {
    position: absolute;
    z-index: -1;
    top: -4rem;
    right: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--afac-cta-rgb), 0.16),
        transparent 70%
    );
    content: "";
    pointer-events: none;
}

.afac-wrap .afac-card:hover,
.afac-wrap .afac-card:focus-within {
    border-color: rgba(var(--afac-cta-rgb), 0.56);
    box-shadow:
        0 0 20px rgba(var(--afac-cta-rgb), 0.14),
        0 14px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.afac-wrap .afac-card h2 {
    margin: 0 0 0.55rem;
    padding: 0;
    color: var(--afac-text);
    font-family: inherit;
    font-size: 1.05rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.afac-wrap .afac-card p {
    margin: 0 0 1rem;
    padding: 0;
    color: var(--afac-muted);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/*
|--------------------------------------------------------------------------
| Automatically detected platform colors
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-platform-telegram {
    --afac-cta-color: #74dcff;
    --afac-cta-rgb: 116, 220, 255;
}

.afac-wrap .afac-platform-whatsapp {
    --afac-cta-color: #6ee7ae;
    --afac-cta-rgb: 110, 231, 174;
}

.afac-wrap .afac-platform-facebook {
    --afac-cta-color: #78b4ff;
    --afac-cta-rgb: 120, 180, 255;
}

.afac-wrap .afac-platform-instagram {
    --afac-cta-color: #ff8dcc;
    --afac-cta-rgb: 255, 141, 204;
}

.afac-wrap .afac-platform-linkedin {
    --afac-cta-color: #67c3ff;
    --afac-cta-rgb: 103, 195, 255;
}

.afac-wrap .afac-platform-youtube {
    --afac-cta-color: #ff777d;
    --afac-cta-rgb: 255, 119, 125;
}

.afac-wrap .afac-platform-tiktok {
    --afac-cta-color: #70eff1;
    --afac-cta-rgb: 112, 239, 241;
}

.afac-wrap .afac-platform-x {
    --afac-cta-color: #f4f7fb;
    --afac-cta-rgb: 244, 247, 251;
}

.afac-wrap .afac-platform-reddit {
    --afac-cta-color: #ff936f;
    --afac-cta-rgb: 255, 147, 111;
}

.afac-wrap .afac-platform-github {
    --afac-cta-color: #d8e0ec;
    --afac-cta-rgb: 216, 224, 236;
}

.afac-wrap .afac-platform-discord {
    --afac-cta-color: #a5b4fc;
    --afac-cta-rgb: 165, 180, 252;
}

.afac-wrap .afac-platform-email {
    --afac-cta-color: #ccb1ff;
    --afac-cta-rgb: 204, 177, 255;
}

.afac-wrap .afac-platform-rss {
    --afac-cta-color: #ffba67;
    --afac-cta-rgb: 255, 186, 103;
}

.afac-wrap .afac-platform-link {
    --afac-cta-color: #67e8f9;
    --afac-cta-rgb: 103, 232, 249;
}

/*
|--------------------------------------------------------------------------
| CTA button and detected icon
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-card .afac-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    min-height: 44px;
    gap: 0.52rem;
    overflow: hidden;
    margin: auto 0 0;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 999px;
    color: #04121d;
    background: linear-gradient(
        135deg,
        var(--afac-cta-color),
        var(--afac-green)
    );
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.14),
        0 0 0 rgba(var(--afac-cta-rgb), 0);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transform: translateZ(0);
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}

/* Keep visible button content above decorative effects. */
.afac-wrap .afac-button .afac-button-label {
    position: relative;
    z-index: 3;
    display: inline-block;
    min-width: 0;
    color: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
}

/* Inline SVG wrapper generated by PHP. */
.afac-wrap .afac-button .afac-button-icon {
    position: relative;
    z-index: 3;
    display: inline-grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    color: #04121d;
    line-height: 1;
    pointer-events: none;
    transform-origin: 52% 52%;
    animation:
        afac-cta-icon-flight
        5.6s
        cubic-bezier(0.22, 0.75, 0.24, 1)
        infinite;
    will-change: transform;
}

.afac-wrap .afac-button .afac-button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
    fill: currentColor;
    pointer-events: none;
}

/*
 * Short flight trail. It uses only transform and opacity while animated.
 */
.afac-wrap .afac-button::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(50% - 54px);
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(4, 18, 29, 0.18),
        rgba(4, 18, 29, 0.72)
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transform:
        translate3d(-20px, 7px, 0)
        rotate(-12deg)
        scaleX(0);
    transform-origin: right center;
    animation: afac-cta-icon-trail 5.6s ease-out infinite;
    will-change: transform, opacity;
}

/* Expanding attention ring behind the icon. */
.afac-wrap .afac-button::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(50% - 46px);
    width: 31px;
    height: 31px;
    border: 1px solid rgba(4, 18, 29, 0.34);
    border-radius: 50%;
    content: "";
    opacity: 0;
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        scale(0.55);
    animation: afac-cta-icon-ring 5.6s ease-out infinite;
    will-change: transform, opacity;
}

/*
 * Brief icon movement followed by a long idle period.
 */
@keyframes afac-cta-icon-flight {
    0%,
    5%,
    24%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    7% {
        transform:
            translate3d(-2px, 2px, 0)
            rotate(-8deg)
            scale(0.94);
    }

    12% {
        transform:
            translate3d(5px, -4px, 0)
            rotate(9deg)
            scale(1.16);
    }

    15% {
        transform:
            translate3d(8px, -7px, 0)
            rotate(13deg)
            scale(1.08);
    }

    19% {
        transform:
            translate3d(-1px, 1px, 0)
            rotate(-4deg)
            scale(0.98);
    }

    22% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1.02);
    }
}

@keyframes afac-cta-icon-trail {
    0%,
    6%,
    21%,
    100% {
        opacity: 0;
        transform:
            translate3d(-20px, 7px, 0)
            rotate(-12deg)
            scaleX(0);
    }

    11% {
        opacity: 0.62;
        transform:
            translate3d(-7px, 2px, 0)
            rotate(-12deg)
            scaleX(0.72);
    }

    15% {
        opacity: 0.84;
        transform:
            translate3d(1px, -2px, 0)
            rotate(-12deg)
            scaleX(1);
    }

    20% {
        opacity: 0;
        transform:
            translate3d(13px, -7px, 0)
            rotate(-12deg)
            scaleX(0.25);
    }
}

@keyframes afac-cta-icon-ring {
    0%,
    6%,
    22%,
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    13% {
        opacity: 0.42;
    }

    20% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.35);
    }
}

/*
 * Immediate feedback on pointer hover and keyboard focus.
 */
.afac-wrap .afac-card .afac-button:hover,
.afac-wrap .afac-card .afac-button:focus-visible {
    color: #04121d;
    box-shadow:
        0 0 18px rgba(var(--afac-cta-rgb), 0.48),
        0 9px 20px rgba(0, 0, 0, 0.18);
    filter: brightness(1.05);
    transform: translateY(-2px) scale(1.01);
}

.afac-wrap .afac-card .afac-button:hover
.afac-button-icon,
.afac-wrap .afac-card .afac-button:focus-visible
.afac-button-icon {
    animation:
        afac-cta-icon-hover
        520ms
        cubic-bezier(0.2, 0.8, 0.25, 1)
        both;
}

.afac-wrap .afac-card .afac-button:hover::before,
.afac-wrap .afac-card .afac-button:focus-visible::before {
    animation:
        afac-cta-trail-hover
        520ms
        ease-out
        both;
}

.afac-wrap .afac-card .afac-button:hover::after,
.afac-wrap .afac-card .afac-button:focus-visible::after {
    animation:
        afac-cta-ring-hover
        520ms
        ease-out
        both;
}

.afac-wrap .afac-card .afac-button:focus-visible {
    outline: 3px solid rgba(var(--afac-cta-rgb), 0.82);
    outline-offset: 3px;
}

@keyframes afac-cta-icon-hover {
    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    35% {
        transform:
            translate3d(-2px, 2px, 0)
            rotate(-8deg)
            scale(0.94);
    }

    72% {
        transform:
            translate3d(7px, -6px, 0)
            rotate(12deg)
            scale(1.2);
    }

    100% {
        transform:
            translate3d(2px, -2px, 0)
            rotate(4deg)
            scale(1.1);
    }
}

@keyframes afac-cta-trail-hover {
    0% {
        opacity: 0;
        transform:
            translate3d(-20px, 7px, 0)
            rotate(-12deg)
            scaleX(0);
    }

    48% {
        opacity: 0.7;
        transform:
            translate3d(-5px, 1px, 0)
            rotate(-12deg)
            scaleX(0.9);
    }

    100% {
        opacity: 0;
        transform:
            translate3d(12px, -6px, 0)
            rotate(-12deg)
            scaleX(0.25);
    }
}

@keyframes afac-cta-ring-hover {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    45% {
        opacity: 0.42;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.35);
    }
}

/*
|--------------------------------------------------------------------------
| Compact sharing panel
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-share {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    gap: 0.75rem;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.65rem 0.8rem;
    overflow: visible;
    border: 1px solid var(--afac-line);
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #111f32,
        #081424
    );
    box-shadow:
        0 0 10px rgba(103, 232, 249, 0.16),
        inset 0 1px rgba(255, 255, 255, 0.05);
}

/* One lightweight animated halo around the sharing panel. */
.afac-wrap .afac-share::before {
    position: absolute;
    z-index: -1;
    inset: -5px;
    border-radius: 18px;
    background: transparent;
    box-shadow:
        0 0 10px rgba(103, 232, 249, 0.7),
        0 0 24px rgba(103, 232, 249, 0.48),
        0 0 42px rgba(110, 231, 183, 0.22);
    content: "";
    opacity: 0.3;
    pointer-events: none;
    animation:
        afac-panel-glow
        2.8s
        ease-in-out
        infinite
        alternate;
}

@keyframes afac-panel-glow {
    from {
        opacity: 0.28;
    }

    to {
        opacity: 0.95;
    }
}

/* Sharing title. */
.afac-wrap .afac-share > .afac-title {
    position: relative;
    z-index: 2;
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: left;
    text-transform: none;
    text-shadow:
        0 0 6px rgba(103, 232, 249, 0.7),
        0 0 14px rgba(103, 232, 249, 0.35);
}

/* Social-sharing icon row. */
.afac-wrap .afac-share > .afac-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: auto;
    margin: 0;
    padding: 0;
}

/*
|--------------------------------------------------------------------------
| Social icon buttons
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-link {
    --afac-icon-color: var(--afac-accent);
    --afac-icon-rgb: 103, 232, 249;
    --afac-delay: 0s;

    position: relative;
    isolation: isolate;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--afac-icon-rgb), 0.48);
    border-radius: 10px;
    color: var(--afac-icon-color);
    background: rgba(7, 20, 35, 0.96);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    transform: translateZ(0);
    animation:
        afac-icon-button-pulse
        6s
        ease-out
        infinite;
    animation-delay: var(--afac-delay);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease;
}

/* Lightweight moving trail. */
.afac-wrap .afac-link::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 8px;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--afac-icon-rgb), 0.22),
        rgba(var(--afac-icon-rgb), 0.96)
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transform:
        translate3d(-12px, 6px, 0)
        rotate(-12deg)
        scaleX(0);
    transform-origin: right center;
    animation:
        afac-icon-trail
        6s
        ease-out
        infinite;
    animation-delay: var(--afac-delay);
    will-change: transform, opacity;
}

/* Brief inner-ring pulse. */
.afac-wrap .afac-link::after {
    position: absolute;
    z-index: 0;
    inset: 2px;
    border: 1px solid currentColor;
    border-radius: 7px;
    content: "";
    opacity: 0.18;
    pointer-events: none;
    transform: scale(0.92);
    animation:
        afac-icon-ring
        6s
        ease-out
        infinite;
    animation-delay: var(--afac-delay);
    will-change: transform, opacity;
}

.afac-wrap .afac-link svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 18px;
    height: 18px;
    color: inherit;
    fill: currentColor;
    pointer-events: none;
    transform-origin: 52% 52%;
    animation:
        afac-icon-takeoff
        6s
        cubic-bezier(0.22, 0.75, 0.24, 1)
        infinite;
    animation-delay: var(--afac-delay);
    will-change: transform;
}

/*
 * Short movement followed by a long idle period.
 */
@keyframes afac-icon-takeoff {
    0%,
    5%,
    23%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    7% {
        transform:
            translate3d(-1px, 1px, 0)
            rotate(-7deg)
            scale(0.94);
    }

    11% {
        transform:
            translate3d(4px, -4px, 0)
            rotate(9deg)
            scale(1.16);
    }

    14% {
        transform:
            translate3d(6px, -6px, 0)
            rotate(12deg)
            scale(1.08);
    }

    18% {
        transform:
            translate3d(-1px, 1px, 0)
            rotate(-4deg)
            scale(0.97);
    }

    21% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1.02);
    }
}

@keyframes afac-icon-trail {
    0%,
    6%,
    20%,
    100% {
        opacity: 0;
        transform:
            translate3d(-12px, 6px, 0)
            rotate(-12deg)
            scaleX(0);
    }

    10% {
        opacity: 0.75;
        transform:
            translate3d(-4px, 1px, 0)
            rotate(-12deg)
            scaleX(0.7);
    }

    14% {
        opacity: 0.9;
        transform:
            translate3d(1px, -2px, 0)
            rotate(-12deg)
            scaleX(1);
    }

    19% {
        opacity: 0;
        transform:
            translate3d(8px, -6px, 0)
            rotate(-12deg)
            scaleX(0.25);
    }
}

@keyframes afac-icon-ring {
    0%,
    5%,
    22%,
    100% {
        opacity: 0.16;
        transform: scale(0.92);
    }

    12% {
        opacity: 0.68;
        transform: scale(1);
    }
}

@keyframes afac-icon-button-pulse {
    0%,
    5%,
    22%,
    100% {
        border-color: rgba(var(--afac-icon-rgb), 0.46);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.05),
            0 0 0 rgba(var(--afac-icon-rgb), 0);
    }

    12% {
        border-color: var(--afac-icon-color);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.08),
            0 0 11px rgba(var(--afac-icon-rgb), 0.42);
    }
}

/*
|--------------------------------------------------------------------------
| Stagger social-icon attention
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-link:nth-child(1) {
    --afac-delay: 0s;
}

.afac-wrap .afac-link:nth-child(2) {
    --afac-delay: 0.18s;
}

.afac-wrap .afac-link:nth-child(3) {
    --afac-delay: 0.36s;
}

.afac-wrap .afac-link:nth-child(4) {
    --afac-delay: 0.54s;
}

.afac-wrap .afac-link:nth-child(5) {
    --afac-delay: 0.72s;
}

.afac-wrap .afac-link:nth-child(6) {
    --afac-delay: 0.9s;
}

.afac-wrap .afac-link:nth-child(7) {
    --afac-delay: 1.08s;
}

.afac-wrap .afac-link:nth-child(8) {
    --afac-delay: 1.26s;
}

.afac-wrap .afac-link:nth-child(9) {
    --afac-delay: 1.44s;
}

.afac-wrap .afac-link:nth-child(10) {
    --afac-delay: 1.62s;
}

/*
|--------------------------------------------------------------------------
| Social platform colors
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-facebook,
.afac-wrap .afac-link-facebook {
    --afac-icon-color: #78b4ff;
    --afac-icon-rgb: 120, 180, 255;
}

.afac-wrap .afac-x,
.afac-wrap .afac-link-x {
    --afac-icon-color: #f4f7fb;
    --afac-icon-rgb: 244, 247, 251;
}

.afac-wrap .afac-linkedin,
.afac-wrap .afac-link-linkedin {
    --afac-icon-color: #67c3ff;
    --afac-icon-rgb: 103, 195, 255;
}

.afac-wrap .afac-whatsapp,
.afac-wrap .afac-link-whatsapp {
    --afac-icon-color: #6ee7ae;
    --afac-icon-rgb: 110, 231, 174;
}

.afac-wrap .afac-telegram,
.afac-wrap .afac-link-telegram {
    --afac-icon-color: #74dcff;
    --afac-icon-rgb: 116, 220, 255;
}

.afac-wrap .afac-reddit,
.afac-wrap .afac-link-reddit {
    --afac-icon-color: #ff936f;
    --afac-icon-rgb: 255, 147, 111;
}

.afac-wrap .afac-email,
.afac-wrap .afac-link-email {
    --afac-icon-color: #ccb1ff;
    --afac-icon-rgb: 204, 177, 255;
}

.afac-wrap .afac-copy,
.afac-wrap .afac-link-copy {
    --afac-icon-color: #ffd27a;
    --afac-icon-rgb: 255, 210, 122;
}

/*
|--------------------------------------------------------------------------
| Social icon hover and keyboard focus
|--------------------------------------------------------------------------
*/

.afac-wrap .afac-link:hover,
.afac-wrap .afac-link:focus-visible {
    z-index: 3;
    color: var(--afac-dark);
    border-color: var(--afac-icon-color);
    background: var(--afac-icon-color);
    box-shadow:
        0 0 18px rgba(var(--afac-icon-rgb), 0.62),
        0 6px 16px rgba(0, 0, 0, 0.22);
    animation: none;
    transform: translateY(-2px) scale(1.04);
}

.afac-wrap .afac-link:hover::before,
.afac-wrap .afac-link:focus-visible::before {
    animation:
        afac-icon-hover-trail
        520ms
        ease-out
        both;
}

.afac-wrap .afac-link:hover::after,
.afac-wrap .afac-link:focus-visible::after {
    color: var(--afac-dark);
    opacity: 0.34;
    animation: none;
    transform: scale(1);
}

.afac-wrap .afac-link:hover svg,
.afac-wrap .afac-link:focus-visible svg {
    color: var(--afac-dark);
    fill: currentColor;
    animation:
        afac-icon-hover-takeoff
        520ms
        cubic-bezier(0.2, 0.8, 0.25, 1)
        both;
}

.afac-wrap .afac-link:focus-visible {
    outline: 3px solid rgba(var(--afac-icon-rgb), 0.78);
    outline-offset: 2px;
}

@keyframes afac-icon-hover-takeoff {
    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    35% {
        transform:
            translate3d(-1px, 1px, 0)
            rotate(-7deg)
            scale(0.94);
    }

    72% {
        transform:
            translate3d(5px, -5px, 0)
            rotate(11deg)
            scale(1.18);
    }

    100% {
        transform:
            translate3d(1px, -1px, 0)
            rotate(3deg)
            scale(1.1);
    }
}

@keyframes afac-icon-hover-trail {
    0% {
        opacity: 0;
        transform:
            translate3d(-12px, 6px, 0)
            rotate(-12deg)
            scaleX(0);
    }

    48% {
        opacity: 0.72;
        transform:
            translate3d(-3px, 1px, 0)
            rotate(-12deg)
            scaleX(0.9);
    }

    100% {
        opacity: 0;
        transform:
            translate3d(8px, -5px, 0)
            rotate(-12deg)
            scaleX(0.25);
    }
}

/*
 * Pause sibling animations while one sharing icon is being used.
 */
.afac-wrap .afac-links:hover .afac-link:not(:hover),
.afac-wrap .afac-links:focus-within
.afac-link:not(:focus-visible),
.afac-wrap .afac-links:hover
.afac-link:not(:hover)::before,
.afac-wrap .afac-links:hover
.afac-link:not(:hover)::after,
.afac-wrap .afac-links:hover
.afac-link:not(:hover) svg,
.afac-wrap .afac-links:focus-within
.afac-link:not(:focus-visible)::before,
.afac-wrap .afac-links:focus-within
.afac-link:not(:focus-visible)::after,
.afac-wrap .afac-links:focus-within
.afac-link:not(:focus-visible) svg {
    animation-play-state: paused;
}

/*
 * Screen-reader-only Copy Link status.
 */
.afac-wrap > .afac-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Theme-conflict protection
|--------------------------------------------------------------------------
*/

.af-single-content .afac-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.af-single-content .afac-wrap .afac-share {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-flow: row nowrap !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.65rem 0.8rem !important;
    overflow: visible !important;
}

.af-single-content
.afac-wrap
.afac-share > .afac-title {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;
    font-size: 1.3rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow:
        0 0 6px rgba(103, 232, 249, 0.7),
        0 0 14px rgba(103, 232, 249, 0.35) !important;
}

.af-single-content
.afac-wrap
.afac-share > .afac-links {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Responsive layouts
|--------------------------------------------------------------------------
*/

/* Tablet: two cards per row. */
@media (max-width: 900px) {
    .afac-wrap .afac-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: one card per row. */
@media (max-width: 620px) {
    .afac-wrap,
    .af-single-content .afac-wrap {
        margin-top: 0.65rem !important;
    }

    .afac-wrap .afac-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        margin-bottom: 0.85rem;
    }

    .afac-wrap .afac-card {
        min-height: 0;
        padding: 1rem;
        border-radius: 15px;
    }

    .afac-wrap .afac-card .afac-button {
        min-height: 44px;
        padding: 0.68rem 0.9rem;
    }

    .afac-wrap .afac-button .afac-button-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    .afac-wrap .afac-share,
    .af-single-content .afac-wrap .afac-share {
        flex-wrap: wrap !important;
        gap: 0.55rem !important;
        padding: 0.6rem !important;
        border-radius: 12px;
    }

    .afac-wrap .afac-share::before {
        inset: -4px;
        border-radius: 16px;
    }

    .afac-wrap .afac-share > .afac-title,
    .af-single-content
    .afac-wrap
    .afac-share > .afac-title {
        font-size: 1rem !important;
    }

    .afac-wrap .afac-share > .afac-links,
    .af-single-content
    .afac-wrap
    .afac-share > .afac-links {
        justify-content: flex-start !important;
    }

    .afac-wrap .afac-link {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 9px;
    }

    .afac-wrap .afac-link svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 420px) {
    .afac-wrap .afac-share,
    .af-single-content .afac-wrap .afac-share {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .afac-wrap .afac-share > .afac-links,
    .af-single-content
    .afac-wrap
    .afac-share > .afac-links {
        width: 100% !important;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .afac-wrap .afac-share::before,
    .afac-wrap .afac-link,
    .afac-wrap .afac-link::before,
    .afac-wrap .afac-link::after,
    .afac-wrap .afac-link svg,
    .afac-wrap .afac-button .afac-button-icon,
    .afac-wrap .afac-button::before,
    .afac-wrap .afac-button::after {
        animation: none;
    }

    .afac-wrap .afac-share::before {
        opacity: 0.62;
    }

    .afac-wrap .afac-link::before,
    .afac-wrap .afac-button::before,
    .afac-wrap .afac-button::after {
        opacity: 0;
        transform: none;
    }

    .afac-wrap .afac-link::after {
        opacity: 0.24;
        transform: none;
    }

    .afac-wrap .afac-button .afac-button-icon {
        transform: none;
    }

    .afac-wrap .afac-card,
    .afac-wrap .afac-card .afac-button,
    .afac-wrap .afac-link {
        transition: none;
    }

    .afac-wrap .afac-card:hover,
    .afac-wrap .afac-card:focus-within,
    .afac-wrap .afac-card .afac-button:hover,
    .afac-wrap .afac-card .afac-button:focus-visible,
    .afac-wrap .afac-card .afac-button:hover
    .afac-button-icon,
    .afac-wrap .afac-card .afac-button:focus-visible
    .afac-button-icon,
    .afac-wrap .afac-link:hover,
    .afac-wrap .afac-link:focus-visible,
    .afac-wrap .afac-link:hover svg,
    .afac-wrap .afac-link:focus-visible svg {
        animation: none;
        transform: none;
    }
}