/* ============================================================
   hero.css — Hero 섹션 전용 스타일
   ============================================================ */

/* ── Hero 섹션 기본 ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── 배경 이미지 ── */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(1.4);
  transform: scale(1.05);
  animation: bgDrift 20s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  from { transform: scale(1.05) translate(0,    0);    }
  to   { transform: scale(1.1)  translate(-1%, -1%); }
}

/* ── 그레인 오버레이 ── */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
  z-index: 1;
}

/* ── 컬러 스트라이프 ── */
.color-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 2;
}
.strip-1 { left: 0;  background: var(--neon-pink);   animation: flicker 6s 2s infinite; }
.strip-2 { right: 0; background: var(--neon-yellow);  animation: flicker 8s 4s infinite; }

/* ── 상단 라벨 ── */
.top-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  animation: fadeSlideDown 1.2s ease both;
}

/* ── Hero 콘텐츠 ── */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
}

.pre-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeSlideUp 0.8s 0.3s ease forwards;
}

/* ── 타이틀 타이포그래피 ── */
.studio-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
  opacity: 0;
  animation: fadeSlideUp 0.9s 0.5s ease forwards;
}

.word-studio {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 180px);
  color: var(--cream);
  letter-spacing: 0.06em;
}

.word-mydinh {
  font-family: var(--font-serif);
  font-size: clamp(60px, 10vw, 130px);
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px var(--cream);
  position: relative;
}

/* ── Glitch 효과 ── */
.word-mydinh::after {
  content: 'MY ĐÌNH';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  color: var(--neon-pink);
  -webkit-text-stroke: 0;
  clip-path: inset(0 60% 0 0);
  animation: glitchReveal 4s 1.5s ease infinite;
}

@keyframes glitchReveal {
  0%,100% { clip-path: inset(0 60% 0 0); }
  10%      { clip-path: inset(0 20% 0 0); }
  20%      { clip-path: inset(0 80% 0 0); }
  30%      { clip-path: inset(0 40% 0 0); }
  40%      { clip-path: inset(0  0% 0 0); }
  50%      { clip-path: inset(0 70% 0 0); }
  60%      { clip-path: inset(0 10% 0 0); }
  70%      { clip-path: inset(0 50% 0 0); }
  80%      { clip-path: inset(0  5% 0 0); }
  90%      { clip-path: inset(0 90% 0 0); }
}

/* ── 네온 라인 ── */
.neon-line {
  width: 60px;
  height: 2px;
  background: var(--neon-cyan);
  margin: 28px auto;
  box-shadow: 0 0 12px var(--neon-cyan);
  opacity: 0;
  animation: fadeSlideUp 0.8s 0.9s ease forwards;
}

/* ── 태그라인 ── */
.tagline {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 2px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.8;
  opacity: 0;
  animation: fadeSlideUp 0.8s 1.1s ease forwards;
}

/* ── CTA 버튼 그룹 ── */
.cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  opacity: 0;
  animation: fadeSlideUp 0.9s 1.3s ease forwards;
}

/* ── 코너 장식 ── */
.corner {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 10;
  pointer-events: none;
}
.corner-tl { top: 60px; left: 20px;  border-top:    2px solid var(--neon-cyan); border-left:  2px solid var(--neon-cyan); }
.corner-tr { top: 60px; right: 20px; border-top:    2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan); }
.corner-bl { bottom: 60px; left: 20px;  border-bottom: 2px solid var(--neon-cyan); border-left:  2px solid var(--neon-cyan); }
.corner-br { bottom: 60px; right: 20px; border-bottom: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan); }

/* ── 스크롤 힌트 ── */
.scroll-hint {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--neon-cyan));
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(1);   }
  50%      { opacity: 1;   transform: scaleY(0.5); }
}

/* ── 플로팅 태그 ── */
.floating-tag {
  position: absolute;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid;
  pointer-events: none;
}
.tag-art   { top: 30%; left: 30px;  color: var(--neon-yellow); border-color: var(--neon-yellow); transform: rotate(-90deg); }
.tag-space { bottom: 35%; right: 30px; color: var(--neon-pink);   border-color: var(--neon-pink);   transform: rotate(90deg);  }

/* ── 네온 액센트 ── */
.neon-accent {
  position: absolute;
  top: 36px;
  right: 40px;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--neon-cyan);
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%,95%,100% { opacity: 1;   }
  96%          { opacity: 0.4; }
  97%          { opacity: 1;   }
  98%          { opacity: 0.2; }
  99%          { opacity: 1;   }
}

/* ── 통계 바 ── */
.stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 80px);
  padding: 24px;
  background: rgba(13,10,8,0.7);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.stat-item { text-align: center; }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  color: var(--neon-yellow);
  line-height: 1;
  display: block;
}

.stat-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
  margin-top: 4px;
}