/*==================================================
 * TITLE CARD
 * ===============================================*/


#title_card_wrap {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:1444;
background-color: #000;
background:url(../../img/bg/bg_stars_dark.png);
 }

#title_head {
position:absolute;
top: 52px;
left: 50vw;
margin-left: -382px;
width:400px;
height:50px;
padding: 7px;
font-size:70px;
color:#fff;
font-family: 'EB Garamond', serif;
opacity:0;
z-index:222;
}

.title_head_fadein {
animation:1.5s A_title_head_fadein linear 1;
animation-fill-mode: forwards;
}

@keyframes A_title_head_fadein {
to {opacity:1;}
}

#title_subhead {
position: absolute;
top: 91px;
left: 50vw;
margin-left: 100px;
width: 284px;
height: 44px;
font-size: 42px;
border: 2px #000 solid;
font-family: 'Julius Sans One', sans-serif;
opacity: 0;
z-index: 222;
}

.title_subhead_fadein {
animation:7s A_title_subhead_fadein linear 1;
animation-fill-mode: forwards;
}

.subhead_blink {
/*animation:.5s A_subhead_blink steps(1) infinite alternate;*/

}

@keyframes A_subhead_blink {
from, to { background-color:transparent; }
50% {  background-color:#000; }
}

@keyframes A_title_subhead_fadein {
to {opacity:1;}
}

#title_scene_frame {
position:absolute;
top:54px;
left:50vw;
margin-left:-400px;
width:800px;
height:450px;
background:url('../../img/bg/bg_title0.jpg') no-repeat;
border: 5px solid #fff;
z-index:111;
opacity:0;

}

.title_scene_frame_appear {
animation: 6s A_title_scene_frame_appear ease-in 1;
animation-fill-mode: forwards;
}

@keyframes A_title_scene_frame_appear {
to {opacity:1;}
}

.title_scene_frame_shrink {
  animation: 2s A_title_scene_frame_shrink ease 1;
  animation-fill-mode: forwards;
}

@keyframes A_title_scene_frame_shrink {
from {opacity:1;}
to {height:113px;opacity:1;}
}

#title_narrative_wrap {
position:absolute;
top:188px;
left:50vw;
margin-left:-397px;
width:810px;
height:450px;
z-index:111;
opacity:0;
}

#title_narrative {
position:absolute;
top:0px;
left:0px;
width:790px;
height:450px;
background-color:#000;
border: 2px solid #9e9fd4;
color:#fff;
font-size: 24px;
font-family: 'Inconsolata', monospace;
padding:5px;
}

#title_narrative:after {
content: '\2588';
animation: A_blinker 600ms linear infinite alternate;
border: 1px solid #fff;
box-shadow: #fff 0 0 2px;
display: inline;
}

#title_narrative::selection {
background: #a8709a;
}

.title_narrative_appear {
animation: 2s A_title_narrative_appear ease 1;
animation-fill-mode: forwards;
}

@keyframes A_title_narrative_appear {
to {opacity:1;}
}

#title_enter_prompt {
position: absolute;
left: 50vw;
top: 626px;
margin-left: 344px;
width: 105px;
height: 45px;
background: url(../../img/sprite/keyboard_sheet.png) no-repeat -594px -347px;
animation: A_press_enter 2s infinite steps(2);
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 10px #fff, 0 0 40px #fff, 0 0 70px #fff;
z-index: 1555;
display: none;
}    


#title_text0 {
padding:6px;
}

#spr_title_light {
position:absolute;
left:810px;
top:440px;
width:3px;
height:21px;
box-shadow:  0 0 10px #fff,
             0 0 10px #fff,
             0 0 5px #fff,
             0 0 20px #a8709a,
             0 0 60px #a8709a,
             0 0 10px #a8709a,
             0 0 10px #a8709a,
             0 0 10px #a8709a;
z-index:555;
background-color:#fff;
animation: A_title_light_blink .5s ease infinite alternate;
}

@keyframes A_title_light_blink {
  to {box-shadow: 0 0 10px #fff;}

}



#title_scanlines {
position:absolute;
top:0px;
left:0px;
width:803px;
height:465px;
z-index: 1666;
background: linear-gradient(#444 50%, #000 50%);
background-size: 100% 4px;
background-repeat: repeat-y;
opacity: .14;
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
animation: pulse 5s linear infinite;
pointer-events: none;
}


#ray_gradient {
position:absolute;
top:100%;
left:0px;
width:100%;
height:300%;
background: linear-gradient(to bottom, rgba(124, 122, 187, 0.1) 33%, rgba(124, 122, 187, 0) 66%, rgba(124, 122, 187, 0) 100%);
z-index:110;
animation: A_update 15s linear infinite;
animation-delay:15s;
}

@keyframes A_update {
  0% {transform: translate3d(0,-0%,0);}
  66% {transform: translate3d(0,-100%,0);}
  100% {transform: translate3d(0,-200%,0);}

}