/* ============================================================
   Tektome — Homepage hero
   White stage, copy on the left, live Three.js wireframe tower
   on the right (recreates the site's background video).
   Loaded after nav.css / button.css. Tokens from
   design-system/colors_and_type.css.
   ============================================================ */

.home {
  flex: 1;
  background: var(--color-draft-white);
  font-family: var(--font-sans);
  color: var(--fg-primary);
}

.hero {
  position: relative;
  background: var(--color-draft-white);
  overflow: hidden;
  min-height: clamp(620px, 86vh, 920px);
  display: flex;
  align-items: center;
}

/* ---- Three.js canvas, full-bleed ---- */
.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  /* Extend downward to compensate for the canvas's baked upward translation
     (posY: -110px in hero.js). Without this, shifting the canvas up leaves
     ~110px of bare white background visible at the bottom of the hero. */
  bottom: -130px;
  z-index: 0;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Left-to-right white veil so the copy column stays clean and the
   tower reads strongest on the right — mirrors the source video. */
.hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--color-draft-white) 0%,
      var(--color-draft-white) 26%,
      rgba(255,255,255,0.72) 42%,
      rgba(255,255,255,0) 60%),
    linear-gradient(0deg,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0) 22%);
}

/* ---- Copy ---- */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  padding: 0 32px;
}
.hero__copy {
  max-width: 580px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
  margin: 0;
  text-wrap: balance;
}
.hero__title-accent {
  color: var(--color-arch-purple);
}
.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 28px 0 0;
  max-width: 44ch;
  text-wrap: pretty;
}
.hero__actions {
  margin-top: 40px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding: 96px 0 120px;
    align-items: flex-start;
  }
  .hero__fade {
    background:
      linear-gradient(180deg,
        var(--color-draft-white) 0%,
        var(--color-draft-white) 30%,
        rgba(255,255,255,0.7) 46%,
        rgba(255,255,255,0) 70%);
  }
  .hero__lede { max-width: 52ch; }
}
@media (max-width: 560px) {
  .hero__title { font-size: 38px; }
}

/* Bundle edits — override canvas height to match design spec */
.hero > [aria-hidden] { margin: 0; }
#hero-canvas { height: 1035px; }