/* INTROODUCTION SCENE STYLING */
  section#intro-scene-container{
  }

  div#intro-container{
    opacity: 0;
  }

  svg#intro-background,
  svg#intro-characters,
  svg#intro-character-click-paths {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 160vh;
  }

  svg#intro-background #intro-bg-highlight,
  svg#intro-background #intro-bg-sun-flare,
  svg#intro-characters #intro-sun-ambience-fluctuating {
     /*animation: 5s starlight infinite;*/
  }
   @keyframes starlight {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    svg#intro-background .intro-bg-sun {
      transform: translateX(-15vw);
    }

    svg#intro-background #intro-bg-sun-flare {
      mix-blend-mode: color-dodge;
    }

  div#intro-overlay-titles {
    display: grid;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }
  div#intro-overlay-titles svg{
    width:    50vw;
    height:   auto;
  }
  div.intro-title-container{
    mix-blend-mode: difference;
  }
  svg.intro-title-svg{
    fill:   #fff;        
  }
  text.intro-titleText{
    font-weight: bold;
    font-family: 'Dosis';
    text-transform: uppercase;
    transform: rotate(-15deg) skew(-15deg, 0);
  }
    text tspan.titleText-line1{
      font-size: 9px;   
      letter-spacing: 1.1px;
    }
    text tspan.titleText-line2{
      font-size: 35px;      
    }
    text tspan.titleText-line3{
      font-size: 9px;  
      letter-spacing: 0.15px; 
    }      

  svg#intro-characters .character {
    position: relative;
    transition: opacity 0.5s, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  svg#intro-character-click-paths .character-click-el {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .buffy {
    transform: translate(30%, 8vmax) scale(1.5);
    transition-delay: 0.4s;
  }
  .chewie {
    transform: translate(34%, 5vmax);
    transition-delay: 0.5s;
  }
  .paddington {
    transform: translate(33%, 3vmax) scale(1.75);
    transition-delay: 0.1s;
  } 
  .hitGirl {
    transform: translate(23%, 5vmax) scale(1.75);
    transition-delay: 0.1s;
  }      
  .tony {
    transform: translate(38%, 5vmax);
    transition-delay: 0.1s;
  }    
  .ziggy {
    transform: translate(38%, 5vmax) scale(1.75);
    transition-delay: 0.1s;
  }     
  .characters-unfocused .buffy {
    transform: translate(calc(40% + 15vmin), calc(25% + 8vmax)) scale(1.1);
  }  
  .characters-unfocused .chewie {
     transform: translate(calc(37% + 10vmin), calc(13% + 3vmax)) scale(0.65);
  }
  .characters-unfocused .lando {
    transform: translate(calc(30% + 10vmin), calc(20% + 10vmax)) scale(0.6);
  }
  .characters-unfocused .tony {
    transform: translate(calc(37% - 8vmin), calc(21% + 4vmax)) scale(0.68)
  }  
  .characters-unfocused .paddington {
    transform: translate(calc(40% - 10vmin), calc(25% + 16vmax)) scale(0.85);
  }
  .characters-unfocused .hitGirl {
    transform: translate(calc(43% - 10vmin), calc(32% + 15vmax)) scale(1.0);
  }  
  .characters-unfocused .ziggy {
    transform: translate(40%, calc(20% + 12vmax)) scale(1.1);
  }
  /* INSTRUCTION OVERLAY */
  section#intro-instruction-container{
    pointer-events: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    -webkit-perspective: 1500px;
    perspective: 1500px;     
  }
  div#intro-instruction{
    grid-area: 3 / 2 / 3 / 2;
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Dosis';        
    justify-self: center;
    align-self: end;
    padding-bottom: 3rem;
    text-transform: uppercase;
    pointer-events: auto;
    opacity: 0;
  }

  div#intro-characterStory-container{
    grid-area: 1 / 3 / 1 / 3;
    font-size: 1.25rem;
    color: #fff;
    font-family: 'Dosis';        
    justify-self: center;
    align-self: end;
    padding-bottom: 3rem;
    text-transform: uppercase;
    pointer-events: auto;
    width: 20vw;
    margin-top: 15vh;
    opacity: 0; 
    mix-blend-mode: exclusion;      
    transform: translateX(30%) rotateY(-41deg) translateZ(250px) scale(0);
    transition: opacity 0.5s, transform 1s cubic-bezier(0.68, -0.15, 0.265, 1.55);
  }
  div#intro-characterStory-container.focus{
    transform: translateX(30%) rotateY(-41deg) translateZ(250px) scale(1);
    opacity: 1;
  }

  #intro-characterStory-name{
      font-size: 3rem;
      mix-blend-mode: exclusion;
  }
  #intro-characterStory-begin{
    padding: 0.25rem;
    margin-top: 1rem;
    border: 1pt #fff solid;
    text-align: center;
    cursor: pointer;
  }
  #intro-characterStory-begin:hover{
    background-color: #fff;
    color: #000;
    mix-blend-mode: difference;
  }

  /* INTRO TO CONTENT LOADER */
  #introToContent-loader-background,
   #introToContent-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  #introToContent-loader-overlay{
    background-color: #fff;
    opacity: 0;
  }
  #introToContent-loader-message{
    font-weight: bold;
    font-size: 3rem;
    font-family: 'Dosis';              
    color: #fff;
    align-self: center;
    justify-self: center;
    text-transform: uppercase;
    z-index: 10;
    padding: 1rem 1.5rem;
    mix-blend-mode: exclusion;
  }
  #introToContent-loader-message.loaded{
    border: solid #fff 3px; 
    cursor: pointer;           
  }
  #introToContent-loader-message.loaded:hover{
    background-color: #fff;      
    color: #000;      
  }

  @media (max-width: 600px) {
    .characters-unfocused .tony {
      transform: translate(calc(32.5% + 10vmin), calc(25% + 10vmax)) scale(0.56);
    }    
      .characters-unfocused .ziggy {
      transform: translate(calc(32.5% + 10vmin), calc(25% + 10vmax)) scale(1);
    }    

    section#intro-overlay-titles svg {
      top:      20vh;
      left:     0vw;
      width:    100vw;
    }
  }

  @media (max-width: 600px) {

  }
  @media (min-width: 160vh) {
    svg#intro-background,
    svg#intro-characters,
    svg#intro-character-click-paths {
      width: 100vw;
      height: 62.5vw;
    }
  }