/* ==========================================================
   LGDRY PREMIUM THANK YOU PAGE
   STYLE.CSS - PARTE 1
========================================================== */

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;
    background:#000;
    color:#fff;

    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    overflow-x:hidden;
    overflow-y:auto;
    padding:40px 0 20px 0;
    position:relative;

}


/* ==========================
        IMAGEN FONDO
========================== */

.background-image-container{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url('background.jpg');
    background-size:cover;
    background-position:center;

    z-index:-5;

    animation:bgZoom 30s ease-in-out infinite alternate;

}


.video-overlay{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.75)
    ),

    radial-gradient(
    circle at center,
    rgba(255,255,255,.02),
    transparent 80%
    );

    z-index:-4;

}



@keyframes bgZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}




/* ==========================
          HUMO
========================== */


.smoke{

    position:fixed;

    inset:-25%;

    pointer-events:none;

    filter:blur(90px);

    opacity:.35;

    mix-blend-mode:screen;

}



.smoke-one{

    background:

    radial-gradient(circle at 20% 30%,
    rgba(255,255,255,.22),
    transparent 35%),

    radial-gradient(circle at 80% 60%,
    rgba(255,255,255,.18),
    transparent 40%);

    animation:smokeOne 24s infinite alternate ease-in-out;

}



.smoke-two{

    background:

    radial-gradient(circle at 70% 20%,
    rgba(180,180,180,.20),
    transparent 35%),

    radial-gradient(circle at 40% 80%,
    rgba(255,255,255,.12),
    transparent 45%);

    animation:smokeTwo 32s infinite alternate ease-in-out;

}



.smoke-three{

    background:

    radial-gradient(circle at center,
    rgba(255,255,255,.08),
    transparent 60%);

    animation:smokeThree 40s infinite alternate linear;

}



@keyframes smokeOne{

    from{

        transform:
        translate(-8%,-5%)
        scale(1);

    }

    to{

        transform:
        translate(8%,6%)
        scale(1.3);

    }

}



@keyframes smokeTwo{

    from{

        transform:
        translate(10%,5%)
        scale(1);

    }

    to{

        transform:
        translate(-10%,-6%)
        scale(1.4);

    }

}



@keyframes smokeThree{

    from{

        transform:rotate(0deg) scale(1);

    }

    to{

        transform:rotate(20deg) scale(1.25);

    }

}




/* ==========================
        LUZ AMBIENTAL
========================== */

.light{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at top,
    rgba(255,255,255,.10),
    transparent 55%);

    animation:pulseLight 7s infinite alternate;

}



@keyframes pulseLight{

    from{

        opacity:.25;

    }

    to{

        opacity:.5;

    }

}




/* ==========================
        PARTICULAS
========================== */

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}



.particles span{

    position:absolute;

    border-radius:50%;

    opacity:.4;

    animation:particleFloat linear infinite;

}



@keyframes particleFloat{

    from{

        transform:
        translateY(120vh)
        scale(.3);

        opacity:0;

    }

    15%{

        opacity:.4;

    }

    100%{

        transform:
        translateY(-20vh)
        scale(1.4);

        opacity:0;

    }

}




/* ==========================
        CONTENEDOR
========================== */

.container{

    position:relative;

    width:720px;

    max-width:92%;

    padding:65px 50px;

    text-align:center;

    background:linear-gradient(135deg, rgba(15, 8, 8, 0.6) 0%, rgba(5, 2, 2, 0.8) 100%);

    border:1px solid rgba(255,0,0,0.18);

    border-radius:24px;

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.85),
    0 0 35px rgba(255,0,0,.08),
    inset 0 0 30px rgba(255,255,255,.02);

    overflow:hidden;
    margin-bottom:20px;

}

.container::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    130deg,
    rgba(255,255,255,.05),
    transparent 45%
    );

    pointer-events:none;

}

/* ==========================================================
   LGDRY PREMIUM THANK YOU PAGE
   STYLE.CSS - PARTE 2
========================================================== */


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

.logo-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:30px;
}

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:6px;
    animation:fadeDown 1.2s ease;
}

.logo-img{
    width:220px;
    height:auto;
    display:block;
    filter:drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

.logo-sub{
    color:#ff0000;
    font-size:11px;
    font-weight:800;
    letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:12px;
    text-align:center;
    text-shadow:0 0 8px rgba(255,0,0,0.3);
}

.logo-underline{
    width:70px;
    height:3px;
    background-color:#ff0000;
    box-shadow:0 0 10px rgba(255,0,0,0.7);
}



/* ==========================
          DIVISOR
========================== */

.divider{

    display:none;

}



/* ==========================
           TITULO
========================== */

h1{

    font-size:38px;

    font-weight:900;

    font-style:italic;

    letter-spacing:3px;

    margin-bottom:25px;

    text-transform:uppercase;

    color:#ffffff;

    text-shadow:0 0 15px rgba(255, 255, 255, 0.2);

    animation:fadeUp 1.5s ease;

}



/* ==========================
           TEXTO
========================== */

p{

    max-width:620px;

    margin:0 auto 30px auto;

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

    font-size:16px;

    line-height:1.8;

    font-weight:400;

}

p strong{

    color:#ffffff;

    font-weight:700;

}



/* ==========================
            FRASE
========================== */

blockquote{

    margin:35px auto 40px auto;

    font-size:24px;

    font-weight:800;

    line-height:1.4;

    letter-spacing:1px;

    color:#ffffff;

    max-width:520px;

}

blockquote span{

    display:block;

    margin-top:6px;

    color:#ff0000;

    font-size:24px;

    font-weight:800;

    text-shadow:0 0 12px rgba(255,0,0,0.4);

}



/* ==========================
           BOTONES
========================== */

.buttons{

    margin-top:40px;
    margin-bottom:40px;

}

.primary-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:250px;

    height:52px;

    border:2px solid #ff0000;

    border-radius:50px;

    color:white;

    text-decoration:none;

    letter-spacing:3px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    transition:all 0.35s ease;

    background:transparent;

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

}

.primary-btn:hover{

    background:#ff0000;

    color:white;

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(255, 0, 0, 0.6);

    border-color:#ff0000;

}



/* ==========================
          REDES
========================== */

.social{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-top:15px;

    margin-bottom:15px;

    flex-wrap:wrap;

}

.social a{

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

    text-decoration:none;

    font-size:11px;

    letter-spacing:4px;

    font-weight:600;

    transition:color 0.3s ease;

}

.social a:hover{

    color:white;
    text-shadow:0 0 8px rgba(255,255,255,0.4);

}



/* ==========================
           FOOTER
========================== */

footer{

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

    font-size:10px;

    letter-spacing:3px;

    text-align:center;

    text-transform:uppercase;

    line-height:1.6;

    margin-top:auto;

    padding:20px 0;

}



/* ==========================
            CURSOR
========================== */

.cursor{

    position:fixed;

    width:18px;

    height:18px;

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

    border-radius:50%;

    pointer-events:none;

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

    backdrop-filter:blur(3px);

    z-index:9999;

    box-shadow:0 0 8px rgba(255,0,0,0.4);

    transition:

    width .2s,

    height .2s,

    border-color .2s,

    box-shadow .2s;

}



/* ==========================
        ANIMACIONES
========================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:

        translateY(-35px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(30px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



/* ==========================
        RESPONSIVE
========================== */

@media (max-width:900px){

    .container{

        padding:50px 35px;

    }

    .logo-img{

        width:180px;

    }

    h1{

        font-size:30px;

    }

    blockquote{

        font-size:20px;

    }

    blockquote span{

        font-size:20px;

    }

}



@media (max-width:600px){

    body{

        padding:20px 0;

    }

    .container{

        width:92%;

        padding:35px 20px;

        margin:15px auto;

    }

    .logo-img{

        width:140px;

    }

    .logo-sub{

        font-size:9px;

        letter-spacing:4px;
        margin-bottom:8px;

    }

    h1{

        font-size:24px;

        letter-spacing:2px;

    }

    p{

        font-size:14px;

        line-height:1.7;

    }

    blockquote{

        font-size:18px;

    }

    blockquote span{

        font-size:18px;

    }

    .primary-btn{

        width:100%;

        min-width:unset;

    }

    .social{

        gap:22px;

    }

}

/* Native/Custom Cursor UX optimizations */
@media (hover: hover) {
    body, a, button, .primary-btn {
        cursor: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none !important;
    }
    body, a, button, .primary-btn {
        cursor: auto;
    }
}