.kinetic-title {
  perspective: 1100px;
  --title-edge: rgba(135, 135, 135, .65);
  --title-shadow: rgba(0, 0, 0, .35);
}
.kinetic-face {
  display: block;
  transform-origin: center;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(var(--title-lift, 0px));
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1), text-shadow 420ms ease;
  text-shadow: 0 1px 0 var(--title-edge), 0 2px 0 var(--title-edge), 0 3px 0 var(--title-edge), 0 10px 22px var(--title-shadow);
}
.kinetic-title.is-tracking .kinetic-face {
  transition-duration: 130ms;
  text-shadow: 0 1px 0 var(--title-edge), 0 2px 0 var(--title-edge), 0 3px 0 var(--title-edge), 0 4px 0 var(--title-edge), 0 5px 0 var(--title-edge), 0 16px 28px var(--title-shadow);
}
.brand-name.kinetic-title {display:inline-block}
.hero {height:auto;min-height:100svh;gap:clamp(24px,4vh,48px)}
.hero .brand-lockup {margin-bottom:0;transform:none}
.hero h1 {font-size:clamp(3.5rem,9vw,10rem)}
.brand-name .kinetic-face {text-shadow:0 1px 0 #777,0 2px 0 #555,0 4px 10px #000}
.motion .kinetic-title {--title-edge:rgba(95,95,95,.4);--title-shadow:rgba(0,0,0,.14)}
@media (max-width:700px) {
  .kinetic-title {perspective:850px}
  .kinetic-face {text-shadow:0 1px 0 var(--title-edge),0 2px 0 var(--title-edge),0 6px 14px var(--title-shadow)}
}
@media (prefers-reduced-motion:reduce) {
  .kinetic-face,.kinetic-title.is-tracking .kinetic-face {transform:none;transition:none;text-shadow:none}
}