/* Progressive enhancement hooks: content remains visible if JavaScript is unavailable. */
.cursor {
  left: 0;
  top: 0;
  transform: none;
  transition: width .2s, height .2s, background-color .2s;
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .word {
  display: inline-block;
  will-change: transform, opacity;
}

.project .visual {
  will-change: transform, clip-path;
}

.hero small i {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 8px;
  background: var(--line);
  vertical-align: middle;
}

.gesture-active .hero small i {
  background: var(--acid);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .word,
  .project .visual {
    will-change: auto;
  }

  .gesture-active .hero small i {
    background: var(--line);
  }
}