/*--------------------------------------------------------------
    Airplane Preloader — Premium
    Dark gradient stage, DAWLA logo (fade/scale-in, glow, shimmer
    sweep), airplane wobble -> takeoff, thin progress line, then
    the whole overlay wipes away.
--------------------------------------------------------------*/

:root {
    --lap-plane-color: #c9a24d;
    --lap-bg-color: #0d0d10;
    --lap-size: 64px;
    --lap-logo-width: 190px;
	 --lap-orbit-radius: 24px;
    --lap-orbit-speed: 4.5s;
}

.lap-pre-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    background-color: var(--lap-bg-color); /* fallback for browsers without color-mix() */
    background:
        radial-gradient( circle at 50% 38%, color-mix( in srgb, var(--lap-bg-color) 100%, white 6% ) 0%, var(--lap-bg-color) 100% );
    transition:
        opacity .8s ease,
        visibility .8s ease;
	backface-visibility: hidden;
    will-change: transform;
}
.lap-pre-loader.lap__fadeout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.lap-loader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    height: 100%;
    padding: 25px;
    backface-visibility: hidden;
    will-change: transform;
}

/*----*****---- << Logo >> ----*****----*/

.lap-logo-wrap {
    position: relative;
    width: var(--lap-logo-width);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lap-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform: scale(.86) translateY(14px);
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    animation: lapLogoIn 1000ms cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: 150ms;
}

.lap-logo-glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 140%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.7);
    border-radius: 50%;
    background: var(--lap-plane-color); /* fallback for browsers without color-mix() */
    background: radial-gradient( circle, color-mix( in srgb, var(--lap-plane-color) 55%, transparent ) 0%, transparent 70% );
    filter: blur(18px);
    opacity: 0;
    animation: lapGlowIn 1000ms ease forwards, lapGlowPulse 2600ms ease-in-out 1000ms infinite;
}

.lap-shimmer {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 75deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58% );
    background-size: 260% 260%;
    background-position: -160% 0;
    -webkit-mask-image: var(--lap-logo-url);
    mask-image: var(--lap-logo-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0;
    animation: lapShimmerFade 1000ms ease forwards, lapShimmerSweep 2600ms ease-in-out 1200ms infinite;
}

@keyframes lapLogoIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes lapGlowIn {
    to { opacity: 1; }
}

@keyframes lapGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(.7); opacity: .55; }
    50% { transform: translate(-50%, -50%) scale(.86); opacity: .9; }
}

@keyframes lapShimmerFade {
    to { opacity: 1; }
}

@keyframes lapShimmerSweep {
    0% { background-position: -160% 0; }
    55%, 100% { background-position: 160% 0; }
}

/* Elegant logo exit once takeoff starts */
.lap-loader-inner.lap__start .lap-logo-wrap {
    animation: lapLogoOut 900ms cubic-bezier(.4,0,1,1) forwards;
}

@keyframes lapLogoOut {
    to { opacity: 0; transform: scale(1.06); filter: blur(2px); }
}
/*----*****---- << Orbit (plane circles the logo) >> ----*****----*/

.lap-orbit {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: calc(var(--lap-logo-width) + var(--lap-orbit-radius) * 2);
    aspect-ratio: 1;
    translate: -50% -50%;
    rotate: 0deg;
    animation-name: lapOrbitSpin;
    animation-duration: var(--lap-orbit-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.lap-orbit-plane {
    position: absolute;
    bottom: 0;
    translate: -50% 0;
    rotate: 30deg;
    animation-name: lapOrbitCounter;
    animation-duration: var(--lap-orbit-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes lapOrbitSpin {
    to { rotate: -360deg; }
}



/* Freeze the orbit the moment takeoff begins — the counter-rotation
   cancels the orbit's rotation at every instant, so whichever moment
   we pause on, the plane below is left facing the same way and
   flies off in a consistent direction. */
.lap-loader-inner.lap__start .lap-orbit,
.lap-loader-inner.lap__start .lap-orbit-plane {
    animation-play-state: paused;
}
/*----*****---- << Loader Icon (Wobble phase) >> ----*****----*/

.lap-loader-icon {
    transform-origin: top;
    backface-visibility: hidden;
    will-change: transform;
    margin: 0;
    width: min(var(--lap-size), 60vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 1;
    animation: lapWobble 3s ease-in-out infinite;
}

@keyframes lapPlaneIn {
    to { opacity: 1; }
}

/*----*****---- << Takeoff phase (triggered by .lap__start) >> ----*****----*/

.lap-loader-inner.lap__start .lap-loader-icon {
    animation: lapTakeoff 2.5s ease-in-out forwards;
}

.lap-loader-icon .lap-planebody,
.lap-loader-icon .lap-planebody * {
    background: var(--lap-plane-color);
    backface-visibility: hidden;
    will-change: transform;
}

.lap-loader-icon .lap-planebody {
    position: relative;
    width: var(--lap-size);
    height: auto;
    aspect-ratio: 7/1;
    border-bottom-left-radius: 50% 100%;
    border-top-right-radius: 25% 90%;
    border-bottom-right-radius: 20% 20%;
    backface-visibility: hidden;
    will-change: transform;
}

.lap-loader-icon .lap-planetail,
.lap-loader-icon .lap-wingleft,
.lap-loader-icon .lap-wingright {
    position: absolute;
    backface-visibility: hidden;
    will-change: transform;
}

.lap-loader-icon .lap-planetail {
    left: calc(-0.3% + 1px);
    top: -120%;
    width: 15%;
    aspect-ratio: 1/1.25;
    transform: skewX(5deg) translateX(-5%);
    border-top-left-radius: 10%;
    border-top-right-radius: 100% 100%;
}

.lap-loader-icon .lap-wingleft,
.lap-loader-icon .lap-wingright {
    left: 50%;
    width: 25%;
    aspect-ratio: 1;
}

.lap-loader-icon .lap-wingleft {
    transform-origin: bottom;
    top: -190%;
    transform: skewX(45deg) translateX(-30%);
    scale: 0.8;
    border-top-left-radius: 10%;
    border-top-right-radius: 60% 100%;
}

.lap-loader-icon .lap-wingright {
    transform-origin: top;
    bottom: -170%;
    transform: skewX(-45deg);
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 60% 100%;
}

.lap-loader-icon .lap-planetail::after {
    content: "";
    position: absolute;
    height: 55%;
    aspect-ratio: 1;
    transform: skewX(0deg) rotate(-8deg);
    right: -60%;
    bottom: 4.5%;
    background: radial-gradient( circle at 100% 0%, transparent 70%, var(--lap-plane-color) calc(70% + 0.5px) );
}

@keyframes lapWobble {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-10px) translateY(0); }
    50% { transform: translateX(10px) translateY(0); }
    75% { transform: translateX(-10px) translateY(0); }
    100% { transform: translateX(0) translateY(0); }
}

@keyframes lapTakeoff {
    0% { transform: rotate(0deg) translateX(0) translateY(0); }
    35% { transform: rotate(-160deg) translateX(0) translateY(0); }
    55% { transform: rotate(-260deg) translateX(0) translateY(0); }
    75% { transform: rotate(-360deg) translateX(0) translateY(0); }
    100% { transform: rotate(-460deg) translateX(100vh) translateY(50vh); }
}

/*----*****---- << Progress line >> ----*****----*/

.lap-progress {
    width: 140px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
    opacity: 0;
    animation: lapPlaneIn 400ms ease .7s forwards;
}

.lap-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--lap-plane-color); /* fallback for browsers without color-mix() */
    background: linear-gradient( 90deg, color-mix( in srgb, var(--lap-plane-color) 60%, transparent ), var(--lap-plane-color) );
    border-radius: 2px;
    animation-name: lapProgressFill;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes lapProgressFill {
    from { width: 0%; }
    to { width: 100%; }
}

.lap-loader-inner.lap__start .lap-progress {
    animation: lapFadeOut 400ms ease forwards;
}

@keyframes lapFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/*--------------------------------------------------------------
    Wipe phase — handled by JS setting an inline transform on
    .lap-pre-loader itself (translateX 100%/-100% for RTL).
--------------------------------------------------------------*/