/* ============================================
   HUMAN C&C MAIN - style.css
   color / font / button / label / animation
   ============================================ */

/* ----- Base ----- */
.main-wrap, .main-wrap *, .main-wrap *::before, .main-wrap *::after {
  box-sizing: border-box;
}
.main-wrap {
  font-family: 'Noto Sans KR', sans-serif;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.main-wrap p,
.main-wrap h1,
.main-wrap h2,
.main-wrap h3,
.main-wrap h4,
.main-wrap h5 { margin: 0; }
.main-wrap h1, .main-wrap h2, .main-wrap h3, .main-wrap h4, .main-wrap h5 { font-weight: 800; }
.main-wrap ul { margin: 0; padding: 0; list-style: none; }
.main-wrap img { display: block; max-width: 100%; }
.main-wrap a { color: inherit; text-decoration: none; }
.main-wrap button {
  border: 0; background: none; font: inherit; cursor: pointer; padding: 0;
}

/* ----- Utility ----- */
.main-wrap .font-bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; }

/* ----- Scroll Animation ----- */
.main-wrap .fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.main-wrap .fade-up.in { opacity: 1; transform: translateY(0); }
.main-wrap .fade-up.d1 { transition-delay: .12s; }
.main-wrap .fade-up.d2 { transition-delay: .24s; }
.main-wrap .fade-up.d3 { transition-delay: .36s; }

/* ----- Common Label ----- */
.main-wrap .label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #E60012;
  letter-spacing: 2.5px;
  margin-bottom: 16px;
}
.main-wrap .label::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  background: #E60012;
}

/* ----- Decorative Background Text ----- */
.main-wrap .bg-text {
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.035);
  line-height: 0.8;
  pointer-events: none;
  letter-spacing: -2px;
}

/* ----- Buttons ----- */
.main-wrap .btn-primary {
  background: #fff;
  color: #1a1a1a;
  padding: 16px 32px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.5px;
  transition: all .25s;
}
.main-wrap .btn-primary:hover { background: #E60012; color: #fff; }

.main-wrap .btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px 32px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s;
}
.main-wrap .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.main-wrap .btn-white {
  background: #fff;
  color: #1a1a1a;
  padding: 18px 36px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  transition: all .25s;
}
.main-wrap .btn-white:hover { background: #E60012; color: #fff; }
.main-wrap .btn-white i { transition: transform .25s; }
.main-wrap .btn-white:hover i { transform: translateX(5px); }

/* ----- Slider Nav ----- */
.main-wrap .slider-nav { display: flex; gap: 8px; }
.main-wrap .slider-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #ccc;
  color: #1a1a1a;
  cursor: pointer;
  transition: all .2s;
  font-size: 14px;
}
.main-wrap .slider-nav button:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.main-wrap .slider-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.main-wrap .slider-nav button:disabled:hover { background: transparent; color: #1a1a1a; border-color: #ccc; }

/* ----- Keyframes ----- */
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.3; }
}