/* Built by David Rousset - http://blogs.msdn.com/davrous - @davrous */
/* Based on this awesome article: http://www.sitepoint.com/css3-starwars-scrolling-text/ from Craig Buckler */

/* Specific file for Webkit browsers (Chrome & Safari) as they still don't support those properties unprefixed... */

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

/* CSS3 -webkit-animations - KEYFRAMES DECLARATIONS */
/* Fadding -webkit-animation for the very first text */
@-webkit-keyframes firsttextframes {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Fadding -webkit-animation for the table list of actors */
@-webkit-keyframes actorsframes {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Main title logo -webkit-animation animated from the front to the rear with fadding */
@-webkit-keyframes logo {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.1);
        opacity: 0;
    }
}

/* Mail scrolling -webkit-animation moving the text like in StarWars intros */
@-webkit-keyframes scroll {
    0% {
        top: 100%;
    }

    58% {
        opacity: 1.0;
    }

    60% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
        top: -140%;
    }
}

/* Final ship -webkit-animation. The trick is to play on 3D rotation and Z translation */
/* To mimic again the first Star Destroyer -webkit-animation */
@-webkit-keyframes scrollship {
    0% {
        opacity: 0;
        -webkit-transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        -webkit-transform: perspective(300px) translateZ(-4000px) rotateX(-80deg);
    }
}

/* Translating the galaxy image background on the Y axis to again */
/* mimic the StarWars intro */
@-webkit-keyframes galaxyscrolling {
    0% {
        top: 0%;
    }

    100% {
        top: -100%;
    }
}

/* The video tag is animated in the same time as the galaxy  */
/* to achieve a continuous -webkit-animation */
@-webkit-keyframes videoscrolling {
    0% {
        top: 55%;
    }

    100% {
        top: -40%;
    }
}

@-webkit-keyframes finalfaddingkeyframes {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


* {
    padding: 0;
    margin: 0;
}


body, html {
    width: 100%;
    height: 100%;
    background-color: black;
    font-family: "Droid Sans", arial, verdana, sans-serif;
    font-weight: 700;
    color: #ff6;
    overflow: hidden;
}

/* First image background */
.galaxy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    -webkit-animation: galaxyscrolling 15s ease-out 111s 1;
    -webkit-animation-fill-mode: forwards;
}

/* Very first text displayed */
.firsttext {
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    width: 100%;
    font-size: 2.5em;
    position: absolute;
    top: 30%;
    -webkit-animation: firsttextframes 12s ease-out 0s;
    -webkit-animation-fill-mode: forwards;
    opacity: 0;
}

    .firsttext p {
        text-align: center;
        margin: 0.8em 0;
    }

/* Table element containing the actors' list */
.actors {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    font-size: 3em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 0.6em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    -webkit-animation: actorsframes 12s ease-out 12s;
}

.actors td {
    width: 50%;
}

.imgActors {
    width: 17%;
}

/* Main logo - here "Coding4Fun" */
h1 {
    position: absolute;
    width: 100%;
    top: 25%;
    font-size: 10em;
    text-align: center;
    line-height: 0.8em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    -webkit-animation: logo 7s ease-out 25s;
}

    h1 sub {
        display: block;
        font-size: 0.3em;
        letter-spacing: 0;
        line-height: 0.8em;
    }

/* the interesting 3D scrolling stuff */
.titles {
    position: absolute;
    width: 18em;
    height: 50em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 350%;
    text-align: justify;
    overflow: hidden;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(600px) rotateX(25deg);
}

    .titles:after {
        position: absolute;
        content: ' ';
        left: 0;
        right: 0;
        top: 0;
        bottom: 60%;
    }

    .titles p {
        text-align: justify;
        margin: 0.8em 0;
    }

        .titles p.center {
            text-align: center;
        }

.titlecontent {
    position: absolute;
    top: 100%;
    -webkit-animation: scroll 140s linear 25.5s 1;
    -webkit-animation-fill-mode: forwards;
}

.fondvideo {
    position: absolute;
    width: 100%;
    height: 200%;
    top: 55%;
    -webkit-animation: videoscrolling 15s ease-out 111s 1;
    -webkit-animation-fill-mode: forwards;
}

.destroyer {
    position: absolute;
    top: -70%;
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    width: 100%;
    height: 100%;
    -webkit-transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    -webkit-animation: scrollship 120s linear 125s 1;
    -webkit-animation-fill-mode: forwards;
}

.finalfadding {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: black;
    -webkit-animation: finalfaddingkeyframes 5s ease-out 140s 1;
    -webkit-animation-fill-mode: forwards;
}