/* ==============================================================
   MOMIN HOSPITAL
   CINEMATIC SPLASH / LOADING SCREEN
   Large Logo + Two Large Rings
============================================================== */


/* ==============================================================
   BODY
============================================================== */

.site-body.is-site-loading {
    overflow: hidden;
}


/* ==============================================================
   MAIN SPLASH
============================================================== */

.site-splash {
    position: fixed;
    inset: 0;

    z-index: 2147483000;

    display: grid;
    place-items: center;

    min-height: 100dvh;

    overflow: hidden;
    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(53, 119, 255, .30),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #03112e 0%,
            #082c72 48%,
            #071d4a 100%
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        visibility .85s;

    /*
     * Failsafe:
     * اگر JavaScript مشکل داشت،
     * Loader بعد از 5 ثانیه بسته می‌شود.
     */
    animation:
        momin-splash-css-failsafe
        .85s
        5s
        forwards;
}


.site-splash.is-leaving {
    animation: none !important;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* ==============================================================
   BACKGROUND
============================================================== */

.site-splash__background,
.site-splash__grid {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


.site-splash__grid {
    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        radial-gradient(
            circle at center,
            #000 10%,
            transparent 74%
        );

    animation:
        splash-grid-drift
        12s
        linear
        infinite;
}


/* ==============================================================
   BACKGROUND LIGHT ORBS
============================================================== */

.site-splash__orb {
    position: absolute;

    width: min(52vw, 760px);

    aspect-ratio: 1;

    border-radius: 50%;

    filter: blur(25px);

    opacity: .24;
}


.site-splash__orb--one {
    top: -30%;
    inset-inline-start: -18%;

    background: #ef172b;

    animation:
        splash-orb-one
        7s
        ease-in-out
        infinite
        alternate;
}


.site-splash__orb--two {
    right: -22%;
    bottom: -38%;

    background: #1f75ff;

    animation:
        splash-orb-two
        8s
        ease-in-out
        infinite
        alternate;
}


/* ==============================================================
   CONTENT
============================================================== */

.site-splash__content {
    position: relative;

    z-index: 2;

    width: min(94vw, 760px);

    padding: 25px 24px;

    text-align: center;
}


/* ==============================================================
   LARGE LOGO STAGE
============================================================== */

.site-splash__logo-stage {
    position: relative;

    /*
     * کل فضای لوگو و حلقه‌ها
     */
    width: clamp(340px, 43vw, 450px);

    aspect-ratio: 1;

    margin:
        0
        auto
        25px;

    display: grid;
    place-items: center;

    animation:
        splash-stage-enter
        1.15s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


/* ==============================================================
   LOGO CARD
============================================================== */

.site-splash__logo-card {
    position: relative;

    z-index: 3;

    /*
     * لوگو بزرگ است،
     * اما هر دو حلقه هنوز از آن بزرگ‌تر هستند.
     */
    width: 72%;
    height: 72%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .48);

    border-radius: 28px;

    background:
        rgba(255, 255, 255, .99);

    box-shadow:
        0 32px 75px rgba(0, 0, 0, .28),
        0 0 45px rgba(62, 126, 255, .16),
        0 0 0 7px rgba(255, 255, 255, .045),
        inset 0 1px 0 rgba(255, 255, 255, .95);

    animation:
        splash-logo-settle
        1.15s
        .15s
        cubic-bezier(.16, 1, .3, 1)
        both,

        splash-logo-float
        3.4s
        1.4s
        ease-in-out
        infinite;
}


/* ==============================================================
   LOGO IMAGE
============================================================== */

.site-splash__logo-card img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    /*
     * لوگو هیچ وقت بریده نمی‌شود.
     */
    object-fit: contain;

    object-position: center;

    /*
     * خود تصویر کمی بزرگ‌تر نمایش داده می‌شود.
     */
    transform: scale(1.08);

    filter:
        drop-shadow(
            0 8px 15px
            rgba(8, 48, 137, .12)
        );
}


/* ==============================================================
   GLOW / HALO
============================================================== */

.site-splash__halo {
    position: absolute;

    inset: 5%;

    z-index: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .32) 0%,
            rgba(53, 119, 255, .15) 42%,
            rgba(53, 119, 255, .05) 58%,
            transparent 72%
        );

    filter: blur(4px);

    animation:
        splash-halo
        2.3s
        ease-in-out
        infinite;
}


/* ==============================================================
   TWO LARGE RINGS
============================================================== */

.site-splash__orbit {
    position: absolute;

    z-index: 2;

    border-radius: 50%;

    pointer-events: none;
}


/* ==============================================================
   OUTER RING
   100% of stage
============================================================== */

.site-splash__orbit--outer {
    inset: 0;

    border:
        2px solid
        rgba(255, 255, 255, .30);

    box-shadow:
        inset 0 0 25px
        rgba(255, 255, 255, .025);

    animation:
        splash-spin
        5.5s
        linear
        infinite;
}


/* ==============================================================
   INNER RING
   Still bigger than the logo
============================================================== */

.site-splash__orbit--inner {
    inset: 8%;

    border:
        2px dashed
        rgba(239, 23, 43, .58);

    box-shadow:
        0 0 20px
        rgba(239, 23, 43, .06);

    animation:
        splash-spin-reverse
        7s
        linear
        infinite;
}


/* ==============================================================
   GLOWING DOTS ON RINGS
============================================================== */

.site-splash__orbit::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -6px;

    width: 12px;
    height: 12px;

    margin-top: -6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 20px rgba(255, 255, 255, .95),
        0 0 32px rgba(99, 161, 255, .70);
}


.site-splash__orbit--inner::before {
    background: #ef172b;

    box-shadow:
        0 0 8px rgba(239, 23, 43, 1),
        0 0 20px rgba(239, 23, 43, .75);
}


/* ==============================================================
   EYEBROW
============================================================== */

.site-splash__eyebrow {
    margin:
        0
        0
        8px;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        clamp(.70rem, 1.3vw, .82rem);

    font-weight: 800;

    letter-spacing: .34em;

    animation:
        splash-copy-enter
        .85s
        .65s
        both;
}


/* ==============================================================
   TITLE
============================================================== */

.site-splash__title {
    margin: 0;

    color: #ffffff;

    font-family: inherit;

    font-size:
        clamp(1.55rem, 4.4vw, 2.75rem);

    font-weight: 800;

    line-height: 1.35;

    text-shadow:
        0 14px 35px
        rgba(0, 0, 0, .24);

    animation:
        splash-copy-enter
        .9s
        .82s
        both;
}


/* ==============================================================
   MESSAGE
============================================================== */

.site-splash__message {
    margin:
        10px
        0
        24px;

    color:
        rgba(255, 255, 255, .76);

    font-size:
        clamp(.88rem, 2vw, 1rem);

    animation:
        splash-copy-enter
        .9s
        1s
        both;
}


/* ==============================================================
   PROGRESS BAR
============================================================== */

.site-splash__progress {
    position: relative;

    width:
        min(340px, 72vw);

    height: 4px;

    margin:
        0
        auto;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, .18);

    animation:
        splash-copy-enter
        .75s
        1.08s
        both;
}


.site-splash__progress span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #63a1ff 55%,
            #ef172b 100%
        );

    box-shadow:
        0 0 20px
        rgba(99, 161, 255, .75);

    transform-origin:
        left center;

    animation:
        splash-progress
        5s
        linear
        both;
}


[dir="rtl"] .site-splash__progress span {
    transform-origin: right center;
}


/* ==============================================================
   LOADING DOTS
============================================================== */

.site-splash__pulse-dots {
    display: flex;

    justify-content: center;

    gap: 7px;

    margin-top: 15px;
}


.site-splash__pulse-dots i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .78);

    animation:
        splash-dot
        1.1s
        ease-in-out
        infinite;
}


.site-splash__pulse-dots i:nth-child(2) {
    animation-delay: .16s;
}


.site-splash__pulse-dots i:nth-child(3) {
    animation-delay: .32s;
}


/* ==============================================================
   SAFE WEBSITE REVEAL
============================================================== */

.site-body.is-site-loading
> :not(.site-splash):not(noscript) {

    opacity: 1 !important;
    visibility: visible !important;
}


.site-body.site-ready
> :not(.site-splash):not(noscript) {

    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ==============================================================
   ANIMATIONS
============================================================== */

@keyframes splash-stage-enter {

    from {
        opacity: 0;

        transform:
            scale(.72)
            translateY(22px);

        filter:
            blur(7px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes splash-logo-settle {

    from {
        opacity: 0;

        transform:
            scale(.74)
            translateY(15px);

        filter:
            blur(5px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes splash-logo-float {

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

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


@keyframes splash-halo {

    0%,
    100% {
        opacity: .55;

        transform:
            scale(.94);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.08);
    }
}


@keyframes splash-spin {

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes splash-spin-reverse {

    to {
        transform:
            rotate(-360deg);
    }
}


@keyframes splash-copy-enter {

    from {
        opacity: 0;

        transform:
            translateY(18px);

        filter:
            blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes splash-progress {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }
}


@keyframes splash-dot {

    0%,
    100% {
        opacity: .32;

        transform:
            translateY(0)
            scale(.8);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-4px)
            scale(1.15);
    }
}


@keyframes splash-grid-drift {

    to {
        transform:
            translate3d(
                58px,
                58px,
                0
            );
    }
}


@keyframes splash-orb-one {

    to {
        transform:
            translate(
                12vw,
                8vh
            )
            scale(1.15);
    }
}


@keyframes splash-orb-two {

    to {
        transform:
            translate(
                -10vw,
                -6vh
            )
            scale(.86);
    }
}


/* ==============================================================
   FAILSAFE
============================================================== */

@keyframes momin-splash-css-failsafe {

    0% {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

    100% {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }
}


/* ==============================================================
   TABLET
============================================================== */

@media (max-width: 900px) {

    .site-splash__logo-stage {
        width: clamp(320px, 55vw, 400px);
    }

}


/* ==============================================================
   MOBILE
============================================================== */

@media (max-width: 600px) {

    .site-splash__content {
        width: 100%;

        padding:
            20px
            16px;
    }


    /*
     * حلقه‌ها در موبایل هم بزرگ باقی می‌مانند.
     */
    .site-splash__logo-stage {
        width: 320px;
        max-width: 92vw;

        margin-bottom: 22px;
    }


    /*
     * لوگوی موبایل
     */
    .site-splash__logo-card {
        width: 72%;
        height: 72%;

        padding: 6px;

        border-radius: 24px;
    }


    .site-splash__logo-card img {
        transform:
            scale(1.07);
    }


    /*
     * حلقه داخلی همچنان از لوگو
     * فاصله مناسب دارد.
     */
    .site-splash__orbit--inner {
        inset: 8%;
    }


    .site-splash__eyebrow {
        letter-spacing: .23em;
    }


    .site-splash__title {
        font-size:
            clamp(1.45rem, 7vw, 2rem);
    }


    .site-splash__message {
        margin-bottom: 20px;
    }
}


/* ==============================================================
   VERY SMALL MOBILE
============================================================== */

@media (max-width: 380px) {

    .site-splash__logo-stage {
        width: 290px;

        max-width: 90vw;
    }


    .site-splash__logo-card {
        width: 72%;
        height: 72%;

        border-radius: 22px;
    }

}


/* ==============================================================
   REDUCED MOTION
============================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-splash *,
    .site-splash *::before,
    .site-splash *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }


    .site-splash__progress span {

        animation-duration:
            5s !important;
    }
}