/* SOHEIL: one hovered letter flips upward in 240ms.
   Keep original wordmark spacing and its fixed header position. */
.site-header .site-name.name-hover-ready{
  padding:12px 1px;
  margin:-12px -1px;
  user-select:none;
  white-space:nowrap;
}
.site-header .site-name .name-hover-glyph{
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  perspective:180px;
  cursor:default;
}
.site-header .site-name .name-hover-face{
  display:block;
  transform-origin:center 50%;
  backface-visibility:hidden;
  pointer-events:none;
}
.site-header .site-name .name-hover-in{
  position:absolute;
  inset:0;
  opacity:0;
}
.site-header .site-name .name-hover-glyph.is-flipping .name-hover-out{
  animation:soheil-letter-flip-out .24s cubic-bezier(.2,.7,.2,1) both;
}
.site-header .site-name .name-hover-glyph.is-flipping .name-hover-in{
  animation:soheil-letter-flip-in .24s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes soheil-letter-flip-out{
  0%{opacity:1;transform:translate3d(0,0,0) rotateX(0deg)}
  55%{opacity:.15}
  100%{opacity:0;transform:translate3d(0,-75%,0) rotateX(78deg)}
}
@keyframes soheil-letter-flip-in{
  0%{opacity:0;transform:translate3d(0,75%,0) rotateX(-78deg)}
  40%{opacity:.2}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0deg)}
}
@media(prefers-reduced-motion:reduce){
  .site-header .site-name .name-hover-face{
    animation:none!important;
    transform:none!important;
  }
  .site-header .site-name .name-hover-in{display:none}
}


/* Slightly larger SOHEIL wordmark on every public page.
   Keep the existing typeface, letter-flip effect and centered header. */
.site-header .site-name{
  font-size:13.5px;
}
@media (min-width:761px) and (max-width:1199px){
  .site-header .site-name{
    font-size:11px;
  }
}
@media (max-width:760px){
  .site-header .site-name{
    font-size:11px;
  }
}