/* A single reel turn for the portfolio navigation. */
.top-nav .nav-title {
  display: block;
  overflow: hidden;
  line-height: 1.2;
  margin-block: -.15em;
}

.nav-reel {
  position: relative;
  display: block;
}

.nav-reel-copy {
  position: absolute;
  top: 100%;
  left: 0;
}

.contact-reel-window {
  display: block;
  overflow: hidden;
  line-height: 1.2;
  margin-block: -.1em;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .top-nav .nav-item:hover .nav-reel,
  .contact-btn:hover .nav-reel {
    animation: nav-reel-turn .48s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes nav-reel-turn {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: no-preference) {
  .top-nav .nav-item.is-turning .nav-reel {
    animation: nav-reel-turn .48s cubic-bezier(.22, 1, .36, 1) both;
  }
}