/* Basic page styling */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
  }
  
  /* Container for the slideshow */
  .slideshow-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  /* The fullscreen overlay for the slideshow */
  .slideshow-modal {
    /* Start with a neutral background; it will fade to the new color. */
    background: linear-gradient(135deg, #555, #999);
  
    /* Smoothly transition the background over 3 seconds (adjust as needed). */
    transition: background 3s ease-in-out;
  
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  /* The image styling */
  .slideshow-image {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    border: 1px solid white;
    border-radius: 1px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    display: none; /* We'll show it dynamically via JavaScript */
  }
  
  /* =========================================
     =        Keyframes & Animations         =
     ========================================= */
  
  /* ---- Swirl In/Out ---- */
  @keyframes swirlIn {
    0% {
      transform: rotate(720deg) scale(0.1);
      opacity: 0;
    }
    100% {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes swirlOut {
    0% {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: rotate(-720deg) scale(0.1);
      opacity: 0;
    }
  }
  
  /* ---- Flip In/Out (Perspective) ---- */
  @keyframes flipIn {
    0% {
      transform: perspective(600px) rotateX(-90deg);
      opacity: 0;
    }
    100% {
      transform: perspective(600px) rotateX(0deg);
      opacity: 1;
    }
  }
  
  @keyframes flipOut {
    0% {
      transform: perspective(600px) rotateX(0deg);
      opacity: 1;
    }
    100% {
      transform: perspective(600px) rotateX(90deg);
      opacity: 0;
    }
  }
  
  /* ---- Zoom In/Out ---- */
  @keyframes zoomIn {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes zoomOut {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
  }
  
  /* =========================================
     =   Classes to Trigger Animations       =
     ========================================= */
  
  /* Swirl classes */
  .swirl-in {
    animation: swirlIn 1.2s forwards ease;
  }
  .swirl-out {
    animation: swirlOut 1.2s forwards ease;
  }
  
  /* Flip classes */
  .flip-in {
    animation: flipIn 1.2s forwards ease;
  }
  .flip-out {
    animation: flipOut 1.2s forwards ease;
  }
  
  /* Zoom classes */
  .zoom-in {
    animation: zoomIn 1.2s forwards ease;
  }
  .zoom-out {
    animation: zoomOut 1.2s forwards ease;
  }
  
  /* Optional close button if desired in the future */
  .slideshow-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .slideshow-close:hover {
    color: #ffba00;
  }