body {margin:0px; font-family: 'IBM Plex Mono', monospace!important;}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Video controls - hide all native video controls */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-toggle-closed-captions-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* iOS Safari specific video control hiding */
video {
    -webkit-media-controls: none !important;
    -webkit-media-controls-start-playback-button: none !important;
}

/* Additional iOS fixes */
video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure VideoJS poster has higher z-index */
.vjs-poster {
    z-index: 10;
}

/* VTT Thumbnails Styling */
.vjs-vtt-thumbnails-tooltip {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    padding: 8px;
    font-family: 'IBM Plex Mono', monospace;
}

.vjs-vtt-thumbnails-tooltip img {
    border-radius: 4px;
    max-width: 320px;
    max-height: 180px;
    display: block;
}

.vjs-vtt-thumbnails-tooltip .vjs-vtt-thumbnails-timestamp {
    color: white;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
}



    .navbar-burger.is-large { transform: scale(2) translateX(-33%); }



img {
    height: auto;
    max-width: 100%;
    /* border-radius: 15px; */
    }

.y-offset {margin-top:50vh;}

.breath {height:40vh;}

.reels-viewport {height: 300vh; width:100vw; padding:40vh 0;}

.blackscreen {background-color: black; z-index: 999; height: 100vh; width: 100vw; position: absolute; top:0; left:0; opacity: 0; display:none; }

.fullscreen {
      width: 100vw!important;
      height: 100vh!important;
      object-fit: cover!important;
      position: fixed!important;
      top: 0;
      left: 0;
      grid-area: var(--fullGrid);
      z-index: -2;
}

/* Ensure video and all its elements stay behind intro */
#vid1,
#vid1 *,
.video-js,
.video-js * {
    z-index: -10 !important;
}

  .title {text-decoration: underline!important;}
  
  .vjs-poster img {

      object-fit: cover;
        }

.vjs-tech {
      object-fit: cover;}

/* Intro screen */
.intro {
background-image: url(../img/capsule-highlight-064834.jpg)!important;
background-position: center;
background-color: transparent!important; 
height: 100vh;
width: 100vw;
position: relative;
z-index: 999;
background-size: cover;
}

.credits {
    position: absolute;
    bottom: 2em;
    left: 2em;
    color: white;
    z-index:1000;

}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: max-height 0s 2s, visibility 0s 2s, opacity 1s linear;
    max-height: 0;
    }

.visible {
    visibility: visible!important;
    opacity: 1!important;
    transition: opacity 1s ease-in;
    }

/* Side Panel Layout */
.main-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
}

.video-container {
    flex: 1;
    position: relative;
    transition: width 0.3s ease;
}

.side-panel {
    width: 0;
    background: #1a1a1a;
    color: white;
    overflow-y: auto;
    overflow-x: visible; /* Allow close button to be visible */
    transition: width 0.3s ease;
    position: relative;
    border-left: 1px solid #333;
    z-index: 9999;
}

.side-panel.open {
    width: 40vw;
    z-index: 9999 !important;
    position: fixed !important;
    top: 0;
    right: 0;
    height: 100vh;
}

.side-panel.open .close-panel {
    left: calc(60vw - 30px); /* Slide in to the left edge of the sidebar */
    opacity: 1; /* Fade in when sidebar opens */
}

.side-panel-content {
    padding: 8rem 2rem 2rem 2rem; /* Large top padding to avoid navbar */
    max-width: 100%;
}

.side-panel-header {
    margin-bottom: 2rem;
}

.side-panel-header h2 {
    margin: 0;
}

/* Arrow close button on left side */
.close-panel {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid white;
    color: white;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0;
    position: fixed; /* Fixed positioning so it doesn't scroll */
    left: calc(100vw + 30px); /* Start off-screen to the right */
    top: 50vh; /* Always in the middle of the viewport */
    transform: translateY(-50%);
    border-radius: 50%;
    transition: left 0.3s ease; /* Animate the left position */
    z-index: 10001;
    width: 50px;
    height: 50px;
    display: flex; /* Always visible, just positioned off-screen */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
}

.close-panel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Highlight Items in Panel */
.highlight-item {
    display: flex;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.highlight-item:hover {
    background-color: #2a2a2a;
}

.highlight-thumbnail {
    width: 120px;
    height: 68px;
    margin-right: 1rem;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.highlight-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-content {
    flex: 1;
}

.highlight-timestamp {
    font-weight: bold;
    color: #4a9eff;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.highlight-timestamp:hover {
    color: #66b3ff;
}

.highlight-description {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
}

#content{display: none;}

#menuclock {
      color: white;
      font-size: 2em;
      border-width: 3px;
      border-style: solid;
      border-radius: 10px;
      padding: 2px 15px;
      margin:1rem;
}

  .btn {
      background-color: transparent!important;
      color: white!important;
      border-width: 2px!important;
      border-color: white!important;
      transition: all 0.3s ease;
}

.btn.loading-state {
      opacity: 0.7;
      cursor: not-allowed;
      animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 0.4; }
  100% { opacity: 0.7; }
}

.btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
}

.is-transparent {background-color: transparent!important;}

.btn:hover {border-color: #f5f5f5!important;}

.navbar-menu {box-shadow: none!important;}

/* Ensure navbar has lower z-index than side panel */
.navbar.is-fixed-top {
    z-index: 1000 !important;
}

.navbar, .navbar-menu, .navbar.is-fixed-top, .navbar-menu.is-active {
    z-index: 1000 !important;
}
/* #letsgo{visibility: hidden; opacity: 0;} */
#early{display:none;}
#late{display:none;}

/* Only hide loading text in highlights, not the main loading div */
#highlights .loading {
   display: none !important;
}

.audio {background-color:white; opacity: 0.5; z-index:999; position: relative;}

#element-toggle {
    display: none;
    }
#element-toggle:checked ~ #modal-share {
    display: flex;
    }

.modal-background {
    background-color: rgba(10,10,10,.3);
    }
.spotify-window {
    position: fixed;
    bottom: 20px;
    right: 20px;

}

.cap-second-button {border-width: 0px!important;}
.cap-second-button:hover {text-decoration: underline!important;}


.highlightsinner {
    /* overflow: scroll!important; 
    position: relative!important; */
    background-color: white!important;
    padding: 2em;

}

.storyspacer {margin-bottom:20vh!important; max-width: 600px;}

.spacedout {margin-bottom: 5vh!important;}

.navbar-burger {
    color: white!important;
}

#highlights {
   padding-top:100px
}

#highlights img {
   display: block;
   width: 100%;
   height: auto;
}

#highlights .image {
   position: relative;
}

#highlights .image::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #f5f5f5;
   z-index: -1;
}


#about {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top:20vh;
    opacity: 0;
};

/* --- Clock Scrubber Styles --- */
#clock-scrubber-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px; /* Initial width, will be adjusted by JS */
    height: 150px; /* Half the width to show the top half of the circle */
    z-index: 1001; /* Ensure it's above the video but below modals */
    overflow: hidden; /* Ensures we only see the top half */
}

#clock-scrubber svg {
    display: block;
    margin: 0 auto;
}

/* The background track of the scrubber */
.scrubber-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 8px;
    stroke-linecap: round;
}

/* The progress bar that fills as the video plays */
.progress-arc {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 8px;
    stroke-linecap: round;
    transition: stroke-dasharray 0.1s linear; /* Smooths the progress update */
}

/* The markers for each highlight on the scrubber */
.highlight-marker {
    fill: #f5f5f5; /* A bright white color */
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 1px;
    cursor: pointer;
    transition: r 0.2s ease;
}

.highlight-marker:hover {
    fill: #ff3860; /* Bulma's primary red for hover */
    r: 8px; /* Make the circle larger on hover */
}

/* The draggable handle */
.scrubber-handle {
    fill: #ffffff;
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: 2px;
    cursor: grab;
}

.scrubber-handle:active {
    cursor: grabbing;
}

/* The tooltip that appears on hover */
.scrubber-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 200px;
    text-align: center;
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1002;
    pointer-events: none; /* The tooltip itself shouldn't be interactive */
}

.scrubber-tooltip img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 5px;
}

.scrubber-tooltip p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0;
}

/* Preview tooltip for dragging */
.scrubber-preview-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 1003;
    pointer-events: none;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Clock interface in navbar */
#clock-scrubber {
    width: 130px;
    height: 130px;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    display: block;
    margin: 10px;
}

/* Basic mobile responsive sizing for navbar clock */
@media (max-width: 768px) {
    #clock-scrubber {
        width: 150px;
        height: 150px;
        margin: 15px;
    }
    
    .navbar-burger {
        width: 45px;
        height: 45px;
    }
    
    .navbar-burger span {
        width: 25px;
        height: 3px;
    }
}

#clock-scrubber svg {
    display: block;
    margin: 0 auto;
}

/* Basic mobile clock improvements */
@media screen and (max-width: 768px) {
    .scrubber-handle {
        r: 10px;
        stroke-width: 3px;
    }
    
    .highlight-marker {
        r: 8px;
        stroke-width: 2px;
    }
    
    #clock-scrubber {
        touch-action: none;
    }
}

.scrubber-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 200px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1002;
    pointer-events: none;
}

.scrubber-tooltip img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 5px;
}

.scrubber-tooltip p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0;
}



/* Basic mobile styles */
@media screen and (max-width: 768px) {
    .side-panel.open {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }
    
    .side-panel.open .close-panel {
        position: fixed;
        top: 2rem;
        right: 2rem;
        left: auto !important;
        transform: none;
        width: 50px;
        height: 50px;
        opacity: 1;
    }
}