/* ==========================================================
   STREAM.CSS
   Dron Orione - Streaming
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    --bg:#0b1220;
    --surface:#0b1220;

    --text:#f3f4f6;
    --text-muted:#9ca3af;

    --accent:#d4af37;
    --accent-hover:#f1cb55;

    --border:rgba(255,255,255,.08);
}

/* ==========================================================
   RESET
   ========================================================== */

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

html,
body{

    height:100%;

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

}


/* ==========================================================
   LAYOUT
   ========================================================== */

body{

    display:flex;

    flex-direction:column;

    min-height:100vh;

}


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

.header{

    padding:18px 28px;

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

}

.back-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--text);

    text-decoration:none;

    font-weight:500;

    transition:.25s;

}

.back-link:hover{

    color:var(--accent);

}


/* ==========================================================
   CONTENIDO
   ========================================================== */

.stream-container{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}


/* ==========================================================
   PANTALLA OFFLINE
   ========================================================== */

.offline-card{

    width:100%;

    max-width:960px;

    aspect-ratio:16/9;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

    border-radius:14px;

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

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(0,0,0,.45);

}

.offline-logo{

    width:42%;

    max-width:380px;

    height:auto;

}



.offline-screen{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:28px;

    text-align:center;

    transition:opacity .35s;

}
.offline-logo{

    width:320px;

    max-width:60vw;

}

.offline-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:1.8rem;

    font-weight:500;

    color:#9d9d9d;

}

.offline-title i{

    animation:blink 1.6s infinite;

    color:#bdbdbd;

}


.offline-subtitle{

    color:#707070;

    font-size:1rem;

}



.offline-card{

    background:#000;

    border-radius:18px;

    padding:35px;

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

    box-shadow:
        0 15px 40px rgba(0,0,0,.50);

}





/* ==========================================================
   REPRODUCTOR
   ========================================================== */

.player-container{

     background: var(--surface);    

    display:none;

    width:100%;

    max-width:960px;

    transition:opacity .35s;

}

.video-js{

    width:100%;

    aspect-ratio:16/9;

    border-radius:14px;
  
    margin:auto;

    overflow:hidden;

    background:#000;

    box-shadow:

        0 15px 40px rgba(0,0,0,.45);

}


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

.footer{

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

    padding:18px;

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

    backdrop-filter:blur(8px);

    background:#090909;

    padding:20px;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

}

.footer-links a{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text);

    text-decoration:none;

    transition:.25s;

    padding:10px 18px;

    border-radius:999px;

    background:#171717;

}

.footer-links a:hover{

    color:var(--accent);

    background:#202020;

}

.footer-copy{

    margin-top:14px;

    text-align:center;

    color:var(--text-muted);

    font-size:.85rem;

}


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

@keyframes blink{

    0%{
        opacity:1;
    }

    50%{
        opacity:.35;
    }

    100%{
        opacity:1;
    }

}


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

@media (max-width:768px){

    .header{

        padding:16px;

    }

    .stream-container{

        padding:18px;

    }

    .offline-logo{

        width:130px;

    }

    .offline-title{

        font-size:1.5rem;

    }

    .offline-subtitle{

        font-size:.95rem;

    }

    .footer-links{

        gap:18px;

    }

}

@media (max-width:480px){

    .footer-links{

        flex-direction:column;

        gap:12px;

    }

    .footer-copy{

        font-size:.8rem;

    }

}


/* ==========================================================
   MARCA DE AGUA
   ========================================================== */

.vjs-watermark{

    position:absolute;

    top:18px;

    right:18px;

    width:90px;

    opacity:.75;

    pointer-events:none;

    z-index:100;

}

@media(max-width:768px){

    .vjs-watermark{

        width:60px;

        top:12px;

        right:12px;

    }

}