/*
|--------------------------------------------------------------------------
| JOFAS WRIGHT TECHNOLOGIES LIMITED
| SIGNATURE WEBSITE PRELOADER
|--------------------------------------------------------------------------
|
| File:
| assets/css/preloader.css
|
| Purpose:
| - Premium opening experience
| - 1–100 loading counter
| - Industrial progress line
| - Handwriting reveal
| - Signature brand reveal
| - Cinematic exit
| - Responsive behaviour
| - Reduced-motion accessibility
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. PRELOADER ROOT
   ========================================================================== */

.jw-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    width: 100%;
    height: 100dvh;
    min-height: 100vh;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(11, 34, 96, 0.42) 0%,
            rgba(7, 24, 63, 0.18) 32%,
            rgba(3, 10, 25, 0.96) 74%
        ),
        #030914;

    color: #ffffff;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    transition:
        opacity 0.65s cubic-bezier(0.77, 0, 0.175, 1),
        visibility 0s linear 0s,
        transform 0.95s cubic-bezier(0.77, 0, 0.175, 1);

    isolation: isolate;
}


/* ==========================================================================
   02. PRELOADER EXIT STATE
   ========================================================================== */

.jw-preloader.is-complete {
    opacity: 0;
    visibility: hidden;

    transform: translateY(-100%);

    transition:
        opacity 0.45s ease 0.35s,
        visibility 0s linear 0.9s,
        transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}


/* ==========================================================================
   03. AMBIENT BACKGROUND
   ========================================================================== */

.jw-preloader__background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.025) 50%,
            transparent 100%
        );

    opacity: 0.7;
}


/*
|--------------------------------------------------------------------------
| Technical vertical lines
|--------------------------------------------------------------------------
*/

.jw-preloader__background::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            transparent 0,
            transparent calc(50% - 420px),
            rgba(255, 255, 255, 0.035) calc(50% - 420px),
            rgba(255, 255, 255, 0.035) calc(50% - 419px),
            transparent calc(50% - 419px),
            transparent calc(50% + 420px),
            rgba(255, 255, 255, 0.035) calc(50% + 420px),
            rgba(255, 255, 255, 0.035) calc(50% + 421px),
            transparent calc(50% + 421px)
        );

    opacity: 0.45;
}


/*
|--------------------------------------------------------------------------
| Atmospheric glow
|--------------------------------------------------------------------------
*/

.jw-preloader__background::after {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(11, 34, 96, 0.22) 0%,
            rgba(11, 34, 96, 0.08) 38%,
            transparent 72%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==========================================================================
   04. CONTENT WRAPPER
   ========================================================================== */

.jw-preloader__content {
    position: relative;

    width: min(860px, calc(100% - 48px));

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    z-index: 2;
}


/* ==========================================================================
   05. TOP SYSTEM LABEL
   ========================================================================== */

.jw-preloader__system {
    position: absolute;

    top: 30px;
    left: 30px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255, 255, 255, 0.45);

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 0.61rem;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Orange status indicator
|--------------------------------------------------------------------------
*/

.jw-preloader__system::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #ff5e14;

    box-shadow:
        0 0 0 4px rgba(255, 94, 20, 0.08),
        0 0 14px rgba(255, 94, 20, 0.45);

    animation:
        jwPreloaderPulse 1.4s ease-in-out infinite;
}


/* ==========================================================================
   06. COUNTER
   ========================================================================== */

.jw-preloader__counter {
    position: relative;

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

    line-height: 0.8;

    margin-bottom: 30px;
}


/*
|--------------------------------------------------------------------------
| Large number
|--------------------------------------------------------------------------
*/

#jwLoaderCounter {
    display: block;

    min-width: 3ch;

    color: #ffffff;

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: clamp(6rem, 15vw, 11rem);

    font-weight: 800;

    letter-spacing: -0.075em;

    font-variant-numeric: tabular-nums;

    text-shadow:
        0 0 40px rgba(255, 255, 255, 0.045);

    line-height: 0.78;
}


/*
|--------------------------------------------------------------------------
| Percentage symbol
|--------------------------------------------------------------------------
*/

.jw-preloader__counter small {
    margin-left: 13px;
    margin-bottom: 10px;

    color: #ff5e14;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

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

    font-weight: 800;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   07. COUNTER MICRO LABEL
   ========================================================================== */

.jw-preloader__counter-label {
    position: absolute;

    right: 0;
    bottom: -26px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.56rem;
    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================================
   08. PROGRESS TRACK
   ========================================================================== */

.jw-preloader__progress {
    position: relative;

    width: min(520px, 100%);
    height: 2px;

    margin-bottom: 56px;

    overflow: visible;

    background: rgba(255, 255, 255, 0.12);
}


/*
|--------------------------------------------------------------------------
| Progress fill
|--------------------------------------------------------------------------
*/

.jw-preloader__progress span {
    position: absolute;

    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #0b2260 0%,
            #4871c6 72%,
            #ff5e14 100%
        );

    box-shadow:
        0 0 15px rgba(255, 94, 20, 0.25);

    transition:
        width 0.08s linear;
}


/*
|--------------------------------------------------------------------------
| Progress endpoint
|--------------------------------------------------------------------------
*/

.jw-preloader__progress span::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 7px;
    height: 7px;

    transform: translate(50%, -50%);

    border-radius: 50%;

    background: #ff5e14;

    box-shadow:
        0 0 0 4px rgba(255, 94, 20, 0.08),
        0 0 15px rgba(255, 94, 20, 0.45);
}


/* ==========================================================================
   09. WELCOME AREA
   ========================================================================== */

.jw-preloader__welcome {
    position: relative;

    min-height: 76px;

    width: 100%;

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

    padding: 0 20px;

    color: #ffffff;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size: clamp(1.5rem, 3.5vw, 2.7rem);

    font-weight: 500;

    letter-spacing: -0.02em;

    line-height: 1.25;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Handwriting text
|--------------------------------------------------------------------------
*/

#jwWelcomeText {
    display: inline-block;

    min-height: 1.25em;

    opacity: 0.98;
}


/* ==========================================================================
   10. WRITING CURSOR
   ========================================================================== */

.jw-writing-cursor {
    display: inline-block;

    width: 2px;
    height: 1.25em;

    margin-left: 7px;

    vertical-align: middle;

    background: #ff5e14;

    box-shadow:
        0 0 10px rgba(255, 94, 20, 0.4);

    animation:
        jwTypingCursor 0.75s steps(1, end) infinite;
}


/* ==========================================================================
   11. HAND POINTER
   ========================================================================== */

.jw-writing-hand {
    position: absolute;

    left: 50%;

    top: calc(50% + 14px);

    width: 38px;
    height: 38px;

    transform:
        translateX(130px)
        rotate(-12deg);

    opacity: 0;

    pointer-events: none;

    z-index: 4;

    transition:
        opacity 0.25s ease,
        transform 0.12s linear;
}


/*
|--------------------------------------------------------------------------
| Hand shape
|
| Constructed with CSS rather than an external asset so the preloader
| remains lightweight and does not depend on a third-party image.
|--------------------------------------------------------------------------
*/

.jw-writing-hand::before {
    content: "✎";

    position: absolute;

    inset: 0;

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

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 28px;

    line-height: 1;

    filter:
        drop-shadow(
            0 5px 10px rgba(0, 0, 0, 0.35)
        );
}


/*
|--------------------------------------------------------------------------
| Active hand
|--------------------------------------------------------------------------
*/

.jw-writing-hand.is-writing {
    opacity: 0.95;
}


/* ==========================================================================
   12. BRAND IDENTITY
   ========================================================================== */

.jw-preloader__brand {
    margin-top: 28px;

    color: rgba(255, 255, 255, 0.72);

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.34em;

    line-height: 1.5;

    text-align: center;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.jw-preloader__brand span {
    display: block;

    margin-top: 5px;

    color: rgba(255, 255, 255, 0.36);

    font-size: 0.58rem;

    letter-spacing: 0.25em;
}


.jw-preloader__brand.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================================
   13. BOTTOM TECHNICAL INFORMATION
   ========================================================================== */

.jw-preloader__footer {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

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

    color: rgba(255, 255, 255, 0.28);

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 0.54rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.jw-preloader__footer span:last-child {
    color: rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   14. CORNER MARKS
   ========================================================================== */

.jw-preloader__corner {
    position: absolute;

    width: 38px;
    height: 38px;

    opacity: 0.45;

    pointer-events: none;
}


.jw-preloader__corner::before,
.jw-preloader__corner::after {
    content: "";

    position: absolute;

    background: rgba(255, 255, 255, 0.18);
}


.jw-preloader__corner::before {
    width: 100%;
    height: 1px;
}


.jw-preloader__corner::after {
    width: 1px;
    height: 100%;
}


.jw-preloader__corner--tl {
    top: 30px;
    right: 30px;
}


.jw-preloader__corner--tr {
    top: 30px;
    left: 30px;

    transform: rotate(90deg);
}


.jw-preloader__corner--bl {
    bottom: 30px;
    right: 30px;

    transform: rotate(-90deg);
}


.jw-preloader__corner--br {
    bottom: 30px;
    left: 30px;

    transform: rotate(180deg);
}


/* ==========================================================================
   15. PAGE LOCK
   ========================================================================== */

body.jw-preloader-active {
    overflow: hidden;
}


/* ==========================================================================
   16. CURSOR ANIMATION
   ========================================================================== */

@keyframes jwTypingCursor {

    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}


/* ==========================================================================
   17. STATUS PULSE
   ========================================================================== */

@keyframes jwPreloaderPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}


/* ==========================================================================
   18. TABLET
   ========================================================================== */

@media (max-width: 767.98px) {

    .jw-preloader__content {
        width: min(680px, calc(100% - 36px));
    }

    .jw-preloader__progress {
        width: min(440px, 100%);
        margin-bottom: 45px;
    }

    .jw-preloader__welcome {
        font-size: clamp(1.35rem, 5vw, 2rem);
    }

    .jw-preloader__system {
        top: 22px;
        left: 22px;
    }

    .jw-preloader__footer {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .jw-preloader__corner--tl {
        top: 22px;
        right: 22px;
    }

    .jw-preloader__corner--tr {
        top: 22px;
        left: 22px;
    }

    .jw-preloader__corner--bl {
        bottom: 22px;
        right: 22px;
    }

    .jw-preloader__corner--br {
        bottom: 22px;
        left: 22px;
    }

    .jw-writing-hand {
        transform:
            translateX(100px)
            rotate(-12deg);
    }
}


/* ==========================================================================
   19. MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .jw-preloader {
        background:
            radial-gradient(
                circle at 50% 42%,
                rgba(11, 34, 96, 0.35) 0%,
                rgba(7, 24, 63, 0.12) 34%,
                rgba(3, 10, 25, 0.98) 74%
            ),
            #030914;
    }

    .jw-preloader__content {
        width: calc(100% - 32px);
    }

    #jwLoaderCounter {
        font-size: clamp(5.2rem, 25vw, 8rem);
    }

    .jw-preloader__counter {
        margin-bottom: 24px;
    }

    .jw-preloader__counter small {
        margin-left: 8px;
        margin-bottom: 7px;
    }

    .jw-preloader__counter-label {
        right: 1px;
        bottom: -23px;

        font-size: 0.48rem;
    }

    .jw-preloader__progress {
        width: calc(100% - 12px);
        margin-bottom: 38px;
    }

    .jw-preloader__welcome {
        min-height: 64px;

        padding: 0;

        font-size: clamp(1.25rem, 6vw, 1.7rem);

        line-height: 1.3;
    }

    .jw-preloader__brand {
        margin-top: 21px;

        font-size: 0.63rem;

        letter-spacing: 0.23em;
    }

    .jw-preloader__brand span {
        font-size: 0.5rem;

        letter-spacing: 0.17em;
    }

    .jw-preloader__system {
        top: 17px;
        left: 17px;

        font-size: 0.5rem;

        letter-spacing: 0.15em;
    }

    .jw-preloader__footer {
        left: 17px;
        right: 17px;
        bottom: 17px;

        font-size: 0.44rem;

        letter-spacing: 0.13em;
    }

    .jw-preloader__footer span:last-child {
        display: none;
    }

    .jw-preloader__corner {
        width: 25px;
        height: 25px;
    }

    .jw-preloader__corner--tl {
        top: 17px;
        right: 17px;
    }

    .jw-preloader__corner--tr {
        top: 17px;
        left: 17px;
    }

    .jw-preloader__corner--bl {
        bottom: 17px;
        right: 17px;
    }

    .jw-preloader__corner--br {
        bottom: 17px;
        left: 17px;
    }

    .jw-writing-hand {
        display: none;
    }
}


/* ==========================================================================
   20. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    #jwLoaderCounter {
        font-size: 5rem;
    }

    .jw-preloader__progress {
        margin-bottom: 31px;
    }

    .jw-preloader__welcome {
        font-size: 1.15rem;
    }

    .jw-preloader__brand {
        margin-top: 17px;
    }
}


/* ==========================================================================
   21. REDUCED MOTION
   ==========================================================================
|
| Respects the visitor's operating-system motion preference.
|
| W3C recommends allowing non-essential animation to be disabled when
| prefers-reduced-motion is enabled.
|
|--------------------------------------------------------------------------
*/

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

    .jw-preloader,
    .jw-preloader *,
    .jw-preloader *::before,
    .jw-preloader *::after {
        animation: none !important;

        transition:
            opacity 0.01ms linear !important;
    }

    .jw-preloader__background::after {
        filter: none;
    }

    .jw-writing-cursor {
        opacity: 1;
    }

    .jw-preloader.is-complete {
        transform: translateY(-100%);
    }
}