/**
 * Preloader Styles - Custom Agency
 * Pixel-perfect match to React PreloaderII.jsx & preloaderII.css
 */
.preloader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--base-100, #181717);
}

/* This class is applied before the loader markup is painted on return visits. */
html.iter8-preloader-seen .preloader-container {
    display: none !important;
}

.preloader-progress,
.preloader-mask,
.preloader-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    height: 100vh;
    pointer-events: none;
}

.preloader-progress {
    background-color: var(--base-200, #292725);
    z-index: 1;
    will-change: transform, opacity;
}

.preloader-progress-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 55%;
    height: 100%;
    background-color: var(--base-300, #f5f5f5);
    transform-origin: left;
    will-change: transform;
}

.preloader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    mix-blend-mode: difference;
    z-index: 2;
}

.preloader-logo h1 {
    position: relative;
    color: var(--base-300, #f5f5f5);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    overflow: hidden;
}

.preloader-mask {
    background-color: var(--base-100, #181717);
    -webkit-mask:
        linear-gradient(var(--base-300, #f5f5f5), var(--base-300, #f5f5f5)),
        url("data:image/svg+xml,%3csvg%20width='718'%20height='263'%20viewBox='0%200%20718%20263'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_1_2)'%3e%3crect%20x='4'%20width='710'%20height='255'%20rx='127.5'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_1_2'%20x='0'%20y='0'%20width='718'%20height='263'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='4'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_2'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_2'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") center/40% no-repeat;
    mask:
        linear-gradient(var(--base-300, #f5f5f5), var(--base-300, #f5f5f5)),
        url("data:image/svg+xml,%3csvg%20width='718'%20height='263'%20viewBox='0%200%20718%20263'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_1_2)'%3e%3crect%20x='4'%20width='710'%20height='255'%20rx='127.5'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_1_2'%20x='0'%20y='0'%20width='718'%20height='263'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='4'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_2'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_2'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") center/40% no-repeat;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    will-change: transform;
    z-index: 1;
}

.preloader-content {
    z-index: 2;
}

.preloader-footer {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    max-width: 480px;
    text-align: center;
    overflow: hidden;
}

.preloader-footer p {
    color: var(--base-300, #f5f5f5);
    opacity: 0.7;
    margin: 0;
    line-height: 1.5;
    font-size: 0.875rem;
}

.line,
.char {
    position: relative;
    display: inline-block;
    padding-bottom: 0.2rem;
    margin-bottom: -0.2rem;
    will-change: transform;
}

@media (max-width: 800px) {
    .preloader-progress-bar {
        left: 0%;
        width: 100%;
        transform: translateX(0%) scaleX(0);
    }

    .preloader-logo h1 {
        font-size: 2.25rem;
    }

    .preloader-mask {
        -webkit-mask:
            linear-gradient(var(--base-300, #f5f5f5), var(--base-300, #f5f5f5)),
            url("data:image/svg+xml,%3csvg%20width='718'%20height='263'%20viewBox='0%200%20718%20263'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_1_2)'%3e%3crect%20x='4'%20width='710'%20height='255'%20rx='127.5'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_1_2'%20x='0'%20y='0'%20width='718'%20height='263'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='4'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_2'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_2'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") center/90% no-repeat;
        mask:
            linear-gradient(var(--base-300, #f5f5f5), var(--base-300, #f5f5f5)),
            url("data:image/svg+xml,%3csvg%20width='718'%20height='263'%20viewBox='0%200%20718%20263'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_1_2)'%3e%3crect%20x='4'%20width='710'%20height='255'%20rx='127.5'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_1_2'%20x='0'%20y='0'%20width='718'%20height='263'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='4'/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_2'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_2'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") center/90% no-repeat;
        -webkit-mask-composite: source-out;
        mask-composite: subtract;
    }

    .preloader-footer {
        width: 85%;
        bottom: 2.5rem;
    }
}