/* ==========================================================================
   PORTFOLIO VIDEO GALLERY STYLESHEET
   
   This CSS controls the look and behavior of a video portfolio website.
   The site has a folder structure where users can click to open/close 
   video collections, and videos can play either in a side panel or as 
   fullscreen background videos.
   ========================================================================== */

/* =========================
   1) FONTS AND ANIMATIONS
   ========================= */

/* Load custom font from local files */
@font-face {
  font-family: "Web437_ToshibaTxL1_8x16";
  src: url("./media/fonts/Web437_ToshibaTxL1_8x16.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Shows fallback font while custom font loads */
}

/* Animation: Makes text flash between black and white colors */
@keyframes flash-bw {
  from { color: #ffffff; background-color: #000000; }
  to   { color: #000000; background-color: #ffffff; }
}

/* Animation: Instant toggle between two color states (no smooth transition) */
@keyframes flash-bw-instant {
  0%   { color: #000000; background-color: #fff; }
  50%  { color: #fff; background-color: #000; }
}

/* =========================
   2) BASIC PAGE SETUP
   ========================= */

/* Reset default spacing and set up basic page structure */
html, body {
  height: 100%;           /* Full viewport height */
  margin: 0;              /* Remove default spacing */
  padding: 0px;          /* Add space around entire page */
  font-size: 18px;        /* Base text size */
  overflow: hidden;       /* Prevent scrolling */
}

/* Set up font family with fallbacks (if custom font fails to load) */
html {
  font-family: "Web437_ToshibaTxL1_8x16", "w95fa", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;    /* Makes text look smoother on Mac */
  -moz-osx-font-smoothing: grayscale;     /* Makes text look smoother on Firefox */
}

/* Main body styling - this affects the entire page background and text */
body {
  font-family: inherit;                    /* Use the font from html element */
  background-color: #000000;              /* White background - changes to black when inverted */
  color: #ffffff;                          /* White text by default */
  -webkit-font-smoothing: antialiased;    /* Smooth text rendering */
  min-height: 100vh;                      /* At least full screen height */
  box-sizing: border-box;                 /* Include padding in size calculations */
  padding: 0vh 0vw;                       /* No extra padding */
  text-align: left;                       /* Align text to the left */
  margin: 0;                              /* No margin */
  font-size: 18px;                        /* Text size */
  position: relative;                     /* Needed for background text */
  
  /* ========== GRADIENT MAP / COLOR FILTER ========== */
  /* This remaps all colors on the page like Photoshop's Gradient Map */
  filter: 
    grayscale(0%)        /* ← 0-100%: Convert to grayscale first (0% = keep colors, 100% = full grayscale) */
    sepia(0%)           /* ← 0-100%: Add sepia/vintage tone */
    hue-rotate(10deg)    /* ← 0-360deg: Shift all hues (try 180deg for opposite colors) */
    saturate(100%)      /* ← 0-200%: Adjust color intensity (100% = normal, 150% = more vibrant) */
    brightness(100%)    /* ← 0-200%: Adjust brightness (100% = normal) */
    contrast(100%)      /* ← 0-200%: Adjust contrast (100% = normal) */
    invert(100%);         /* ← 0-100%: Invert colors (0% = normal, 100% = fully inverted) */
  /* ========== END GRADIENT MAP ========== */
  
  /* Examples to try:
     Vintage look: grayscale(30%) sepia(40%) hue-rotate(10deg)
     Blue tone: hue-rotate(200deg) saturate(120%)
     High contrast: contrast(120%) saturate(130%)
     Inverted: invert(100%) hue-rotate(180deg)
  */
}

/* ========== BACKGROUND TEXT ========== */
body::before {
  content: "⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⢠⡆⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠈⣷⣄⠀⠀⠀⠀⣾⣷⠀⠀⠀⠀⣠⣾⠃⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⢿⠿⠃⠀⠀⠀⠉⠉⠁⠀⠀⠐⠿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⣤⣤⣶⣶⣶⣤⣤⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣄⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⣠⣶⣿⣿⡿⣿⣿⣿⡿⠋⠉⠀⠀⠉⠙⢿⣿⣿⡿⣿⣿⣷⣦⡀⠀⠀⠀\A⠀⢀⣼⣿⣿⠟⠁⢠⣿⣿⠏⠀⠀⢠⣤⣤⡀⠀⠀⢻⣿⣿⡀⠙⢿⣿⣿⣦⠀⠀\A⣰⣿⣿⡟⠁⠀⠀⢸⣿⣿⠀⠀⠀⢿⣿⣿⡟⠀⠀⠈⣿⣿⡇⠀⠀⠙⣿⣿⣷⡄\A⠈⠻⣿⣿⣦⣄⠀⠸⣿⣿⣆⠀⠀⠀⠉⠉⠀⠀⠀⣸⣿⣿⠃⢀⣤⣾⣿⣿⠟⠁\A⠀⠀⠈⠻⣿⣿⣿⣶⣿⣿⣿⣦⣄⠀⠀⠀⢀⣠⣾⣿⣿⣿⣾⣿⣿⡿⠋⠁⠀⠀\A⠀⠀⠀⠀⠀⠙⠻⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠁⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠿⠿⠿⠿⠿⠿⠿⠛⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⢰⣷⡦⠀⠀⠀⢀⣀⣀⠀⠀⠀⢴⣾⡇⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⣸⠟⠁⠀⠀⠀⠘⣿⡇⠀⠀⠀⠀⠙⢷⠀⠀⠀⠀⠀⠀⠀⠀\A⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠻⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀";        /* ← CHANGE: Your background text here. Use \A for line breaks */
  position: fixed;
  left: 10%;
  top: 50%;
  transform: translate(0%, 0%);
  font-size: 15px;                      /* ← CHANGE: Size of text (viewport width based) */
  font-weight: bold;
  color: rgb(0, 0, 0);          /* ← CHANGE: Color and opacity (very light) */
  z-index: 2;                          /* Behind everything */
  pointer-events: none;                /* Can't click on it */
  white-space: pre;                    /* Allows line breaks with \A */
  user-select: none;                   /* Can't select the text */
  text-align: center;                  /* Center multiple lines */
}
/* ========== END BACKGROUND TEXT ========== */

/* ========== MANUAL CONTROL FOR INVERTED STATE ========== */
/* CSS doesn't support if statements, so you need to manually change both:
   1. Set invert(100%) in the filter above
   2. Change background-color below to #000000
   
   For normal (non-inverted):
   - filter: invert(0%)
   - background-color: #ffffff (white)
   
   For inverted:
   - filter: invert(100%)
   - background-color: #000000 (black)
*/
/* ========== END INVERTED STATE NOTE ========== */

/* Special styling when background video is playing */
body.bg-playing {
  background-color: transparent !important; /* Make body background invisible */
}

/* Main page container - this holds all the content */
#D1325738791.page {
  position: absolute;                     /* Position relative to viewport */
  z-index: 1;                            /* Layer above background video */
  background-color: transparent;          /* No background color by default */
  transition: background-color 0ms ease;  /* No transition for instant changes */
  padding: 0px;                          /* No inner spacing */
  max-width: 100vw;                      /* Full viewport width */
  width: 100vw;                          /* Full viewport width */
  height: 100vh;                         /* Full viewport height */
  margin: 0;                             /* No margin */
  border: none;                          /* Remove black border */
  border-radius: 0px;                    /* Square corners */
  box-sizing: border-box;                /* Include padding and border in size */
}

/* Special border styling when background video is playing */
#D1325738791.page.bg-playing,
body.bg-playing #D1325738791.page {
  border: 3px solid rgba(0, 0, 0, 0.95); /* Semi-transparent black border */
  padding: 10px;                         /* Slightly less padding when video plays */
  z-index: 10;                          /* Higher layer to stay above video */
}

/* Make page full width on small screens */
@media (max-width: 800px) {
  #D1325738791.page { 
    padding: 0vh 0vw; 
    max-width: 100%; 
  }
  .hover-item .click-media, 
  .hover-item .media { 
    max-width: 100vw; 
    margin-left: 0; 
  }
}

/* =========================
   3) FOLDER LAYOUT AND LIST ITEMS
   ========================= */

/* Keep folder list left aligned */
.folder-toggle { 
  text-align: left; 
}

/* Create tight stacks for text rows with minimal spacing */
.hover-item {
  display: flex;                         /* Arrange items in a row */
  align-items: center;                   /* Vertically center content */
  gap: 0rem;                            /* No space between elements */
  margin: 0;                            /* Remove large spacing between rows */
  padding: 0px 0;                       /* Small vertical padding so lines don't touch */
  line-height: 1;                       /* Tight line spacing */
  width: 100%;                          /* Take full width available */
}

/* Add thin separator line between items */
.hover-item + .hover-item {
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Style the text to fit properly and not push other elements */
.hover-item .text {
  display: inline-block;                /* Keep text inline but allow styling */
  margin: 0;                           /* No extra margins */
  padding: 0;                          /* No extra padding */
  white-space: nowrap;                 /* Don't wrap text to new line */
  overflow: hidden;                    /* Hide text that's too long */
  text-overflow: ellipsis;             /* Show "..." when text is cut off */
  max-width: 60ch;                     /* Maximum width in characters */
}

/* Hide inline media inside labels - we use the independent panel instead */
.hover-item .click-media,
.hover-item .media {
  display: none !important;            /* Completely hide these elements */
  pointer-events: none;                /* Can't be clicked */
  opacity: 0 !important;               /* Invisible */
  visibility: hidden !important;       /* Hidden from screen readers too */
}

/* =========================
   4) MEDIA PANEL - SIDE DISPLAY AREA
   ========================= */

/* Independent media panel positioned separately from the main content */
.media-panel {
  position: fixed;                      /* Stay in same place when scrolling */
  top: 70%;                            /* Center vertically */
  left: 70%;                           /* Center horizontally */
  transform: translate(-50%, -50%);    /* Offset to truly center */
  width: min(70vw, 900px);             /* Wider for better visibility */
  max-height: 80vh;                    /* Maximum 80% of screen height */
  z-index: 200;                        /* Very high layer - above folder contents */
  display: flex;                       /* Flexible layout */
  align-items: center;                 /* Center content vertically */
  justify-content: center;             /* Center content horizontally */
  overflow: hidden;                    /* Hide any content that doesn't fit */
  visibility: hidden;                  /* Hidden by default */
  opacity: 0;                          /* Transparent by default */
  transition: opacity 180ms ease, visibility 180ms; /* Smooth fade in/out */
  pointer-events: auto;                /* Allow clicking on panel contents */
  background-color: transparent;       /* No background */
  padding: 20px;                       /* Inner spacing */
}

/* Make panel visible when a media item is active */
.media-panel.visible {
  visibility: visible;                 /* Make panel visible */
  opacity: 1;                          /* Make panel fully opaque */
}

/* Style videos inside the media panel */
.media-panel video {
  width: 100%;                         /* Full width of panel */
  height: auto;                        /* Keep aspect ratio */
  max-height: 75vh;                   /* Maximum height */
  display: block;                      /* Display as block element */
  border-radius: 0px;                  /* Square corners */
  border: 3px solid rgba(0, 0, 0, 0.95); /* Dark border around video */
  padding: 0px;                        /* No inner padding */
}

/* Responsive design: adjust panel for smaller screens */
@media (max-width: 900px) {
  .media-panel {
    width: 90vw;                       /* 90% of screen width */
    max-height: 70vh;                  /* Slightly smaller on mobile */
    padding: 10px;                     /* Less padding on mobile */
  }
}

/* =========================
   5) BACKGROUND VIDEO STYLING
   ========================= */

/* Background video styling when it's playing behind content */
#D1325738791.page.bg-playing {
  background-color: transparent;         /* Make background transparent */
  border: 6px solid rgba(0, 0, 0, 0.95); /* Dark border to frame the content */
  border-radius: 6px;                   /* Slightly rounded corners */
  box-sizing: border-box;               /* Include border in size calculations */
  overflow: visible;                    /* Don't clip the border */
  z-index: 3;                          /* Stay above the background video */
}

/* The fullscreen background video element */
.bg-video {
  position: fixed;                      /* Fixed position covers entire screen */
  inset: 0;                            /* Top, right, bottom, left all set to 0 */
  width: 100%;                         /* Full screen width */
  height: 100%;                        /* Full screen height */
  object-fit: fill;                    /* Stretch video to fill screen */
  pointer-events: none;                /* Can't be clicked or interacted with */
  opacity: 0;                          /* Hidden by default */
  transition: opacity 0s ease;         /* No fade transition */
  z-index: -2;                         /* Very low layer, behind everything */
}

/* Make background video visible when activated */
.bg-video.visible {
  opacity: 1;                          /* Fully visible */
}

/* =========================
   6) STACKED FOLDER TABS SYSTEM
   ========================= */

/* Container for the stacked folder tabs */
.folder-stack-container {
  position: relative;                   /* For positioning stacked tabs */
  width: 100vw;                        /* Full viewport width */
  height: 100vh;                       /* Full viewport height */
  margin: 0;                           /* No margin */
  padding: 0;                          /* No padding */
  overflow: visible;                   /* Allow folders to extend beyond edges */
  background: transparent;             /* No background */
  pointer-events: none;                /* Container doesn't block clicks */
}

/* Hide the radio inputs that control tab selection */
.folder-tab-checkbox {
  position: absolute;                   /* Remove from layout */
  opacity: 0;                          /* Invisible */
  width: 0;                           /* No width */
  height: 0;                          /* No height */
  pointer-events: none;               /* Can't be clicked directly */
}

/* Individual folder tab styling */
.folder-tab {
  position: absolute;                  /* Absolute positioning for stacking */
  width: 0;                           /* Minimal width - let image define size */
  height: 0;                          /* Minimal height - let image define size */
  transition: none;                   /* No animation - instant switching */
  cursor: pointer;                    /* Show it's clickable */
  pointer-events: none;               /* Disable clicking on the container itself */
  overflow: visible;                  /* Allow image to show outside */
}

/* Create CSS folder shape - main rectangular body */
.folder-tab-label {
  display: block;                     /* Full block element */
  position: relative;                 /* For pseudo-elements */
  width: auto;                        /* Auto width based on image */
  height: auto;                       /* Auto height based on image */
  cursor: pointer;                   /* Show it's clickable */
  overflow: visible;                 /* Allow content to show outside */
  pointer-events: none;               /* Disable clicking on label */
}

/* Style the folder PNG images */
.folder-image {
  width: auto;                       /* Auto width to maintain aspect ratio */
  height: auto;                      /* Auto height to maintain aspect ratio */
  max-width: none;                   /* Remove max width constraint */
  max-height: none;                  /* Remove max height constraint */
  object-fit: none;                  /* Don't scale, just crop */
  object-position: left bottom;      /* Align to left and bottom */
  display: block;                    /* Remove inline spacing */
  pointer-events: auto;              /* Allow clicks ONLY on the image */
  transform: translateY(-99vh) translateX(-2px) scale(0.25);  /* Move up, left 2px, AND scale to 50% size */
  transform-origin: left bottom;     /* Scale from bottom-left corner */
  filter: invert(0);                 /* No invert by default */
  transition: filter 0s ease;      /* Smooth transition for invert effect */
}

/* Invert colors when hovering over folder image */
.folder-image:hover {
  filter: invert(1);                 /* Fully invert colors on hover */
}

/* Don't invert the front folder (dynamically set by JavaScript) */
.folder-tab.is-front .folder-image:hover {
  filter: invert(0);                 /* No invert for front folder */
}

/* Default positioning for each tab (stacked up and right) - Fallback if JS doesn't load */
.folder-tab[data-original-order="1"] { bottom: 0; left: 0px;   z-index: 20; }    /* About Me - Front */
.folder-tab[data-original-order="2"] { bottom: 35px;  left: 50px;  z-index: 19; }    /* Interactive Coding */
.folder-tab[data-original-order="3"] { bottom: 70px;  left: 100px; z-index: 18; }    /* Video Work */  
.folder-tab[data-original-order="4"] { bottom: 105px; left: 150px; z-index: 17; }    /* Sculpture Work */
.folder-tab[data-original-order="5"] { bottom: 140px; left: 200px; z-index: 16; }    /* Graphic Design */
.folder-tab[data-original-order="6"] { bottom: 175px; left: 250px; z-index: 15; }    /* Sound Work - Back */

/* Container for folder structure */
.folder-container {
  width: 100%;                          /* Full width available */
  margin: 0;                           /* No margin */
}

/* Utility class for page content columns if used */
[id="D1325738791"] .page-layout {
  max-width: 33.33%;                   /* One third of available width */
  align-items: flex-start;             /* Align to top */
}

/* =========================
   7) FOLDER CONTENTS DISPLAY
   ========================= */

/* Folder contents - hidden by default */
.folder-contents {
  display: none;                      /* Hidden by default */
  position: fixed;                    /* Fixed position on screen */
  top: 61%;                          /* Center vertically */
  left: 0%;                         /* Center horizontally */
  transform: translate(10%, -50%);  /* Offset by half width/height to truly center */
  width: 500px;                      /* Fixed width for consistency */
  height: 4000px;
  max-height: 65vh;                  /* Maximum height */
  background-color: rgb(255, 255, 255); /* Light blue background with transparency */
  border: 2px solid #000000;            /* Black border */
  color: #000000;
  padding-top: 15px;
  padding-left: 20px;                     /* Inner spacing */
  padding-right: 12px;
  z-index: 100;                      /* Very high to be in front of everything */
  overflow-y: auto  ;                  /* Scroll if content is too long */
  pointer-events: none;              /* Don't block clicks when hidden */
}

/* ========== INDIVIDUAL FOLDER CONTENT CUSTOMIZATION ========== */
/* Customize each folder's box size and position independently */

/* FOLDER 1: THOR SØLYST FARUP */
#content-1 {
  width: 500px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* FOLDER 2: AUDIO/VISUAL */
#content-2 {
  width: 500px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* FOLDER 3: TEXT */
#content-3 {
  width: 300px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* FOLDER 4: INTERACTIVE CODING */
#content-4 {
  width: 500px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* FOLDER 5: PHOTOS */
#content-5 {
  width: 500px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* FOLDER 6: 3D-STUFF */
#content-6 {
  width: 500px;           /* ← Change width */
  max-height: 65vh;       /* ← Change max height */
  top: 61%;               /* ← Change vertical position */
  left: 0%;               /* ← Change horizontal position */
}

/* ========== END INDIVIDUAL CUSTOMIZATION ========== */

/* Show contents when the corresponding folder tab is checked */
#folder-tab-1:checked ~ .folder-contents#content-1,
#folder-tab-2:checked ~ .folder-contents#content-2,
#folder-tab-3:checked ~ .folder-contents#content-3,
#folder-tab-4:checked ~ .folder-contents#content-4,
#folder-tab-5:checked ~ .folder-contents#content-5,
#folder-tab-6:checked ~ .folder-contents#content-6 {
  display: block;
  pointer-events: auto;              /* Enable clicks when visible */
}

/* Style for clickable items inside folders */
.folder-item {
  display: block;                    /* Block display */
  padding: 15px 20px;                /* Padding around text */
  margin-bottom: 10px;               /* Space between items */
  background-color: rgba(255,255,255,0.8); /* Semi-transparent white background */
  border: 1px solid #ccc;           /* Light border */
  border-radius: 5px;               /* Rounded corners */
  cursor: pointer;                  /* Show it's clickable */
  transition: all 0.2s ease;       /* Smooth hover transition */
  color: #ffffff;                      /* Dark text */
  text-decoration: none;            /* Remove link underline */
  font-size: 16px;                  /* Text size */
  position: relative;               /* For absolute positioning of hidden elements */
}

.folder-item:hover {
  background-color: #fff;           /* White background on hover */
  border-color: #999;               /* Darker border on hover */
  transform: translateY(-2px);     /* Slight lift effect */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Shadow on hover */
}

/* Hide the radio inputs for video items */
.folder-item .toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Hide the text span for video items (we use the folder-item styling instead) */
.folder-item .folder-item-text {
  display: none;
}

/* Show content for the selected tab */
#folder-tab-1:checked ~ #content-1,
#folder-tab-2:checked ~ #content-2,
#folder-tab-3:checked ~ #content-3,
#folder-tab-4:checked ~ #content-4,
#folder-tab-5:checked ~ #content-5,
#folder-tab-6:checked ~ #content-6 {
  display: block !important;          /* Show the selected content */
}

/* =========================
   8) HOVER ITEMS - INTERACTIVE LIST ELEMENTS
   ========================= */

/* Main hover item container (each clickable row) */
.hover-item {
  display: flex;                       /* Arrange items in a row */
  align-items: center;                 /* Center items vertically */
  gap: 0.75rem;                       /* Space between icon and text */
  cursor: pointer;                     /* Show it's clickable */
  margin-bottom: 0px;                 /* No bottom margin */
  position: relative;                  /* For positioning child elements */
  text-align: left;                   /* Left align content */
}

/* Hide the radio input that controls selection */
.hover-item .toggle {
  position: absolute;                  /* Remove from normal layout */
  opacity: 0;                         /* Make invisible */
  width: 0;                           /* No width */
  height: 0;                          /* No height */
  pointer-events: none;               /* Can't be clicked directly */
}

/* Icon next to the text */
.hover-item .icon {
  width: 20px;                        /* Icon width */
  height: 20px;                       /* Icon height */
  flex: 0 0 20px;                     /* Don't grow or shrink, stay 20px */
  transition: transform 0ms ease, opacity 0ms ease; /* No animation */
}

/* Text label styling */
.hover-item .text {
  display: inline-block;              /* Display inline but allow styling */
  transition: transform 0ms ease, color 0ms ease; /* No animation */
  color: #000000;                     /* Black text */
}

/* Hover effect - black background with white text */
.hover-item:hover .text {
  display: inline-block;              /* Display as inline block */
  background-color: black;            /* Black background */
  color: white;                       /* White text */
  padding: 0.0em 0.2em;              /* Small padding around text */
  border-radius: 2px;                 /* Slightly rounded corners */
}

/* Alternative flashing animation (currently disabled) */
/* 
.hover-item:hover .text {
  animation-name: flash-bw-instant;
  animation-duration: 0.5s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: none;
  will-change: color, background-color;
}
*/

/* Active item styling (currently selected item) */
.hover-item.active .text {
  transform: translateX(0px);         /* No horizontal movement */
  display: inline-block;              /* Display as inline block */
  padding: 0.0em 0.2em;              /* Small padding around text */
  border-radius: 2px;                 /* Slightly rounded corners */
  color: white;                       /* White text */
  background-color: black;            /* Black background */
}

/* Icon styling for hover and active states */
.hover-item:hover .icon,
.hover-item.active .icon {
  transform: translateX(0px);         /* No horizontal movement */
  opacity: 1;                         /* Fully visible */
}

/* =========================
   9) MEDIA HIDING AND UTILITY CLASSES
   ========================= */

/* Hide inline media elements - we use the separate panel instead */
.hover-item .click-media,
.hover-item .media {
  display: none !important;            /* Completely hide these elements */
  pointer-events: none;                /* Can't be clicked */
  opacity: 0 !important;               /* Invisible */
  visibility: hidden !important;       /* Hidden from screen readers too */
}

/* Specific spacing override for second item */
.hover-item:nth-of-type(2) .media {
  margin-top: 2rem;                    /* Extra top margin */
}

/* Reset/hidden helper class */
.hover-item.reset {
  display: none;                       /* Completely hidden */
}

/* Accessibility utility class for screen reader only content */
.visually-hidden {
  position: absolute !important;       /* Remove from layout */
  height: 1px;                        /* Minimal height */
  width: 1px;                         /* Minimal width */
  overflow: hidden;                   /* Hide any overflow */
  clip: rect(1px, 1px, 1px, 1px);    /* Clip to tiny rectangle */
  white-space: nowrap;                /* Don't wrap text */
}

/* =========================
   10) ADVANCED MEDIA PANEL CONFIGURATION
   ========================= */

/* CSS Variables for consistent sizing across all panel elements */
:root {
  --panel-max-w: 80vw;                 /* Maximum width as percentage of viewport */
  --panel-max-h: 65vh;                 /* Maximum height as percentage of viewport */
  --panel-arrows-h: 48px;              /* Height reserved for navigation arrows */
  --panel-padding: 20px;               /* Internal padding around panel content */
  --panel-max-width-px: 900px;         /* Maximum width in pixels */
}

/* Enhanced media panel styling with CSS variables */
.media-panel {
  width: min(var(--panel-max-w), var(--panel-max-width-px)); /* Use smaller of percentage or pixel value */
  max-width: var(--panel-max-w);       /* Maximum width constraint */
  max-height: var(--panel-max-h);      /* Maximum height constraint */
  padding: var(--panel-padding);       /* Internal spacing */
  box-sizing: border-box;              /* Include padding in size calculations */
  display: flex;                       /* Flexible layout */
  flex-direction: column;              /* Stack items vertically */
  align-items: center;                 /* Center content horizontally */
  justify-content: center;             /* Center content vertically */
  overflow: visible;                   /* Allow borders and arrows to show */
  right: 0vw;                         /* Position from right edge */
  bottom: 6vh;                        /* Position from bottom edge */
  z-index: 30;                        /* High layer priority */
}

/* Ensure the panel visibility works correctly */
.media-panel.visible { 
  visibility: visible;                 /* Make panel visible */
  opacity: 1;                         /* Make panel fully opaque */
}

/* Container for image carousel functionality */
.media-frame {
  width: 100%;                        /* Full width of panel */
  max-width: 100%;                    /* Don't exceed panel width */
  display: flex;                      /* Flexible layout */
  flex-direction: column;             /* Stack items vertically */
  align-items: center;                /* Center images horizontally */
  justify-content: center;            /* Center images vertically */
  gap: 8px;                          /* Small space between image and arrows */
  box-sizing: border-box;            /* Include padding in size calculations */
  padding: 0;                        /* No internal padding */
}

/* Navigation arrows container */
.frame-arrows {
  width: 100%;                       /* Full width of frame container */
  height: var(--panel-arrows-h);     /* Fixed height for arrows */
  display: flex;                     /* Flexible layout */
  align-items: center;               /* Center arrows vertically */
  justify-content: center;           /* Center arrows horizontally */
  gap: 16px;                        /* Space between left and right arrows */
  box-sizing: border-box;           /* Include padding in size calculations */
}

/* Unified sizing for images and videos in the panel */
.media-frame .frame-img,
.media-panel video {
  display: block;                    /* Display as block element */
  margin: 0 auto;                   /* Center horizontally */
  width: auto;                      /* Automatic width based on content */
  max-width: 100%;                  /* Don't exceed container width */
  max-height: calc(var(--panel-max-h) - var(--panel-arrows-h) - (var(--panel-padding) * 2)); /* Calculate max height minus arrows and padding */
  object-fit: contain;              /* Keep aspect ratio, fit within bounds */
  box-sizing: border-box;           /* Include border in size calculations */
  border: 3px solid rgba(0, 0, 0, 0.95); /* Dark border around media */
  background: transparent;          /* Transparent background */
}

/* Variables for arrow button images */
.media-panel {
  --arrow-left: url("./media/icons/Apple.png");    /* Left arrow image */
  --arrow-right: url("./media/icons/Agent.png");   /* Right arrow image */
}

/* Apply images to the arrow buttons */
.frame-arrow {
  background-size: contain;            /* Scale image to fit button */
  background-repeat: no-repeat;        /* Don't repeat image */
  background-position: center;         /* Center image in button */
  border: none;                       /* No border */
  padding: 0;                         /* No internal padding */
  cursor: pointer;                    /* Show it's clickable */
}

.frame-arrow.left  { background-image: var(--arrow-left);  }  /* Use left arrow image */
.frame-arrow.right { background-image: var(--arrow-right); } /* Use right arrow image */

/* Detailed arrow button styling */
.frame-arrow {
  width: 44px;                        /* Button width */
  height: 44px;                       /* Button height */
  background-color: transparent;       /* Transparent background */
  background-repeat: no-repeat;        /* Don't repeat image */
  background-position: center;         /* Center image */
  background-size: contain;            /* Fit image within button */
  border: none;                       /* No border */
  -webkit-appearance: none;           /* Remove default browser styling on Safari */
  appearance: none;                   /* Remove default browser styling */
  outline: none;                      /* No focus outline */
  box-shadow: none;                   /* No shadow */
  cursor: pointer;                    /* Show it's clickable */
  padding: 0;                         /* No internal padding */
  opacity: 1;                         /* Fully visible */
}

/* Re-apply images (ensures they override any previous styles) */
.frame-arrow.left  { background-image: var(--arrow-left);  }  /* Left arrow image */
.frame-arrow.right { background-image: var(--arrow-right); } /* Right arrow image */

/* =========================
   11) RESPONSIVE DESIGN
   ========================= */

/* Adjustments for medium-sized screens */
@media (max-width: 900px) {
  :root { 
    --panel-max-w: calc(100vw - 4vw);  /* Adjust panel width for smaller screens */
  }
  .frame-arrow { 
    width: 36px;                       /* Smaller arrow buttons */
    height: 36px; 
  }
}

/* Adjustments for small screens */
@media (max-width: 520px) {
  :root { 
    --panel-arrows-h: 38px;            /* Smaller arrow area height */
  }
  .media-frame .frame-img,
  .media-panel video { 
    max-height: calc(80vh - var(--panel-arrows-h) - 24px); /* Adjust media height for small screens */
  }
}

/* =========================
   MOVABLE WHITE BOX
   ========================= */
.movable-box {
  position: fixed;                     /* Fixed position on screen */
  top: 80%;                           /* ← CHANGE: Vertical position */
  left: 50%;                          /* ← CHANGE: Horizontal position */
  transform: translate(-50%, -50%);   /* Center the box */
  width: 100vw;                       /* ← CHANGE: Width of box */
  height: 100vh;                      /* ← CHANGE: Height of box */
  background-color: white;            /* ← CHANGE: Background color */
  z-index: -10;                         /* ← CHANGE: Layer position (below folders) */
  pointer-events: none;               /* Can't interact with it */
}

/* =========================
   LOADING INDICATOR
   ========================= */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border: 1px solid #ffffff;
    z-index: 100;
    pointer-events: none;
}

.loading-indicator::after {
    content: '';
    animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
    0%, 25% { content: ''; }
    26%, 50% { content: '.'; }
    51%, 75% { content: '..'; }
    76%, 100% { content: '...'; }
}

/* =========================
   END OF STYLESHEET
   ========================= */