/* ==========================================================================
   360VR EFFECTS - THU VIEN HIEU UNG CHO PANO2VR 8

   Quy uoc:
   - fx-[hieu-ung]: class hieu ung.
   - kf-[hieu-ung]: keyframe noi bo.
   - shape-[hinh-dang]: class tao hinh tinh.
   - --fx-*: bien tuy chinh dung tren tung phan tu.

   Luu y:
   - effects.js luu transform dinh vi vao --fx-base-transform truoc khi chay.
   - Khong gan hai hieu ung cung dieu khien transform tren mot phan tu.
   - Cac hieu ung dung ::before hoac ::after khong nen gan chung tren mot phan tu.
   ========================================================================== */


/* ==========================================================================
   1. CHUYEN DONG
   ========================================================================== */

/* 1.1. Nhay nhe */

.fx-bounce {
    animation: kf-bounce var(--fx-speed, 1.3s) ease-in-out var(--fx-repeat, infinite);
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes kf-bounce {
    0%,
    100% {
        transform: var(--fx-base-transform, none) translateY(0);
    }

    20% {
        transform: var(--fx-base-transform, none) translateY(1px);
    }

    50% {
        transform: var(--fx-base-transform, none) translateY(var(--fx-y, -6px));
    }

    75% {
        transform: var(--fx-base-transform, none) translateY(0);
    }

    85% {
        transform: var(--fx-base-transform, none) translateY(-2px);
    }
}


/* 1.2. Phong to theo nhip */

.fx-pulse {
    animation: kf-pulse var(--fx-speed, 1.8s) ease-in-out var(--fx-repeat, infinite);
    transform-origin: center center;
    will-change: transform, filter;
}

@keyframes kf-pulse {
    0%,
    100% {
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
        transform: var(--fx-base-transform, none) scale(1);
    }

    50% {
        filter:
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15))
            drop-shadow(0 0 10px var(--fx-color, rgba(94, 234, 212, 0.72)));
        transform: var(--fx-base-transform, none) scale(var(--fx-scale, 1.12));
    }
}


/* 1.3. Troi nhe */

.fx-float {
    animation: kf-float var(--fx-speed, 3s) ease-in-out var(--fx-repeat, infinite);
    transform-origin: center center;
    will-change: transform;
}

@keyframes kf-float {
    0%,
    100% {
        transform: var(--fx-base-transform, none) translateY(0) rotate(-1deg);
    }

    50% {
        transform: var(--fx-base-transform, none) translateY(var(--fx-y, -8px)) rotate(1deg);
    }
}


/* 1.4. Xuat hien bat len */

.fx-pop {
    animation: kf-pop var(--fx-speed, 500ms) cubic-bezier(0.2, 0.85, 0.3, 1.25) var(--fx-delay, 0s) var(--fx-repeat, 1) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

@keyframes kf-pop {
    0% {
        opacity: 0;
        transform: var(--fx-base-transform, none) scale(0.72);
    }

    70% {
        opacity: 1;
        transform: var(--fx-base-transform, none) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: var(--fx-base-transform, none) scale(1);
    }
}


/* 1.5. Xuat hien tu duoi len */

.fx-reveal {
    animation: kf-reveal var(--fx-speed, 650ms) cubic-bezier(0.22, 1, 0.36, 1) var(--fx-delay, 0s) var(--fx-repeat, 1) both;
    will-change: transform, opacity, filter;
}

@keyframes kf-reveal {
    0% {
        filter: blur(6px);
        opacity: 0;
        transform: var(--fx-base-transform, none) translateY(var(--fx-y, 18px));
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: var(--fx-base-transform, none) translateY(0);
    }
}


/* ==========================================================================
   2. ANH SANG
   ========================================================================== */

/* 2.1. Phat sang theo nhip */

.fx-glow {
    animation: kf-glow var(--fx-speed, 2s) ease-in-out var(--fx-repeat, infinite);
    will-change: box-shadow, filter;
}

@keyframes kf-glow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        filter: brightness(1);
    }

    50% {
        box-shadow:
            0 0 12px var(--fx-color, rgba(94, 234, 212, 0.55)),
            0 0 28px var(--fx-color, rgba(94, 234, 212, 0.35));
        filter: brightness(1.08);
    }
}


/* 2.2. Vet sang quet ngang */

.fx-shine {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.fx-shine::after {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -70%;
    z-index: 2;
    width: 34%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--fx-color, rgba(255, 255, 255, 0.7)),
        transparent
    );
    pointer-events: none;
    transform: skewX(-18deg);
    animation: kf-shine var(--fx-speed, 2.8s) ease-in-out var(--fx-repeat, infinite);
}

@keyframes kf-shine {
    0%,
    25% {
        left: -70%;
    }

    70%,
    100% {
        left: 140%;
    }
}


/* ==========================================================================
   3. LAN TOA
   ========================================================================== */

/* 3.1. Vong lan toa quanh phan tu */

.fx-ripple {
    position: relative !important;
    z-index: 0;
    overflow: visible !important;
    isolation: isolate;
}

.fx-ripple::before,
.fx-ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 2px solid var(--fx-color, rgba(255, 255, 255, 0.82));
    border-radius: inherit;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    animation: kf-ripple var(--fx-speed, 2.8s) ease-out var(--fx-repeat, infinite);
}

.fx-ripple::after {
    animation-delay: var(--fx-delay, 1.4s);
}

@keyframes kf-ripple {
    0% {
        opacity: 0.8;
        transform: scale(0.96);
    }

    45% {
        opacity: 0.28;
    }

    100% {
        opacity: 0;
        transform: scale(var(--fx-scale, 1.55));
    }
}


/* 3.2. Cham lan toa, neo vao chinh giua canh duoi */

.fx-ripple-dot {
    position: relative !important;
    width: 4px !important;
    height: 4px !important;
    overflow: visible !important;
    background: var(--fx-center-color, #ff4d6d) !important;
    border-radius: 50% !important;
}

.fx-ripple-dot::before,
.fx-ripple-dot::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 10px;
    height: 10px;
    border: 2px solid var(--fx-color, rgba(255, 255, 255, 0.9));
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%) scale(0.35);
    transform-origin: center center;
    animation: kf-ripple-dot var(--fx-speed, 3s) ease-out var(--fx-repeat, infinite);
}

.fx-ripple-dot::after {
    animation-delay: var(--fx-delay, 1.5s);
}

@keyframes kf-ripple-dot {
    0% {
        border-width: 2px;
        opacity: 0.9;
        transform: translate(-50%, 50%) scale(0.35);
    }

    40% {
        opacity: 0.6;
    }

    100% {
        border-width: 0.5px;
        opacity: 0;
        transform: translate(-50%, 50%) scale(4.5);
    }
}


/* 3.3. Vong lan toa ngang duoi pin */

.fx-ripple-x {
    position: relative !important;
    overflow: visible !important;
}

.fx-ripple-x > img,
.fx-ripple-x > svg {
    position: relative;
    z-index: 2;
}

.fx-ripple-x::before,
.fx-ripple-x::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 16px;
    height: 5px;
    border: 2px solid var(--fx-color, rgba(255, 255, 255, 0.9));
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%) scaleX(0.4) scaleY(0.4);
    animation: kf-ripple-x var(--fx-speed, 3s) ease-out var(--fx-repeat, infinite);
}

.fx-ripple-x::after {
    animation-delay: var(--fx-delay, 1.5s);
}

@keyframes kf-ripple-x {
    0% {
        border-width: 2px;
        opacity: 0.9;
        transform: translate(-50%, 50%) scaleX(0.4) scaleY(0.4);
    }

    40% {
        opacity: 0.65;
    }

    100% {
        border-width: 0.5px;
        opacity: 0;
        transform: translate(-50%, 50%) scaleX(5) scaleY(2.2);
    }
}


/* ==========================================================================
   4. HINH DANG
   ========================================================================== */

/* 4.1. Hinh tron co vien */

.shape-circle {
    border: var(--shape-border-width, 2px) solid var(--shape-border-color, #ffffff);
    border-radius: 50%;
    box-sizing: border-box;
}


/* ==========================================================================
   5. HAN CHE CHUYEN DONG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fx-bounce,
    .fx-pulse,
    .fx-float,
    .fx-pop,
    .fx-reveal,
    .fx-glow,
    .fx-shine::after,
    .fx-ripple::before,
    .fx-ripple::after,
    .fx-ripple-dot::before,
    .fx-ripple-dot::after,
    .fx-ripple-x::before,
    .fx-ripple-x::after {
        animation: none !important;
    }

    .fx-pop,
    .fx-reveal {
        filter: none;
        opacity: 1;
    }
}