/*
 * 마사지엠 페이지 진입 파도형 로딩 화면
 */
.msgm-page-loader {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition:
        opacity .36s ease,
        visibility .36s ease;
    isolation: isolate;
}

.msgm-page-loader::before,
.msgm-page-loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.msgm-page-loader::before {
    top: -22vw;
    right: -14vw;
    width: min(62vw, 820px);
    height: min(62vw, 820px);
    background:
        radial-gradient(
            circle,
            rgba(147, 25, 30, .09) 0%,
            rgba(147, 25, 30, 0) 68%
        );
}

.msgm-page-loader::after {
    bottom: -26vw;
    left: -18vw;
    width: min(72vw, 900px);
    height: min(72vw, 900px);
    background:
        radial-gradient(
            circle,
            rgba(178, 132, 85, .11) 0%,
            rgba(178, 132, 85, 0) 70%
        );
}

.msgm-page-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.msgm-page-loader.is-removed {
    display: none !important;
}

.msgm-page-loader__inner {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(390px, calc(100vw - 48px));
    justify-items: center;
    text-align: center;
}

.msgm-page-loader__brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.msgm-page-loader__mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(143, 25, 30, .19);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #f8ece5 100%
        );
    color: #8f191e;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 31px;
    font-weight: 700;
    font-style: italic;
    box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, .82),
        0 12px 30px rgba(82, 42, 25, .10);
}

.msgm-page-loader__brand > div {
    text-align: left;
}

.msgm-page-loader__brand strong,
.msgm-page-loader__brand small {
    display: block;
}

.msgm-page-loader__brand strong {
    color: #231f1d;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.055em;
}

.msgm-page-loader__brand small {
    margin-top: 5px;
    color: #9a7657;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
}

.msgm-page-loader__wave {
    width: 280px;
    max-width: 100%;
    margin-top: 24px;
    overflow: hidden;
}

.msgm-page-loader__wave svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wave-line {
    fill: none;
    stroke-linecap: round;
    stroke-width: 4;
    stroke-dasharray: 18 11;
    animation: msgmWaveFlow 1.5s linear infinite;
}

.wave-line--one {
    stroke: #8f191e;
    opacity: .90;
}

.wave-line--two {
    stroke: #b98357;
    opacity: .72;
    animation-duration: 1.85s;
    animation-direction: reverse;
}

.wave-line--three {
    stroke: #d6b998;
    opacity: .58;
    animation-duration: 2.2s;
}

.msgm-page-loader__inner > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px 0 0;
    color: #80746b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.msgm-page-loader__dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.msgm-page-loader__dots i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8f191e;
    animation: msgmLoaderDot .95s ease-in-out infinite;
}

.msgm-page-loader__dots i:nth-child(2) {
    animation-delay: .14s;
}

.msgm-page-loader__dots i:nth-child(3) {
    animation-delay: .28s;
}

@keyframes msgmWaveFlow {
    to {
        stroke-dashoffset: -58;
    }
}

@keyframes msgmLoaderDot {
    0%,
    70%,
    100% {
        opacity: .25;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (max-width: 640px) {
    .msgm-page-loader__inner {
        width: min(320px, calc(100vw - 36px));
    }

    .msgm-page-loader__mark {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    .msgm-page-loader__brand strong {
        font-size: 22px;
    }

    .msgm-page-loader__wave {
        width: 245px;
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave-line,
    .msgm-page-loader__dots i {
        animation: none;
    }

    .msgm-page-loader {
        transition-duration: .15s;
    }
}