/* *,
*::before,
*::after {
  box-sizing: border-box;
} */

/* body {
  /* color: #fff;
  background-color: #3a3a3a;
  margin: 0;
  padding: 4px;
  width: 100vw;
  min-height: 100vh; */
  /* overflow: hidden; */
/* } */
/* @media (min-width: 480px) {
  body {
    /* Just for visual centring
       - Not WCAG compatable at 200% on smaller display ports */
    /* display: grid;
    place-content: center; */
  /* } */
/* } */
/* @media (min-height: 480px) {
  body {
    /* Just for visual centring
       - Not WCAG compatable at 200% on smaller display ports */
    /* display: grid;
    align-content: center; */
  /* } */
/* } */

:not(.-js-supportsVolumeControl) body {
  /* Just to indicate no support for volume controls */
  background-color: #5a5a5a;
}

/* Remove animations and transitions if preferred */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: -1ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
    transition-delay: 0s !important;
  }
}

/* SCREEN READER ONLY */
.-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  white-space: nowrap !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}


/* PLAYER */

.player {

  --colorText: #fff;
  
  --bgProgress: hsl(214, 82%, 59%); /*  #418cec */
  --bgTrack: hsla(214, 30%, 72%, 0.5);
  --bgTrackHover: hsla(214, 82%, 59%, .5);
  --bgTravel: hsl(214, 30%, 72%); /* #a3b3ce */

  --bgThumb: #fff;
  --bgThumbHover: rgba(0,0,0,.65);
  --borderThumb: hsla(214, 82%, 100%, .25);
  --borderThumbHover: hsl(214, 100%, 59%);
  --shadowThumb: .125rem .125rem .25rem rgba(0,0,0,.5);
  --shadowThumbHover: 0 .25em .5em rgba(0,0,0,.75);
  --transformThumbHover: scale(1.75);
  --whrThumb: 1.25rem;

  /* Ensures enough colour contrast to meet WCAG-2 for 
        white text on white background
        for both text and SVG icons.
  */
  /* Firefox/Opera/Chrome */
  --colorContrastWCAG: drop-shadow(0 0 .666px #000) drop-shadow(0 0 .666px #000) drop-shadow(0 0 .666px #000);
  /* Safari 14 */
  --colorContrastWCAG: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

.player {
    /* Must be in px to meet WCAG 200% text size @ 320px width viewport */
    --pad: 8px;
  
    position: relative;
    width: calc(100vw - 8px);
    min-width: 312px;
    max-width: 30rem;
    padding: var(--pad);
    margin: 0 auto;
    perspective: 1000px;
  
    font-family: sans-serif;
    text-rendering: optimizeSpeed;
    color: var(--colorText);
  }

/* Must be stated in px here, to meet WCAG 200% text size @ 320px width viewport */
@media (min-width: 480px) {
  .player {
    --pad: 16px;
  }
}
@media (min-width: 30em) {
  .player {
    --pad: 1rem;
  }
}

@media (max-width: 800px) {
  .player {
    position: relative;
    left: 7px;
    max-width: 50%;
  }
  h3 {
    margin: auto auto;
    max-width: 40%; 
  }
}

@media (max-width: 400px) {
  .player {
    position: relative;
    left: 10px;
    max-width: 30%;
  }
}

.player > * + * + * {
  padding-top: calc(var(--pad) * 2);
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  overflow: hidden;

  padding: var(--pad);
  border-radius: 1rem;
  box-shadow: 0px 1rem 2rem -.25rem rgba(0,0,0,.8);

  transition: transformZ(0);
  will-change: transform, opacity;
}
.cover_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0; /* updates via inline JS onload */
  object-fit: cover;
  border-radius: 1rem;
  transition: transformZ(0);
  transition: opacity .3s ease-out;
  animation: hueSatRotate 24s infinite linear;
}
/* Safari will not animate CSS filter values (it just steps) */
.-js-isSafari .cover_bg {
  animation: none;
}
  @keyframes hueSatRotate {
    /* WARNING: Filter animations are very CPU / GPU hungry
    - disable if you experience any issues! */
    0% {
      filter: hue-rotate(0deg) saturate(100%) contrast(100%);
    }
    50% {
      filter: hue-rotate(180deg) saturate(300%) contrast(200%);
    }
    100% {
      filter: hue-rotate(359deg) saturate(100%) contrast(100%);
    }
  }
.cover_artist {
  font-family: serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin: 0 0 .25rem;
  filter: var(--colorContrastWCAG);
}
.cover_title {
  font-size: 1.17rem;
  font-weight: 100;
  letter-spacing: .01em;
  margin: 0;
  filter: var(--colorContrastWCAG);
}
.cover_num {
  font-family: serif;
  letter-spacing: -0.05em;
  opacity: .9;
}


[class^="controls-"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  /* Chrome/Safari/Opera: Keep controls on top during card change animation */
  -webkit-transform: translate3d(0,0, 30px) scale(.97);
  transform: translate3d(0,0, 30px) scale(.97);
}


.volume {
  visibility: hidden;
  position: relative;
  display: flex;
  gap: .5rem;
/*   gap: .5rem; - fails in Safari*/
  flex: 1 1 0px;
  align-items: center;
}
/* iOS does not support JS volume control */
.-js-supportsVolumeControl .volume {
  visibility: visible;
}

.range_input[type=range] {
  -webkit-appearance: none;
  position: relative;
  width: calc(100% - 4.25rem);
  height: .5rem;
  border-radius: .25rem;
  background: transparent;
  opacity: .5;
  transition: opacity .3s ease-out;

  /* Safari repair (for gap) */
/*   margin: .5rem 0; */
}

.-js-hasMouse:not(.-js-hasTouch) .range_input[type=range] {
  opacity: .25; /* Safari minimum */
}
input[type=range]:focus {
  outline: none;
}
.volume:hover > .range_input[type=range],
.volume:focus-within > .range_input[type=range] {
  opacity: 1;
}

/* Webkit range */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: .5rem;
  cursor: pointer;
  background-color: var(--bgTrack);
  border-radius: .25rem;
  transition: all .3s ease-out;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -.5rem;

  width: var(--whrThumb);
  height: var(--whrThumb);
  cursor: pointer;
  background-color: var(--bgThumb);
  border: .25rem solid var(--borderThumb);
  border-radius: var(--whrThumb);
  box-shadow: var(--shadowThumb);
  transition: all .3s ease-out;
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus::-webkit-slider-thumb {
  background-color: var(--bgThumbHover);
  border: .125rem solid var(--borderThumbHover);
  box-shadow: var(--shadowThumbHover);
  transform: var(--transformThumbHover);
}

/* Mozilla range */
input[type=range]::-moz-range-track {
  width: 100%;
  height: .5rem;
  cursor: pointer;
  background-color: var(--bgTrack);
  border-radius: .25rem;
  transition: all .3s ease-out;
}
input[type=range]::-moz-range-thumb {
  width: var(--whrThumb);
  height: var(--whrThumb);
  cursor: pointer;
  background-color: var(--bgThumb);
  border: 2px solid var(--borderThumb);
  border-radius: var(--whrThumb);
  box-shadow: var(--shadowThumb);
  transition: all .3s ease-out;
}
input[type=range]:hover::-moz-range-thumb,
input[type=range]:focus::-moz-range-thumb {
  background-color: var(--bgThumbHover);
  border: 2px solid var(--borderThumbHover);
  box-shadow: var(--shadowThumbHover);
  transform: var(--transformThumbHover);
}

/* Microsoft range - UNTESTED */
input[type=range]::-ms-track {
  width: 100%;
  height: .5rem;
  cursor: pointer;
  color: transparent;
  background-color: transparent;
  border: 0 solid transparent;
  border-radius: .25rem;
  box-shadow: 0 0 0 #000;
  transition: all .3s ease-out;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background-color: var(--bgTrack);
  border: 0 solid #000;
  border-radius: .5rem;
  box-shadow: 0 0 0 #000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: var(--shadowThumb);
  border: .25rem solid var(--borderThumb);
  height: var(--whrThumb);
  width: var(--whrThumb);
  border-radius: var(--whrThumb);
  background-color: var(--bgThumb);
  cursor: pointer;
  transition: all .3s ease-out;
}
input[type=range]:hover::-ms-thumb,
input[type=range]:focus::-ms-thumb {
  border: .125rem solid var(--borderThumbHover);
  background-color: var(--bgThumbHover);
  transform: var(--transformThumbHover);
}





/* Must replace with an input[range] */
.progress {
  flex: 1 1 0px;
  font-size: .85rem;
  line-height: .85;
  letter-spacing: .05em;
  padding: 0 8px;
  opacity: 0.5;
}
.progress_duration {
  text-align: right;
  padding-top: .125rem;
  filter: var(--colorContrastWCAG);
}
.progress_bar {
  display: block;
  cursor: pointer;
  margin: 0 0 .5rem 0;
}
.progress_current {
  width: 100%;
  height: .5rem;
  background-color: var(--bgTravel);
  border: 0;
  border-radius: .5rem;
}
.progress_current::-webkit-progress-bar {
  border-radius: .5rem;
  background-color: var(--bgTrack);
}
.progress_current::-webkit-progress-value {
  border-radius: .5rem;
  background-color: var(--bgProgress);
}
.progress_current::-moz-progress-bar {
  border-radius: .5rem;
  background-color: var(--bgProgress);
}
.progress_current::-ms-fill {
  border-radius: .5rem;
  background-color: var(--bgProgress);
}

.progress_time {
  font-weight: 100;
  filter: var(--colorContrastWCAG);
}


/* BUTTONS */

/* Button VARS */

body {
  
  --btnColor: #fff;
  --btnHighlight: hsl(214, 100%, 59%);

  --btnHoverScale: 1.13;
  --btnPressedScale: 0.8;

  --btnTimings: 0.3s ease-out;

  --btnBg: #000;
  --btnBgOpacity: .528; /* Min #777 against white bg - to meet WCAG-2 minimum contrast. */

  --rotationSpeed: 2s; /* Set to .5s whilst loading */
  --playRotationColor: #0f0;

  --mutePulseSpeed: 2s;
  --mutePulseColor: #f00;
  
  --shadowBtn: 0 .125rem .25rem rgba(0,0,0,.5);
  --shadowBtnHover: 0 .25rem .5rem rgba(0,0,0,.75);
}


/* BUTTONS */

/* Button wrapper controls hover & click scaling, and also box-shadows. These cannot be on the button, as they will force the clickable area to be square instead of round. */

.btn_wrap {
  position: relative;
  display: grid; /* Collapse box */
  border-radius: 50%;
  margin: 0 auto;
  transform: translatez(0);
  transition: transform var(--btnTimings);
}
.btn_wrap::before,
.btn_wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.btn_wrap::before {
  box-shadow: var(--shadowBtn);
}
.btn_wrap::after {
  box-shadow: var(--shadowBtnHover);
  opacity: 0;
  transform: translatez(0);
  transition: opacity var(--btnTimings);
}
.btn_wrap:hover::after,
.btn_wrap:focus-within::after {
  opacity: 1;
}
[class^="btn_wrap"]:hover,
[class^="btn_wrap"]:focus-within {
  transform: scale(var(--btnHoverScale)) translatez(0);
}
[class^="btn_wrap"].-js-clicked {
  animation: btn-pressed var(--btnTimings) forwards;
}
  @keyframes btn-pressed {
    50% {
      transform: scale(var(--btnPressedScale)) translatez(0);
    }
  }

button {
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: button;
  -webkit-appearance: none;
  -moz-appearance: none;
}
button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

[class^="btn-"] {

  width: 3rem;
  height: 3rem;

  background-color: transparent;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}
[class^="btn-"]:focus {
  outline: 0 solid;
}

/* SVG */

[class^="btn_svg-"] {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 50%;
  pointer-events: none;
}

/* Circle */

[class^="btn_circle"] {
  fill: var(--btnBg);
  stroke-width: 6;
  transform-origin: center;
  transition: opacity var(--btnTimings);
}
.btn_circle {
  stroke: var(--btnColor);
  opacity: var(--btnBgOpacity);
}
.btn_circle-highlight {
  stroke: var(--btnHighlight);
  opacity: 0;
}
[class^="btn-"]:hover .btn_circle-highlight:not(.animated),
[class^="btn-"]:focus .btn_circle-highlight:not(.animated) {
  opacity: 1;
}

/* Play - Animated circles */
[class^="btn_circle"].animated {
  stroke: url(#play_gradient);
  opacity: 0;
}
.-js-isPlaying .btn_circle {
  opacity: 0;
}
.-js-isPlaying .btn_circle.animated {
  opacity: var(--btnBgOpacity);
}
.-js-isPlaying:hover .btn_circle-highlight.animated,
.-js-isPlaying:focus .btn_circle-highlight.animated {
  opacity: 1;
}
.-js-isPlaying [class^="btn_circle"].animated {
  animation: rotatePlay var(--rotationSpeed) linear infinite;
}
  @keyframes rotatePlay {
    100% {
      transform: rotate(359deg);
    }
  }


/* Icon */

[class^="btn_icon"] {
  transition: opacity var(--btnTimings);
}
.btn_icon {
  stroke: var(--btnColor);
  opacity: 1;
}
.btn_icon-highlight {
  stroke: var(--btnHighlight);
  opacity: 0;
}
[class^="btn-"]:hover .btn_icon-highlight,
[class^="btn-"]:focus .btn_icon-highlight {
  opacity: 1;
}



/* MUTE */

[class^="btn_icon"]:not(.muted) .set-B,
[class^="btn_icon"].muted .set-A {
  display: none;
}
.btn_icon .svg_vol-speak {
  fill: var(--btnColor);
}
.btn_icon-highlight .svg_vol-speak {
  fill: var(--btnHighlight);
}
.-js-isMuted [class^="btn_icon"]:not(.muted) {
  opacity: 0;
}

.-js-isMuted .svg_vol-mute {
  opacity: 1;
  animation: pulseColor var(--mutePulseSpeed) alternate linear infinite;
}
  @keyframes pulseColor {
    50% {
      stroke: var(--mutePulseColor);
    }
  }
.btn-mute:hover .svg_vol-mute,
.btn-mute:focus .svg_vol-mute {
  animation: none;
}


/* PLAY */

.btn-play {
  width: 6rem;
  height: 6rem;
/*   margin: 0 auto 2rem; */
  margin: 0 auto;
}

/* Play state animation */
.btn_svg-play [class^="play_"] {
  transform-origin: center;
  transform: translate3d(0, 0, 0);
  transition: transform var(--btnTimings);
}
.-js-isPlaying .play_top {
  transform: rotate(56.5deg) translate3d(1%,-1%, 0);
}
.-js-isPlaying .play_base {
  transform: rotate(-56.5deg) translate3d(1%,1%,0);
}


/* Vue */

[v-cloak] {
  display:none;
}

/* Card Transitions
   - Playground: https://codepen.io/2kool2/pen/OJbzovV?editors=0100
   - With additional help from:
     https://medium.com/vue-mastery/how-to-create-vue-js-transitions-6487dffd0baa
*/
.player {
  --duration: .9s;
  --perspective: 1000px;
  --rotateY: -60deg;
  --translateX: 100%;

  --resetToZero: rotateY(0deg) translateX(0);
  --reverseRotateY: calc(0deg - var(--rotateY));
  --reverseTranslateX: calc(0% - var(--translateX));

  transform-style: preserve-3d;
  perspective: var(--perspective);
}
.cover + .cover {
  opacity: 0;
  transform: var(--resetToZero);
}
[class*="fadeCard-"][class*="-active"] {
  pointer-events: none;
  animation: var(--animName) var(--duration) forwards ease-out;
}
[class*="fadeCard-"][class*="-active"] .cover_bg {
  filter: none;
}

.fadeCard-next-leave-to {
  --animName: offToLeft;
}
.fadeCard-next-enter-to {
  --animName: onFromRight;
}
.fadeCard-prev-leave-to {
  --animName: offToRight;
}
.fadeCard-prev-enter-to {
  --animName: onFromLeft;
}

@keyframes onFromLeft {
  0% {
    opacity: 0;
    transform:
      rotateY(var(--rotateY))
      translateX(var(--reverseTranslateX));
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: var(--resetToZero);
  }
}
@keyframes offToLeft {
  0% {
    opacity: 1;
    transform: var(--resetToZero);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      rotateY(var(--rotateY))
      translateX(var(--reverseTranslateX));
  }
}
@keyframes onFromRight {
  0% {
    opacity: 0;
    transform:
      rotateY(var(--reverseRotateY))
      translateX(var(--translateX));
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: var(--resetToZero);
  }
}
@keyframes offToRight {
  0% {
    opacity: 1;
    transform: var(--resetToZero);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      rotateY(var(--reverseRotateY))
      translateX(var(--translateX));
  }
}





/* Unused but nice to play with when applied to text headings: */
.blendmode {
  text-shadow: none;
  color: #fff;
  background: #fff;
  mix-blend-mode: exclusion;
  mix-blend-mode: color-dodge;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}