/* ── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: url('../images/hero-city.jpg') center center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  --cx: 50%; --cy: 50%;
  transition: background-position .08s ease-out;
}

.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: rgba(10, 5, 2, 0.08);
}

/* 커서 글로우 */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(520px circle at var(--cx) var(--cy),
    rgba(200, 82, 26, 0.13), transparent 65%);
  pointer-events: none;
  transition: background .15s;
}

.hero-content {
  position: relative; z-index: 1;
  width: 100%;
  padding: 80px 48px 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* ── MAIN PHRASES ───────────────────────────────────────── */
.hero-phrases {
  margin-bottom: 56px;
}
.hero-phrase {
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.7;
  letter-spacing: .04em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  opacity: 0;
  animation: phraseIn .9s cubic-bezier(.25,.46,.45,.94) forwards;
}
.hero-phrase:nth-child(1) {
  animation: phraseIn .9s cubic-bezier(.25,.46,.45,.94) .3s  forwards,
             phraseColor 5s ease-in-out 1.4s infinite;
}
.hero-phrase:nth-child(2) {
  animation: phraseIn .9s cubic-bezier(.25,.46,.45,.94) .55s forwards,
             phraseColor 5s ease-in-out 1.9s infinite;
}
.hero-phrase:nth-child(3) {
  animation: phraseIn .9s cubic-bezier(.25,.46,.45,.94) .8s  forwards,
             phraseColor 5s ease-in-out 2.4s infinite;
}

@keyframes phraseColor {
  0%, 25%, 75%, 100% { color: rgba(255, 255, 255, 1); }
  50% { color: rgba(255, 200, 150, 0.88); }
}
.hero-phrase:hover {
  letter-spacing: .09em;
  text-shadow: 0 2px 24px rgba(200, 82, 26, 0.55), 0 1px 4px rgba(0,0,0,0.3);
  transition: letter-spacing .4s ease, text-shadow .4s ease;
}

/* ── CTA BUTTON ─────────────────────────────────────────── */
.hero-btns {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  opacity: 0;
  animation: phraseIn .9s cubic-bezier(.25,.46,.45,.94) 1.05s forwards;
}

@keyframes phraseIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL INDICATOR ───────────────────────────────────── */
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
  font-size: .6rem; letter-spacing: .25em;
  color: rgba(255,255,255,.5);
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation: scrollFade 2s ease-in-out infinite;
}
@keyframes scrollFade {
  0%,100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  40%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
  60%      { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
  100%     { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 600px) {
  .hero-content { padding: 80px 24px 0; }
  .hero-scroll  { display: none; }
}