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

body {
    background:#000;
    overflow:hidden;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* VIDEO */
.video-bg {
    position:fixed;
    top:15%;
    width:100%;
    height:85%;
}
#player {
    position:absolute;
    top:50%;
    left:50%;
    width:100vw;
    height:56.25vw;
    transform:translate(-50%,-50%);
    animation:zoom 20s infinite alternate ease-in-out;
}
@keyframes zoom {
    from {transform:translate(-50%,-50%) scale(1);}
    to   {transform:translate(-50%,-50%) scale(1.08);}
}

/* EFFECT */
.gradient-top {
    position:fixed;
    top:0;
    width:100%;
    height:30%;
    background:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}
.grain {
    position:fixed;
    width:100%;
    height:100%;
    background:url('https://grainy-gradients.vercel.app/noise.svg');
    opacity:0.08;
}

/* INTRO */
#intro {
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:opacity 2s;
    z-index:10;
}
#introText {
    color:#fff;
    font-size:22px;
    letter-spacing:0.4em;
}
.loading {animation:fadeLoop 2s infinite;}
@keyframes fadeLoop {
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}
#intro.fade-out {
    opacity:0;
    pointer-events:none;
}

/* HEADER */
.header-top {
    position:absolute;
    top:5%;
    width:100%;
    text-align:center;
}
.main-title {
    font-size:16px;
    letter-spacing:0.4em;
    color:#fff;
}

/* CENTER */
.center-text {
    position:absolute;
    top:60%;
    width:100%;
    text-align:center;
    font-size:14px;
    letter-spacing:0.3em;
    color:#fff;
}

/* CONTROLS */
.controls {
    position:absolute;
    bottom:80px;
    right:30px;
    display:flex;
    align-items:center;
    gap:15px;
}
#videoTitle {
    font-size:11px;
    letter-spacing:0.2em;
    color:rgba(255,255,255,0.7);
    max-width:220px;
    text-align:right;
}
.controls button {
    background:transparent;
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    padding:6px 12px;
    font-size:11px;
    cursor:pointer;
}
.controls button:hover {
    border-color:#fff;
}

/* FOOTER */
footer {
    position:absolute;
    bottom:5px;
    width:100%;
    text-align:center;
}
.footer-links {
    margin-bottom:20px;
}
.footer-links a {
    margin:0 15px;
    color:#fff;
    text-decoration:none;
    font-size:12px;
}
.copyright {
    font-size:8px;
    color:rgba(255,255,255,0.4);
}

/* MODAL */
#contactModal {
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:0.4s;
    z-index:20;
}
#contactModal.show {
    opacity:1;
    pointer-events:auto;
}
.modal-content {
    text-align:center;
    color:#fff;
    animation:fadeUp 0.5s ease;
}
.close {
    position:absolute;
    top:30px;
    right:40px;
    font-size:24px;
    cursor:pointer;
}
.modal-title {
    font-size:12px;
    letter-spacing:0.4em;
    margin-bottom:10px;
    opacity:0.6;
}
.modal-name {
    font-size:18px;
    letter-spacing:0.3em;
    margin-bottom:30px;
}
.modal-email {
    font-size:12px;
    letter-spacing:0.3em;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.3);
}
.modal-email:hover {
    border-color:#fff;
}

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