.home {
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
}

.home__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* Giant "hello" behind the character; home.js shifts it for parallax. */
.home__bg-word {
  position: absolute;
  top: calc(150px * var(--char-scale, 1));
  left: 0;
  right: 0;
  z-index: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(calc(300px * var(--char-scale, 1)), 27vw);
  line-height: 1;
  letter-spacing: -8px;
  color: var(--color-card);
}

.home__character {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 467px;
  height: 900px;
  margin-left: -233px;
  z-index: 1;
  /* Shrinks the fixed-size sprite to fit short viewports; set by home.js. */
  transform: scale(var(--char-scale, 1));
  transform-origin: 50% 100%;
}

/* One <img> per animation (look/down/up/idle); home.js swaps in the current frame
   from assets/images/character/ and shows only one of them at a time. */
.home__sprite {
  display: block;
  position: absolute;
  inset: 0;
  width: 467px;
  height: 900px;
  opacity: 0;
  /* Home uses a softer mask that also fades the left/right edges. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, transparent 1%, #000 6%, #000 72%, transparent 97%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, transparent 1%, #000 6%, #000 72%, transparent 97%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.home__sprite.is-visible { opacity: 1; }

.home__intro {
  position: absolute;
  left: var(--page-gutter);
  bottom: 72px;
  z-index: 2;
  width: 340px;
  max-width: calc(100% - 2 * var(--page-gutter));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home__eyebrow { color: var(--color-text); }
.home__title { font-size: 56px; }

.home__actions {
  position: absolute;
  right: var(--page-gutter);
  bottom: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.home__hint {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Touch screens have no cursor to follow. */
@media (hover: none) {
  .home__hint { display: none; }
}

@media (max-width: 1024px) {
  .home__intro, .home__actions { bottom: 48px; }
  .home__title { font-size: 48px; }
}

/* Phones: character sits above the text, intro and button stack at the bottom. */
@media (max-width: 640px) {
  .home__bg-word { top: 120px; letter-spacing: -4px; }
  .home__character { bottom: 200px; }
  .home__intro { bottom: 96px; gap: 10px; }
  .home__title { font-size: 38px; }
  .home__actions { left: var(--page-gutter); right: auto; bottom: 28px; align-items: flex-start; }
}