body, html {
  margin: 0;
  padding: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  overflow: hidden; 
}
.bg-stripe {
  /* 1. STICK TO TOP LEFT: Fixed positioning with zero offsets */
  position: fixed;
  top: 0;
  left: 00;
  
  /* 2. RESPONSIVE CONSTRAINT: Ensure it never crosses the center (max 50vw) */
  /* Using 40rem as base, but capping it at 50% of screen width */
  width: min(50rem, 80vw); 
  
  /* Oversized height to ensure coverage while rotated */
  height: 300rem; 
  
  background-color: #00FFF2; 
  
  /* 3. ALIGNMENT LOGIC: 
     - Pivot from the top-left corner
     - Rotate 15deg to match your carousel 
     - Translate upward so it pre-fills the screen from the very top */
  transform-origin: top left;
  transform: rotate(15deg) translateY(-80rem);
  
  z-index: 0; 
  pointer-events: none; 
}

/* Ensure your menu and carousel are higher than the stripe */


.site-title {
  /* 1. STICK TO TOP LEFT */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2500;
  white-space: nowrap; 
  pointer-events: none; 

  /* 2. RESPONSIVE FONT SIZE:
     - 2rem: Minimum size for mobile
     - 8vw: Preferred fluid size
     - 5rem: Maximum size for desktop
  */
  font-size: clamp(2rem, 8vw, 5rem); 
  
  font-family: "Climate Crisis", sans-serif;
  font-weight: 400;
  color: black; 
  /* Responsive stroke width using clamp to match font scale */
  -webkit-text-stroke: clamp(2px, 0.5vw, 5px) #00FFF2; 
  letter-spacing: 2px;
  text-transform: uppercase;

  /* 3. RESPONSIVE "STICK" LOGIC:
     - The translateX must move the text 'up' by its own full length.
     - Using -100% ensures the last letter always touches the top 
       regardless of how long the text is or what font-size is active.
  */
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%) translateY(-23%);
}


.site-title-shadow {
 /* 1. STICK TO TOP LEFT */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2400;
  white-space: nowrap; 
  pointer-events: none; 

  /* 2. RESPONSIVE FONT SIZE:
     - 2rem: Minimum size for mobile
     - 8vw: Preferred fluid size
     - 5rem: Maximum size for desktop
  */
  font-size: clamp(2rem, 8vw, 5rem); 
  
  font-family: "Climate Crisis", sans-serif;
  font-weight: 400;
  color: #77004B; 
  /* Responsive stroke width using clamp to match font scale */
  -webkit-text-stroke: clamp(2px, 0.5vw, 5px) #77004B; 
  letter-spacing: 2px;
  text-transform: uppercase;

  /* 3. RESPONSIVE "STICK" LOGIC:
     - The translateX must move the text 'up' by its own full length.
     - Using -100% ensures the last letter always touches the top 
       regardless of how long the text is or what font-size is active.
  */
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%) translateY(25%);
}


/* 1. STICK TO TOP */
.side-nav {
  position: fixed;
  top: 10%;       
  left: 20%;    
  z-index: 2000; 
  padding-top: 5vh; /* Responsive padding from the top */
  color: rgb(77, 185, 228);
  font-family: "Dela Gothic One", sans-serif;
  text-transform: uppercase;
}

/* Vertical Menu List */
.menu {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* 2. INCREASED VERTICAL GAP: 
     Using 'vh' makes the gap grow with screen height */
  gap: 7vh; 
}

/* DIAGONAL STAGGER (Preserved from previous step) */
.menu li:nth-child(1) { transform: translateX(0); }
.menu li:nth-child(2) { transform: translateX(-18px); }
.menu li:nth-child(3) { transform: translateX(-36px); }
.menu li:nth-child(4) { transform: translateX(-54px); }
.menu li:nth-child(5) { transform: translateX(-72px); }
.menu li:nth-child(6) { transform: translateX(-90px); }
/* Menu Links */
.menu a {
  position: relative;
  text-decoration: none;
  color: black;
  z-index: 1;
  padding: 10px 20px;
  
  /* 3. RESPONSIVE FONT SIZE:
     - 1rem: Minimum size for small screens
     - 1.5vw: Fluid scaling based on width
     - 2.5rem: Maximum size for large screens
  */
  font-size: clamp(0.6rem, 1.2vw, 2rem); 
  
  transition: color 0.3s ease, padding-left 0.3s ease, transform 0.3s ease;
  display: inline-block;
  white-space: nowrap; /* Prevents long menu items from wrapping */
}

/* Menu Hover Effect */
.menu a:hover {
  color: #00FFF2;
  padding-left: 13px;
}

/* The SVG Layer */
.menu a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8); /* Centered and slightly smaller */
  width: 100%;
  height: 100%;
  z-index: -1; /* Places SVG behind the text */
  
  /* Link to your SVG file */
  background: url('icon/hover_menu.svg') no-repeat center;
  background-size: contain;
  
  /* Initial state: Hidden */
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none; /* Mouse ignores this layer */
}

/* Hover State */
.menu a:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1); /* Slightly pops out */
}


.carousel {
  position: fixed;
  top: -50%; 
  left: 55%; 
  
  /* 1. RESPONSIVE WITH MINIMUM: 
     - 280px: Smallest it can get (Mobile)
     - 20vw: Preferred size (Desktop)
     - 600px: Maximum size (Ultra-wide screens) 
  */
  width: clamp(200px, 20vw, 600px); 
  
  height: 250vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  transform: rotate(15deg) translateX(-5rem); 
  transform-origin: center;
  will-change: transform;
  z-index: 5;
}

.image-container {
  flex: 0 0 auto;
  width: 110%; 
  aspect-ratio: 16 / 9; /* Height scales proportionally with the clamped width */
  position: relative;
  z-index: 1;
  margin-bottom: 10px; 
  transition: transform 0.3s ease;
}

/* All other chaos, hover (blue/pink rectangles), and animation codes remain exactly as established */


/* 1. The NEW PINK Rectangle (Farthest Back) */
.image-container::before {
  content: '';
  position: absolute;
  /* inset: 0 covers top, right, bottom, left at 0 */
  inset: 0; 
  background-color: #77004B; 
  
  /* Different rotation and slight offset for depth */
  transform: rotate(-10deg) translateZ(0); 
  transform-origin: center;
  
  opacity: 0;
  z-index: -2; /* Ensure it is behind the blue rectangle */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 2. The Original BLUE Rectangle (Middle Layer) */
.image-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #00FFF2; /* Cyan/Blue from your existing code */
  
  /* Original rotation */
  transform: rotate(-5deg) translateZ(0);
  
  opacity: 0;
  z-index: -1; /* Ensure it is behind the image but above the pink */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Image Itself (Top Layer) --- */
.image-container img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: rotate(-15deg) translateZ(0); 

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- HOVER EFFECTS --- */
.image-container:hover {
  z-index: 999;
  transform: translateX(0) rotate(0); /* Reset chaos */
}

/* Animate the Pink Rectangle on hover */
.image-container:hover::before {
  opacity: 1;
  /* Scale slightly larger than the blue one for a layered glow */
  transform: rotate(-10deg) scale(1.48); 
}

/* Animate the Blue Rectangle on hover */
.image-container:hover::after {
  opacity: 1;
  transform: rotate(-25deg) scale(1.44); /* Smaller scale than pink */
}

/* Animate the Image itself on hover */
.image-container:hover img {
  transform: rotate(-15deg) scale(1.4); 
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}



/* --- CHAOS LOGIC: Staggering positions and tilts --- */

/* Shift even-numbered images slightly to the right and tilt clockwise */
.image-container:nth-child(2n) {
  transform: translateX(15%) rotate(2deg);
}

/* Shift every 3rd image to the left and tilt counter-clockwise */
.image-container:nth-child(3n) {
  transform: translateX(-12%) rotate(-3deg);
}

/* Shift every 4th image further right and tilt more aggressively */
.image-container:nth-child(4n) {
  transform: translateX(20%) rotate(4deg);
}



/* ... group and spin-up animation remain exactly as you provided ... */


/* Keep the rest of your body, carousel, and group code... */

.group {
  display: flex;
  flex-direction: column;
  /* 2. REFINED ANIMATION: Slower time often helps with pixel-snapping */
  animation: spin-up 40s infinite linear;
  overflow: visible;
  position: relative;
  /* Ensures the browser treats this as a single layer */
  backface-visibility: hidden;
}

.group:hover { z-index: 10; }

/* SEAMLESS LOOP */
@keyframes spin-up {
  from {
    transform: translateY(0);
  }
  to {
    /* Moving exactly -100% of the group ensures the second 
       group lands exactly where the first one started. */
    transform: translateY(-100%);
  }
}

/* Blurs the chaotic carousel behind the popup */
#popup::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

#popup_about, #popup_contact {
  /* 1. PERFECT CENTERING */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  
  /* 2. RESPONSIVE SIZING */
  width: min(80vw, 500px); /* 90% width on mobile, max 500px on desktop */
  max-height: 80vh;        /* Prevents popup from being taller than screen */
  
  /* 3. DESIGN AESTHETIC */
  background: #000;
  border: 3px solid #00FFF2;
  color: white;
  padding: 2rem;
  overflow: hidden;        /* Keeps the border clean */
  box-shadow: 0 0 50px rgba(0, 255, 242, 0.2);
  z-index: 9999;
}




.popup-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-content h2 {
  font-family: "Dela Gothic One", sans-serif;
  color: #00FFF2;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-top: 0;
  text-transform: uppercase;
}

/* 4. SCROLLABLE AREA: If the text is long on small screens */
.scroll-area {
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 1.5rem;
}

/* Custom Scrollbar for 2026 browsers */
.scroll-area::-webkit-scrollbar {
  width: 4px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: #00FFF2;
}

.scroll-area p {
  font-family: sans-serif;
  line-height: 1.6;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: #e0e0e0;
}

.close-btn {
  align-self: flex-end;
  background: #00FFF2;
  color: black;
  border: none;
  padding: 12px 24px;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: white;
  box-shadow: 0 0 15px white;
  transform: translateY(-2px);
}