@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");

/* --- Reset & Base --- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, header, nav, section { 
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; 
}
body { 
    line-height: 1; 
    -webkit-text-size-adjust: none; 
    background: #000; 
    overflow: hidden; 
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15pt;
    cursor: default;
    user-select: none;
}
ol, ul { list-style: none; }
a { text-decoration: none; cursor: pointer; color: inherit; }

/* --- Wrapper & Background --- */
@keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
#wrapper { animation: wrapper 3s forwards; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; }

#bg {
    animation: bg 60s linear infinite;
    backface-visibility: hidden;
    background: #000 url("bg.jpg") bottom left;
    background-repeat: repeat-x;
    height: 100%; left: 0; position: fixed; top: 0;
    background-size: 2250px auto; 
    width: 6750px; 
    z-index: -1;
}
@keyframes bg { 
    0% { transform: translate3d(0,0,0); } 
    100% { transform: translate3d(-2250px,0,0); } 
}

#overlay {
    animation: overlay 1.5s 1.5s forwards;
    height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%;
}
@keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }

/* --- Layout Engine --- */
#main {
    height: 100%; left: 0; position: fixed; top: 0; width: 100%;
    display: flex; justify-content: center; align-items: center; text-align: center;
}

#header {
    animation: header 1s 2.25s forwards;
    opacity: 0; position: relative; width: 90%;
}
@keyframes header { 0% { transform: translate3d(0,1em,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } }

/* --- Logo & Text --- */
#studio-logo {
    width: 500px;
    height: auto;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
}

.studio-tagline {
    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
    opacity: 0.7;
}

/* --- Social Icons --- */
#header nav li { 
    animation: nav-icons 0.5s ease-in-out forwards; 
    display: inline-block; 
    margin: 0 10px;
    opacity: 0; 
}
@keyframes nav-icons { 0% { transform: translate3d(0,1em,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } }

#header nav li:nth-child(1) { animation-delay: 2.5s; }
#header nav li:nth-child(2) { animation-delay: 2.75s; }
#header nav li:nth-child(3) { animation-delay: 3s; }
#header nav li:nth-child(4) { animation-delay: 3.25s; }
#header nav li:nth-child(5) { animation-delay: 3.5s; }
#header nav a {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: solid 1px #fff;
    height: 3em; width: 3em;
    transition: all 0.2s ease-in-out;
}
#header nav a:hover { background-color: rgba(255, 255, 255, 0.175); transform: scale(1.1); }
#header nav a i { font-size: 1.5em; }

/* =========================================
   --- MOBILE PORTRAIT (Normal Phone) --- 
   ========================================= */
@media screen and (max-width: 736px) {
    #studio-logo { width: 85%; max-width: 350px; }
    .studio-tagline { font-size: 1.1em; letter-spacing: 0.1em; }
    
    #bg { background-size: 1200px auto; width: 3600px; }
    @keyframes bg { 
        0% { transform: translate3d(0,0,0); } 
        100% { transform: translate3d(-1200px,0,0); } 
    }

    #header nav a { height: 2.8em; width: 2.8em; }
    #header nav li { margin: 0 5px; }
}

/* =========================================
   --- MOBILE LANDSCAPE (Sideways Phone) --- 
   ========================================= */
@media screen and (max-height: 450px) and (orientation: landscape) {
    #studio-logo {
        width: 200px;      /* Shrink logo so it doesn't hit top/bottom */
        margin-bottom: 5px;
    }
    .studio-tagline {
        font-size: 0.9em;  /* Shrink text */
        margin-bottom: 10px;
    }
    #header nav a {
        height: 2.2em;     /* Shrink icons */
        width: 2.2em;
    }
    #header nav a i {
        font-size: 1em;    /* Shrink icon symbols */
    }
    #header {
        top: 10px;         /* Nudge everything slightly to keep it centered */
    }
}