/**
 * Frontend CSS for Custom Animated Preloader
 */

#swap-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#swap-preloader.swap-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Device Visibility */
@media (min-width: 1025px) {
    #swap-preloader.swap-hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #swap-preloader.swap-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #swap-preloader.swap-hide-mobile {
        display: none !important;
    }
}

.swap-loader-inner {
    text-align: center;
}

/* Spinners are loaded from spinners.css */

.swap-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.swap-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.swap-percentage {
    font-size: 24px;
    font-weight: 600;
    margin-top: 16px;
    letter-spacing: 1px;
}

.swap-progress-bar-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.swap-progress-bar {
    width: 0%;
    height: 100%;
    background: #ffffff;
    transition: width 0.15s ease-out;
    border-radius: 0 2px 2px 0;
}


/* Video Background */
.swap-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.swap-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.5);
    /* Fallback */
}

/* Exit Transitions */
#swap-preloader {
    /* Base transition */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.swap-exit-fade {
    opacity: 0;
    visibility: hidden;
}

.swap-exit-slide-up {
    transform: translateY(-100%);
}

.swap-exit-slide-down {
    transform: translateY(100%);
}

/* Animation Keyframes */
@keyframes swapFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes swapSlideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes swapZoomIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

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

@keyframes swapPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes swapBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes swapBlink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: currentColor;
    }
}

@keyframes swapFlip {
    0% {
        transform: perspective(400px) rotateY(0);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

@keyframes swapWobble {

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

    15% {
        transform: translateX(-15%) rotate(-5deg);
    }

    30% {
        transform: translateX(10%) rotate(3deg);
    }

    45% {
        transform: translateX(-10%) rotate(-3deg);
    }

    60% {
        transform: translateX(5%) rotate(2deg);
    }

    75% {
        transform: translateX(-2%) rotate(-1deg);
    }
}

@keyframes swapGlow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        text-shadow: 0 0 20px var(--loader-color, #fff), 0 0 30px var(--loader-color, #fff);
    }
}

@keyframes swapBlur {
    0% {
        filter: blur(10px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

/* Animation Classes */
.swap-anim-fade {
    animation: swapFadeIn var(--swap-anim-speed, 1s) ease-out forwards;
}

.swap-anim-slide {
    animation: swapSlideIn var(--swap-anim-speed, 0.8s) ease-out forwards;
}

.swap-anim-zoom {
    animation: swapZoomIn var(--swap-anim-speed, 0.8s) ease-out forwards;
}

.swap-anim-pulse {
    animation: swapPulse var(--swap-anim-speed, 2s) infinite;
}

.swap-anim-bounce {
    animation: swapBounce var(--swap-anim-speed, 2s) infinite;
}

.swap-anim-flip {
    animation: swapFlip var(--swap-anim-speed, 2s) infinite;
}

.swap-anim-wobble {
    animation: swapWobble var(--swap-anim-speed, 2s) infinite;
}

.swap-anim-glow {
    animation: swapGlow var(--swap-anim-speed, 2s) infinite;
}

.swap-anim-blur {
    animation: swapBlur var(--swap-anim-speed, 1s) ease-out forwards;
}

/* Typewriter Effect (Cursor only, JS handles text) */
.swap-anim-typewriter {
    border-right: 2px solid currentColor;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 4px;
    animation: swapBlink 0.75s step-end infinite;
}

/* --- Readymade Text Loaders --- */
[class*="swap-text-loader-"] {
    width: fit-content;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px var(--loader-color, #000);
    background-clip: text;
    -webkit-background-clip: text;
}

.swap-text-loader-l1 {
    background: conic-gradient(var(--loader-color, #000) 0 0) 0/0% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l1 var(--swap-anim-speed, 1s) linear infinite;
}

@keyframes swap-l1 {
    to {
        background-size: 120% 100%
    }
}

.swap-text-loader-l2 {
    background: linear-gradient(90deg, #0000 33%, var(--loader-color, #000) 0 67%, #0000 0) 0/300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l2 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l2 {
    0% {
        background-position: 100%
    }
}

.swap-text-loader-l3 {
    background: linear-gradient(-60deg, #0000 45%, var(--loader-color, #000) 0 55%, #0000 0) 0/300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l3 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l3 {
    0% {
        background-position: 100%
    }
}

.swap-text-loader-l4 {
    background: conic-gradient(var(--loader-color, #000) 0 0) 50%/0 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l4 var(--swap-anim-speed, 1.5s) linear infinite;
}

@keyframes swap-l4 {
    to {
        background-size: 120% 100%
    }
}

.swap-text-loader-l5 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 100%, var(--g) 0 0, var(--g) 0 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l5 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l5 {

    0%,
    100% {
        background-size: 0 100%, 0 100%, 100% 0, 100% 0
    }

    50% {
        background-size: 55% 100%, 55% 100%, 100% 0, 100% 0
    }

    50.01% {
        background-size: 0 100%, 0 100%, 100% 55%, 100% 55%
    }
}

.swap-text-loader-l6 {
    background:
        conic-gradient(from -135deg at 100% 50%, var(--loader-color, #000) 90deg, #0000 0) no-repeat,
        conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--loader-color, #000) 0) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l6 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l6 {
    0% {
        background-size: 0 200%;
        background-position: 0 0, 100% 0
    }

    50% {
        background-size: calc(60% + .6em) 200%;
        background-position: 0 0, 100% 0
    }

    50.01% {
        background-size: calc(60% + .6em) 200%;
        background-position: 0 100%, 100% 100%
    }

    100% {
        background-size: 0 200%;
        background-position: 0 100%, 100% 100%
    }
}

.swap-text-loader-l7 {
    --l: #0000 45%, var(--loader-color, #000) 0 55%, #0000 0;
    --g: 0/300% 100% no-repeat;
    background: linear-gradient(-60deg, var(--l)) var(--g), linear-gradient(60deg, var(--l)) var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l7 var(--swap-anim-speed, 4s) linear infinite;
}

@keyframes swap-l7 {
    0% {
        background-position: 100%, 0
    }

    50% {
        background-position: 0, 0
    }

    to {
        background-position: 0, 100%
    }
}

/* ==========================================================================
   20 Premium Readymade Text Loaders
   ========================================================================== */

/* Base container styling for all readymade text loaders */
#swap-preloader .swap-text[class*="swap-text-loader-"] {
    position: relative;
    display: inline-block;
    color: #0000 !important;
    /* Force transparency for background-clip animations */
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% 100%;
    animation-duration: var(--swap-anim-speed, 2000ms);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.swap-text-loader-l8 {
    background: conic-gradient(var(--loader-color, #000) 0 0);
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l8 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l8 {

    0%,
    2%,
    8%,
    11%,
    15%,
    21%,
    30%,
    32%,
    35%,
    40%,
    46%,
    47%,
    53%,
    61%,
    70%,
    72%,
    77%,
    80%,
    86% {
        background-size: 0 0
    }

    1%,
    9%,
    10%,
    16%,
    20%,
    31%,
    34%,
    41%,
    45%,
    48%,
    52%,
    55%,
    60%,
    73%,
    76%,
    81%,
    85%,
    96%,
    100% {
        background-size: 100% 100%
    }
}

.swap-text-loader-l9 {
    line-height: 1.5;
    background:
        radial-gradient(1.13em at 50% 1.6em, var(--loader-color, #000) 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100%,
        radial-gradient(1.13em at 50% -0.8em, #0000 99%, var(--loader-color, #000) 101%) 50% .8em/3.2em 100% repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l9 var(--swap-anim-speed, 2s) linear infinite;
}

@keyframes swap-l9 {
    to {
        background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) .8em
    }
}

.swap-text-loader-l10 {
    background:
        radial-gradient(0.71em at 50% 1em, var(--loader-color, #000) 99%, #0000 101%) calc(50% - 1em) 1em/2em 200% repeat-x,
        radial-gradient(0.71em at 50% -0.5em, #0000 99%, var(--loader-color, #000) 101%) 50% 1.5em/2em 200% repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l10-0 calc(var(--swap-anim-speed, 2s) * 0.4) linear infinite alternate, swap-l10-1 calc(var(--swap-anim-speed, 2s) * 2) linear infinite;
}

@keyframes swap-l10-0 {
    to {
        background-position-x: 50%, calc(50% + 1em)
    }
}

@keyframes swap-l10-1 {
    to {
        background-position-y: -.5em, 0
    }
}

.swap-text-loader-l11 {
    background: conic-gradient(var(--loader-color, #000) 0 0) 0/0 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l11 2s steps(8, jump-none) infinite;
}

@keyframes swap-l11 {
    to {
        background-size: 100% 100%
    }
}

.swap-text-loader-l12 {
    background: linear-gradient(90deg, #0000 33%, var(--loader-color, #000) 0 67%, #0000 0) 100%/300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l12 4s steps(14) infinite;
}

@keyframes swap-l12 {
    to {
        background-position: 0
    }
}

.swap-text-loader-l13 {
    background: conic-gradient(var(--loader-color, #000) 0 0) -1ch/1ch 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l13 2s steps(8, jump-none) infinite;
}

@keyframes swap-l13 {
    to {
        background-position: 100%
    }
}

.swap-text-loader-l14 {
    background: conic-gradient(var(--loader-color, #000) 0 0) 0/1ch 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l14 1.5s steps(7, jump-none) infinite alternate;
}

@keyframes swap-l14 {
    to {
        background-position: 100%
    }
}

.swap-text-loader-l15 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    background-position-y: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l15 3s infinite;
}

@keyframes swap-l15 {
    0% {
        background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    14.28% {
        background-size: 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    28.57% {
        background-size: 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    42.85% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    57.14% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0
    }

    71.43% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0
    }

    85.71% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0
    }

    100% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
    }
}

.swap-text-loader-l16 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    background-position-y: 100%, 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l16 2s linear infinite alternate;
}

@keyframes swap-l16 {
    0% {
        background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    14.28% {
        background-size: 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    28.57% {
        background-size: 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    42.85% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    57.14% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0, 1ch 0
    }

    71.43% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0, 1ch 0
    }

    85.71% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 0
    }

    100% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
    }
}

.swap-text-loader-l17 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l17-0 1s linear infinite alternate, swap-l17-1 2s linear infinite;
}

@keyframes swap-l17-0 {
    0% {
        background-size: 1ch 0
    }

    100% {
        background-size: 1ch 100%
    }
}

@keyframes swap-l17-1 {

    0%,
    50% {
        background-position-y: 100%, 0
    }

    50.01%,
    to {
        background-position-y: 0, 100%
    }
}

.swap-text-loader-l18 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l18-0 2s linear infinite alternate, swap-l18-1 4s linear infinite;
}

@keyframes swap-l18-0 {
    0% {
        background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    14.28% {
        background-size: 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    28.57% {
        background-size: 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    42.85% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0
    }

    57.14% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 0
    }

    71.43% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0
    }

    85.71% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%
    }

    100% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
    }
}

@keyframes swap-l18-1 {

    0%,
    50% {
        background-position-y: 100%
    }

    50.01%,
    to {
        background-position-y: 0
    }
}

.swap-text-loader-l19 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    background-position-y: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l19 1.5s linear infinite alternate;
}

@keyframes swap-l19 {
    0% {
        background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    25% {
        background-size: 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0, 1ch 50%, 1ch 100%
    }

    50% {
        background-size: 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 50%, 1ch 100%, 1ch 100%
    }

    75% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 100%
    }

    to {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
    }
}

.swap-text-loader-l20 {
    --g: conic-gradient(var(--loader-color, #000) 0 0) no-repeat;
    background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
    -webkit-background-clip: text;
    background-clip: text;
    animation: swap-l20-0 calc(var(--swap-anim-speed, 2000ms) * 0.75) linear infinite alternate, swap-l20-1 calc(var(--swap-anim-speed, 2000ms) * 1.5) linear infinite;
}

@keyframes swap-l20-0 {
    0% {
        background-size: 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0, 1ch 0
    }

    25% {
        background-size: 1ch 100%, 1ch 50%, 1ch 0, 1ch 0, 1ch 0, 1ch 50%, 1ch 100%
    }

    50% {
        background-size: 1ch 100%, 1ch 100%, 1ch 50%, 1ch 0, 1ch 50%, 1ch 100%, 1ch 100%
    }

    75% {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 50%, 1ch 100%, 1ch 100%, 1ch 100%
    }

    to {
        background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
    }
}

@keyframes swap-l20-1 {

    0%,
    50% {
        background-position-y: 100%
    }

    50.01%,
    to {
        background-position-y: 0
    }
}