/* =========================================================
   BIO PAGE
   ========================================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  color: #ddd;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   PAGE
   ========================================================= */

.bio-page {

  width: 720px;

  margin: 0 auto;

  padding:
    34px
    28px
    50px;

  background:
    linear-gradient(
      180deg,
      #090a0a 0%,
      #050606 50%,
      #030303 100%
    );

  border-top:
    1px solid
    rgba(255,255,255,.035);

  border-left:
    1px solid
    rgba(255,255,255,.035);

  border-right:
    1px solid
    rgba(255,255,255,.035);

  box-shadow:
    0 0 35px
    rgba(0,0,0,.8);

}



/* =========================================================
   BIO PAGE VISIBILITY
   ========================================================= */

.bio-visible {

  opacity: 1;

  animation:
    bioAppear
    .65s
    cubic-bezier(.22,.8,.25,1)
    forwards;

}


/* =========================================================
   HEADER
   ========================================================= */

.bio-header {

  margin-bottom: 28px;

}


/* =========================================================
   HEADER ANIMATION
   ========================================================= */

.bio-visible .bio-header {

  animation:
    bioFade
    .55s
    ease-out
    .08s
    both;

}


/* =========================================================
   TITLE
   ========================================================= */

.bio-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 10px;

  border-bottom:
    1px solid
    #303334;

  color: #eee;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 4px;

}


.bio-code {

  color: #555;

  font-size: 7px;

  font-weight: 400;

  letter-spacing: 2px;

}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.bio-content {

  display: grid;

  grid-template-columns:
    1fr
    250px;

  gap: 38px;

  align-items: start;

}


/* =========================================================
   MAIN CONTENT ANIMATION
   ========================================================= */

.bio-visible .bio-content {

  animation:
    bioContentAppear
    .65s
    cubic-bezier(.22,.8,.25,1)
    .22s
    both;

}


/* =========================================================
   BIO INFO
   ========================================================= */

.bio-info {

  padding-top: 8px;

}


.bio-label {

  margin-bottom: 14px;

  color: #666;

  font-size: 7px;

  letter-spacing: 1.8px;

}


.bio-info h1 {

  margin: 0;

  color: #eee;

  font-size: 25px;

  font-weight: 700;

  letter-spacing: 5px;

  text-shadow:
    0 0 8px
    rgba(255,255,255,.15);

}


.bio-line {

  width: 90px;

  height: 1px;

  margin:
    13px
    0
    18px;

  background:
    linear-gradient(
      90deg,
      #aaa,
      transparent
    );

}


.bio-description {

  max-width: 330px;

  margin:
    0
    0
    14px;

  color: #85898b;

  font-size: 10px;

  line-height: 1.75;

}


/* =========================================================
   DETAILS
   ========================================================= */

.bio-details {

  margin-top: 24px;

  border-top:
    1px solid
    #1c1e1f;

}


.bio-detail {

  display: grid;

  grid-template-columns:
    80px
    1fr;

  gap: 10px;

  padding:
    9px
    0;

  border-bottom:
    1px solid
    #151718;

}


.bio-detail span {

  color: #4f5253;

  font-size: 6px;

  letter-spacing: 1.5px;

}


.bio-detail strong {

  color: #898c8e;

  font-size: 7px;

  font-weight: 400;

  letter-spacing: 1px;

}


/* =========================================================
   CONTACT
   ========================================================= */

.bio-contact {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 26px;

  margin-top: 22px;

  padding:
    0
    12px;

  border:
    1px solid
    #303334;

  background:
    linear-gradient(
      #171a1b,
      #080909
    );

  color: #999;

  text-decoration: none;

  font-size: 7px;

  letter-spacing: 1.5px;

  transition:
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    background .2s ease;

}


.bio-contact:hover {

  color: #fff;

  border-color: #666;

  background:
    linear-gradient(
      #242829,
      #0c0d0e
    );

  transform:
    translateY(-1px);

}


/* =========================================================
   PHOTO
   ========================================================= */

.bio-photo {

  width: 250px;

}


/* =========================================================
   PHOTO ANIMATION
   ========================================================= */

.bio-visible .bio-photo {

  animation:
    bioPhotoAppear
    .7s
    cubic-bezier(.22,.8,.25,1)
    .32s
    both;

}


.bio-photo-frame {

  position: relative;

  width: 250px;

  height: 310px;

  overflow: hidden;

  background: #020202;

  border:
    1px solid
    #303334;

  box-shadow:
    0 0 25px
    rgba(0,0,0,.6);

}


/* PHOTO */

.bio-photo-frame img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter:
    grayscale(.35)
    contrast(1.05)
    brightness(.75);

  transition:
    filter .4s ease,
    transform .4s ease;

}


.bio-photo-frame:hover img {

  filter:
    grayscale(.05)
    contrast(1.08)
    brightness(.9);

  transform:
    scale(1.025);

}


/* =========================================================
   PHOTO OVERLAY
   ========================================================= */

.bio-photo-frame::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      transparent 50%,
      rgba(0,0,0,.55)
    );

}


.bio-photo-number {

  position: absolute;

  left: 10px;

  bottom: 9px;

  z-index: 3;

  color: #aaa;

  font-size: 6px;

  letter-spacing: 1.5px;

}


/* =========================================================
   PHOTO CORNERS
   ========================================================= */

.bio-photo-corner {

  position: absolute;

  z-index: 4;

  width: 13px;

  height: 13px;

}


.corner-tl {

  left: 7px;
  top: 7px;

  border-top:
    1px solid
    rgba(255,255,255,.5);

  border-left:
    1px solid
    rgba(255,255,255,.5);

}


.corner-tr {

  right: 7px;
  top: 7px;

  border-top:
    1px solid
    rgba(255,255,255,.5);

  border-right:
    1px solid
    rgba(255,255,255,.5);

}


.corner-bl {

  left: 7px;
  bottom: 7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.5);

  border-left:
    1px solid
    rgba(255,255,255,.5);

}


.corner-br {

  right: 7px;
  bottom: 7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.5);

  border-right:
    1px solid
    rgba(255,255,255,.5);

}


/* =========================================================
   PHOTO CAPTION
   ========================================================= */

.bio-photo-caption {

  display: flex;

  justify-content: space-between;

  padding:
    8px
    2px
    0;

  color: #4f5152;

  font-size: 6px;

  letter-spacing: 1.5px;

}


/* =========================================================
   END
   ========================================================= */

.bio-end {

  margin-top: 38px;

  padding-top: 14px;

  border-top:
    1px solid
    #1b1d1e;

  color: #3f4142;

  text-align: center;

  font-size: 6px;

  letter-spacing: 2px;

}


/* =========================================================
   END ANIMATION
   ========================================================= */

.bio-visible .bio-end {

  animation:
    bioFade
    .5s
    ease-out
    .65s
    both;

}


/* =========================================================
   FOOTER
   ========================================================= */

.bio-footer {

  width: 720px;

  margin: 0 auto;

  padding:
    18px
    0
    40px;

  color: #3f4142;

  text-align: center;

  font-size: 6px;

  letter-spacing: 2px;

  opacity: 0;

}


/* =========================================================
   FOOTER ANIMATION
   ========================================================= */

.bio-visible + .bio-footer {

  animation:
    bioFade
    .5s
    ease-out
    .85s
    both;

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes bioAppear {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}


@keyframes bioFade {

  from {

    opacity: 0;

    transform:
      translateY(10px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes bioContentAppear {

  from {

    opacity: 0;

    transform:
      translateY(18px)
      scale(.985);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes bioPhotoAppear {

  from {

    opacity: 0;

    transform:
      translateY(22px)
      scale(.975);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


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

@media (max-width: 720px) {


  .bio-page {

    width: 100vw;

    padding:
      6vw
      5vw
      10vw;

  }


  .bio-title {

    font-size: 2.8vw;

    letter-spacing: .8vw;

  }


  .bio-code {

    font-size: 1.5vw;

    letter-spacing: .35vw;

  }


  .bio-content {

    grid-template-columns:
      1fr;

    gap: 7vw;

  }


  .bio-info {

    padding-top: 0;

  }


  .bio-label {

    margin-bottom: 3vw;

    font-size: 1.6vw;

    letter-spacing: .4vw;

  }


  .bio-info h1 {

    font-size: 6vw;

    letter-spacing: 1vw;

  }


  .bio-line {

    width: 18vw;

    margin:
      3vw
      0
      4vw;

  }


  .bio-description {

    max-width: none;

    margin-bottom: 3vw;

    font-size: 2.3vw;

    line-height: 1.7;

  }


  .bio-details {

    margin-top: 5vw;

  }


  .bio-detail {

    grid-template-columns:
      20vw
      1fr;

    gap: 2vw;

    padding:
      2.5vw
      0;

  }


  .bio-detail span {

    font-size: 1.5vw;

    letter-spacing: .3vw;

  }


  .bio-detail strong {

    font-size: 1.7vw;

    letter-spacing: .2vw;

  }


  .bio-contact {

    height: 7vw;

    margin-top: 5vw;

    padding:
      0
      3vw;

    font-size: 1.6vw;

    letter-spacing: .3vw;

  }


  /* PHOTO */

  .bio-photo {

    width: 100%;

    max-width: 330px;

    margin: 0 auto;

  }


  .bio-photo-frame {

    width: 100%;

    height: 105vw;

    max-height: 410px;

  }


  .bio-photo-number {

    left: 2vw;

    bottom: 2vw;

    font-size: 1.5vw;

    letter-spacing: .3vw;

  }


  .bio-photo-caption {

    padding-top: 2vw;

    font-size: 1.5vw;

    letter-spacing: .3vw;

  }


  .bio-end {

    margin-top: 8vw;

    padding-top: 3vw;

    font-size: 1.5vw;

    letter-spacing: .4vw;

  }


  .bio-footer {

    width: 100vw;

    padding:
      4vw
      0
      8vw;

    font-size: 1.5vw;

    letter-spacing: .4vw;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .bio-visible,
  .bio-visible *,
  .bio-visible .bio-header,
  .bio-visible .bio-content,
  .bio-visible .bio-photo,
  .bio-visible .bio-end,
  .bio-visible + .bio-footer {

    animation: none !important;

    opacity: 1;

    visibility: visible;

    transform: none;

  }

}