/*
 * ==========================================================
 * FitUI
 * Premium Effects
 *
 * File: 06-premium-effects.css
 * Version: 1.0.0
 * ==========================================================
 */

/*
|--------------------------------------------------------------------------
| Glass Sweep
|--------------------------------------------------------------------------
*/

.fit-effect-sweep {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fit-effect-sweep::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, .10) 18%,
            transparent 36%
        );

    opacity: 0;
    transform: translateX(-120%);

    pointer-events: none;
}

.fit-effect-sweep:hover::after {
    animation: fitGlassSweep 1.1s ease forwards;
}

/*
|--------------------------------------------------------------------------
| Mouse Glow
|--------------------------------------------------------------------------
*/

.fit-effect-mouse-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fit-effect-mouse-glow::before {
    content: "";

    position: absolute;
    inset: -1px;
    z-index: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            600px circle
            at var(--fit-mouse-x, 50%) var(--fit-mouse-y, 50%),
            rgba(184, 146, 70, .15),
            transparent 42%
        );

    opacity: .55;

    pointer-events: none;
}

.fit-effect-mouse-glow > * {
    position: relative;
    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| Static Premium Glow
|--------------------------------------------------------------------------
*/

.fit-effect-premium-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fit-effect-premium-glow::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -100px;
    z-index: 0;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background: rgba(184, 146, 70, .10);
    filter: blur(74px);

    pointer-events: none;
}

.fit-effect-premium-glow > * {
    position: relative;
    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| Button Sweep
|--------------------------------------------------------------------------
*/

.fit-btn.fit-effect-sweep {
    position: relative;
    overflow: hidden;
}

.fit-btn.fit-effect-sweep::after {
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, .22),
            transparent
        );
}

.fit-btn.fit-effect-sweep:hover::after {
    animation-duration: .9s;
}

/*
|--------------------------------------------------------------------------
| Badge Shimmer
|--------------------------------------------------------------------------
*/

.fit-badge--shimmer {
    position: relative;
    overflow: hidden;
}

.fit-badge--shimmer::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, .20),
            transparent
        );

    opacity: 0;
    transform: translateX(-140%);

    animation: fitBadgeShimmer 7s ease-in-out infinite;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Image Lift
|--------------------------------------------------------------------------
*/

.fit-effect-image-lift {
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .55s cubic-bezier(.2, .8, .2, 1),
        box-shadow .55s cubic-bezier(.2, .8, .2, 1);
}

.fit-effect-image-lift:hover {
    transform: translateY(-6px);

    border-color: var(--fit-gold-border);

    box-shadow:
        0 38px 100px rgba(0, 0, 0, .48),
        var(--fit-gold-glow);
}

/*
|--------------------------------------------------------------------------
| Soft Float
|--------------------------------------------------------------------------
*/

.fit-effect-float {
    animation: fitSoftFloat 7s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| Premium Title
|--------------------------------------------------------------------------
*/

.fit-title-premium {
    position: relative;

    color: transparent;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .82) 38%,
            rgba(184, 146, 70, .92) 50%,
            rgba(255, 255, 255, .88) 62%,
            rgba(255, 255, 255, 1) 100%
        );

    background-size: 220% auto;

    -webkit-background-clip: text;
    background-clip: text;

    text-shadow:
        0 18px 60px rgba(0, 0, 0, .38);

    animation: fitTitleSheen 9s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| Hero Particles
|--------------------------------------------------------------------------
*/

.fit-particles {
    position: absolute;
    inset: 0;
    z-index: 2;

    overflow: hidden;

    pointer-events: none;
}

.fit-particles span {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: var(--fit-radius-round);

    background: rgba(184, 146, 70, .75);

    box-shadow:
        0 0 16px rgba(184, 146, 70, .45),
        0 0 42px rgba(184, 146, 70, .16);

    opacity: .28;

    animation: fitParticleFloat 12s ease-in-out infinite;
}

.fit-particles span:nth-child(1) {
    top: 34%;
    left: 12%;
    animation-duration: 13s;
}

.fit-particles span:nth-child(2) {
    top: 68%;
    left: 22%;

    width: 3px;
    height: 3px;

    animation-duration: 16s;
    animation-delay: -4s;
}

.fit-particles span:nth-child(3) {
    top: 28%;
    right: 18%;

    animation-duration: 14s;
    animation-delay: -2s;
}

.fit-particles span:nth-child(4) {
    top: 64%;
    right: 11%;

    width: 4px;
    height: 4px;

    animation-duration: 18s;
    animation-delay: -6s;
}

.fit-particles span:nth-child(5) {
    top: 22%;
    left: 48%;

    width: 3px;
    height: 3px;

    animation-duration: 15s;
    animation-delay: -8s;
}

.fit-particles span:nth-child(6) {
    bottom: 18%;
    left: 38%;

    width: 4px;
    height: 4px;

    animation-duration: 17s;
    animation-delay: -3s;
}

.fit-particles span:nth-child(7) {
    right: 35%;
    bottom: 24%;

    width: 3px;
    height: 3px;

    animation-duration: 19s;
    animation-delay: -7s;
}

.fit-particles span:nth-child(8) {
    top: 58%;
    right: 48%;

    width: 4px;
    height: 4px;

    animation-duration: 14s;
    animation-delay: -5s;
}

/*
|--------------------------------------------------------------------------
| Keyframes
|--------------------------------------------------------------------------
*/

@keyframes fitGlassSweep {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes fitBadgeShimmer {
    0%,
    72% {
        opacity: 0;
        transform: translateX(-140%);
    }

    78% {
        opacity: 1;
    }

    88%,
    100% {
        opacity: 0;
        transform: translateX(140%);
    }
}

@keyframes fitSoftFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes fitTitleSheen {
    0%,
    72% {
        background-position: 0% center;
    }

    100% {
        background-position: 220% center;
    }
}

@keyframes fitParticleFloat {
    0%,
    100% {
        opacity: .18;
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: .42;
        transform: translate3d(18px, -32px, 0) scale(1.35);
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .fit-effect-sweep::after,
    .fit-badge--shimmer::after {
        display: none;
    }

    .fit-effect-float,
    .fit-title-premium,
    .fit-particles span {
        animation: none;
    }

    .fit-effect-image-lift {
        transition: none;
    }

    .fit-effect-image-lift:hover {
        transform: none;
    }
}