/* hero.css */

.td-hero {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding: 80px;
}

.td-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 64px;
  align-items: center;
}

/* Text column */
.td-hero__text { display: flex; flex-direction: column; gap: 24px; }

.td-hero__headline {
  color: var(--td-cream);
}

.td-hero__sub {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--td-cream);
  opacity: 0.8;
  line-height: 1.6;
  max-width: 480px;
}

.td-hero__cta {
  align-self: flex-start;
  padding: 16px 36px;
  font-size: 16px;
}

/* Diagram column */
.td-hero__diagram { position: relative; }

.td-hero__bike-wrap {
  position: relative;
  width: 100%;
}

.td-hero__bike {
  width: 100%;
  height: auto;
  display: block;
}

/* Annotation callouts */
.td-annotation {
  position: absolute;
  border: 1px solid var(--td-yellow);
  background: var(--td-navy);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.td-annotation::before {
  content: attr(data-ref);
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--td-yellow);
  letter-spacing: 0.15em;
  opacity: 0.7;
  white-space: nowrap;
}

.td-annotation__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--td-yellow);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Positions relative to .td-hero__bike-wrap */
.td-annotation--1 { top: 55%; left: -8%; }
.td-annotation--2 { top: 62%; right: 0%; }
.td-annotation--3 { top: -2%; left: 20%; }
.td-annotation--4 { bottom: 5%; left: 30%; }

/* Leader lines */
.td-annotation--1::after {
  content: '';
  position: absolute;
  right: -24px; top: 50%;
  width: 24px; height: 1px;
  background: var(--td-yellow);
  opacity: 0.6;
}
.td-annotation--2::after {
  content: '';
  position: absolute;
  left: -24px; top: 50%;
  width: 24px; height: 1px;
  background: var(--td-yellow);
  opacity: 0.6;
}
.td-annotation--3::after {
  content: '';
  position: absolute;
  bottom: -20px; left: 50%;
  width: 1px; height: 20px;
  background: var(--td-yellow);
  opacity: 0.6;
}
.td-annotation--4::after {
  content: '';
  position: absolute;
  top: -16px; left: 50%;
  width: 1px; height: 16px;
  background: var(--td-yellow);
  opacity: 0.6;
}

/* Scroll reveal base states */
.td-reveal {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}

.td-hero__diagram.td-reveal {
  transform: translateX(60px);
}

.td-reveal.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger via delay */
.td-reveal[data-reveal-delay="200"] {
  transition-delay: 200ms;
}

/* Responsive */
@media (max-width: 1024px) {
  .td-hero {
    padding: 60px 40px;
  }
  .td-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .td-hero__diagram {
    order: -1;
    max-width: 480px;
    margin: 0 auto;
  }
  .td-hero__headline { font-size: clamp(40px, 8vw, 72px); }
}

@media (max-width: 600px) {
  .td-hero { padding: 40px 20px; }
  .td-annotation { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .td-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}