:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111113;
  color: #f7f5f1;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body { overflow: hidden; }

.hero {
  --x: 50%;
  --y: 50%;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-color: #000;
  background-image: url("fade.png");
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transform-origin: var(--x) var(--y);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), transform-origin 180ms ease-out;
  will-change: transform, transform-origin;
}

.hero.is-exploring .hero__image { transform: scale(1.01); }

.identity {
  position: absolute;
  top: clamp(24px, 3.2vw, 52px);
  left: clamp(24px, 3.2vw, 52px);
  overflow: hidden;
  color: #0a0a0a;
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 570;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.identity__word {
  display: block;
  transition: opacity 280ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}

.identity__word.is-changing {
  opacity: 0;
  transform: translateY(45%);
}

@media (hover: none), (pointer: coarse) {
  .hero__image { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image { transition: none; transform: scale(1) !important; }
  .identity__word { transition: none; }
}