/* ======================================================
   PromoTV Player
   Estrutura Base
====================================================== */

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

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

}

body{

    color:var(--text);

    background:#000;

}

/*======================================================
PLAYER
======================================================*/

#player{

    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;

}

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

#background{

    position:absolute;
    inset:0;

    background:var(--background);

    background-size:300% 300%;

    animation:bgMove 18s ease infinite;

}

/*======================================================
GLOW
======================================================*/

#glow{

    position:absolute;

    width:900px;
    height:900px;

    left:-150px;
    top:40px;

    border-radius:50%;

    background:

        radial-gradient(

            var(--glow),

            transparent 70%

        );

    opacity:.55;

    filter:blur(80px);

    animation:glowPulse 7s ease-in-out infinite;

}

/*======================================================
RING
======================================================*/

#ring{

    position:absolute;

    width:650px;
    height:650px;

    left:120px;
    top:130px;

    border-radius:50%;

    border:4px solid var(--ring);

    box-shadow:

        0 0 60px var(--ring);

}

/*======================================================
HEADER
======================================================*/

header{

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:90px;

    padding:0 60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:20;

}

.logo img{

    height:55px;

}

.clock{

    text-align:right;

}

#date{

    font-size:15px;

    color:var(--subtitle);

}

#time{

    font-size:34px;

    font-weight:700;

}

/*======================================================
MAIN
======================================================*/

main{

    position:absolute;

    top:90px;

    bottom:70px;

    left:0;

    right:0;

    display:grid;

    grid-template-columns:50% 50%;

}

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

.hero{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.platform{

    position:relative;

    width:520px;

    height:520px;

    border-radius:42px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(22px);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 35px 80px rgba(0,0,0,.25);

}

.platform::after{

    content:"";

    position:absolute;

    width:340px;

    height:30px;

    bottom:-35px;

    border-radius:50%;

    background:rgba(0,0,0,.18);

    filter:blur(18px);

}

#productImage{

    width:80%;

    max-height:80%;

    object-fit:contain;

    filter:

        drop-shadow(

            0 35px 35px rgba(0,0,0,.30)

        );

    animation:float 5s ease-in-out infinite;

    transition:

        .5s;

}

/*======================================================
INFO
======================================================*/

.info{

    display:flex;

    justify-content:center;

    flex-direction:column;

    padding-right:80px;

}

.badge{

    width:max-content;

    background:var(--badge);

    color:white;

    padding:10px 24px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.info h1{

    font-size:62px;

    font-weight:800;

    line-height:1.05;

}

.info p{

    font-size:24px;

    color:var(--subtitle);

    margin:18px 0 40px;

}

/*======================================================
PREÇO
======================================================*/

.price-card{

    display:flex;

    align-items:flex-end;

    gap:10px;

    width:max-content;

    padding:18px 30px;

    border-radius:26px;

    background:var(--price-bg);

    color:var(--price-color);

    box-shadow:

        0 20px 60px rgba(0,0,0,.18);

}

.currency{

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.price{

    font-size:78px;

    font-weight:800;

    line-height:1;

}

.old-price{

    margin-top:25px;

    color:var(--subtitle);

    font-size:22px;

}

.old-price span{

    text-decoration:line-through;

}

.validity{

    margin-top:12px;

    color:var(--subtitle);

}

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

footer{

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:70px;

    padding:0 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    color:var(--subtitle);

    z-index:20;

}

/*======================================================
ANIMAÇÕES
======================================================*/

@keyframes bgMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes glowPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}