/*
 * AF Social Platforms widget
 * Lightweight CSS-only effects with:
 * - Smooth medium-speed glass shine.
 * - Telegram paper-plane animation.
 * - Reduced-motion support.
 */

.af-social-sidebar-widget {
    position: relative;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.af-social-widget {
    --afsw-text: #f4f7fb;
    --afsw-muted: #b2bfd1;
    --afsw-accent: #67e8f9;
    --afsw-green: #6ee7b7;
    --afsw-dark: #03111d;

    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    color: var(--afsw-text);
}

/*
|--------------------------------------------------------------------------
| Animated widget-container boundary
|--------------------------------------------------------------------------
*/

.af-social-widget::before {
    position: absolute;
    z-index: -1;
    inset: -9px;
    border: 1px solid rgba(103, 232, 249, 0.24);
    border-radius: 18px;
    background: transparent;
    box-shadow:
        0 0 12px rgba(103, 232, 249, 0.22),
        0 0 28px rgba(103, 232, 249, 0.13),
        0 0 42px rgba(110, 231, 183, 0.08);
    content: "";
    opacity: 0.4;
    pointer-events: none;
    transform: scale(0.985);
    animation:
        afsw-container-boundary
        2.5s
        ease-in-out
        infinite
        alternate;
}

@keyframes afsw-container-boundary {
    from {
        opacity: 0.32;
        border-color: rgba(103, 232, 249, 0.2);
        transform: scale(0.985);
    }

    to {
        opacity: 0.9;
        border-color: rgba(110, 231, 183, 0.5);
        transform: scale(1.015);
    }
}

.af-social-widget:hover::before,
.af-social-widget:focus-within::before {
    opacity: 1;
    border-color: rgba(103, 232, 249, 0.68);
    box-shadow:
        0 0 16px rgba(103, 232, 249, 0.42),
        0 0 34px rgba(103, 232, 249, 0.2),
        0 0 50px rgba(110, 231, 183, 0.13);
}

/*
|--------------------------------------------------------------------------
| Full, unclamped widget description
|--------------------------------------------------------------------------
*/

.af-sidebar
.af-social-sidebar-widget
.af-social-widget-description,
.af-sidebar-panel.af-social-sidebar-widget
.af-social-widget-description,
.af-social-widget
.af-social-widget-description {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 0.85rem !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--afsw-muted) !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
    text-transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

/* Allow wrappers to grow with the full description. */
.af-global-left-widgets,
.af-global-right-widgets,
.af-global-left-widgets .af-widget,
.af-global-right-widgets .af-widget,
.af-social-sidebar-widget .af-social-widget {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.af-social-widget-links {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(42px, 1fr));
    gap: 0.55rem;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Social-button base
|--------------------------------------------------------------------------
*/

.af-social-widget-link {
    --afsw-platform: var(--afsw-accent);
    --afsw-shine-delay: 0s;

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    gap: 0.48rem;
    overflow: hidden;
    padding: 0.58rem;
    border: 1px solid rgba(103, 232, 249, 0.38);
    border-radius: 11px;
    color: var(--afsw-platform);
    background: rgba(5, 18, 31, 0.97);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.05),
        0 0 7px rgba(103, 232, 249, 0.1);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transform: translateZ(0);
    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

/* Animated inner button boundary. */
.af-social-widget-link::after {
    position: absolute;
    z-index: 1;
    inset: 2px;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 8px;
    content: "";
    opacity: 0.32;
    pointer-events: none;
    transform: scale(0.96);
    animation:
        afsw-button-boundary
        1.8s
        ease-in-out
        infinite
        alternate;
}

@keyframes afsw-button-boundary {
    from {
        opacity: 0.22;
        transform: scale(0.96);
    }

    to {
        opacity: 0.72;
        transform: scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Smooth medium-speed glass shine
|--------------------------------------------------------------------------
|
| The visible sweep lasts approximately 1.3 seconds and then rests.
| Only transform and opacity are animated.
*/

.af-social-widget-link::before {
    position: absolute;
    z-index: 2;
    top: -45%;
    left: 0;
    width: 34%;
    height: 190%;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.68) 50%,
        rgba(190, 247, 255, 0.24) 64%,
        rgba(255, 255, 255, 0.04) 82%,
        transparent 100%
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transform:
        translate3d(-190%, 0, 0)
        skewX(-18deg);
    animation:
        afsw-smooth-glass-shine
        5.8s
        cubic-bezier(0.4, 0, 0.2, 1)
        infinite;
    animation-delay: var(--afsw-shine-delay);
    will-change: transform, opacity;
}

@keyframes afsw-smooth-glass-shine {
    0%,
    8% {
        opacity: 0;
        transform:
            translate3d(-190%, 0, 0)
            skewX(-18deg);
    }

    12% {
        opacity: 0.18;
    }

    17% {
        opacity: 0.62;
    }

    23% {
        opacity: 0.72;
    }

    29% {
        opacity: 0.25;
    }

    34% {
        opacity: 0;
        transform:
            translate3d(520%, 0, 0)
            skewX(-18deg);
    }

    35%,
    100% {
        opacity: 0;
        transform:
            translate3d(520%, 0, 0)
            skewX(-18deg);
    }
}

/* Gentle stagger across neighboring buttons. */
.af-social-widget-link:nth-child(1) {
    --afsw-shine-delay: 0s;
}

.af-social-widget-link:nth-child(2) {
    --afsw-shine-delay: 160ms;
}

.af-social-widget-link:nth-child(3) {
    --afsw-shine-delay: 320ms;
}

.af-social-widget-link:nth-child(4) {
    --afsw-shine-delay: 480ms;
}

.af-social-widget-link:nth-child(5) {
    --afsw-shine-delay: 640ms;
}

.af-social-widget-link:nth-child(6) {
    --afsw-shine-delay: 800ms;
}

.af-social-widget-link:nth-child(7) {
    --afsw-shine-delay: 960ms;
}

.af-social-widget-link:nth-child(8) {
    --afsw-shine-delay: 1120ms;
}

.af-social-widget-link:nth-child(9) {
    --afsw-shine-delay: 1280ms;
}

.af-social-widget-link:nth-child(10) {
    --afsw-shine-delay: 1440ms;
}

/* Smooth interaction shine. */
.af-social-widget-link:hover::before,
.af-social-widget-link:focus-visible::before {
    animation:
        afsw-smooth-glass-hover
        900ms
        cubic-bezier(0.4, 0, 0.2, 1)
        both;
}

@keyframes afsw-smooth-glass-hover {
    0% {
        opacity: 0;
        transform:
            translate3d(-190%, 0, 0)
            skewX(-18deg);
    }

    22% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.78;
    }

    78% {
        opacity: 0.28;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(520%, 0, 0)
            skewX(-18deg);
    }
}

/* Pause other shines while one button is being used. */
.af-social-widget-links:hover
.af-social-widget-link:not(:hover)::before,
.af-social-widget-links:focus-within
.af-social-widget-link:not(:focus-visible)::before {
    animation-play-state: paused;
}

/*
|--------------------------------------------------------------------------
| Icon and visible label
|--------------------------------------------------------------------------
*/

.af-social-widget-link svg {
    position: relative;
    z-index: 3;
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: inherit;
    fill: currentColor;
    filter:
        drop-shadow(
            0 0 5px
            rgba(103, 232, 249, 0.4)
        );
    transform-origin: 50% 50%;
    animation:
        afsw-icon-breathe
        1.7s
        ease-in-out
        infinite
        alternate;
    transition:
        color 150ms ease,
        fill 150ms ease,
        filter 150ms ease,
        transform 170ms ease;
    will-change: transform;
}

@keyframes afsw-icon-breathe {
    from {
        filter:
            drop-shadow(
                0 0 2px
                rgba(103, 232, 249, 0.24)
            );
        transform: scale(1);
    }

    to {
        filter:
            drop-shadow(
                0 0 7px
                rgba(103, 232, 249, 0.58)
            );
        transform: scale(1.06);
    }
}

.af-social-widget-link >
span:not(.screen-reader-text) {
    position: relative;
    z-index: 3;
    display: inline-block;
    min-width: 0;
    color: inherit;
    font-weight: 850;
    line-height: 1.2;
    opacity: 1;
    overflow-wrap: anywhere;
    text-shadow: none;
    transition:
        color 150ms ease,
        transform 170ms ease;
}

/*
|--------------------------------------------------------------------------
| Telegram attention animation
|--------------------------------------------------------------------------
*/

.af-social-widget-telegram {
    --afsw-platform: #74dcff;
    --afsw-telegram-blue: #229ed9;

    border-color: rgba(116, 220, 255, 0.5);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.05),
        0 0 8px rgba(34, 158, 217, 0.16);
    animation:
        afsw-telegram-button-pulse
        4s
        ease-out
        infinite;
}

.af-social-widget-telegram svg {
    filter:
        drop-shadow(
            0 0 4px
            rgba(116, 220, 255, 0.42)
        )
        drop-shadow(
            0 0 9px
            rgba(34, 158, 217, 0.18)
        );
    transform-origin: 55% 55%;
    animation:
        afsw-telegram-plane
        4s
        cubic-bezier(0.22, 0.75, 0.24, 1)
        infinite;
}

@keyframes afsw-telegram-plane {
    0%,
    8%,
    38%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

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

    17% {
        transform:
            translate3d(5px, -4px, 0)
            rotate(8deg)
            scale(1.13);
    }

    22% {
        transform:
            translate3d(9px, -7px, 0)
            rotate(13deg)
            scale(1.05);
        filter:
            drop-shadow(
                -5px 5px 3px
                rgba(116, 220, 255, 0.48)
            )
            drop-shadow(
                0 0 10px
                rgba(34, 158, 217, 0.55)
            );
    }

    27% {
        transform:
            translate3d(-2px, 1px, 0)
            rotate(-5deg)
            scale(0.98);
    }

    32% {
        transform:
            translate3d(1px, -1px, 0)
            rotate(2deg)
            scale(1.03);
    }
}

@keyframes afsw-telegram-button-pulse {
    0%,
    7%,
    35%,
    100% {
        border-color: rgba(116, 220, 255, 0.5);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.05),
            0 0 8px rgba(34, 158, 217, 0.16);
    }

    18% {
        border-color: rgba(116, 220, 255, 0.9);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.08),
            0 0 0 1px rgba(116, 220, 255, 0.12),
            0 0 17px rgba(34, 158, 217, 0.38);
    }
}

/* Stop the resting Telegram button pulse while interacting. */
.af-social-widget-telegram:hover,
.af-social-widget-telegram:focus-visible {
    animation: none;
}

/* Launch the Telegram paper plane immediately. */
.af-social-widget-telegram:hover svg,
.af-social-widget-telegram:focus-visible svg {
    animation:
        afsw-telegram-hover-launch
        620ms
        cubic-bezier(0.2, 0.8, 0.25, 1)
        both;
}

@keyframes afsw-telegram-hover-launch {
    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

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

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

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

/*
|--------------------------------------------------------------------------
| High-contrast hover and keyboard focus
|--------------------------------------------------------------------------
*/

.af-social-widget-link:hover,
.af-social-widget-link:focus-visible {
    color: var(--afsw-dark) !important;
    border-color: #d4fbff;
    background:
        linear-gradient(
            135deg,
            #7deeff,
            #70e8bd
        );
    box-shadow:
        0 0 0 2px rgba(212, 251, 255, 0.42),
        0 0 21px rgba(103, 232, 249, 0.75),
        0 9px 19px rgba(0, 0, 0, 0.24);
    text-shadow: none;
    transform:
        translateY(-2px)
        scale(1.025);
}

.af-social-widget-link:hover::after,
.af-social-widget-link:focus-visible::after {
    border-color: rgba(3, 17, 29, 0.36);
    box-shadow:
        inset 0 0 0 1px
            rgba(255, 255, 255, 0.4),
        0 0 9px
            rgba(255, 255, 255, 0.5);
    opacity: 1;
    animation-duration: 600ms;
}

/* Generic icon hover; Telegram uses its own launch. */
.af-social-widget-link:not(
    .af-social-widget-telegram
):hover svg,
.af-social-widget-link:not(
    .af-social-widget-telegram
):focus-visible svg {
    color: var(--afsw-dark) !important;
    fill: var(--afsw-dark) !important;
    filter:
        drop-shadow(
            0 1px 0
            rgba(255, 255, 255, 0.32)
        );
    animation: none;
    transform:
        scale(1.18)
        rotate(-7deg);
}

.af-social-widget-telegram:hover svg,
.af-social-widget-telegram:focus-visible svg {
    color: var(--afsw-dark) !important;
    fill: var(--afsw-dark) !important;
    filter:
        drop-shadow(
            -3px 3px 2px
            rgba(255, 255, 255, 0.3)
        )
        drop-shadow(
            0 0 5px
            rgba(3, 17, 29, 0.16)
        );
}

.af-social-widget-link:hover >
span:not(.screen-reader-text),
.af-social-widget-link:focus-visible >
span:not(.screen-reader-text) {
    color: var(--afsw-dark) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transform: translateX(1px);
}

.af-social-widget-link:focus-visible {
    outline:
        3px solid
        rgba(103, 232, 249, 0.82);
    outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Platform-specific resting colors
|--------------------------------------------------------------------------
*/

.af-social-widget-facebook {
    --afsw-platform: #78b4ff;
}

.af-social-widget-x {
    --afsw-platform: #f4f7fb;
}

.af-social-widget-linkedin {
    --afsw-platform: #67c3ff;
}

.af-social-widget-instagram {
    --afsw-platform: #ff8dcc;
}

.af-social-widget-youtube {
    --afsw-platform: #ff777d;
}

.af-social-widget-whatsapp {
    --afsw-platform: #6ee7ae;
}

.af-social-widget-github {
    --afsw-platform: #d8e0ec;
}

.af-social-widget-email {
    --afsw-platform: #ccb1ff;
}

.af-social-widget-rss {
    --afsw-platform: #ffba67;
}

/*
|--------------------------------------------------------------------------
| Narrow sidebar and mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {
    .af-social-widget-links {
        grid-template-columns:
            repeat(auto-fit, minmax(40px, 1fr));
        gap: 0.45rem;
    }

    .af-social-widget-link {
        min-height: 42px;
        padding: 0.52rem;
    }

    .af-social-widget-link svg {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .af-social-widget::before,
    .af-social-widget-link,
    .af-social-widget-link::before,
    .af-social-widget-link::after,
    .af-social-widget-link svg,
    .af-social-widget-link:hover::before,
    .af-social-widget-link:focus-visible::before {
        animation: none;
    }

    .af-social-widget::before {
        opacity: 0.58;
        transform: none;
    }

    .af-social-widget-link::before {
        opacity: 0;
        transform: none;
        will-change: auto;
    }

    .af-social-widget-link::after {
        opacity: 0.5;
        transform: none;
    }

    .af-social-widget-link svg {
        will-change: auto;
    }

    .af-social-widget-link,
    .af-social-widget-link svg,
    .af-social-widget-link >
    span:not(.screen-reader-text) {
        transition: none;
    }

    .af-social-widget-link:hover,
    .af-social-widget-link:focus-visible,
    .af-social-widget-link:hover svg,
    .af-social-widget-link:focus-visible svg,
    .af-social-widget-link:hover >
    span:not(.screen-reader-text),
    .af-social-widget-link:focus-visible >
    span:not(.screen-reader-text) {
        transform: none;
    }
}