// showcase.css
body.theme-electric {
  background: radial-gradient(ellipse at 50% 30%, #2a0a4a 0%, #0a0518 55%, #030209 100%);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.showcase-door {
  text-align: center;
  padding: 32px 24px;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.showcase-door:hover { transform: translateY(-6px); }

.showcase-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 16px; }

.showcase-tagline { font-size: 0.85rem; opacity: 0.6; font-style: italic; margin-bottom: 18px; }

.showcase-open-btn {
  display: inline-block;
  border: 1px solid rgba(247,217,139,0.4);
  color: #f7d98b;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* DOOR OVERLAY */
.door-overlay {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(3,2,10,0.85);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.door-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

.door-overlay-content {
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 36px 28px; position: relative; text-align: center;
  transform: scale(0.92);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.door-overlay.open .door-overlay-content { transform: scale(1); }

.door-close {
  position: absolute; top: 14px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(253,243,228,0.8);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.door-overlay-logo { width: 80px; height: 80px; object-fit: contain; margin: 0 auto 16px; }
.door-overlay-tagline { opacity: 0.6; font-style: italic; margin-bottom: 22px; }
.door-overlay-story p { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; line-height: 1.9; margin-bottom: 20px; }
.door-overlay-desc { margin-bottom: 20px; opacity: 0.8; }
.door-overlay-social { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; font-size: 0.85rem; }
.door-overlay-social a { color: #f7d98b; text-decoration: none; }

@media (max-width: 480px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .door-overlay-content { padding: 28px 20px; }
}