/* ============================================================
   ROT13LABS - R13 SIGIL
   ============================================================ */

.rot13-sigil {
  position: relative;

  width: 160px;
  height: 160px;

  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-style: italic;

  color: #e7e7e7;

  display: inline-block;

  transform: rotate(-6deg);

  isolation: isolate;
}


/* ============================================================
   R
   ============================================================ */

.sigil-r {
  position: absolute;

  left: 15px;
  top: 5px;

  font-size: 155px;
  line-height: .8;

  transform:
    scaleX(.78)
    skewX(-7deg);

  z-index: 1;

  /*
   * REMOVED THE MASK.
   *
   * This keeps the curved bowl of the R intact.
   */
}


/* ============================================================
   1
   CENTRAL SPINE
   ============================================================ */

.sigil-one {
  position: absolute;

  /*
   * Move the 1 slightly left so it actually
   * becomes the center of the composition.
   */
  left: 55px;
  top: -10px;

  font-size: 190px;
  line-height: .8;

  transform:
    scaleX(.20)
    rotate(3deg);

  color: transparent;

  -webkit-text-stroke: 6px #e7e7e7;

  /*
   * IMPORTANT:
   * The 1 is now the topmost element.
   */
  z-index: 10;
}


/* ============================================================
   3
   RIGHT-HAND CURVE
   ============================================================ */

.sigil-three {
  position: absolute;

  /*
   * Push the 3 farther right.
   *
   * This prevents the eye from reading it before
   * the central 1.
   */
  left: 50px;
  top: 27px;

  font-size: 148px;
  line-height: .8;

  transform:
    scaleX(.76)
    rotate(-2deg);

  color: transparent;

  -webkit-text-stroke: 7px #e7e7e7;

  z-index: 2;

  /*
   * Keep the 3 intact as well.
   */
}


/* ============================================================
   CENTRAL HORIZONTAL BREAK
   ============================================================ */

.rot13-sigil::before {
  content: "";

  position: absolute;

  width: 118px;
  height: 5px;

  left: 18px;
  top: 77px;

  background: #e7e7e7;

  transform: rotate(-6deg);

  z-index: 11;
}


/* ============================================================
   HOVER
   ============================================================ */

.sigil-r,
.sigil-one,
.sigil-three {
  transition:
    transform 300ms cubic-bezier(.2,.8,.2,1);
}

.rot13-sigil:hover .sigil-r {
  transform:
    translateX(-10px)
    scaleX(.78)
    skewX(-7deg);
}

.rot13-sigil:hover .sigil-one {
  transform:
    translateY(-6px)
    scaleX(.20)
    rotate(3deg);
}

.rot13-sigil:hover .sigil-three {
  transform:
    translateX(13px)
    scaleX(.76)
    rotate(-2deg);
}


/* ============================================================
   SUBTLE HOVER GLOW
   ============================================================ */

.rot13-sigil:hover {
  filter:
    drop-shadow(
      0 0 8px
      rgba(217,255,0,.2)
    );
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {
  .rot13-sigil {
    transform: scale(.8) rotate(-6deg);
    transform-origin: center;
  }
}