/* ============================================================
   Laser-etch preloader — a high-tech laser beam cutting the
   word "LOADING" onto a brushed-metal sheet.
   Shown once per session; auto-dismisses even without JS.
   ============================================================ */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 50% 40%, #181c22 0%, #0c0e11 70%, #07080a 100%);
    overflow: hidden;
    /* No-JS / crawler safety net: fade away after 4s even if JS never runs. */
    animation: preloaderAutoHide 0.6s ease 4s forwards;
}

/* Skip entirely on subsequent navigations within the same session. */
.preloader-skip .preloader {
    display: none !important;
}

/* JS hides it as soon as the page has loaded (after a short min display). */
.preloader.preloader--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.preloader__stage {
    width: min(90vw, 640px);
    text-align: center;
    padding: 1rem;
}

.preloader__brand {
    font-family: "Yekan", sans-serif;
    color: #6fd0ff;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    margin-bottom: 1.6rem;
    text-shadow: 0 0 12px rgba(53, 192, 255, 0.55);
    opacity: 0;
    animation: preFadeUp 0.8s ease 0.1s forwards;
}

/* ---- The brushed-metal sheet being etched ---- */
.preloader__sheet {
    position: relative;
    display: inline-block;
    padding: 2.6rem 2.4rem 2.4rem;
    border-radius: 12px;
    background: linear-gradient(150deg, #2a2f37 0%, #353b45 45%, #21252b 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -2px 6px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: preFadeUp 0.8s ease 0.15s forwards;
}

/* Brushed-metal micro-grain */
.preloader__sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px,
        transparent 1px, transparent 3px);
    pointer-events: none;
    opacity: 0.7;
}

/* Soft moving sheen across the sheet */
.preloader__sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 48%, transparent 66%);
    transform: translateX(-100%);
    animation: preSheen 3.4s ease-in-out 1.4s infinite;
    pointer-events: none;
}

/* ---- The etched word ---- */
.preloader__cut {
    position: relative;
    display: inline-block;
}

.preloader__text {
    margin: 0;
    font-family: "TTNorms", "Yekan", sans-serif;
    font-weight: 700;
    font-size: clamp(2.6rem, 11vw, 5.2rem);
    line-height: 1;
    letter-spacing: 0.12em;
    /* metallic face revealed by the cut */
    background: linear-gradient(180deg, #f3f7fb 0%, #c2cad4 38%, #8b939d 62%, #e8edf2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(120, 205, 255, 0.45);
    /* the laser reveals the word left -> right */
    clip-path: inset(0 100% 0 0);
    animation: preEtchReveal 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards,
               preTextGlow 2.4s ease-in-out 1.7s infinite;
}

/* ---- Laser assembly (nozzle + beam + sparks) ---- */
.preloader__laser {
    position: absolute;
    top: -2.2rem;
    bottom: -1.4rem;
    left: 0;
    width: 3px;
    transform: translateX(-50%);
    animation: preLaserSweep 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Machine nozzle / cutting head at the top of the beam */
.preloader__head {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 20px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #cfd6de 0%, #818a95 55%, #44494f 100%);
    border-radius: 5px 5px 3px 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

    .preloader__head::after { /* emitter aperture glowing cyan */
        content: "";
        position: absolute;
        bottom: -3px;
        left: 50%;
        width: 8px;
        height: 5px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #eaffff;
        box-shadow: 0 0 8px 3px #36c1ff, 0 0 16px 6px rgba(54, 193, 255, 0.7);
    }

/* The beam itself: white-hot core + cyan halo */
.preloader__beam {
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        rgba(234, 255, 255, 0) 0%,
        rgba(180, 240, 255, 0.9) 12%,
        #ffffff 50%,
        rgba(180, 240, 255, 0.9) 88%,
        rgba(234, 255, 255, 0) 100%);
    box-shadow: 0 0 8px 2px #36c1ff, 0 0 22px 7px rgba(54, 193, 255, 0.55);
    animation: preBeamFlicker 0.12s steps(2, end) infinite;
}

/* Spark burst where the beam meets the metal */
.preloader__spark {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ffd27f 40%, #ff8a2b 70%, rgba(255, 138, 43, 0) 100%);
    animation: preSpark 0.16s ease-in-out infinite;
}

    /* two flying spark particles */
    .preloader__spark::before,
    .preloader__spark::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #ffd9a0;
        box-shadow: 0 0 6px 2px rgba(255, 170, 80, 0.9);
    }

    .preloader__spark::before {
        animation: preSparkFlyA 0.5s ease-out infinite;
    }

    .preloader__spark::after {
        animation: preSparkFlyB 0.6s ease-out infinite;
    }

/* ---- Progress bar (indeterminate) ---- */
.preloader__bar {
    position: relative;
    width: min(70%, 360px);
    height: 4px;
    margin: 2rem auto 0.9rem;
    border-radius: 4px;
    background: #20242b;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: preFadeUp 0.8s ease 0.3s forwards;
}

    .preloader__bar span {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 40%;
        border-radius: 4px;
        background: linear-gradient(90deg, rgba(54, 193, 255, 0), #36c1ff 50%, #eaffff 80%, rgba(54, 193, 255, 0));
        box-shadow: 0 0 10px rgba(54, 193, 255, 0.8);
        animation: preBar 1.3s ease-in-out infinite;
    }

.preloader__status {
    font-family: "Yekan", sans-serif;
    color: #8a929c;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: preFadeUp 0.8s ease 0.35s forwards;
}

/* ===================== Keyframes ===================== */
@keyframes preEtchReveal {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes preLaserSweep {
    0%   { left: 0;    opacity: 0; }
    6%   { opacity: 1; }
    88%  { left: 100%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes preBeamFlicker {
    0%   { opacity: 1; }
    100% { opacity: 0.78; }
}

@keyframes preSpark {
    0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

@keyframes preSparkFlyA {
    0%   { transform: translate(-50%, -50%); opacity: 1; }
    100% { transform: translate(420%, -260%); opacity: 0; }
}

@keyframes preSparkFlyB {
    0%   { transform: translate(-50%, -50%); opacity: 1; }
    100% { transform: translate(-460%, -180%); opacity: 0; }
}

@keyframes preTextGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(54, 193, 255, 0.25)); }
    50%      { filter: drop-shadow(0 0 10px rgba(54, 193, 255, 0.55)); }
}

@keyframes preBar {
    0%   { left: -45%; }
    100% { left: 100%; }
}

@keyframes preSheen {
    0%, 100% { transform: translateX(-120%); }
    55%      { transform: translateX(120%); }
}

@keyframes preFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes preloaderAutoHide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .preloader__text {
        clip-path: none;
        animation: none;
    }
    .preloader__laser,
    .preloader__sheet::after,
    .preloader__spark,
    .preloader__beam {
        animation: none;
    }
    .preloader__laser { display: none; }
    .preloader__brand,
    .preloader__sheet,
    .preloader__bar,
    .preloader__status {
        opacity: 1;
        animation: none;
    }
    .preloader__bar span { animation: preBar 1.3s ease-in-out infinite; }
}