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

   GeeCee Online
   Version 2.0
   Authors: Gee Cee and AIguy  - aka chatGPT -

    GeeCee Rule ----

        Build first.
        Polish later.

   Future Ideas:
    
    ▶ Hover play icon.
   🔉 Audio fade-out.
   ⌨ Keyboard shortcuts.


=========================================================*/



                        /*=======================================================================

                             everything below is the CSS Hierarchy - containers inside containers

                        =======================================================================*/




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

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



/* =====================================================
   THEME COLORS  --------- change color HERE -------
===================================================== */

:root{

    --vv-accent-color: #0088ff;    

    --text-accent-color: #e6faff;  

}









/* =====================================================
   GALLERY SHELL ----- Holds the Gallery Panel -----
  ===================================================== */








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

   
   .video-card{
    
     
   
    background:#333;

    padding:5px;

    border-radius:4px;

    transition:.4s;

    width:230px;

    border:4px solid transparent;           /*    blue border   */


  }



   .video-card:hover{

      transform:translateY(-5px);

      border-color:var(--vv-accent-color);


   }


   





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


  .video-thumb img{

    display:block;

    width:100%;

    height:auto;

    border-radius:4px;

    cursor:pointer;

    transition:.33s;
}



   .video-thumb img:hover{

       transform:scale(1.05);
      


}
    










                        /* =================================================

                             the OFFICIAL Geecee-Online VIDEO VIEWER !!!

                        ================================================= */




/* =====================================
        the VIDEO VIEWER
===================================== */


  #videoViewer{

    display:none;        /*  hidden    */

    position:fixed;

    top:0;              /*  the starting point      */
    left:0;

    width:100%;         /*  fill screen      */

    height:100%;

    background:rgba(0,0,0,.88);        /*    Overlay semi-tramsparent bkgd     */


                 backdrop-filter: blur(8px);

    justify-content:center;

    align-items:center;                /*  centered in main window     */

            

    z-index:9999;                     /*  way above      */


  }









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

   .vv-content{

    position:relative;

    text-align:center;          

                
                     

    width:fit-content;
    max-width:90vw;

  }


/* =====================================================
   VIDEO VIEWER   ----- Video Screen Size
===================================================== */


#viewerVideo{

    display:block;

    width:100%;

    height:auto;

    max-height:72vh;

    margin:0;

    border-radius:6px;

}


                        /* =====================================================
                                    VIDEO VIEWER ----- Closing Animation
                                    Shrink toward center before disappearing
                           ===================================================== */

#videoViewer.closing .vv-content {

    transform: scale(0);

    opacity: 0;

    transition:
        transform 0.15s ease-in,
        opacity 0.25s ease-in;

}





                              /* =====================================================
                                             VIDEO VIEWER ----- Closing Flash
                                             Very short / subtle
                                 ===================================================== */


#videoViewer.close-flash .vv-flash {

    opacity:0.15;

}




/* =====================================================
   IMAGE COUNTER
===================================================== */

#videoCounter {

    color:white;

}



/* =====================================================
   VIDEO STAGE ----- Holds Video + Transition
===================================================== */

.vv-video-stage{

    position:relative;

    width:80vw;

    max-width:1280px;

    max-height:72vh;

    margin:0 auto;

    overflow:hidden;

    border-radius:6px;

}


/* =====================================================
   LIGHT FLASH ----- Quick Blink Before Blinds
===================================================== */

.vv-flash{

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.95);    /*   Flash strength    */

    opacity:0;

    pointer-events:none;

    z-index:9;            /*    Flash goes just BELOW Blinds      */

            transition:opacity .06s ease-out;

}


/* ----- FLASH ON ----- */

.vv-flash.flash-on{

    opacity:1;

}




/* =====================================================
   VIDEO BLINDS ----- Top + Bottom Shutters
===================================================== */

.vv-blind{

    position:absolute;

    left:0;

    width:100%;
    height:50%;

    background:#000;

    z-index:10;

    pointer-events:none;

      transition:transform 200ms ease-in-out;

}


/* ----- TOP BLIND ----- */

.vv-blind-top{

    top:0;

           transform:translateY(-100%);

}


/* ----- BOTTOM BLIND ----- */

.vv-blind-bottom{

    bottom:0;

              transform:translateY(100%);

}




/* =====================================================
   BLINDS CLOSED
===================================================== */

.vv-video-stage.blinds-closed .vv-blind-top{

    transform:translateY(0);

}


.vv-video-stage.blinds-closed .vv-blind-bottom{

    transform:translateY(0);

}





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

#videoTitle{

    margin-top:30px;

    font-size:2rem;

    color: white;

    

}




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



.vv-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin:25px auto;

    padding:10px 15px;

    background:rgba(204,204,204,0.1);

    border-radius:4px;

    width:fit-content;

}

.vv-controls button{

    padding:5px 10px;

    font-size:0.75rem;

    cursor:pointer;

    border:none;

    border-radius:5px;

    background:var(--vv-accent-color);

    color:white;

    transition:.25s;

}


.vv-controls button:hover{

    background:#666;

    transform:translateY(-2px);

}