/* home.css — Main dashboard page styles */

/* ── Hero ── */
.hero {
  padding: var(--space-24) 0 var(--space-16);
  position: relative; overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-12); align-items: start;
}
.hero__visuals {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero__greeting {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--accent-primary); margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}
.hero__greeting::before {
  content: ''; width: 24px; height: 1px; background: var(--accent-primary);
}
.hero__name {
  font-size: var(--text-6xl); font-weight: var(--weight-black);
  letter-spacing: -0.03em; margin-bottom: var(--space-4); line-height: 1.05;
}
.hero__role {
  font-size: var(--text-2xl); color: var(--text-secondary);
  font-weight: var(--weight-light); margin-bottom: var(--space-6);
}
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Code animation block in hero */
.hero__code {
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); position: relative;
  overflow: hidden;
}
.hero__code-header {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.hero__code-dot {
  width: 10px; height: 10px; border-radius: var(--radius-full);
}
.hero__code-dot:nth-child(1) { background: #ff5f57; }
.hero__code-dot:nth-child(2) { background: #febc2e; }
.hero__code-dot:nth-child(3) { background: #28c840; }
.hero__code-display {
  min-height: 60px; max-height: 60px; overflow: hidden; white-space: pre-wrap;
}
.hero__code .cursor {
  display: inline-block; width: 8px; height: 16px;
  background: var(--accent-primary); animation: blink 1s step-end infinite;
  vertical-align: text-bottom; margin-left: 1px;
}
.hero__code .kw { color: #c678dd; }
.hero__code .fn { color: #61afef; }
.hero__code .str { color: #98c379; }
.hero__code .cm { color: #5c6370; font-style: italic; }
.hero__code .tag { color: #e06c75; }
@keyframes blink { 50% { opacity: 0; } }

/* Hero Video Player (Ambient Style) */
.hero__video {
  margin-top: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.hero__video-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 20;
}

.hero__video-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  transition: width 0.2s linear; /* Smoothly follows the update */
}

.hero__video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
  /* Dark mode: Original elliptical blur */
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 95%);
  overflow: hidden;
  position: relative;
}

/* Light mode: Tighter rectangular blur as requested */
body.light-mode .hero__video-container {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent),
              linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent),
                      linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-composite: source-in;
}

body.light-mode .hero__video-container::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px 20px #f5f5fa; /* Fades video into light bg */
  z-index: 5;
  pointer-events: none;
}

/* Block all YouTube interactions */
.hero__video-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: default;
}

.hero__video-container iframe {
  width: 100%;
  height: 100%;
  transform: scale(1.1); /* Slightly reduced zoom to prevent cutting */
  transform-origin: center;
}

.hero__video-title {
  display: none;
}

/* ── Dashboard Bento ── */
.dashboard { padding-bottom: var(--space-20); }
.dashboard__header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4);
}
.dashboard__view-all {
  font-size: var(--text-sm); color: var(--accent-primary);
  font-weight: var(--weight-medium); display: flex; align-items: center; gap: var(--space-1);
  transition: gap var(--transition-fast);
  width: fit-content;
  position: relative;
  z-index: 2;
}
.dashboard__view-all:hover { gap: var(--space-2); }

/* Featured project card */
.featured-project {
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 280px;
  position: relative;
}
.card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.featured-project__img {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
}
.featured-project__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Tech stack preview */
.tech-stack-card { min-width: 280px; }
.tech-preview { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tech-chip {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); transition: all var(--transition-fast);
}
.tech-chip:hover {
  border-color: var(--border-accent); color: var(--accent-primary);
  background: var(--accent-glow);
}

/* Recent awards list */
.awards-card { min-width: 280px; }
.award-mini { display: flex; flex-direction: column; gap: var(--space-3); }
.award-mini__item {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.award-mini__item:last-child { border-bottom: none; }
.award-mini__name { color: var(--text-primary); flex: 1; }
.award-mini__type {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: #fbbf24; white-space: nowrap;
}

/* ── PCB 3D Showcase ── */
.pcb-showcase {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, var(--bg-primary) 0%, #080810 50%, var(--bg-primary) 100%);
}

/* Keep dark background even in light mode — 3D models look best on dark */
body.light-mode .pcb-showcase {
  background: linear-gradient(180deg, var(--bg-primary) 0%, #1a1a2e 50%, var(--bg-primary) 100%);
}

body.light-mode .pcb-showcase__overlay {
  background: linear-gradient(to top, rgba(26, 26, 46, 0.95) 0%, transparent 100%);
}

body.light-mode .pcb-showcase__title,
body.light-mode .pcb-showcase__desc {
  color: #f0f0f5;
}

.pcb-showcase__3d-wrap {
  width: 100%;
  height: 55vh;
  min-height: 380px;
  max-height: 600px;
  position: relative;
  cursor: grab;
}

.pcb-showcase__3d-wrap:active {
  cursor: grabbing;
}

.pcb-showcase__3d-wrap canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.pcb-showcase__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-primary);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pcb-showcase__loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-accent);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: pcb-spin 0.8s linear infinite;
}

@keyframes pcb-spin {
  to { transform: rotate(360deg); }
}

.pcb-showcase__fallback {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-8);
}

.pcb-showcase__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: linear-gradient(to top, rgba(8, 8, 16, 0.95) 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  display: flex;
  justify-content: center;
}

.pcb-showcase__info {
  text-align: center;
  max-width: 600px;
}

.pcb-showcase__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.pcb-showcase__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.pcb-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.pcb-showcase__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 229, 160, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: pcb-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes pcb-glow-pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

/* 좌측 상단 — 우측 상단은 GitHub 배지, 하단 중앙은 제목/설명/태그가 차지합니다.
   (기존 우측 하단 위치는 창 폭 ~769~1100px에서 태그 배지와 겹쳤습니다) */
.pcb-showcase__hint {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  padding: var(--space-2) var(--space-4);
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(10px);
  pointer-events: none;
}

.pcb-showcase__hint .key {
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

.pcb-showcase__hint .sep {
  margin: 0 var(--space-2);
  opacity: 0.3;
}

.pcb-showcase__link {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  z-index: 10;
  text-decoration: none;
  pointer-events: auto;
}

.pcb-showcase__link .gallery-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 160, 0.2);
  border-radius: var(--radius-full);
  color: var(--accent-primary);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}

.pcb-showcase__link .gallery-badge:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

/* 터치 기기 힌트 배치 — 화면 너비가 아니라 pcb3d.js의 기능 감지가 붙이는
   .pcb-showcase__hint--touch 클래스로 제어합니다(태블릿 등 넓은 터치 화면 포함).
   우측 상단 GitHub 배지와 나란히 두면 겹치므로 배지 아래로 한 줄 내립니다. */
.pcb-showcase__hint--touch {
  top: 72px;
  left: var(--space-4);
  right: auto;
  max-width: calc(100% - var(--space-8));
  font-size: 10px;
  line-height: 1.6;
  white-space: normal;
  border-radius: var(--radius-lg);
}

@media(max-width:768px) {
  .pcb-showcase__3d-wrap {
    height: 45vh;
    min-height: 300px;
  }
  .pcb-showcase__title {
    font-size: var(--text-xl);
  }
}

/* ── Responsive ── */
/* ── Stats Wrapper ── */
.stats-wrapper {
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.stats-grid-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); flex: 1;
}
.stat-item {
  text-align: center; display: flex; flex-direction: column;
  justify-content: center; min-height: 120px;
}

@media(max-width:1200px){
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hero__name { font-size: var(--text-5xl); }
  .hero__role { font-size: var(--text-xl); }
  .hero__code-display { min-height: 80px; max-height: 80px; }
}

@media(max-width:768px){
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__visuals { flex-direction: column-reverse; } /* Stack & Swap on mobile only */
  .hero__name { font-size: var(--text-4xl); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__code-display { min-height: 80px; max-height: 80px; }
}