/* Figma "Frame 6": copy on the left, art on a 1072 x 384 stage that keeps
   the design's coordinates. src/ui/stageScale.js sets --stage-scale. */
.hero {
  --stage-scale: 1;
  --stage-offset: 0px;
  position: relative;
  min-height: calc(384px * var(--stage-scale));
  margin-top: 48px;
}

.hero__copy {
  position: relative;
  z-index: 2;
  width: 330px;
  padding-top: 8px;
}

.hero__title {
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.hero__sub {
  max-width: 259px;
  margin-top: 8px;
  font-size: 15px;
  font-variation-settings: "opsz" 9;
}

.hero__cta {
  justify-content: space-between;
  width: 270px;
  margin-top: 64px;
  padding: 4px 3px;
}

.hero__stage-wrap {
  --stage-crop-x: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1600px;
}

/* The art floats: a slow bob, plus a tilt towards the pointer that
   src/ui/tilt.js drives through --tilt-x / --tilt-y / --pointer-*. */
.hero__float {
  position: absolute;
  inset: 0;
  transform-origin: 71% 55%;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  animation: hero-float 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Each layer shifts with the pointer by its own depth, so the ellipse and
   the two heads separate instead of moving as one flat card. */
.hero__stage canvas {
  translate: calc(var(--pointer-x, 0) * var(--depth, 0) * 1px) calc(var(--pointer-y, 0) * var(--depth, 0) * 1px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__float { animation: none; }
}

.hero__stage {
  position: absolute;
  top: 0;
  left: var(--stage-offset);
  width: 1072px;
  height: 384px;
  transform-origin: 0 0;
  transform: scale(var(--stage-scale)) translateX(calc(var(--stage-crop-x) * -1px));
}

.hero__stage canvas { position: absolute; }

/* "Ellipse 1": rotated 24.2 degrees, layer opacity 22%. */
.fx-ellipse {
  left: 219px;
  top: 212.45px;
  width: 924.4px;
  height: 574.35px;
  transform-origin: 0 0;
  transform: matrix(0.91187, -0.41048, 0.41048, 0.91187, 0, 0);
  opacity: 0.22;
  --depth: 6;
}

.fx-robot {
  left: 726px;
  top: 8px;
  width: 346px;
  height: 368px;
  --depth: -10;
}

/* "image 1": mirrored; Figma blends it with Linear burn, which CSS lacks.
   Multiply matches it wherever the dithered art is pure white or black. */
.fx-caller {
  left: 455px;
  top: 8px;
  width: 383px;
  height: 368px;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
  --depth: -16;
}

@media (max-width: 900px) {
  .hero { min-height: 0; margin-top: 40px; }
  .hero__copy { width: auto; max-width: 330px; }
  .hero__cta { margin-top: 40px; }

  .hero__stage-wrap {
    --stage-crop-x: 420;
    position: relative;
    inset: auto;
    height: calc(384px * var(--stage-scale));
    margin-top: 32px;
  }

  .hero__float { transform-origin: 50% 50%; }
}