@font-face {
  font-family: "Inter Hero";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Reference typography: Inter Bold, scaled to 70% of the original size. */
.hero-title {
  margin-top: 0;
  padding: 24px;
  pointer-events: none;
}
.hero h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: "Inter Hero", Arial, Helvetica, sans-serif;
  font-size: 4.2vw;
  font-weight: 700;
  font-optical-sizing: none;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}
.hero::after { pointer-events: none; }
.hero-panel img { filter: brightness(.48); }

/* Motion stays inside each existing frame; the grid and image ratios don't move. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-panel > img,
  .project-photo > img {
    scale: 1;
    transform: translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0);
    transition: scale 1.2s cubic-bezier(.2,.7,.2,1),
                transform 1.2s cubic-bezier(.2,.7,.2,1), filter .65s ease;
  }
  .hero-panel.motion-active > img {
    scale: 1.07;
    filter: brightness(.64);
    transition-duration: 4s, 1.2s, .65s;
  }
  .project-photo.motion-active > img,
  .project:focus-visible .project-photo > img {
    scale: 1.04;
    transition-duration: 2.4s, 1.2s, .65s;
  }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 7vw; line-height: 1.08; }
  .hero h1 span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel > img,
  .project-photo > img { scale: 1; transform: none; }
}