/**
 * Single-purpose classes (in Tachyons style)
 */

.body-font {
  font-family: 'Roboto', sans-serif;
  font-display: fallback;
}

.fact-font {
  font-family: 'Sriracha', sans-serif;
  font-display: swap;
}

.text-outline {
  text-shadow:
    -1px -1px 5px rgba(0, 0, 0, 0.15),
    1px -1px 5px rgba(0, 0, 0, 0.15),
    -1px 1px 5px rgba(0, 0, 0, 0.15),
    1px 1px 5px rgba(0, 0, 0, 0.15);
}

/* Width calculation between .w-10 and .w-20 */
.w-sixth {
  width: calc(100% / 6);
}

@media screen and (min-width: 60em) {
  .w-sixth-l {
    width: calc(100% / 6);
  }
}

@media screen and (max-width: 60em) and (min-width: 30em) {
  .w-sixth-m {
    width: calc(100% / 6);
  }
}

@media screen and (min-width: 30em) {
  .w-sixth-ns {
    width: calc(100% / 6);
  }
}

/**
 * Tachyons tweaks
 */

/* Faster grow transition */
.grow,
.grow-large {
  transition: transform 0.1s ease-out;
}

/* Undo default link outline */
.link:focus {
  outline: none;
}

/**
 * Animations (adapted from animate.css)
 */

.animate-fade-in,
.animate-fade-out,
.animate-slide-in-up,
.animate-slide-in-down,
.animate-slide-out-up,
.animate-slide-out-down,
.animate-bounce-in,
.animate-bounce-out {
  animation-fill-mode: both;
}

.animate--normal {
  animation-duration: 0.5s;
}

.animate--fast {
  animation-duration: 0.25s;
}

.animate--delay {
  animation-delay: 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.animate-fade-out {
  animation-name: fadeOut;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.animate-slide-in-up {
  animation-name: slideInUp;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.animate-slide-in-down {
  animation-name: slideInDown;
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.animate-slide-out-up {
  animation-name: slideOutUp;
}

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.animate-slide-out-down {
  animation-name: slideOutDown;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  70% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.animate-bounce-in {
  animation-name: bounceIn;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.animate-bounce-out {
  animation-name: bounceOut;
}

/**
 * Specific styles (minimize the number of these!)
 */

/* SHEET */

.sheet {
  padding-top: 4.5rem;
}

@media screen and (min-width: 60em) {
  .sheet {
    padding-top: 5.6rem;
  }
}

@media screen and (max-width: 60em) and (min-width: 30em) {
  .sheet {
    padding-top: 5.6rem;
  }
}

/* ARTIST PAGE */

.artist-page-cover {
  height: 50vh;
  background-position: center 20%, center center;
}

@media screen and (min-width: 100em) {
  .artist-page-cover {
    height: 60vh;
    background-position: center 20%, center center;
  }
}

/* TRACK LIST */

.track:hover .play-arrow {
  opacity: 1;
}

.track:hover .track-num {
  opacity: 0;
}

/* FACT */

.fact {
  border-style: solid;
  border-width: 0.67rem;
  border-color: #000000;
  border-image-source: url('/img/border-image.png');
  border-image-slice: 4% 4.5% fill;
  border-image-width: 0.67rem;
  border-image-outset: 0.45rem 0.35rem;
  border-image-repeat: round;
  padding: 6px 12px 5px 12px;
  hyphens: auto;
  font-size: 17px;
  text-align: justify;
}

@media screen and (min-width: 100em) {
  .fact {
    padding: 10px 16px 9px 16px;
    font-size: 22px;
  }
}

.fact-quote {
  font-size: 120px;
  position: absolute;
  top: -52px;
  left: -35px;

  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 1),
    1px -1px 1px rgba(255, 255, 255, 1),
    -1px 1px 1px rgba(255, 255, 255, 1),
    1px 1px 1px rgba(255, 255, 255, 1);
}

/* CONTROLS */

#header, #controls {
  background-color: rgba(255,65,54, 0.8);
}