*, *::after, *::before { box-sizing: border-box; }
:root {
  font-size: 12px;
  --color-text: #fff;
  --color-bg: #fff;
  --color-link: #fff;
  --color-link-hover: #fff;
  --page-padding: 1.5rem;
  --ui-font: 'IBM Plex Mono', monospace;
  --ui-tracking: 0.08em;
}
body {
  margin: 0; color: var(--color-text); background: radial-gradient(circle at 50% 30%, #1a1c29 0%, #05070a 80%);
  font-family: var(--ui-font); text-transform: uppercase;
  letter-spacing: var(--ui-tracking); font-size: 0.82rem;
  line-height: 1.2; transition: color 520ms ease;
  overflow: hidden; 
}
body.frame-text-dark {
  --color-text: #121212; --color-link: #121212; --color-link-hover: #121212;
}
body.loading::before {
  content: ''; position: fixed; inset: 0; z-index: 10000; background: var(--color-bg);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 250px rgba(0, 0, 0, 0.3); z-index: 320;
}

a { text-decoration: none; color: var(--color-link); transition: color 520ms ease; }
.frame { padding: 3rem var(--page-padding) 0; display: grid; z-index: 1000; position: relative; pointer-events: none; justify-items: start; }
.frame a { pointer-events: auto; }
.webgl { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; touch-action: none; z-index: 0; }
.debug-pane { position: fixed; right: 1rem; top: 4rem; z-index: 2000; }

/* =========================================
   THE PADS (UI Controls)
   ========================================= */
.all-labels-container { position: fixed; left: 8vw; top: 50%; z-index: 80; pointer-events: none; }

.gallery-title-container {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 15px;
  
  /* Hybrid Aero Glass Effect */
  background: rgba(255, 255, 255, 0.08); 
  backdrop-filter: blur(16px) saturate(120%); 
  -webkit-backdrop-filter: blur(16px) saturate(120%); 
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.35); 
  border-left: 1px solid rgba(255, 255, 255, 0.25); 
  border-radius: 16px; 
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); 
  padding: 1.5rem 2.5rem; 

  opacity: 0;          
  transform: translateY(-50%) scale(0.95); 
  pointer-events: none;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.gallery-name { transition: color 0.3s ease; font-size: 24px; color: #ffffff; text-transform: uppercase; letter-spacing: 0.1em; margin: 0;}
.gallery-number { font-size: 12px; color: #ffffff; margin: 0; }
.gallery-dot { width: 18px; height: 18px; border-radius: 50%; }

.gallery-title-container.active {
  opacity: 1; transform: translateY(-50%) scale(1); 
  pointer-events: auto; cursor: pointer;
}
.gallery-title-container.active:hover { transform: translateY(-50%) scale(1.05) !important; }
.gallery-title-container.active:hover .gallery-name { color: #FFD56D; }

/* =========================================
   THE MAGAZINE MODAL
   ========================================= */
.gallery-modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9990; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.gallery-modal.active { pointer-events: auto; opacity: 1; }

.gallery-modal-content {
  background: rgba(255, 255, 255, 0.08); /* Frosted Glass */
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0; border-radius: 20px; color: white;
  width: 90%; height: 80vh; max-height: 800px;
  position: relative; transform: translateY(40px);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-family: sans-serif; overflow: hidden; 
}
.gallery-modal.active .gallery-modal-content { transform: translateY(0); }

.magazine-scroll-area {
  width: 100%; height: 100%; overflow-y: auto; padding: 35px 30px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.magazine-scroll-area::-webkit-scrollbar { display: none; }

.gallery-modal-close {
  position: absolute; top: 20px; right: 25px;
  background: rgba(0,0,0,0.4); border: none; color: white; 
  font-size: 28px; width: 40px; height: 40px; border-radius: 50%; 
  cursor: pointer; opacity: 0.7; transition: all 0.2s; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.gallery-modal-close:hover { opacity: 1; background: rgba(0,0,0,0.7); transform: scale(1.1); }

/* Interactive Images */
.magazine-hero-img {
  width: 100%; height: 280px; object-fit: cover; border-radius: 12px;
  margin-bottom: 25px; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  cursor: zoom-in; transition: transform 0.4s ease;
}
.magazine-hero-img:hover { transform: scale(1.01); }

.magazine-inline-img {
  width: 48%; border-radius: 8px; margin-bottom: 15px; margin-top: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); cursor: zoom-in; transition: transform 0.4s ease;
}
.magazine-inline-img:hover { transform: scale(1.02); }
.magazine-inline-img.right { float: right; margin-left: 20px; }
.magazine-inline-img.left { float: left; margin-right: 20px; }

/* Typography */
.gallery-modal-title { margin: 0 0 5px 0; font-size: 2.2rem; letter-spacing: 4px; font-weight: 700; text-transform: uppercase; }
.gallery-modal-pms { font-size: 0.9rem; opacity: 0.7; margin-bottom: 25px; letter-spacing: 1.5px; font-family: monospace; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.magazine-body { line-height: 1.6; opacity: 0.85; font-size: 1.05rem; column-count: 1; column-gap: 30px; }
.magazine-body p { margin-top: 0; margin-bottom: 20px; }
.drop-cap::first-letter { font-size: 4.5rem; float: left; line-height: 0.8; padding-top: 4px; padding-right: 8px; padding-left: 3px; color: #FFD56D; font-weight: bold; }

/* =========================================
   AERO GLASS ZOOM LIGHTBOX
   ========================================= */
.zoom-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out;
}
.zoom-overlay.active { pointer-events: auto; opacity: 1; }

.zoom-frame {
  position: relative; padding: 16px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.12); 
  backdrop-filter: blur(24px) saturate(150%); 
  -webkit-backdrop-filter: blur(24px) saturate(150%); 
  border: 1px solid rgba(255, 255, 255, 0.15); 
  border-top: 1px solid rgba(255, 255, 255, 0.6); 
  border-left: 1px solid rgba(255, 255, 255, 0.4); 
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 20px rgba(255, 255, 255, 0.1); 
  transform: scale(0.9) translateY(20px); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.zoom-overlay.active .zoom-frame { transform: scale(1) translateY(0); }
.zoom-frame img { max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: 10px; display: block; }

/* =========================================
    RESPONSIVE LAYOUT BREAKPOINTS 
   ========================================= */

/*  MOBILE (Default): width 90%, 1 column, centered */

/*  IPAD / TABLET MODE (Matches the yellow box!) */
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery-modal-content { 
    width: 75vw; /* Wider to fill the yellow box footprint */
    max-width: 850px; 
    height: 90vh; 
    max-height: 1000px; 
  }
  .magazine-scroll-area { padding: 50px 45px; }
  .magazine-hero-img { height: 380px; } 
  .magazine-body { column-count: 2; font-size: 1rem; }
  
  /* Adjusted alignment padding for the wider tablet size */
  .gallery-modal.align-right { justify-content: flex-end; padding-right: 6vw; }
  .gallery-modal.align-left { justify-content: flex-start; padding-left: 6vw; }
}

/*ipad  MODE */
@media (min-width: 1025px) and (max-width: 1439px) {
  .gallery-modal-content { 
    width: 60vw; /* Keeps it tight to one side of the screen */
    max-width: 850px; 
    height: 84vh; 
    max-height: 1200px; 
  }
  .magazine-scroll-area { padding: 60px 50px; }
  .magazine-hero-img { height: 420px; } 
  .magazine-body { column-count: 2; font-size: 1.05rem; }
  
  .gallery-modal.align-right { justify-content: flex-end; padding-right: 4vw; }
  .gallery-modal.align-left { justify-content: flex-start; padding-left: 4vw; }
}

/* DESKTOP MODE */
@media (min-width: 1440px) {
  .gallery-modal-content { 
    width: 46vw; /* Keeps it tight to one side of the screen */
    max-width: 850px; 
    height: 94vh; 
    max-height: 1200px; 
  }
  .magazine-scroll-area { padding: 60px 50px; }
  .magazine-hero-img { height: 420px; } 
  .magazine-body { column-count: 2; font-size: 1.05rem; }
  
  .gallery-modal.align-right { justify-content: flex-end; padding-right: 4vw; }
  .gallery-modal.align-left { justify-content: flex-start; padding-left: 4vw; }
}

/* Background Animations */
.firefly { width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 2px #ffaa00; position: absolute; animation: float 10s infinite ease-in-out alternate; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); opacity: 0.2; } 50% { transform: translate(50px, -100px) scale(1.5); opacity: 1; } 100% { transform: translate(-50px, -200px) scale(0.8); opacity: 0; } }

/* ========================================= */
/* UI DRAWER ANIMATIONS                      */
/* ========================================= */

/* 1. The Toggle Button */
.ui-toggle-btn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  padding: 12px 28px;
  border-radius: 40px;
  font-family: var(--ui-font);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), bottom 0.6s cubic-bezier(0.76, 0, 0.24, 1), background 0.3s ease;
}

.ui-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 2. Setup the Smooth Transitions */
main {
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

#luchen-global-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(-100%); /* Hidden off-screen at the top */
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

footer#ui-drawer-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Give the drawer a maximum height and allow internal scrolling! */
  max-height: 75vh; 
  overflow-y: auto; 
  
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  background: var(--color-bg); /* Solid background so it blocks the 3D canvas */
}

body.show-ui footer#ui-drawer-bottom {
  transform: translateY(0);
}

/* ========================================= */
/* 3. THE ACTIVE STATE (When Button is Clicked) */
/* ========================================= */

/* Slide the Nav down */
body.show-ui #luchen-global-nav {
  transform: translateY(0);
}

/* Slide the Footer up */
body.show-ui footer {
  transform: translateY(0);
}

/* Push the entire 3D Scene up by the height of the footer (~20vh) */
body.show-ui main {
  transform: translateY(-20vh); 
}

/* Push the button up so it rides on top of the footer */
body.show-ui .ui-toggle-btn {
  bottom: calc(75vh - 20px);  
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
}

/* ========================================= */
/* GLOBAL COMPONENT OVERRIDES & PROTECTIONS  */
/* ========================================= */

/* 1. Restore Gallery Title Colors against main-look.css */
/* ========================================= */
/* DYNAMIC CHAMELEON TITLE COLORS            */
/* ========================================= */

h2.gallery-name,
h2.gallery-modal-title {
    /* Absorb the exact live color passed from the 3D engine! */
    color: var(--dynamic-text-color) !important;
    
    /* Remove any broken blend modes */
    mix-blend-mode: normal !important; 
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

/* Apply the matched color to the sub-text and lines */
.gallery-number,
.gallery-modal-pms {
    color: var(--dynamic-text-color) !important;
    border-color: var(--dynamic-text-color) !important;
    opacity: 0.8; /* Keep them slightly dimmer than the main title */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}


/* 2. Protect the Global Nav Menu from Gallery Typography & Sizing */
#luchen-global-nav {
    /* Restores normal sizing so the hamburger icon and padding aren't tiny */
    font-size: 16px !important; 
    
    /* Restores original menu font and removes forced uppercase/tracking */
    font-family: var(--primary-font), "Montserrat", sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}