@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Defaults
***************************************************************************************************/

/* Overall page default styles */
html, body {
    background: #888; /* Neutral background */
    font-family: "Lato", sans-serif;
    font-size: 20px;
    margin: 0px;
    overflow: hidden;

    /* Hide user selections, no user interaction in this project */
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    /* Font anti-aliasing */
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;

    /* Make animation rendering smoother */
    -webkit-backface-visibility: hidden;
}

/* Style scroll bar for elements differently. */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
    height: auto;
    display: block;
    background-color: transparent;
}

::-webkit-scrollbar-track-piece  {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:vertical {
    height: auto;
    background-color: rgba(102, 102, 102, 0.5);
    border: none;
    -webkit-border-radius: 10px;
}

::-webkit-scrollbar-thumb:vertical:hover {
    background-color: rgba(102, 102, 102, 0.9);
}

/* Disable selection colours. */
::selection {
    background: rgba(0, 0, 0, 0);
}

/* Apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

/* Assign this class to something to disable any transition effects. */
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

/* Show a warning when in debug mode. */
body.debug:before {
    content: "DEBUG MODE";
    position: absolute;
    top: 5px;
    left: 5px;
    font-weight: bold;
    color: #fff;
    -webkit-animation: blink 0.8s steps(2, start) infinite;
}

body.debug:after {
    content: "DEBUG MODE";
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-weight: bold;
    color: #fff;
    -webkit-animation: blink 0.8s steps(2, start) infinite;
}

/* Animations
***************************************************************************************************/

/* This makes an element visible */
@-webkit-keyframes 'make-visible' {
    from { opacity: 0; height: inherit; }
    to   { opacity: 1; height: inherit; } /* Setting height forces a redraw, since circular mask is getting lost sometimes. */
}

/* The fader pulsing animation. */
/* Note: Use 3d transform as they are GPU accelerated.*/
@-webkit-keyframes 'pulsate' {
    0%   { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0); }
    50%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 0); }
}

/* The spin animation for loading album art. */
/* Note: Use 3d transform as they are GPU accelerated.*/
@-webkit-keyframes 'coverart-load' {
    from { -webkit-transform: rotateZ(0deg); }
    40%  { -webkit-transform: rotateZ(360deg); }
    60%  { -webkit-transform: rotateZ(720deg); }
    75%  { -webkit-transform: rotateZ(1080deg); }
    80%  { -webkit-transform: rotateZ(1440deg); }
    85%  { -webkit-transform: rotateZ(1800deg); }
    90%  { -webkit-transform: rotateZ(2160deg); }
    92%  { -webkit-transform: rotateZ(2520deg); }
    to   { -webkit-transform: rotateZ(2880deg); }
}

/* Replicates the old-school <blink> tag. */
@-webkit-keyframes blink {
    to { visibility: hidden; }
}

/* The bounce-in-from-bottom effect for timline items */
@-webkit-keyframes 'timeline-bounce' {
      0% { opacity: 0; -webkit-transform: translateY(2000px); }
     60% { opacity: 1; -webkit-transform: translateY(-30px); }
     80% { -webkit-transform: translateY(10px); }
    100% { -webkit-transform: translateY(0); }
}

/* Primary Layout
***************************************************************************************************/

#mixdjdemo {
    position: absolute;

    /* Our entire demo has this background colour */
    background: #d94143;

    /* Only support one resolution */
    width: 1920px;
    height: 1080px;

    /* Position center */
    top: 50%;
    left: 50%;
    margin-top: -540px;
    margin-left: -960px;

    outline: 5px solid #fff;
}

/* Mode Visibility
***************************************************************************************************/

main.active   { display: block }
main.inactive { display: none; }

/* Overview Page Layout
***************************************************************************************************/

#mixdjdemo.overview {
    padding: 1em;
}

#mixdjdemo.overview header {
    position: absolute;
    left: 724px;
    top: 385px;
}

#mixdjdemo.overview header img#logo {
    width: 455px;
}

#mixdjdemo.overview header h1#dj-name {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 455px;
    height: 140px;

    font-size: 3em;
    text-align: center;
    color: #fff;

    padding-top: 0.60em;

    display: none; /* Hide by default */
}

#mixdjdemo.altmode.overview header img#logo {
    display: none;
}

#mixdjdemo.altmode.overview header h1#dj-name {
    display: block;
}

#mixdjdemo.overview main {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;
}

#mixdjdemo.overview ul#tracks {
    width: 100%;
    height: 100%;
    padding: 2.7em 3.8em;
}

#mixdjdemo.overview ul#tracks li {
    display: block;
    float: left;
    height: 140px;
    width: 140px;

    background: url("/img/assets/cd.png") center center no-repeat;

    /* Circular mask for images */
    border-radius: 140px;
    overflow: hidden;

    margin: 0.5em; /* Spacing between tracks  */

    -webkit-transform-origin: center center 0;
}

/* Animate load in */
#mixdjdemo.overview ul#tracks li.active {
    -webkit-animation: 'coverart-load' 5s linear 1;
}

/* By default, we need to hide the cover art, until some animations complete */
#mixdjdemo.overview ul#tracks li img {
    width: 100%;
    opacity: 0;

    /* Even though parent has this, needed for some browsers. */
    border-radius: 140px;
    overflow: hidden;
}

/* Fade in image, after animation completes. */
#mixdjdemo.overview ul#tracks li.active img {
    -webkit-animation: 'make-visible' 1s 4.5s 1 linear forwards;
}

/* Hide the tracks which are overlapping the logo, not ideal but best way to get this working for now. */
#mixdjdemo.overview ul#tracks li:nth-child(27),
#mixdjdemo.overview ul#tracks li:nth-child(28),
#mixdjdemo.overview ul#tracks li:nth-child(29) {
    visibility: hidden;
}

/* Decks Page Layout
***************************************************************************************************/

#mixdjdemo.decks {
    padding: 1em;
}

#mixdjdemo.decks header {
    position: absolute;
    left: 724px;
    top: 655px;
}

#mixdjdemo.decks header h1#dj-name {
    display: none;
}

#mixdjdemo.decks header img#logo {
    width: 455px;
}

#mixdjdemo.decks main {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;
}

/* Deck Style
***************************************************************************************************/

/* These get absolutely positioned, since we're only dealing with one resolution. */
#mixdjdemo.decks #deck1 {
    position: absolute;
    left: 50px;
    top: 50px;
}

#mixdjdemo.decks #deck2 {
    position: absolute;
    left: 1300px;
    top: 50px;
}

#mixdjdemo.decks .deck {
    position: relative;
    width: 550px;
    height: 750px;

    overflow: hidden;
}

/* The "DECK 1" title, etc */
#mixdjdemo.decks .deck h2 {
    position: absolute;
    bottom: 20px;
    width: 100%;

    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4em;
    text-align: center;
}

/* Track metadata */
#mixdjdemo.decks .deck p.active {
    color: #fff;
    opacity: 0;
    -webkit-animation: 'make-visible' 1s 0s 1 linear forwards;
}

#mixdjdemo.decks .deck p.track {
    font-size: 2.9em;
    font-weight: 700;
    text-align: center;
    padding-top: 0.3em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    position: absolute;
    width: 100%;
    top: 0px;
}

#mixdjdemo.decks .deck p.artist {
    font-size: 4em;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0.2em;
    padding-bottom: 0.3em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* For some reason, this needs to be positioned absolutely now, when it didn't before. WTF!? */
    position: absolute;
    width: 100%;
    top: 75px;
}

#mixdjdemo.decks .deck p.label {
    font-size: 2em;
    font-weight: 300;
    text-align: center;
    padding-top: 0.3em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    position: absolute;
    width: 100%;
    top: 650px;
}

#mixdjdemo.decks .deck p.year {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    padding-top: 0.3em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    position: absolute;
    width: 100%;
    top: 700px;
}

/* The cover art for the decks. */
#mixdjdemo.decks .deck section.art {
    position: absolute;
    top: 170px;
    left: 37px;

    width: 470px;
    height: 470px;

    overflow: hidden;
    border-radius: 470px;
    z-index: 10;

    background: url("/img/assets/cd_large.png") center center no-repeat;
    background-size: 100% 100%;

    -webkit-animation: 'coverart-load' 5s linear 1;
}

/* By default, we need to hide the cover art, until some animations complete */
#mixdjdemo.decks .deck section.art img {
    width: 100%;
    opacity: 0;

    /* Even though parent has this, needed for some browsers. */
    border-radius: 470px;
    overflow: hidden;
}

/* Fade in image, after animation completes. */
#mixdjdemo.decks .deck section.art.active img {
    -webkit-animation: 'make-visible' 1s 4.5s 1 forwards;
}

/* Fader indicator */
#mixdjdemo.decks #fader {
    position: absolute;
    left: 550px;
    top: 455px;

    width: 800px;
    height: 3px;

    background: #bdb7b7;
    z-index: 1;
}

#mixdjdemo.decks #fader #fader-indicator {
    position: absolute;
    top: 0px;

    margin-top: -38px;
    width: 20px;
    height: 20px;

    /* Indicator circle style. */
    background: #fff;
    box-sizing: content-box;
    border-radius: 50px;
    background-clip: padding-box;
    border: 30px solid rgba(255, 255, 255, 0.4);

    /* Smooth out the transition changes. */
    transition: left 1s linear;
}

/* The fader pulsing animation, this is the circle component of it */
#mixdjdemo.decks #fader #fader-indicator:after {
    position: absolute;
    top: 50%;
    left: 50%;

    content: "";
    display: block;
    width: 70px;
    height: 70px;

    /* Center it */
    margin-top: -35px;
    margin-left: -35px;

    /* Circular */
    border-radius: 100px;
    border: 5px solid #fff;

    /* Animate it */
    -webkit-animation: 'pulsate' 0.5s ease-out 0 infinite;
}

/* Deck Timeline Style
***************************************************************************************************/

/* Timeline gets positioned at the bottom, always */
#mixdjdemo.decks #timeline {
    position: absolute;
    bottom: 0px;
    width: 100%;

    height: 250px;
}

#mixdjdemo.decks #timeline li {
    position: absolute;
    bottom: 0px;

    width: 200px;
    height: 100%;

    overflow: visible;

    left: 2000px;

    /*-webkit-animation: 'timeline-bounce' 1s 0 1;*/

    -webkit-transition: left 1s linear;
}

#mixdjdemo.decks #timeline li div.timeline-track section.art {
    position: absolute;
    bottom: 40px;
    left: 50%;

    width: 120px;
    height: 120px;

    overflow: hidden;
    border-radius: 170px;
    z-index: 10;
    margin-left: -60px;
}

#mixdjdemo.decks #timeline li div.timeline-track section.art img {
    width: 100%;
}

#mixdjdemo.decks #timeline li div.timeline-track {
    position: relative;
    width: 100%;
    height: 100%;
}

#mixdjdemo.decks #timeline li div.timeline-track p.track {
    position: absolute;
    bottom: 170px;
    width: 100%;

    text-align: center;
    font-size: 1.4em;
    font-weight: 300;

    text-transform: uppercase;
    color: #fff;
    padding-bottom: 0.3em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    display: none; /* Hide for now, as they overlap and look wrong. */
}

#mixdjdemo.decks #timeline li div.timeline-track div.indicator {
    position: absolute;
    bottom: -10px;
    left: 50%;

    width: 2px;
    height: 90px;

    background: #fff;
    z-index: 1;
}