/*
=========================================================
 BIG³ Media Portal
 Premium Theme
=========================================================
*/

:root{

--bg:#070b12;
--bg2:#111827;

--glass:rgba(255,255,255,.07);

--glass2:rgba(255,255,255,.12);

--chrome1:#ffffff;
--chrome2:#d7d7d7;
--chrome3:#a5a5a5;
--chrome4:#fafafa;

--blue:#43b7ff;
--cyan:#66d8ff;

--shadow:0 25px 60px rgba(0,0,0,.55);

--radius:22px;

}

/************************************************/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/************************************************/

html{

scroll-behavior:smooth;

}

/************************************************/

body{

font-family:

Segoe UI,

Arial,

sans-serif;

background:

linear-gradient(

180deg,

#05070b,

#111827

);

color:white;

overflow-x:hidden;

min-height:100vh;

}

/************************************************/

canvas{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-10;

}

/************************************************/

.gallery-page{

padding-top:90px;

}

/************************************************/

.topbar{

position:fixed;

top:0;

left:0;

right:0;

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 40px;

backdrop-filter:blur(18px);

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

border-bottom:

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

z-index:999;

}

/************************************************/

.logo{

font-size:58px;

font-weight:900;

letter-spacing:2px;

background:

linear-gradient(

180deg,

var(--chrome1),

var(--chrome2),

var(--chrome3),

var(--chrome4)

);

-webkit-background-clip:text;

color:transparent;

text-shadow:

0 0 25px rgba(90,190,255,.45);

user-select:none;

transition:.4s;

cursor:default;

}

.logo:hover{

transform:

scale(1.04)

rotate(-2deg);

}

/************************************************/

.logo span{

font-size:32px;

vertical-align:top;

color:#66d8ff;

}

/************************************************/

.topbar{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    backdrop-filter:blur(15px);

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

    z-index:999;

}
/************************************************/

.top-right{

display:flex;

align-items:center;

gap:20px;

}

/************************************************/

.login-container{

    display:flex;

    justify-content:center;

    margin-top:140px;

    margin-bottom:60px;

}

.login{

    width:380px;

    padding:30px;

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

    backdrop-filter:blur(14px);

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

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

}

.login h2{

    text-align:center;

    margin-bottom:25px;

    font-size:32px;

}

.login input{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:none;

    border-radius:10px;

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

    color:#fff;

}

.login button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:linear-gradient(90deg,#009dff,#00d8ff);

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}

/************************************************/

.logout-button{

text-decoration:none;

color:white;

padding:

12px 24px;

border-radius:50px;

background:

linear-gradient(

90deg,

#2ea4ff,

#00d2ff

);

transition:.35s;

}

.logout-button:hover{

transform:

translateY(-3px);

box-shadow:

0 0 25px

rgba(0,180,255,.55);

}

/************************************************/

.hero{

width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:70px;

padding:

60px;

flex-wrap:wrap;

}

/************************************************/

.hero-image{

position:relative;

width:650px;

max-width:90%;

}

.hero-image img{

width:100%;

border-radius:22px;

border:

4px solid

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

box-shadow:

0 40px 80px

rgba(0,0,0,.7);

transition:.5s;

}

.hero-image img:hover{

transform:

scale(1.02);

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

.hero-text{
    max-width:500px;
}

.hero-text h1{

    font-size:58px;

    font-weight:900;

    letter-spacing:2px;

    margin-bottom:20px;

    text-shadow:
        0 0 20px rgba(0,180,255,.45);

}

.hero-text p{

    font-size:20px;

    color:#b9d8ef;

    line-height:1.7;

}

/* ==========================================================
   REFLECTION
========================================================== */

.reflection{

    position:absolute;

    left:0;

    right:0;

    bottom:-120px;

    height:110px;

    background:inherit;

    opacity:.16;

    transform:
        scaleY(-1);

    filter:
        blur(12px);

    mask-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.5),
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.5),
            transparent
        );

}

/* ==========================================================
   GALLERY
========================================================== */

.gallery{

    max-width:1500px;

    margin:0 auto;

    padding:50px 20px;

}

.gallery-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:35px;

}

/* ==========================================================
   VIDEO CARD
========================================================== */

.video-card{

    width:340px;

    flex:0 0 340px;

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

    backdrop-filter:blur(16px);

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

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    opacity:1;

    transform:none;

}

.video-card:hover{

    transform:
        translateY(-10px);

    box-shadow:

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

        0 30px 70px rgba(0,0,0,.65);

}

/* ==========================================================
   VIDEO
========================================================== */

.video-wrapper{

    position:relative;

    overflow:hidden;

}

.video-wrapper video{

    width:100%;

    display:block;

    transition:
        transform .6s;

}

.video-card:hover video{

    transform:
        scale(1.08);

}

/* ==========================================================
   PLAY OVERLAY
========================================================== */

.overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    opacity:0;

    transition:.35s;

}

.video-card:hover .overlay{

    opacity:1;

}

.play{

    width:90px;

    height:90px;

    border-radius:50%;

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

    backdrop-filter:blur(15px);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:white;

    box-shadow:

        0 0 35px rgba(0,200,255,.5);

}

/* ==========================================================
   CARD CONTENT
========================================================== */

.card-content{

    text-align:center;

    padding:25px;

}

.card-content h2{

    font-size:28px;

    margin-bottom:12px;

}

.card-content p{

    color:#b7d8ea;

    line-height:1.6;

    min-height:70px;

}
/* ==========================================================
   WATCH BUTTON
========================================================== */

.watch-button{

    display:inline-block;

    width:auto;

    margin-top:18px;

    padding:12px 28px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:white;

    letter-spacing:1px;

    background:linear-gradient(
        90deg,
        #009dff,
        #00d8ff
    );

    transition:
        .35s;

}

.watch-button:hover{

    transform:
        translateY(-3px);

    box-shadow:

        0 0 35px rgba(0,180,255,.45),

        0 0 70px rgba(0,180,255,.25);

}

/* ==========================================================
   VIDEO MODAL
========================================================== */

.video-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(10px);

    z-index:5000;

}

.modal-content{

    position:relative;

    width:min(1200px,92%);

}

.modal-content video{

    width:100%;

    border-radius:20px;

    border:2px solid rgba(255,255,255,.10);

    background:#000;

    box-shadow:

        0 25px 70px rgba(0,0,0,.7);

}

/* ==========================================================
   CLOSE BUTTON
========================================================== */

.close-modal{

    position:absolute;

    top:-55px;

    right:0;

    font-size:42px;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.close-modal:hover{

    transform:rotate(90deg);

    color:#43b7ff;

}

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

.footer{

    margin-top:100px;

    padding:60px 30px;

    text-align:center;

    border-top:

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

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

}

.footer-logo{

    font-size:34px;

    font-weight:800;

    margin-bottom:18px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #bdbdbd,
        #808080
    );

    -webkit-background-clip:text;

    color:transparent;

}

.footer-text{

    color:#9db8c9;

    line-height:1.8;

    font-size:15px;

}

/* ==========================================================
   MOUSE LIGHT
========================================================== */

#mouse-light{

    position:fixed;

    width:350px;

    height:350px;

    border-radius:50%;

    pointer-events:none;

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

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.16),
            transparent 70%
        );

    z-index:1;

}

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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#05070b;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        #00b7ff,
        #008cff
    );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#4fd8ff;

}

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

::selection{

    background:#00b7ff;

    color:white;

}
/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floatHero {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

.hero-image{

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

}

/* ==========================================================
   FADE IN
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

.hero{

    animation:
        fadeUp .8s ease;

}

.video-card{

    animation:
        fadeUp .8s ease;

}

/* ==========================================================
   CHROME SHINE
========================================================== */

.logo{

    position:relative;

    overflow:hidden;

}

.logo::after{

    content:"";

    position:absolute;

    top:-30%;

    left:-120%;

    width:70%;

    height:180%;

    transform:rotate(25deg);

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    animation:

        chromeShine 6s linear infinite;

}

@keyframes chromeShine{

    from{

        left:-120%;

    }

    to{

        left:220%;

    }

}

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

.video-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.15),

            rgba(0,180,255,.45),

            rgba(255,255,255,.08)

        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:.55;

    pointer-events:none;

}

/* ==========================================================
   HERO IMAGE HOVER
========================================================== */

.hero-image:hover img{

    transform:

        scale(1.03)

        rotate(-.5deg);

    box-shadow:

        0 35px 90px rgba(0,0,0,.8),

        0 0 45px rgba(0,180,255,.28);

}

/* ==========================================================
   BUTTON PULSE
========================================================== */

.watch-button{

    position:relative;

    overflow:hidden;

}

.watch-button::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transition:.6s;

}

.watch-button:hover::before{

    left:120%;

}

/* ==========================================================
   GLASS EFFECT
========================================================== */

.video-card,
.login,
.topbar{

    backdrop-filter:blur(18px);

}

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

.footer-logo{

    transition:.4s;

}

.footer-logo:hover{

    text-shadow:

        0 0 25px rgba(0,180,255,.45);

}

/* ==========================================================
   SMALL TRANSITIONS
========================================================== */

a,
button,
.video-card,
.hero-image img{

    transition:

        all .35s ease;

}