body {
    margin: 0;
    font-family: "Orbitron";
    background: #303030;
  }

  body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }



  /*---------------------------------------
     TYPOGRAPHY              
  -----------------------------------------*/

  h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
    line-height: inherit;
  }

  h1 {
    color: #ffffff;
    font-size: 2em;
  }

  h2 {
    color: #353535;
    font-size: 2em;
  }

  p {
    color: #757575;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
  }


  /*---------------------------------------
     ANIMATED BG               
  -----------------------------------------*/

        /* Matrix rain effect */
        .matrix-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0.15;
        }




  /*---------------------------------------
     GENERAL               
  -----------------------------------------*/

  html{
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: #202020;
    text-decoration: none !important;
  }

  a,
  input, button,
  .form-control {
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  a:hover, a:active, a:focus {
    color: #29ca8e;
    outline: none;
  }

  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: #202020;
  }

  .overlay {
    background: linear-gradient(to bottom, #330033, #333300, #001933);
    opacity: 0.9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

/* colors for pan gradient very bright (to bottom, #ff007f, #ffff00, #0000ff) */

  /*---------------------------------------
       PRE LOADER              
  -----------------------------------------*/

  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #ffffff;
  }

  .spinner {
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative;
  }

  .spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1px solid #575757;
    border-top-color: #ffffff;
    animation: spinner .9s linear infinite;
  }


  @keyframes spinner {
    to {transform: rotate(360deg);}
  }


  /*---------------------------------------
      MENU              
  -----------------------------------------*/

  .menu, .menu-bg, .menu-burger {
    position: fixed;
    z-index: 222;
    width: 50px;
    height: 50px;
    line-height: 30px;
    font-size: 25px;
    text-align: center;
    border-radius: 100%;
    right: 25px;
    top: 25px;
  }

/* REPLACE the existing .menu-bg rule with this one */
.menu-bg {
  background: #101010;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform: scale(0); /* This makes it start as a dot */
  transform-origin: center center; /* This makes it grow from the middle */
  transition: all 0.5s ease;
  z-index: 990; /* Make sure it's behind the menu text */
}


/* REPLACE the existing .menu-bg.fs rule with this one */
.menu-bg.fs {
  transform: scale(1.5); /* This makes it grow large enough to fill the screen */
}


  .menu-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .8s;
    margin-top: 5vh;
    transform: translateY(-200%);
    pointer-events: none;
  }

  .menu-items ul.menu {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    top: 10px;
  }

  .menu-items ul.menu li {
    display: block;
    list-style: none;
    transition: 1s;
    opacity: 0;
    margin: 5px 0;
  }

  .menu-items ul.menu li a {
    color: #ffffff;
    font-size: 18px;
    position: relative;
  }

  .menu-items ul.menu li a:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 50px;
    position: absolute;
    bottom: 13px;
    transition: 0.5s;
    margin: 0 auto;
    display: block;
    right: 0;
    left: 0;
  }

  .menu-items ul.menu li a:hover:after {
    content: "";
    background: #d2b48c;
    width: 100%;
  }

  .menu-items.fs {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
  }

  .menu-items.fs ul li {
    opacity: 1;
  }

  address p {
    color: #f9f9f9;
  }

.menu-trigger {
  cursor: pointer;
  position: fixed;
  z-index: 10000; 
  color: white;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Button Styles */
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 18px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

/* Hover effect for the menu trigger button */
.menu-trigger:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.menu-trigger.fs {
  top: 15px;
  left: auto;
  right: 15px;
  transform: none;
}

/* --- "Close" Menu Trigger Button Styling --- */

/* This turns the "Close" text into a styled button */
.menu-trigger.fs {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 18px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

/* This adds the glow and changes color on hover */
.menu-trigger.fs:hover {
  background-color: #fff;
  color: #000;
  
}


  /*---------------------------------------
      HOME          
  -----------------------------------------*/

  #home {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: relative;
  }

  #home .container {
    width: 100%;
  }

.home-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns content to the top */
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  padding-top: 15vh; /* Adds some space from the very top edge */
}
  
/* Improves text readability on the new animated background */
.home-info h1 {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}





  /*---------------------------------------
     RESPONSIVE STYLES              
  -----------------------------------------*/

  @media screen and (max-width: 480px) {

    .home-info {
      padding: 0 1em 0 1em;
    }
  }


  @media screen and (max-width: 360px) {

    h1 {
      font-size: 1.50em;
    }

    .menu-items {
      margin: 100px 0;
    }

  }


/* Vegas Slideshow Flicker Fix */
.vegas-container {
  z-index: -2 !important; /* Puts the image slideshow behind everything else. */
  opacity: 0.8;
  overflow: hidden !important;
  will-change: transform;
}




/* 3. Gradient Overlay (Top Layer) */
#home .overlay {
    opacity: 0.9; /* Adjust visibility of the gradient */
    z-index: 1;
}

/* 4. Content (Always on Top) */
.home-info {
    z-index: 2;
}




/* --- Image Gallery Carousel Styles (Corrected & Improved) --- */

.gallery-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 2vw;
    padding: 2vw;
    padding-bottom: 7vh;
    box-sizing: border-box;
    overflow-y: auto;
}

.carousel-row {
    width: 100%;
    max-width: 1300px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}


.carousel-row:hover .carousel-track:not(.is-filtered) {
    animation-play-state: paused;
}


.carousel-track {
    display: flex;
    gap: 3vh 1vw;
    --img-width: 300px;
    --img-height: 25vh; 
    animation: scroll linear infinite;
}


.carousel-track.is-filtered {
    animation: none;
    transition: transform 0.7s ease-in-out;
}


/* The single, DYNAMIC scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* This now uses the variable calculated by JavaScript! */
        transform: translateX(var(--scroll-width));
    }
}


/* --- New Styles for Image Overlay --- */

.carousel-image-container {
    position: relative;
    flex-shrink: 0;
    width: var(--img-width); 
    aspect-ratio: 2 / 3;
    transition: transform 0.3s ease-in-out;
}

/* --- REPLACEMENT FOR .image-overlay --- */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Make overlay fill the container */
    transform: translateY(-100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    transition: transform 0.3s ease-in-out;
    pointer-events: auto;
    box-sizing: border-box;
    padding: 20px;

    /* Convert to a Grid layout */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: auto 1fr; /* Top row for content, middle row expands */
}

/* Position the title in the top-left corner */
.image-overlay p {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-self: start;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
}

.carousel-image-container:hover {
    transform: scale(1.05);
    z-index: 10; /* Lifts the container above its neighbors on hover */
}

.carousel-image-container:hover .image-overlay {
    transform: translateY(0);
}

.carousel-image-container img {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}





/* --- Responsive Adjustments for Smaller Screens --- */
@media screen and (max-width: 768px) {
    .gallery-container {
        gap: 4vw 1vh;
    }
    
    .carousel-track {
        /* Just update the variable, the animation will adapt automatically */
        --img-width: 40vw;
        --img-height: 5vh;
        --gap: 3vh 1vw; 
        animation-duration: 45s; /* Slow down animation on mobile */
    }

}




/* --- New Styles for Tag Bubbles --- */

/* Position the tags in the top-right corner */
.tags-container {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
}

.tag {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 20px; /* This creates the rounded bubble shape */
    padding: 4px 12px; /* Vertical and horizontal space inside the tag */
    font-size: 12px;
    font-weight: 500;
    margin: 3px; /* Space between each tag */
    display: inline-block;
    backdrop-filter: blur(3px); /* Optional: gives a nice frosted glass effect */
}




/* --- Styles for Filter Controls --- */

.filter-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 1vh; /* Adds some space above the carousels */
}

.filter-btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 18px;
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.filter-btn.active {
    background-color: #fff;
    color: #101010;
    border-color: #fff;
}

/* This class will be used by JavaScript to hide non-matching images */
.carousel-image-container.hidden {
    display: none !important;
}



/* --- Carousel Arrow Navigation Styles --- */

/* Make the row a positioning container for the arrows */
.carousel-row {
    position: relative;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Ensure arrows are on top of images */

    background-color: rgba(20, 20, 20, 0.7);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%; /* Makes the button a circle */
    width: 45px;
    height: 45px;
    
    font-size: 24px;
    font-weight: bold;
    line-height: 45px;
    text-align: center;
    cursor: pointer;

    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #101010;
}

.left-arrow {
    left: 15px;
}

.right-arrow {
    right: 15px;
}

/* --- Arrow Visibility Logic --- */

/* By default on DESKTOP, arrows are hidden */
.carousel-arrow {
    opacity: 0;
    pointer-events: none;
}

/* On DESKTOP, show arrows when hovering over the row */
.carousel-row:hover .carousel-arrow {
    opacity: 1;
    pointer-events: auto;
}

/* On MOBILE, arrows are always visible */

@media (max-width: 768px) {
    .carousel-arrow {
        opacity: 1;
        pointer-events: auto;
        background-color: rgba(20, 20, 20, 0.6); /* Slightly more opaque for mobile */
    }

    /* This rule will hide the arrows when its parent row has the .hide-arrows class */
    .carousel-row.hide-arrows .carousel-arrow {
        display: none;
    }

    /* This rule will center the images when the track has the .center-content class */
    .carousel-track.center-content {
        width: 100%; /* Override the large track width */
        justify-content: center; /* Center the visible images */
        transform: none !important; /* Reset transform as it's not needed */
    }

}

/* --- New Styles for Hover-over "Open" Button --- */

/* Position the button in the exact center */
.open-btn {
    grid-column: 1 / 3; /* Span both columns */
    grid-row: 1 / 3;    /* Span both rows */
    place-self: center; /* Center horizontally and vertically */
    margin-bottom: 6vh;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Perfect circle */

    /* Color and Text */
    background-color: #474747; /* A standard blue color */
    color: rgb(252, 202, 241);
    font-size: 36px;
    font-weight: normal;
    line-height: 38px; /* Vertically centers the text "open" */
    text-align: center;
    text-transform: uppercase;
    z-index: 1; 

    /* Effects */
    animation: pulse-pink 2.5s infinite ease-in-out;
    transition: transform 0.2s ease;
}

/* Define the pulsing pink glow animation */
@keyframes pulse-pink {
    0% {
        box-shadow: 0 0 3px 0px rgba(18, 245, 245, 0.7);
        color: rgb(252, 202, 241); /* Resting text color */
        text-shadow: none; /* No text glow at rest */
        transform: scale(1); /* Base size */
    }
    50% {
        box-shadow: 0 0 15px 5px rgb(255, 243, 68);
        color: #ffffff; /* Brighter text color at the peak of the pulse */
        text-shadow: 0 0 7px rgba(255, 255, 255, 0.7); /* Add a subtle glow to the text */
        transform: scale(1.05); /* Slightly larger size at peak */
    }
    100% {
        box-shadow: 0 0 3px 0px rgba(253, 40, 207, 0.7);
        color: rgb(252, 202, 241); /* Resting text color */
        text-shadow: none; /* No text glow at rest */
        transform: scale(1); /* Return to base size */
    }
  }
      /* Add this new rule for direct hover behavior */
    .open-btn:hover {
        /* Pauses the pulse animation on hover */
        animation-play-state: paused;

        /* Ensures the button stays at its largest scale */
        transform: scale(1.05);
    }


/* Make the button slightly bigger on hover for interactivity */
.carousel-image-container:hover .open-btn {
    transform: scale(1.05);
}

/* The parent already handles the hover to show the overlay, so the button will appear with it. */
/* This rule ensures that the button, once visible, can be clicked. */
.image-overlay {
    pointer-events: auto; 
}




/* --- Image Sets Fullscreen Menu Styles --- */

#fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Start invisible and translated down */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;

  /* Animate both opacity and transform for the slide effect */
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#fullscreen-menu.active {
  opacity: 1;
  transform: translateY(0); /* Slides to its final position on screen */
  pointer-events: auto;
}

/* NEW: This group now handles positioning for both buttons */
.menu-button-group {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 15px; /* Adds space between the two buttons */
  transition: opacity 0.5s ease-in-out;
}

/* This new class will be toggled by JavaScript to hide the buttons */
.menu-button-group.is-idle {
    opacity: 0;
    pointer-events: none; /* Prevents clicking invisible buttons */
}


/* The existing close button no longer needs absolute positioning */
.close-menu-btn {
  width: 50px;
  height: 50px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-menu-btn:hover {
  background: white;
  color: black;
  transform: rotate(180deg);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* NEW: Styles for the smaller, red "go to home" button */
#close-to-home-btn {
  width: 25px; /* Half the size */
  height: 25px;
  background-color: #dc3545; /* Red color */
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  line-height: 25px; /* Vertically center the icon */
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

#close-to-home-btn:hover {
  background-color: #ff6b7a;
  transform: scale(1.1);
}



/* --- 3D Slideshow Styles (Cover Flow Version) --- */


#slideshow-3d-scene {
    position: relative;
    width: 35vw;
    height: 80vh;
    aspect-ratio: 2 / 3;
    perspective: 1500px;
    /* Opacity, transform, and transition were removed to prevent animation conflict */
}



#slideshow-3d-deck {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(0);
}





/* NEW: Animation classes and keyframes */

/* This class triggers the animation for the card moving into the center */
/* NEW: Direction-specific animation classes */
.card-3d.is-entering-from-right,
.card-3d.is-entering-from-left {
    /* The z-index is set high by JS so it animates over the top */
    animation-duration: 0.8s; /* Slightly longer for a smoother swing */
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}

.card-3d.is-entering-from-right {
    animation-name: enter-from-right;
}

.card-3d.is-entering-from-left {
    animation-name: enter-from-left;
}

/* Keyframes for entering from the RIGHT stack */
@keyframes enter-from-right {
    0% {
        /* Starts at its current position and scale(0.7) in the stack */
    }
    50% {
        /* Moves and grows to an intermediate size */
        transform: translateX(30vw) translateZ(50px) rotateY(-30deg) scale(0.85);
    }
    100% {
        /* Lands in the final center position at full scale */
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    }
}

/* Keyframes for entering from the LEFT stack */
@keyframes enter-from-left {
    0% {
        /* Starts at its current position and scale(0.7) in the stack */
    }
    50% {
        /* Moves and grows to an intermediate size */
        transform: translateX(-30vw) translateZ(50px) rotateY(30deg) scale(0.85);
    }
    100% {
        /* Lands in the final center position at full scale */
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    }
}


/* Individual card styling with transitions */
.card-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    background-color: #333;
    /* This transition is key for all card movements */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.6s ease;
                
    /* FIX: Add will-change for smoother animations */
    will-change: transform, opacity;
    
}

/* FIX: Elevate the active/entering card to prevent clipping */
.card-3d.is-active,
.card-3d.is-entering-from-left,
.card-3d.is-entering-from-right {
    z-index: 10;
}

/* NEW: Black overlay for non-active cards */
.card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Match the card's border radius */
    background-color: rgba(0, 0, 0, 0.8); /* 50% black overlay */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.6s ease;
    pointer-events: none; /* Make sure it doesn't interfere with clicks */
    z-index: 1;
}

/* Show the overlay when the card is NOT the active one */
.card-3d:not(.is-active)::before {
    opacity: 1;
}

/* --- Highlight for Inactive Cards on Hover --- */
.card-3d:not(.is-active):hover {
    /* A subtle white glow to indicate selection */
    box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.5);
    cursor: pointer; /* Changes the cursor to a hand to show it's clickable */
}


/* This class defines the "off-screen" state for the initial animation */
#slideshow-3d-scene.is-loading .card-3d {
    transform: translateX(-100vw) rotateY(0deg); /* Start fully off-screen to the left */
    opacity: 0;
}

.card-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    user-select: none;
}


/* Navigation button styles */
.card-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    height: 33%;
    width: 45px;
    background-color: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(4px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 30px;
    cursor: pointer;
    
    /* MODIFIED: Add opacity and pointer-events and update transition */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Make non-interactive when hidden */
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* NEW: This class makes the buttons fade in */
.card-nav-btn.visible {
    opacity: 1;
    pointer-events: auto;
}


.card-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
}

#prev-card-btn {
    left: 40px; /* Position at the left edge of the scene */
    /* Round the top-left and bottom-left corners */
    border-radius: 12px 0 0 12px;
}

#next-card-btn {
    right: 40px; /* Position at the right edge of the scene */
    /* Round the top-right and bottom-right corners */
    border-radius: 0 12px 12px 0;
}


/* --- New Animation for Nav Arrow Intro --- */

/* This defines the keyframes for the fade effect */
@keyframes fade-in-then-out {
  0% {
    opacity: 1; /* Start fully visible */
  }
  50% {
    opacity: 1; /* Stay visible for half the duration */
  }
  100% {
    opacity: 0; /* Fade out to fully transparent */
  }
}

/* This class will be added by JavaScript to trigger the animation */
.card-nav-btn.is-intro-fading {
  opacity: 1; /* Make it visible immediately */
  pointer-events: auto; /* Allow clicks during the animation */
  animation-name: fade-in-then-out;
  animation-duration: 4s; /* Total duration of the effect */
  animation-fill-mode: forwards; /* Ensures it stays at opacity: 0 when done */
}


/* --- Mobile-Specific Styles --- */
@media (max-width: 768px) {

  /* --- Slideshow Container Size on Mobile --- */
  #slideshow-3d-scene {
      width: 70vw;
      height: 60vh;
  }

  /* --- Vertical Slideshow Animations on Mobile --- */
  @keyframes enter-from-top {
    0% {}
    50% {
      transform: translateY(-40vh) translateZ(50px) rotateX(30deg) scale(0.85);
    }
    100% {
      transform: translateY(0) translateZ(0) rotateX(0deg) scale(1);
    }
  }

  @keyframes enter-from-bottom {
    0% {}
    50% {
      transform: translateY(40vh) translateZ(50px) rotateX(-30deg) scale(0.85);
    }
    100% {
      transform: translateY(0) translateZ(0) rotateX(0deg) scale(1);
    }
  }

  .card-3d.is-entering-from-top {
      animation-name: enter-from-top;
      animation-duration: 0.8s;
      animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
      animation-fill-mode: forwards;
  }

  .card-3d.is-entering-from-bottom {
      animation-name: enter-from-bottom;
      animation-duration: 0.8s;
      animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
      animation-fill-mode: forwards;
  }

  /* --- Slideshow Navigation Arrows on Mobile --- */
  #fullscreen-menu .card-nav-btn {
    top: auto;
    bottom: 4vh;
    height: 16.5%;
    transform: none;
    border-radius: 12px;
  }

  #fullscreen-menu #prev-card-btn {
    left: 20px;
    right: auto;
  }

  #fullscreen-menu #next-card-btn {
    right: 20px;
    left: auto;
  }

} /* <-- This closing brace now correctly wraps ALL mobile-specific styles. */


/* --- Styles for Zoom Button --- */
.zoom-btn {
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 5;
  width: 45px;
  height: 45px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

/* Show the button when hovering over the ACTIVE card */
.card-3d.is-active:hover .zoom-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.zoom-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

.zoom-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
  transition: fill 0.3s ease;
}

.zoom-btn:hover svg {
  fill: black;
}



/* --- New Lightbox Styles for Full Image Viewing --- */

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10002; /* Must be higher than the fullscreen menu */

  display: flex;
  justify-content: center;
  align-items: center;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  /* This ensures the image fits within the viewport */
  max-width: 90vw;
  max-height: 90vh;
  
  /* This preserves the original aspect ratio */
  object-fit: contain;
  
  box-shadow: 0 0 50px rgba(0,0,0,0.5);
  
  user-select: none;
}



.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.lightbox-close:hover {
    transform: scale(1.1);
}


/* --- Delayed Link Styles --- */
/* --- Dynamic Delayed Links Styles --- */
#delayed-links-container {
  position: absolute;
  top: 5vh;
  left: 0;
  right: 0;
  z-index: 10002;

  display: flex;
  justify-content: center;
  gap: 20px; /* The space between links */

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

#delayed-links-container.visible {
  opacity: 1;
  pointer-events: auto;
}

#delayed-links-container a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 25px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Prevents long link text from wrapping */
}

#delayed-links-container a:hover {
  background-color: #fff;
  color: #000;
}


/* --- Inactivity Overlay Styles For Main Splash  --- */

#inactivity-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* 90% black */
  
  /* Set a high z-index to make sure it covers everything */
  z-index: 10001; 
  
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  
  /* Smooth fade-in transition */
  transition: opacity 0.5s ease-in-out;
}

/* This class will be added by JavaScript to show the overlay */
#inactivity-overlay.active {
  opacity: 1;
  pointer-events: auto;
}



/* --- Responsive Stacking for Overlay Title and Tags --- */
@media (max-width: 320px) {
    .image-overlay {
        /* Change to a single-column layout on very small screens */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr; /* Add a new row for the tags */
        align-items: center; /* Center-align all grid items vertically in their rows */
    }

    .image-overlay p {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: center; /* Center the title */
    }

    .tags-container {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        justify-self: center; /* Center the tags */
        margin-top: 5px;
    }

    .open-btn {
        grid-column: 1 / 2;
        grid-row: 3 / 4; /* Move button to the third row */
    }
}