/* styles/hero.css */

#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 6vw 6rem;
  position: relative; overflow: hidden;
}

.hero-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-size: clamp(8rem, 22vw, 20rem);
  color: rgba(20,20,19,.04); white-space: nowrap;
  pointer-events: none; user-select: none;
  letter-spacing: -.04em; line-height: 1;
}

.hero-inner {
  max-width: 1100px; margin: 0 auto; width: 100%; position: relative;
}

.hero-eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.2rem;
  opacity: 0; animation: fadeUp .8s .3s forwards;
}

.hero-name {
  font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 1; letter-spacing: -.03em;
  opacity: 0; animation: fadeUp .9s .45s forwards;
}
.hero-name em { font-style: italic; }

.hero-tagline {
  margin-top: 2rem; font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--ink-muted); max-width: 480px;
  opacity: 0; animation: fadeUp .9s .6s forwards;
}

.hero-cta {
  margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .9s .75s forwards;
}

.hero-line {
  position: absolute; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  opacity: 0; animation: fadeIn 1s 1.2s forwards;
}
.hero-line span { width: 1px; height: 60px; background: var(--mid); display: block; }
.hero-line p {
  writing-mode: vertical-rl; font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mid);
}

@media (max-width: 800px) {
  .hero-line { display: none; }
}