/* ===== 민건설 인트로 애니메이션 ===== */
/* 첫 진입 시 3.5s / sessionStorage로 1회만 */

#intro {
  position: fixed; inset: 0;
  z-index: 9999;
  background: #1a1a18;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity .8s ease;
}
#intro.fading { opacity: 0; pointer-events: none; }
#intro.hidden { display: none; }

/* 배경 텍스처 (콘크리트 노이즈 느낌) */
.intro-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(90,122,74,.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(139,138,133,.1) 0%, transparent 40%),
    linear-gradient(180deg, #1a1a18, #2a2a28);
}

/* 상하 쇠테 (산업적) */
.intro-bar {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: barGrow 1s cubic-bezier(.7,.1,.3,1) forwards;
}
.intro-bar.top { top: 40px; animation-delay: .2s; }
.intro-bar.bottom { bottom: 40px; animation-delay: .2s; transform-origin: right; }

@keyframes barGrow {
  to { transform: scaleX(1); }
}

/* 드릴 원 — 동심원이 펴지며 타공 느낌 */
.intro-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(232,229,223,.3);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: ringExpand 2s cubic-bezier(.2,.8,.3,1) forwards;
}
.intro-ring.r1 { width: 200px; height: 200px; animation-delay: .4s; }
.intro-ring.r2 { width: 320px; height: 320px; animation-delay: .6s; }
.intro-ring.r3 { width: 460px; height: 460px; animation-delay: .8s; border-color: rgba(90,122,74,.4); }
.intro-ring.r4 { width: 640px; height: 640px; animation-delay: 1.0s; }

@keyframes ringExpand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: .15; }
}

/* 중앙 로고 */
.intro-logo {
  position: relative;
  text-align: center;
  color: var(--concrete-light);
  z-index: 2;
}
.intro-kicker {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--accent);
  opacity: 0;
  animation: fadeUp .8s ease forwards;
  animation-delay: 1.2s;
  margin-bottom: 20px;
}
.intro-title {
  font-family: var(--font-title);
  font-size: clamp(64px, 10vw, 120px);
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: 1.4s;
  line-height: 1;
}
.intro-sub {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .2em;
  color: var(--concrete-mid);
  margin-top: 20px;
  opacity: 0;
  animation: fadeUp .8s ease forwards;
  animation-delay: 1.8s;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* 한글 세로 마크 (옆에 장식) */
.intro-vertical {
  position: absolute;
  right: clamp(20px, 5vw, 80px);
  top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-sub);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--concrete-mid);
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2.2s;
}
@keyframes fadeIn { to { opacity: .6; } }

.intro-vertical-left {
  left: clamp(20px, 5vw, 80px);
  right: auto;
  animation-delay: 2.0s;
}

/* 스킵 버튼 */
.intro-skip {
  position: absolute;
  bottom: 24px; right: 24px;
  font-family: var(--font-sub);
  font-size: 12px; letter-spacing: .15em;
  color: var(--concrete-mid);
  background: transparent;
  border: 1px solid var(--concrete-mid);
  padding: 8px 16px;
  border-radius: 2px;
  opacity: 0;
  animation: fadeIn .6s ease forwards;
  animation-delay: 1s;
  transition: all .2s;
  cursor: pointer;
}
.intro-skip:hover { color: var(--concrete-light); border-color: var(--concrete-light); }

/* 하단 카운터 (산업적) */
.intro-meta {
  position: absolute;
  bottom: 60px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sub);
  font-size: 10px; letter-spacing: .3em;
  color: var(--concrete-mid);
  opacity: 0;
  animation: fadeIn .6s ease forwards;
  animation-delay: 2.4s;
}