/* =====================================================
   CampShopping Landing
   style.css
   Version 1.0
===================================================== */

:root{

    --primary:#F58220;
    --primary-hover:#ff9b43;
    --bg:#050505;
    --white:#ffffff;
    --text:#d7d7d7;
    --muted:#8b8b8b;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Vazirmatn',sans-serif;

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    min-height:100vh;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ==========================
        LINKS
========================== */

a{

    color:inherit;

    text-decoration:none;

}

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

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

}


.overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    animation:backgroundGlow 25s ease-in-out infinite;

    background:

    /* نور اصلی بالای صفحه */
    radial-gradient(
        circle at 50% 12%,
        rgba(245,130,32,.20) 0%,
        rgba(245,130,32,.10) 18%,
        transparent 42%
    ),

    /* نور سمت چپ */
    radial-gradient(
        circle at 15% 75%,
        rgba(245,130,32,.08) 0%,
        transparent 45%
    ),

    /* نور سمت راست */
    radial-gradient(
        circle at 85% 30%,
        rgba(255,170,80,.06) 0%,
        transparent 40%
    ),

    /* گرادینت اصلی */
    linear-gradient(
        180deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.82) 100%
    );

}

.background::before{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    radial-gradient(

        circle,

        rgba(245,130,32,.08),

        transparent 70%

    );

    filter:blur(70px);

    animation:bgMove 45s linear infinite alternate;

}

/* ==========================
        Background Noise
========================== */

.background::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.025;

    background-image:

        radial-gradient(circle, rgba(255,255,255,.35) .6px, transparent .8px);

    background-size:8px 8px;

    mix-blend-mode:soft-light;

}
/* ==========================
        PARTICLES
========================== */

#particles{

position:absolute;

inset:0;

pointer-events:none;

z-index:1;

overflow:hidden;

}

#particles canvas{

width:100%;

height:100%;

display:block;

}
/* ==========================
        HERO
========================== */

.hero{

    width:100%;

    min-height:100vh;

    min-height:100svh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.glass{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    width:min(480px,100%);

    padding:56px 42px;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.05)
        );

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.35);

    text-align:center;

    --moveX:0px;
    --moveY:0px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    will-change:transform;

    transform:
        translate3d(var(--moveX), var(--moveY), 0);
}

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

.logo{

    width:180px;

    max-width:80%;

    height:auto;

    display:block;

    margin:0 auto;

    user-select:none;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.glass:hover .logo{

    transform:scale(1.02);

    filter:

        drop-shadow(0 0 12px rgba(245,130,32,.25));

}

/* ==========================
        TITLES
========================== */

h1{

    margin-top:34px;

    font-size:32px;

    font-weight:800;

    line-height:1.45;

    text-shadow:

        0 2px 12px rgba(0,0,0,.25);

}

.hero p{

    margin-top:18px;

    color:#d6d6d6;

    line-height:2;

    font-size:17px;

}

/* ==========================
        BUTTONS
========================== */

.buttons{

    margin-top:42px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.btn{

    position:relative;

    display:flex;

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

    width:100%;
    height:64px;

    padding:0;

    border-radius:18px;

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

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

    color:#fff;

    font-size:18px;
    font-weight:700;

    line-height:64px;   /* مهم */

    text-align:center;

    cursor:pointer;

    overflow:hidden;

    transition:.35s;
}
.btn span{

    display:block;

    width:100%;

    line-height:64px;

    text-align:center;

    transform:translateY(-1px);

}

.btn:hover{

    background:linear-gradient(
        135deg,
        #F58220,
        #FFA24D
    );

    transform:
        scale(1.03);

    box-shadow:
         0 12px 30px rgba(245,130,32,.30);


}

.btn:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

.orange{

    background:linear-gradient(
        135deg,
        #F58220,
        #FF9E45
    );

    border:none;

    color:#fff;

}

.orange:hover{

    background:#ff9838;

    transform:
        scale(1.03);

    box-shadow:
        0 12px 30px rgba(245,130,32,.35);

}

.glass-btn{

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

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

}

.glass-btn:hover{

    background:var(--primary);

    border-color:var(--primary);

}

/* ==========================
        LOADER
========================== */

#loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

}

#loader img{

    width:180px;

}

.loader-line{

    width:180px;

    height:4px;

    margin-top:28px;

    border-radius:10px;

    overflow:hidden;

    background:#202020;

}

.loader-line::after{

    content:"";

    display:block;

    width:0;

    height:100%;

    background:var(--primary);

}

/* ==========================
        SELECTION
========================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================
        SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#0d0d0d;

}

/* ==========================
        UTILITIES
========================== */

.hide{

    display:none;

}

.show{

    display:block;

}
/* Ripple */


.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .55s ease-out;

pointer-events:none;

will-change:transform,opacity;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

.glass::before{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:inherit;

    background:

        linear-gradient(

            140deg,

            rgba(255,255,255,.12),

            rgba(255,255,255,.03) 35%,

            transparent 70%

        );

    pointer-events:none;

}

.glass::after{

    content:"";

    position:absolute;

    top:-45%;

    left:-30%;

    width:80%;

    height:120%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.08),

            transparent

        );

    transform:rotate(-18deg);

    pointer-events:none;

}
.glass:hover{

    transform:
        translate3d(var(--moveX), var(--moveY),0)
        scale(1.01);

    border-color:

        rgba(245,130,32,.45);

    box-shadow:

        0 24px 60px rgba(0,0,0,.40),

        0 0 20px rgba(245,130,32,.15);

}

.hero{

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:calc(50% - 180px);

    transform:translateX(-50%);

    width:520px;

    height:120px;

    background:radial-gradient(

        ellipse,

        rgba(0,0,0,.45),

        transparent 70%

    );

    filter:blur(35px);

    z-index:-1;

    pointer-events:none;

}

@media (hover:hover){

    .btn:hover{

        background:linear-gradient(
            135deg,
            #F58220,
            #FFA24D
        );

        transform:scale(1.03);

        box-shadow:
            0 12px 30px rgba(245,130,32,.30);

    }

    .glass:hover{

        transform:
            translateY(-3px)
            scale(1.01);

    }

}