/* Awwwards Inspired Dark Cyber & High-End Kinetic Architecture */

:root {
  --bg-deep: #06080D;
  --bg-surface: #0D111A;
  --bg-card: #111726;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(99, 102, 241, 0.65);
  --accent-indigo: #6366F1;
  --accent-cyan: #06B6D4;
  --accent-violet: #8B5CF6;
  --accent-amber: #F59E0B;
  --accent-emerald: #10B981;
}

/* 배경 사이버 그리드 */
.bg-grid-cyber {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Three.js 캔버스 고정 배경 */
#three-canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* 카드가 촤라락 전개되는 탄력적인 애니메이션 (Elastic Staggered Card Reveal) */
@keyframes cardRevealSpring {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

.stagger-card {
  animation: cardRevealSpring 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

/* 하이엔드 쇼케이스 카드 인터랙션 & 네온 글로우 */
.showcase-card {
  position: relative;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.showcase-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px -12px rgba(99, 102, 241, 0.35),
    0 0 25px rgba(6, 182, 212, 0.18),
    inset 0 0 20px rgba(99, 102, 241, 0.05);
}

.showcase-card .inspect-hint {
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.showcase-card:hover .inspect-hint {
  opacity: 1;
  transform: translateX(0px);
}

/* 모달 오버레이 고성능 스프링 애니메이션 (Modal Morph) */
@keyframes modalBackdropIn {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(24px);
  }
}

@keyframes modalPopInSpring {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.88);
  }
  65% {
    opacity: 1;
    transform: translateY(-5px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

#detail-modal-backdrop {
  animation: modalBackdropIn 0.35s ease-out forwards;
}

#detail-modal-card {
  animation: modalPopInSpring 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

/* 신호등 모형 LED 광원 효과 */
.signal-lamp {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.signal-lamp.red-on {
  background-color: #EF4444;
  box-shadow: 0 0 20px #EF4444, 0 0 40px rgba(239, 68, 68, 0.5), inset 0 0 4px #FECACA;
}
.signal-lamp.yellow-on {
  background-color: #F59E0B;
  box-shadow: 0 0 20px #F59E0B, 0 0 40px rgba(245, 158, 11, 0.5), inset 0 0 4px #FEF3C7;
}
.signal-lamp.green-on {
  background-color: #10B981;
  box-shadow: 0 0 20px #10B981, 0 0 40px rgba(16, 185, 129, 0.5), inset 0 0 4px #D1FAE5;
}
.signal-lamp.off {
  background-color: #1E293B;
  opacity: 0.3;
}

/* 버튼 액티브 햅틱 마이크로 인터랙션 */
button, a {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
button:active, a:active {
  transform: scale(0.96);
}