/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face { 
	font-family: "samc"; 
	src: url("samc.woff2") format("woff2"), 
		url("samc.woff") format("woff"), 
		url("samc.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

body {
  background: black;
    color: #4caeff;
    text-align: center;
    padding-top: 100px;
    font-family: "samc";

background-image: url('placeholder');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            
            
  
}

/* Container that manages the rows automatically */
.albums {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* Space between your albums */
  justify-content: center;
  padding: 20px;
  width: max-content; /* FIXED: Stops the container from taking up empty space on the sides */
  max-width: 100%;
  margin: 0 auto;
}

/* Base styles for the links and containers */
.album-link {
  text-decoration: none;
  display: block;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.album {
  width: 450px;
  position: relative; /* Keeps the overlay contained inside the album boundaries */
  overflow: hidden;
}

.album img {
  display: block;
  width: 100%;
  transition: .2s;
}

/* The overlay text container */
.overlay {
  position: absolute;
  inset: 0;
  
  /* FIXED: Removed the dark background color so the selected album stays completely bright */
  background: transparent; 
  
  color: white;
  mix-blend-mode: difference;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  
  /* --- ADD THESE LINES TO MAKE THE TEXT BIGGER --- */
  font-size: 1.5rem;       /* Makes the text larger (adjust this number as needed) */
  font-weight: bold;       /* Optional: makes the text bold so it pops more */
  font-family: sans-serif; /* Optional: switches it to a clean modern font if you want */
  
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Container that manages the rows automatically */
.albums {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* Space between your albums */
  justify-content: center;
  padding: 20px;
  width: max-content; /* FIXED: Stops the container from taking up empty space on the sides */
  max-width: 100%;
  margin: 0 auto;
}

/* Base styles for the links and containers */
.album-link {
  text-decoration: none;
  display: block;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.album {
  width: 450px;
  position: relative; /* Keeps the overlay contained inside the album boundaries */
  overflow: hidden;
}

.album img {
  display: block;
  width: 100%;
  transition: .2s;
}

/* The overlay text container */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); 
  color: #00aaff;
  mix-blend-mode: hard-light;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  
  /* --- ADD THESE LINES TO MAKE THE TEXT BIGGER --- */
  font-size: 1.5rem;       /* Makes the text larger (adjust this number as needed) */
  font-weight: bold;       /* Optional: makes the text bold so it pops more */
  font-family: sans-serif; /* Optional: switches it to a clean modern font if you want */
  
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* --- HOVER EFFECTS --- */

/* Shrink other items EXCEPT the one being hovered */
.albums:has(.album-link:hover) .album-link:not(:hover) {
  transform: scale(0.92);
  opacity: 0.6;
  /* Reset delay instantly when entering a hover state */
  transition-delay: 0s; 
}

/* Scale up ONLY the specific album being hovered */
.albums .album-link:hover {
  transform: scale(1.15);
  opacity: 1;
  z-index: 10;
  transition-delay: 0s;
}

/* Show the text overlay on hover */
.album-link:hover .overlay {
  opacity: 1;
}

/* MODIFIED: Add a tiny delay to the base class when leaving hover */
.album-link {
  text-decoration: none;
  display: block;
  position: relative;
  /* Holds the animation for 0.15 seconds BEFORE shrinking back */
  transition: transform 0.3s ease 0.10s, opacity 0.3s ease 0.10s; 
}


.artgallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}

.artgallery img{
    width:auto;
    height:250px;
    transition:0.3s;
    cursor:pointer;
}

.artgallery img:hover{
    transform:scale(1.05);
}



.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    
    /* 1. Base borders and layers */
    border: 2px solid var(--glow-color); 
    position: relative;
    z-index: 10000;
    
    /* 2. Setup the "resting" state (smaller size, no glow yet) */
    transform: scale(0.85);
    opacity: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    
    /* 3. Smoothly transition EVERYTHING at once when it pops up */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 1, 1), 
                opacity 0.35s ease, 
                box-shadow 0.35s ease;
}

/* When active, scale it up and blast the shadows */
.lightbox.active img {
    transform: scale(1);
    opacity: 1;
    
    /* 4. Combined deep drop shadow + your HTML's --glow-color */
    box-shadow: 0 0 30px var(--glow-color);
}

/* The Close Button Fix */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #0055ff;
    font-size: 45px;       /* Makes it big and readable */
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;        /* Ensures it sits ABOVE the image layer */
    line-height: 1;        /* Keeps the X character from getting cut off vertically */
    width: 40px;           /* Gives it its own dedicated box width */
    height: 40px;          /* Gives it its own dedicated box height */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s;
}

.close-btn:hover {
    color: white;
}