/*TABLE OF CONTENT

BASE STYLES
MENU
VIDEO THUMBNAIL
VIDEO WRAPPER
ART
CONTACTS
SOCIAL ICONS

*/


/* BASE STYLES */

        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body, html {
        margin:0;
        background:#000000;
        font-family: 'Lato', sans-serif;
        font-style: normal;
        overflow-x: hidden;
        
        /* Disable text selection for the entire page */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE 10+ */
            user-select: none; /* Standard syntax */
        
        a {
        text-decoration:none;
        color:#A4AEB2;
        transition: color 0.4s ease;
        }
        
        a:hover,
        a:active,
        a:focus  {
        outline:none;
        text-decoration:none;
        color:#E6EFEF;
        }
        
        
        


/* MENU */

        #menu-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 30px 0;
          position: fixed;
          z-index: 9;
          width: 100%;
          margin: 0 auto;
          transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; 
          transform: translateY(0); /* Start without any vertical transform */
          opacity: 1;
          pointer-events: all;
        }
        
        #menu-container::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 150px; /* Control the height of the gradient fade */
        background: linear-gradient(
                to top, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.02) 3%, 
                rgba(0, 0, 0, 0.1) 18%, 
                rgba(0, 0, 0, 0.2) 35%, 
                rgba(0, 0, 0, 0.5) 70%, 
                rgba(0, 0, 0, 0.7) 100% 
        );
        pointer-events: none; /* Allows interaction with elements below */
        z-index: 5; /* Ensures it's under the menu content but above other page elements */
    }
    
    /* No fade for gamedev.html */
    .game #menu-container::after {
    display: none;
    }
    
        #menu {
          text-align: center;
           z-index: 10;
        }
        
        .menu-header {
          margin-bottom: 2px;
          
        }
        
        #menu .menu-header .director span {
            font-weight: 400; 
              font-size: 24px;
              transition: color 0.4s ease, text-shadow 0.4s ease;
              color: #C5CBCD;
              opacity: 1;
        }
        
        .menu-header span {
          letter-spacing: 1px;
        }
        
        .menu-links {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%; 
        }
        
        .menu-links a {
            font-size: 14px;
            margin: 5px;
            letter-spacing: 3px;
            word-spacing:-1px;
            text-shadow: 0px 0px 1px #A4AEB2;
        }
        
        #menu a {
          font-weight: 300; /* Default font-weight for links */
          white-space: nowrap;
        }
        
        .menu-links a.on {
            color: #DDE6E6;
            text-shadow: 0px 0px 1px #D2D6D6;
            font-weight: 300 !important;
            pointer-events: none;
            cursor: default;
            
        }
        
        #menu a:hover {
            font-weight: 300;
            }
            

    /* Pipe characters */
        #menu span {
          font-weight: 300;
          font-size:14px;
          margin: 0px; 
          color: #8fafb6;
          margin-top: 4px;
          opacity: 0.6;
        }
        
        
        .director:hover span {
          color: #fff !important;
          /* text-shadow: 0px 0px 15px #8fafb6; */
        }
        
        @media (max-width: 800px) { 
          .menu-links a,
          .menu-links span {
           margin: 5px 3px 0px 3px;
           letter-spacing: 1px;
        
          }
        }

        
        .clearer {
        overflow:hidden;
        margin:0 0 -1px 0;
        height:1px;
        clear:both;
        
        }




/* VIDEO THUMBNAIL (COMMERCIALS, SHORTS, MAKING OF) */
        
        .thumbnail-text, .first-row-text, .second-row-text {
            letter-spacing: 0.15em; /* Adjust this value as needed */
            font-size: clamp(15px, 1.2vw, 30px);
        }
        
        #commercial-thumbnails {
            padding-top: 60px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            width: 100%; /* Use a percentage to keep it responsive */
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
            
        }
        
        .commercial-thumbnail-container {
            position: relative; 
            cursor: pointer; 
            margin: 2px; 
            width: 100%; 
            box-sizing: border-box;
            
        }
        
        .commercial-thumbnail-container img {
            width: 100%; 
            height: auto; /* Maintain aspect ratio */
            display: block;
            opacity: 0;
            transition: opacity 1s ease;
        }
        
        .commercial-thumbnail-container img.loaded {
            opacity: 1;
        }

        .commercial-thumbnail-container:hover img.loaded {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        /* Adjustments for the rows */
        .one-thumbnail-row,
        .two-thumbnails-row,
        .three-thumbnails-row {
            display: flex;
            justify-content: center; 
            flex-wrap: wrap; 
            margin-bottom: 0px; /* Space between rows */
        }
        
        /* Adjust flex basis for different numbers of thumbnails per row */
        .one-thumbnail-row .commercial-thumbnail-container {
            flex: 0 0 100%; 
        }
        
        .two-thumbnails-row .commercial-thumbnail-container {
            flex: 0 0 calc(50% - 4px); 
        }
        
        .three-thumbnails-row .commercial-thumbnail-container {
            flex: 0 0 calc(33.333% - 4px); 
        }
        
    
        
        
/* THUMBNAIL TEXT */
        .commercial-thumbnail-container .thumbnail-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #D5DBDB;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            z-index: 2; 
            transition: transform 0.9s ease, opacity 0.9s ease;
            white-space: nowrap; /* Prevent text from wrapping */
            width: 100%;
            /* text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); */
        }
        
        .commercial-thumbnail-container .first-row-text {
            font-weight: 400;
            opacity: 1; /* Text is always visible */
            margin-bottom: 0px;
        }
        
        .commercial-thumbnail-container .second-row-text {
            font-weight: 300;
            opacity: 1; /* Text is always visible */
        }
        
        /* Hover effects */
        .commercial-thumbnail-container:hover .thumbnail-text {
            opacity: 1; /* Text becomes visible on hover */
            transform: translate(-50%, -50%) scale(1.08);
        }
        
        



/* MOBILE THUMBNAILS */

        @media only screen and (max-width: 800px) {
               #commercial-thumbnails {
                width: 100%; /* Make the container fill the whole screen width */
                margin: 0; /* Remove any margins */
            }
            
            .one-thumbnail-row .commercial-thumbnail-container,
            .two-thumbnails-row .commercial-thumbnail-container,
            .three-thumbnails-row .commercial-thumbnail-container {
                flex-basis: calc(100% - 4px); /* For three thumbnails per row */
                box-sizing: border-box;
            }
        
            .commercial-thumbnail-container {
                border: 1px solid transparent; /* Adds a 'space' without affecting layout */
                background-clip: padding-box; /* Ensures the background doesn't bleed into the border area */
                margin: 1px; /* Adjust spacing as needed */
            }
        
            .commercial-thumbnail-container img {
                width: 100%;
                height: auto;
            }
        }
        


/* VIDEO WRAPPER */

        #video-wrapper {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          max-width: 100vw;
          box-sizing: border-box;
          z-index: 999;
          pointer-events: none;
        }
        
        #video-wrapper iframe,
        #video-wrapper video {
          pointer-events: auto; /* Enable pointer events only for the video player */
        }
        
        
        #video_overlay {
            display: none;
            position: fixed;
            z-index: 998; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); 
        }
        
        #close-video,
        #share-video {
            display: none;
            position: fixed;
            padding: 10px 4px;
            font-size: 18px;
            background-color: transparent; 
            border: none;
            cursor: pointer;
            z-index: 1010; 
        }

        #close-video {
            padding-right: 12px;
        }
        
        #close-video i,
        #share-video i {
            color: rgba(255, 255, 255, 0.4);
        }
        
        #close-video:hover i,
        #share-video:hover i {
            color: rgba(255, 255, 255, 0.6);
        }
        




/* ART */
        
        .image-thumbnails {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; /* Changed to flex-start for uniform spacing */
            width: 100%;
            padding-top: 65px;
            gap: 3px; /* Uniform gap between thumbnails */
            box-sizing: border-box;
        }
        
        .image-thumbnail-container {
            flex-basis: calc(33.333% - 2px);
            height: 0;
            overflow: hidden;
            position: relative;
            padding-top: 14%; /* Aspect ratio placeholder */
            border: none;
        }
        
        .image-thumbnail-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Crop to cover area */
            cursor: pointer; 
            opacity: 0; /* Initial opacity */
        }

        .image-thumbnail-container img.loaded {
            opacity: 1;
            transition: opacity 0.8s ease;
        }
        
        .image-thumbnail-container img:hover {
            opacity: 0.7;
            transition: opacity 0.2s ease-in-out;
        }
        

/* Modal */        
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 2; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Manage overflow */
            background-color: rgba(0, 0, 0, 0.85); /* Dim background */
        }
        
        .modal-content {
            max-width: 100%; /* Allows image to grow up to the full width of the viewport */
            width: 100%; /* Maintains aspect ratio */
            height: auto; /* Maintains aspect ratio */
            position: absolute; /* Allows for centering without translate */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Center the image */
            transition: opacity 0s ease;
        }
        
        
/* Style the previous and next buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%); /* Centers the buttons vertically */
            width: auto;
            padding: 10px;
            color: white;
            font-weight: bold;
            font-size: clamp(30px, 4vw, 45px);
            transition: transform 0.6s ease, opacity 0.6s ease;
            user-select: none;
            opacity: 0.3;
            background-color: transparent;
            
        }
        
/* Position the previous button on the left side */
        .prev {
            left: 30px;
            border-radius: 3px 0 0 10px;
        }
        
/* Position the next button on the right side */
        .next {
            right: 30px;
            border-radius: 3px 0 0 10px;
        }
        
/* Hover effect to grow the buttons */
        .prev:hover, .next:hover {
            /* Combines vertical centering with scaling to ensure buttons grow centered */
            transform: translateY(-50%) scale(1.2); 
            opacity: 0.5; /* Adjusts the button's visibility on hover */
        }
        

        

/* MOBILE ART */
        @media only screen and (max-width: 840px) {
            .image-thumbnails {
                width: 100%; 
                margin: 0px; 
                gap: 2px; 
                justify-content: center; 
                padding-top: 65px;
            }
        
            .image-thumbnail-container {
                /* Calculate flex-basis for 2 items per row, accounting for the gap */
                flex-basis: calc(50% - 3.5px); 
                height: auto; 
                overflow: hidden;
                position: relative;
                padding-top: 20%; /* Aspect ratio */
            }
        
            .image-thumbnail-container img {
                width: 100%; /* Ensure images within the containers take up full container width */
                height: auto; /* Adjust height automatically to maintain aspect ratio */
                object-fit: cover; /* Adjust if necessary to cover or contain based on your preference */
            }
        
          .prev, .next {
                padding: 15px; /* Adjust padding to change the size */
                font-size: 35px; /* Adjust font size for the arrow characters */
                opacity: 0.6;
                transform: translateY(-50%); /* Keep the buttons vertically centered */
            }
        
            /* "Disable" hover effects by making them match the non-hover state */
              .prev:hover, .next:hover {
                opacity: 0.6; /* Set this to match the non-hover state */
                transform: translateY(-50%); /* Maintain vertical center alignment */
            }
        }
        


/* CONTACTS */
    #contact-container {
      display: flex;
      justify-content: center;
      position: relative;
      width: 100%;
      margin: 140px auto 0;
      letter-spacing: 1px;
    }
    .contact-table tr {
      opacity: 0;
      transition: opacity 1s ease;
    }
    #contact-container.loaded .contact-table tr {
      opacity: 1;
    }
    #contact-container.loaded .contact-table tr:nth-child(2) { transition-delay: 0.2s; }
    #contact-container.loaded .contact-table tr:nth-child(3) { transition-delay: 0.4s; }
    .contact-table {
      width: auto;
      margin: 0 auto;
      border-collapse: collapse;
    }
    
    .section-title {
      font-weight: 300;
      font-style: normal;
      font-size: 14px;
      color: #8FAFB6;
      text-shadow: 0px 0px 1px #8FAFB6;
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      width: auto;
    }
    .contact-group {
      font-weight: 300;
      font-style: normal;
      font-size: 14px;
      color: #8FAFB6;
      text-shadow: 0px 0px 1px #8FAFB6;
      text-align: left;
      padding: 0 0 20px 0;
      vertical-align: top;
    }
    .representative {
      font-weight: 300;
      font-size: 14px;
      color: #A5C1C9;
      margin-top: 0px;
    }
    .contact-group p {
      margin-bottom: 20px;
    }
    
    .contact-table tr:last-child .contact-group {
        padding-bottom: 20; /* Remove padding-bottom for the last row */
}
    



/* SOCIAL ICONS  */

        .social-links-container {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 45px 0; /* Adjust padding as needed */
            opacity: 0;
            transition: opacity 1.0s ease;
        }
        
        .social-links-container.loaded {
            opacity: 1;
        }
        
        .social-links-container .social-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; 
            width: 100%;
        }
        
        .social-links-container .social-links a {
            margin: 0 5px; /* Adjust spacing between social icons */
            font-size: 14px; 
            color: #707677;
            transition: transform 0.5s ease, color 0.5s ease;
            display: inline-block; /* Change display to inline-block */
            padding: 5px; /* Add padding to increase hover area */
        }
        
        .social-links-container .social-links a:hover {
            color: #BFCACD;
            transform: scale(1.1);
        }