/* gallery.css - Nearly Full-Size Gallery with Same Style */

/* Gallery Window - Wider for 3-Column Layout */
.gallery.vista-window {
  width: 90vw; /* Increased from 85vw */
  height: calc(95vh - 60px); /* Leave space for taskbar + margin */
  max-width: 1400px; /* Increased from 1200px */
  max-height: none;
  margin: 1vh auto;
  position: fixed;
  top: 1vh;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 999; /* Below taskbar but above content */
  
  /* Keep the same visual style as home/shop windows */
  background: linear-gradient(135deg, #e6f0ff 0%, #d0e0ff 100%);
  border-radius: 6px;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 8px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #b0c8ff;
  font-family: 'Michroma', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Animation for entrance */
  animation: galleryEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

/* Cool entrance animation - Fixed to stay centered */
@keyframes galleryEntrance {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3) rotateY(-15deg);
    filter: blur(10px);
  }
  30% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.8) rotateY(-5deg);
    filter: blur(3px);
  }
  70% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.05) rotateY(2deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotateY(0deg);
    filter: blur(0px);
  }
}

/* Mobile entrance animation - no translateX centering */
@keyframes galleryEntranceMobile {
  0% {
    opacity: 0;
    transform: scale(0.3) rotateY(-15deg);
    filter: blur(10px);
  }
  30% {
    opacity: 0.7;
    transform: scale(0.8) rotateY(-5deg);
    filter: blur(3px);
  }
  70% {
    opacity: 0.9;
    transform: scale(1.05) rotateY(2deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    filter: blur(0px);
  }
}

/* Reverse exit animation for closing */
@keyframes galleryExit {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotateY(0deg);
    filter: blur(0px);
  }
  30% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.05) rotateY(-2deg);
    filter: blur(1px);
  }
  70% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.8) rotateY(5deg);
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3) rotateY(15deg);
    filter: blur(10px);
  }
}

/* Class for exit animation */
.gallery.vista-window.closing {
  animation: galleryExit 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  animation-fill-mode: forwards;
}

/* Full-size window content */
.gallery .window-content {
  max-height: none !important;
  height: calc(100% - 40px); /* Account for title bar */
  overflow-y: auto;
  flex: 1;
}

/* Gallery Navigation and Header - Cleaner Design */
.gallery-nav-header {
  background: transparent; /* Remove gray/white box */
  border-bottom: none; /* Remove border */
  padding: 30px 20px 20px 20px; /* Adjust padding */
  text-align: center;
  backdrop-filter: none; /* Remove blur effect */
}

.site-header {
  margin-bottom: 25px;
}

.header-link {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.header-link:hover {
  transform: scale(1.05);
  filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.header-image {
  max-height: 160px; /* Increased from 120px */
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

/* Gallery Navigation Buttons - Smaller Size */
.gallery-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-nav .nav-buttons-container {
  display: flex;
  gap: 20px; /* Increased back to 20px */
  align-items: center;
}

.gallery-nav .nav-button {
  position: relative;
  display: block;
  transition: transform 0.3s ease;
  text-decoration: none;
}

.gallery-nav .nav-button:hover {
  transform: scale(1.12) rotate(2deg); /* Increased from 1.08 */
}

.gallery-nav .nav-button-inner {
  position: relative;
  display: block;
}

.gallery-nav .nav-button img {
  height: 45px; /* Increased from 35px */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Sparkle animations for smaller nav buttons */
.gallery-nav .sparkle {
  position: absolute;
  width: 3px; /* Reduced from 4px */
  height: 3px;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  border-radius: 50%;
  animation: sparkleFloat 3s infinite ease-in-out;
  pointer-events: none;
}

.gallery-nav .sparkle.s1 { top: 10%; left: 20%; animation-delay: 0s; }
.gallery-nav .sparkle.s2 { top: 30%; right: 15%; animation-delay: 0.6s; }
.gallery-nav .sparkle.s3 { bottom: 25%; left: 25%; animation-delay: 1.2s; }
.gallery-nav .sparkle.s4 { top: 60%; right: 30%; animation-delay: 1.8s; }
.gallery-nav .sparkle.s5 { bottom: 10%; right: 10%; animation-delay: 2.4s; }

@keyframes sparkleFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0px) scale(0); 
  }
  50% { 
    opacity: 1; 
    transform: translateY(-8px) scale(1); /* Reduced movement from -10px */
  }
}

/* Gallery Content Area - Art Portfolio Styles */
.gallery-main-content {
  padding: 20px 40px;
  min-height: 300px;
}

/* Portfolio Container */
.portfolio-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  
  /* Chrome sigil-inspired metallic outline */
  border-radius: 20px;
  box-shadow: 
    0 0 0 4px #b8b8b8,
    0 0 0 5px #d8d8d8,
    0 0 0 6px rgba(240, 240, 240, 0.7),
    0 0 0 7px #a8a8a8,
    0 0 4px rgba(160, 160, 160, 0.6),
    0 0 8px rgba(220, 220, 220, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 120, 120, 0.3);
  padding: 30px;
  
  /* Chrome sigil-style animation */
  animation: metallicShine 6s ease-in-out infinite;
}

/* Portfolio Header */
.portfolio-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.portfolio-title {
  font-family: var(--font-primary);
  font-size: 2.5em;
  background: linear-gradient(45deg, #5d8aa8, #a8c5e5, #5d8aa8);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
  margin: 0 0 10px 0;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(93, 138, 168, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.portfolio-title-image {
  height: 1.8em;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(0.9) saturate(0.8);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  transform: scale(1.1);
  animation: gentleGlow 4s ease-in-out infinite;
  flex-shrink: 0;
}

.portfolio-sigil {
  height: 2.2em;
  width: auto;
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) brightness(1.1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  animation: sigilFloat 6s ease-in-out infinite;
}

.portfolio-sigil-left {
  animation-delay: 0s;
}

.portfolio-sigil-right {
  animation-delay: 3s;
}

@keyframes sigilFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% { 
    transform: translateY(-3px) rotate(1deg);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-5px) rotate(0deg);
    opacity: 0.9;
  }
  75% { 
    transform: translateY(-3px) rotate(-1deg);
    opacity: 0.8;
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes gentleGlow {
  0%, 100% { 
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(0.9) saturate(0.8);
    opacity: 0.85;
  }
  50% { 
    filter: drop-shadow(0 4px 8px rgba(93, 138, 168, 0.4)) brightness(1.1) saturate(1.1);
    opacity: 0.95;
  }
}

@keyframes metallicShine {
  0%, 100% {
    box-shadow: 
      0 0 0 4px #b8b8b8,
      0 0 0 5px #d8d8d8,
      0 0 0 6px rgba(240, 240, 240, 0.7),
      0 0 0 7px #a8a8a8,
      0 0 4px rgba(160, 160, 160, 0.6),
      0 0 8px rgba(220, 220, 220, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(120, 120, 120, 0.3);
  }
  50% {
    box-shadow: 
      0 0 0 4px #c8c8c8,
      0 0 0 5px #e8e8e8,
      0 0 0 6px rgba(250, 250, 250, 0.8),
      0 0 0 7px #b8b8b8,
      0 0 6px rgba(180, 180, 180, 0.7),
      0 0 12px rgba(240, 240, 240, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(140, 140, 140, 0.4);
  }
}

.portfolio-subtitle {
  color: #666;
  font-size: 1.1em;
  margin: 0 0 30px 0;
  font-style: italic;
}

/* Portfolio Controls */
.portfolio-controls {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.randomize-btn {
  background: linear-gradient(135deg, #5d8aa8, #4a7a9a);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 1em;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  text-transform: uppercase;
  box-shadow: 
    0 4px 15px rgba(93, 138, 168, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.randomize-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.randomize-btn:hover::before {
  left: 100%;
}

.randomize-btn:hover {
  background: linear-gradient(135deg, #4a7a9a, #5d8aa8);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 6px 20px rgba(93, 138, 168, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.randomize-btn:active {
  transform: translateY(0px) scale(1.02);
  box-shadow: 
    0 3px 10px rgba(93, 138, 168, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Shuffling animation state */
.randomize-btn.shuffling {
  animation: shuffle-pulse 0.6s ease-in-out;
  pointer-events: none;
}

@keyframes shuffle-pulse {
  0%, 100% { 
    transform: translateY(-2px) scale(1); 
  }
  25% { 
    transform: translateY(-2px) scale(1.05) rotate(1deg); 
  }
  50% { 
    transform: translateY(-2px) scale(1.1) rotate(-1deg); 
  }
  75% { 
    transform: translateY(-2px) scale(1.05) rotate(0.5deg); 
  }
}

/* Portfolio Grid - Organic Masonry Wall */
.portfolio-grid {
  position: relative;
  margin: 40px 0;
  padding: 20px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 20px;
  
  /* Minimum height for loading state */
  min-height: 600px;
  
  /* Chrome frame styling stays on container */
}

/* Artwork Cards - Organic Masonry Items */
.artwork-card {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(160, 192, 255, 0.3);
  position: absolute; /* Absolute positioning for organic placement */
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  
  /* Dynamic sizing - will be set by JavaScript */
  width: var(--card-width, 300px);
  left: var(--card-left, 0px);
  top: var(--card-top, 0px);
  
  /* Smooth transitions for repositioning */
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Decorative Chrome Sigils */
.decorative-sigil {
  position: absolute; /* Absolute positioning for organic placement */
  box-sizing: border-box;
  
  /* Dynamic sizing - will be set by JavaScript */
  width: var(--card-width, 120px);
  height: var(--card-height, 120px);
  left: var(--card-left, 0px);
  top: var(--card-top, 0px);
  
  /* Smooth transitions for repositioning */
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Chrome sigil styling - more subtle to not overpower artwork */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5; /* More subtle than artwork */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  
  /* Gentle hover effect */
  cursor: default;
  
  /* Breathing room animation */
  animation: sigilBreathe 8s ease-in-out infinite;
}

@keyframes sigilBreathe {
  0%, 100% { 
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
  25% { 
    opacity: 0.6;
    transform: scale(1.02) rotate(0.5deg);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.05) rotate(0deg);
  }
  75% { 
    opacity: 0.6;
    transform: scale(1.02) rotate(-0.5deg);
  }
}

.decorative-sigil:hover {
  opacity: 0.85 !important; /* Override animation */
  transform: scale(1.1) rotate(2deg) !important;
  filter: drop-shadow(0 4px 8px rgba(93, 138, 168, 0.25));
  animation-play-state: paused; /* Pause breathing on hover */
}

.sigil-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  /* Subtle glow effect */
  background: radial-gradient(circle at center, 
    rgba(168, 197, 229, 0.05) 0%, 
    transparent 70%);
  border-radius: 50%;
}

.sigil-image {
  max-width: 80%; /* Slightly smaller for more breathing room */
  max-height: 80%;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(1.05) saturate(0.8) contrast(1.1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition: all 0.4s ease;
  
  /* Subtle chrome metallic effect - less intense than main artwork */
  filter: 
    brightness(1.05) 
    saturate(0.8) 
    contrast(1.1)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15))
    drop-shadow(0 0 4px rgba(168, 197, 229, 0.2));
}

.decorative-sigil:hover .sigil-image {
  opacity: 1;
  filter: 
    brightness(1.15) 
    saturate(1.0) 
    contrast(1.2)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 8px rgba(168, 197, 229, 0.4));
}

.artwork-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(93, 138, 168, 0.1), rgba(168, 197, 229, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.artwork-card:hover::before {
  opacity: 1;
}

.artwork-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(93, 138, 168, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(93, 138, 168, 0.1);
  border-color: rgba(93, 138, 168, 0.5);
}

/* Artwork Image */
.artwork-image-container {
  position: relative;
  overflow: hidden;
  /* No background - let images determine container size naturally */
  line-height: 0; /* Removes any whitespace below images */
  /* Remove any min-height or aspect-ratio constraints */
}

.artwork-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 2;
  /* Remove object-fit entirely to avoid white space */
}

.artwork-card:hover .artwork-image {
  transform: scale(1.05);
}

/* Artwork Overlay */
.artwork-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.artwork-card:hover .artwork-overlay {
  opacity: 1;
}

/* SPARKLY GLOW BORDER EFFECT */
.artwork-card {
  transition: all 0.3s ease;
}

.artwork-card:hover {
  box-shadow: 
    0 0 20px rgba(160, 192, 255, 0.6),
    0 0 40px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(160, 192, 255, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.artwork-card:hover .artwork-image {
  box-shadow: 
    0 0 15px rgba(160, 192, 255, 0.8),
    0 0 30px rgba(255, 255, 255, 0.5),
    0 0 45px rgba(160, 192, 255, 0.4);
  filter: brightness(1.05) contrast(1.05);
}

.view-btn {
  background: linear-gradient(135deg, #5d8aa8, #4a7a9a);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.view-btn:hover {
  background: linear-gradient(135deg, #4a7a9a, #5d8aa8);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Artwork Info - Hidden for cleaner look */
.artwork-info {
  display: none;
}

/* Add More Notice */
.add-more-notice {
  text-align: center;
  margin: 60px 0 40px 0;
  padding: 30px;
  background: rgba(230, 240, 255, 0.4);
  border-radius: 15px;
  border: 1px dashed rgba(93, 138, 168, 0.5);
}

.add-more-notice p {
  color: #5d8aa8;
  font-size: 1.1em;
  margin: 0;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* Lightbox Styles */
.portfolio-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.portfolio-lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.lightbox-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 40px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(160, 192, 255, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.portfolio-lightbox.active .lightbox-content {
  transform: translate(-50%, -50%) scale(1);
}

.lightbox-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 10;
}

.lightbox-close:hover {
  color: #5d8aa8;
}

.lightbox-image-container {
  text-align: center;
  margin-bottom: 30px;
}

.lightbox-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lightbox-info {
  text-align: center;
}

.lightbox-title {
  font-family: var(--font-primary);
  font-size: 2em;
  color: #1a3b7a;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
}

.lightbox-meta {
  color: #5d8aa8;
  font-size: 1.1em;
  margin: 0 0 20px 0;
  font-weight: 500;
}

.lightbox-description {
  color: #666;
  font-size: 1em;
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Gap-filling sigils */
.gap-filler-sigil {
  position: absolute;
  pointer-events: none; /* Don't interfere with clicking */
  z-index: 1;
}

.gap-sigil-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-sigil-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.8) opacity(0.6);
  transition: all 0.3s ease;
}

.gap-filler-sigil:hover .gap-sigil-image {
  filter: brightness(1) opacity(0.8);
  transform: scale(1.1);
}

/* Responsive Design - Organic Masonry Breakpoints */
@media (max-width: 768px) {
  /* Prevent horizontal scrolling everywhere */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  
  .gallery.vista-window {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    margin: 0;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    overflow-x: hidden !important;
    /* Mobile-specific entrance animation */
    animation: galleryEntranceMobile 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .window-content {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  
  .portfolio-container {
    /* Remove metallic outline on mobile for cleaner look */
    box-shadow: none;
    animation: none;
    padding: 10px;
    border-radius: 0;
    border: none;
    background: transparent;
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  
  .portfolio-grid {
    padding: 10px;
    min-height: auto;
    /* Force single column layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  
  /* Mobile: Remove all chrome effects from artwork images - MUCH LARGER SIZE */
  .artwork-card {
    width: 98% !important;
    max-width: 600px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 30px !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Keep Vista windows for gallery posts on mobile - MUCH LARGER SIZE */
  .gallery-post-window {
    width: 98% !important;
    max-width: 600px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 30px !important;
  }
  
  /* Show some decorative sigils on mobile between images */
  .decorative-sigil.mobile-sigil {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    margin: 15px auto !important;
    opacity: 0.6 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  
  /* Hide regular desktop sigils on mobile */
  .decorative-sigil:not(.mobile-sigil) {
    display: none !important;
  }
  
  /* Always show carousel indicators on mobile */
  .carousel-indicator {
    display: block !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    font-family: 'Michroma', monospace !important;
    z-index: 100 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
  }
  
  .artwork-card, .decorative-sigil {
    /* Mobile sizing handled by JavaScript */
    transition: all 0.3s ease;
  }
  
  .decorative-sigil {
    /* Smaller and more subtle sigils on mobile */
    opacity: 0.4;
    animation-duration: 10s; /* Slower breathing on mobile */
  }
  
  .decorative-sigil:hover {
    opacity: 0.7 !important; /* Less intense on mobile */
  }
  
  .portfolio-title {
    font-size: 2em;
    gap: 20px;
  }
  
  .portfolio-sigil {
    height: 1.5em;
  }
  
  .randomize-btn {
    padding: 10px 24px;
    font-size: 0.9em;
  }
  
  .lightbox-content {
    padding: 20px;
    margin: 20px;
  }
  
  .lightbox-title {
    font-size: 1.5em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .portfolio-grid {
    min-height: 700px;
  }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .portfolio-grid {
    min-height: 600px;
  }
}

@media (min-width: 1401px) {
  .portfolio-grid {
    min-height: 650px;
  }
}

/* MINI CAROUSEL CONTROLS - CLEAN & SUBTLE */
.carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.artwork-card:hover .carousel-controls {
  opacity: 1;
  pointer-events: all;
}

.carousel-btn {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Michroma', monospace;
  font-size: 16px;
  font-weight: bold;
  margin: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.carousel-btn:active {
  transform: scale(0.95);
}

.carousel-arrow {
  line-height: 1;
  font-size: 18px;
  user-select: none;
}

.carousel-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-family: 'Michroma', monospace;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* LIGHTBOX CAROUSEL CONTROLS */
.lightbox-carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.lightbox-carousel-btn {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Michroma', monospace;
  font-size: 24px;
  font-weight: bold;
  margin: 16px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: all;
}

.lightbox-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.lightbox-carousel-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-family: 'Michroma', monospace;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ===== GALLERY POST VISTA WINDOWS ===== */

.gallery-post-window {
  position: relative;
  display: block;
}

.vista-window {
  background: linear-gradient(135deg, #f0f6ff 0%, #e0ebff 50%, #d5e5ff 100%);
  border: 1px solid #a0b8e0;
  border-radius: 6px;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: visible; /* Changed from hidden to allow floating decorations to appear above */
  font-family: 'Michroma', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.vista-titlebar {
  background: linear-gradient(180deg, #5890d8 0%, #4a7bc8 50%, #3d6bb8 100%);
  border-bottom: 1px solid #2e5a98;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  position: relative;
}

.vista-titlebar::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.8) 100%);
}

.vista-title-text {
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
}

.vista-window-controls {
  display: flex;
  gap: 2px;
}

.vista-btn {
  width: 16px;
  height: 14px;
  border: 1px solid #2e5a98;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  background: linear-gradient(180deg, #8bb3e8 0%, #6a9bd8 50%, #4a7bc8 100%);
  transition: all 0.1s ease;
}

.vista-btn:hover {
  background: linear-gradient(180deg, #9bc3f8 0%, #7aabec 50%, #5a8bd8 100%);
}

/* Specific hover colors for each button */
.vista-btn.minimize:hover {
  background: linear-gradient(180deg, #90ee90 0%, #7dd87d 50%, #6bc26b 100%);
  border-color: #4a8c4a;
}

.vista-btn.maximize:hover {
  background: linear-gradient(180deg, #ffeb90 0%, #ffd87d 50%, #ebc26b 100%);
  border-color: #cc9900;
}

.vista-btn.close:hover {
  background: linear-gradient(180deg, #ff9090 0%, #ff7d7d 50%, #e66b6b 100%);
  border-color: #cc3333;
}

.vista-btn:active {
  background: linear-gradient(180deg, #4a7bc8 0%, #6a9bd8 50%, #8bb3e8 100%);
}

/* Window control button icons */
.vista-btn.minimize::before {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  height: 1px;
  background: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.vista-btn.maximize::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.vista-btn.close::before {
  content: '×';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.vista-content {
  position: relative;
  background: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.vista-status-bar {
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  border-top: 1px solid #d0d0d0;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 9px;
  color: #666;
}

.gallery-post-window .artwork-image-container {
  position: relative;
  background: white;
}

.gallery-post-window .artwork-image {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}