/*TABLE OF CONTENT

BASE STYLES
MENU (home intro — shared menu in css/menu.css)
VIDEO CONTAINER
FIRST LOAD
NAVIGATION
SOCIAL ICONS

*/

@keyframes blink {
    0%, 80%, 100% { opacity: 0.15; transform: scale(0.55); }
    40% { opacity: 1; transform: scale(1.15); }
}

/* BASE STYLES */

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html {
            background: #000;
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            min-height: -webkit-fill-available;
            min-height: 100dvh;
            overflow: hidden;
            background: #000;
            font-style: normal;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            height: 100%;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }

        body:has(.video-container):not(.is-leaving-home) {
            --menu-name: var(--menu-name-film);
            --menu-link: var(--menu-link-film);
            --menu-hot: var(--menu-hot-film);
            --rule: var(--rule-film);
        }

        a {
            text-decoration: none;
            color: var(--menu-link);
        }

        a:visited {
            color: var(--menu-link);
        }


            
/* MENU — shared type/pad/roll in css/menu.css. Home only: over video + intro. */

        #menu-container {
            position: relative;
            z-index: 20;
            transform: translateY(calc(-100% - 110px));
            transition: transform 0.6s ease;
        }

        #menu-container.is-in {
            transform: translateY(0);
        }

        #menu-container #menu {
            position: relative;
            z-index: 1;
        }

        #menu .menu-header .director {
            transition: color 0.35s ease;
        }

        .menu-links a {
            transition: color 0.2s ease;
        }

        #menu-container.is-ready .menu-links {
            overflow: visible;
        }

                    
        
        
/* VIDEO CONTAINER */

        .video-container {
            --nav-arrow-inset: calc(var(--peek) / 2);
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            overflow: hidden;
            clip-path: inset(0);
        }
        
        .video-slot {
            position: absolute;
            inset: 0;
            transition: transform 0.4s ease;
        }
        /* Spare slot changing sides must not animate across the screen. */
        .video-slot.is-teleporting {
            transition: none;
        }
        .video-slot.is-current {
            transform: translateX(0);
            z-index: 2;
        }
        .video-slot.is-prev {
            transform: translateX(-100%);
            z-index: 3;
        }
        .video-slot.is-next {
            transform: translateX(100%);
            z-index: 3;
        }
        .video-slot.is-leading {
            z-index: 4;
        }

        @media (hover: hover) and (pointer: fine) {
            .video-container.is-peek-prev .video-slot.is-prev {
                transform: translateX(calc(-100% + var(--peek)));
            }
            .video-container.is-peek-next .video-slot.is-next {
                transform: translateX(calc(100% - var(--peek)));
            }
        }
        .video-container video {
            transition: opacity 0.2s ease-in-out;
        }

        .video-container.is-intro .video-slot.is-current {
            clip-path: inset(50% 0);
        }
        .video-container.is-intro.is-revealed .video-slot.is-current {
            clip-path: inset(0);
            transition: clip-path 0.4s cubic-bezier(0.4, 0, 1, 1);
        }

        body.is-leaving-home {
            background: var(--card-face);
        }

        body.is-leaving-home .video-container {
            clip-path: inset(50% 0);
            transition: clip-path 0.4s cubic-bezier(0.4, 0, 1, 1);
        }

        #menu-container::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 110px;
            z-index: 0;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.4s ease;
            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) 40%,
                rgba(0, 0, 0, 0.4) 70%,
                rgba(0, 0, 0, 0.6) 100%
            );
        }
        body.is-leaving-home #menu-container::before {
            opacity: 0;
        }

        
        /* Styling for video element */
        video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            
            
        }

/* FIRST LOAD */

        #first-load {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        #first-load.visible {
            opacity: 1;
        }
        #first-load.done {
            opacity: 0;
        }
        #first-load .dots {
            position: absolute;
            top: 44.3%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 10px;
        }
        #first-load .dots span {
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.45);
            border-radius: 50%;
            animation: blink 1.6s ease-in-out infinite;
        }
        #first-load .dots span:nth-child(2) { animation-delay: 0.2s; }
        #first-load .dots span:nth-child(3) { animation-delay: 0.4s; }

/* NAVIGATION */
        
        .video-navigation {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: space-between;
            z-index: 25;
            pointer-events: none;
        }
        .video-navigation.is-in {
            pointer-events: auto;
        }
        .video-navigation button {
            background: none;
            border: none;
            color: var(--menu-link);
            font-size: var(--nav-arrow-size);
            width: var(--nav-hit);
            padding: 0;
            margin: 0;
            position: static;
            cursor: pointer;
        }
        .video-navigation button i {
            position: absolute;
            top: 50%;
            transition: color 0.3s ease, transform 0.6s ease;
        }
        #prev-video i {
            left: var(--nav-arrow-inset);
            transform: translate(calc(-50% - 48px), -50%);
        }
        #next-video i {
            left: calc(100% - var(--nav-arrow-inset));
            transform: translate(calc(-50% + 48px), -50%);
        }
        .video-navigation.is-in #prev-video i,
        .video-navigation.is-in #next-video i {
            transform: translate(-50%, -50%);
        }
        
            @media (max-width: 840px) {
        .video-navigation button {
            width: 18vw;
            max-width: none;
        }
    }
            
        @media (hover: hover) and (pointer: fine) {
            .video-navigation button:hover {
                color: var(--menu-hot);
            }
            .video-navigation button:hover i {
                transform: translate(-50%, -50%) scale(1.2);
            }
        }