/*
    STUDENT: Brandi Lemessy
    ID: 100722147
    Project One - Animated SVG Painting or Poster
    This file possess the css animation for "A Charmed Hallow's Eve"
*/

/* Ensuring h2 stays in the dark purple foregrowund and still be responsive
Create a div inside a div, display both as block elements and include negative top margin for the bottom stacked (inner div)*/
#inner h2 {
    color: #FCE200;
    font-family: 'Cinzel Decorative', cursive;
    z-index: 3000;
    margin: 0;
    padding: 0;
    /* 2vw or 2 viewport width creates responsive text */
    font-size: 2vw;
    position: relative;
    top: -20%;
    left: 10%;
}

#inner h2 {
    animation: fadeIn 3s 4.4s backwards linear;
}

#outer {
    margin: 0;
    padding: 0;
    display: block;
}

#inner {
    margin-top: -5%;
    padding: 0;
    display: block;
}

/* Below is the Animations for "A Charmed Hallow's Eve" Composition.
The ID's are called from the SVG embedded file and various animation properties are used on each one to produce the desired effect.*/ 

/* Background Category */
/* /////////////////////////////////////////////////////////////// */

#bgOne {
    opacity: 1;
}

#bgTwo {
    animation: slideUpBottom 1s .9s backwards cubic-bezier(.46, .08, .33, 1.20);
}

#bgThree {
    animation: slideUpBottom 1s .7s backwards cubic-bezier(.46, .08, .33, 1.15);
}

#fgBottom {
    animation: slideUpBottom 1s .5s  backwards cubic-bezier(.46, .08, .33, 1.05);
}

  

/* Sky */
/* /////////////////////////////////////////////////////////////// */  
#moon {
    animation: fadeIn 3s 4s backwards ease-out;
}

#skyTop {
    animation: slideDownTop 1s 1.5s backwards cubic-bezier(.46, .08, .33, 1.05);
}

/* IDK about this one..........?  ?   ?  ... */
#circles {
     animation: circular 20s 4.7s backwards alternate infinite ease-in-out, fadeIn 1s 4.3s backwards ease-out;
}

#loneStarD {
    animation: fadeIn 1s 4s backwards ease-out;
}

#loneStarC {
    animation: fadeIn 1s 3.7s backwards ease-out;
}

#loneStarB {
   animation: fadeIn 1s 3.5s backwards ease-out;
}

#loneStarA {
    animation: fadeIn 1s 3.2s backwards ease-out;
}

#starA {
    animation: slideDownTop 1s 1.7s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#starB {
   animation: slideDownTop 1s 1.9s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#starC {
    animation: slideDownTop 1s 2.1s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#starD {
    animation: slideDownTop 1s 2.3s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#starE {
    animation: slideDownTop 1s 2.5s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#starF {
    animation: slideDownTop 1s 2.7s backwards cubic-bezier(.46, .08, .33, 1.05);
}

#cloudOne {
   animation: rollInSlow 50s linear 1 backwards;
    opacity: .7;
}

#cloudTwo {
    animation: rollInSlow 35s  linear 1 backwards;
    opacity: .7;
}

#cloudThree {
    animation: rollInSlow 20s linear 1 backwards;
    opacity: .7;
}

#cloudPathA {
    animation: rollInSlow 50s linear 1 backwards;
}

#cloudPathB {
    animation: rollInSlow 35s linear 1 backwards;
}

#cloudPathC {
    animation: rollInSlow 20s linear 1 backwards;
}


/* Bats Category */
/* /////////////////////////////////////////////////////////////// */
/* BAT ONE */  
#batOneBody {
    animation: fadeIn 2s 6.4s backwards ease;
}

#batOneRightWing {
    /* animation: fadeIn 2s 6.4s backwards infinite alternate ease;  */
    transform-origin: 194px 454px 0px;
    animation: batWingRight .5s 6.4s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.4s backwards cubic-bezier(.87, .23, .41, .87);
}

#batOntLeftWing {
    transform-origin: 194.76px 456.1px 0px;
    animation: batWingLeft .5s 6.4s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.4s backwards cubic-bezier(.87, .23, .41, .87);
}

#batLeftEye {
    animation: fadeIn 2s 7s backwards infinite alternate ease;
}

#batRightEye {
    animation: fadeIn 2s 7s backwards infinite alternate ease;
}

/* BAT TWO */
#batTwo {
    animation: fadeIn 2s 6.7s backwards ease;
    
}

#batTwoRight {
    transform-origin: 238px 476px 0px;
    animation: batWingRight .5s 6.7s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.7s backwards cubic-bezier(.87, .23, .41, .87);
}

#batTwoLeft {
    transform-origin: 237.73px 478.61px 0px;
    animation: batWingLeft .5s 6.7s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.7s backwards cubic-bezier(.87, .23, .41, .87);

}

/* BAT THREE */
#batThree {
    animation: fadeIn 2s 6.9s backwards ease;
}

#batThreeRight {
    transform-origin: 485.62px 459.15px 0px;
    animation: batWingRight .5s 6.9s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.9s backwards cubic-bezier(.87, .23, .41, .87);
}

#batThreeLeft {
    transform-origin: 485.96px 459.71px 0px;
    animation: batWingLeft .5s 6.9s backwards infinite alternate cubic-bezier(.87, .23, .41, .87), fadeIn 2s 6.9s backwards cubic-bezier(.87, .23, .41, .87);
}


/* People Category */
/* /////////////////////////////////////////////////////////////// */
#littleOne {
    transform-origin: 263.13px 656.61px 0px;
    animation: slideUpBottom 3s 4.7s backwards cubic-bezier(.46, .08, .33, 1.10);
}

#mylittleOne {
    transform-origin: 263.13px 656.61px 0px;
    animation: puppeteer 2.5s 5.2s backwards alternate infinite linear;
}

#woman {
    transform-origin: 298.34px 655.47px 0px;
    animation: slideUpBottom 3s 4.9s backwards cubic-bezier(.46, .08, .33, 1.10);
}
#mywoman {
    transform-origin: 298.34px 655.47px 0px;
    animation: puppeteer 3s 5.5s backwards alternate infinite linear;
}

#boyGhost {
    transform-origin: 369.86px 669.13px 0px;
    animation: slideUpBottom 3s 5.2s backwards cubic-bezier(.46, .08, .33, 1.10);
}

#myboyGhost {
    transform-origin: 369.86px 669.13px 0px;
    animation: puppeteer 2.8s 5.7s backwards alternate infinite linear; 
}

#girl {
    transform-origin: 450.8px 651.93px 0px;
    animation: slideUpBottom 3s 5.5s backwards cubic-bezier(.46, .08, .33, 1.10);
}

#mygirl {
    transform-origin: 450.8px 651.93px 0px;
    animation: puppeteer 2.2s 6s backwards alternate infinite linear;
}

#cat {
    transform-origin: 528.98px 645.31px 0px;
    animation: slideUpBottom 3s 5.7s backwards cubic-bezier(.46, .08, .33, 1.10);
}

#mycat {
    transform-origin: 528.98px 645.31px 0px;
    animation: puppeteer 2.3s 6.8s backwards alternate infinite linear;
}

/* Witch Category */
/* /////////////////////////////////////////////////////////////// */

#teenageWitch {
    animation: rollInSlow 10s 5.5s backwards ease-in-out ;
}

#myteenageWitch {
    animation: hoverUpDown 3s 8s backwards linear alternate infinite;
}


/* Haunted House Category */
/* /////////////////////////////////////////////////////////////// */
#hauntedHouse {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#ftDoor {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#leftWindow {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#rightWindow {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#ftWindow {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#upstairsDoor {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#upperWindow {
   animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#upstairWindowLeft{
   animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#upstairWindowRight {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#topLittleCircle {
   animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#leftLittleCircle {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#rightLittleCircle {
    animation: slideDownTop 1s 4.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}


/* Tree and leaves  Category*/
/* /////////////////////////////////////////////////////////////// */

#Tree {
    animation: slideDownTop 1s 4.5s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#leafA {
   opacity: 0;
}

#leafB {
    opacity: 0;
}

#leafC {
     opacity: 0;
}

#leafD {
     opacity: 0;
}

#leafE {
    opacity: 0;
}

#leafF {
     opacity: 0;
}


/* Pumpkins and TombStones Category*/
/* /////////////////////////////////////////////////////////////// */
/* FIRST*/
#firstPumpkin {
    animation: slideDownTop 1s 4.7s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#fPlefteye {
   animation: fadeIn 3s 5.2s backwards infinite alternate ease;
}

#fPrighteye {
   animation: fadeIn 3s 5.2s backwards infinite alternate ease;
}

/* MID*/

#midPumpkin {
    animation: slideDownTop 1s 4.9s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#mPlefteye {
   animation: fadeIn 2s 5.4s backwards infinite alternate ease;
}

#mPrighteye {
    animation: fadeIn 2s 5.5s backwards infinite alternate ease;
}

/*LAST*/
#lastPumpkin {
    animation: slideDownTop 1s 5.2s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#lPlefteye {
    animation: fadeIn 4s 5.6s backwards infinite alternate ease;
}

#lPrighteye {
    animation: fadeIn 4s 5.6s backwards infinite alternate ease;
}

#TombStoneA {
    animation: slideDownTop 1s 5.4s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#tombStoneB {
    animation: slideDownTop 1s 5.6s backwards cubic-bezier(.63, .67, .27 ,.89);
}

#cross {
   animation: slideDownTop 1s 5.8s backwards cubic-bezier(.63, .67, .27 ,.89);
}

/*KEY FRAMES*/
/*This is the keyframes section that holds the basis for the animations used above*/


@keyframes slideUpBottom {
    from {transform: translateY(1000px)}
}   

@keyframes slideDownTop {
    from {transform: translateY(-1000px)}
}

/* This fadeIn keyframes need the percentage progression to work in firefox!!!  */
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    25% {opacity: .1}
    50% {opacity: .4}
    75% {opacity: .7}
    100% {opacity: 1}
}
@-moz-keyframes fadeIn {
    0% {opacity: 0}
    25% {opacity: .1}
    50% {opacity: .4}
    75% {opacity: .7}
    100% {opacity: 1}
}

@keyframes rollInSlow {
    from{transform: translateX(-1400px);}
}

@keyframes puppeteer {
    0% {transform-origin: bottom;
    transform: rotate(1deg);}
    25% {transform: rotate(3deg);}
    50% {transform: rotate(5deg);}
    75% {transform: rotate(7deg);}
    100% {transform: rotate(10deg);}
}

@keyframes batWingRight {
    to {transform: rotate(-35deg);}
}

@keyframes batWingLeft {
    to {transform: rotate(45deg);}
}

@keyframes hoverUpDown {
    0% {transform-origin: 588.01px 262.57px 0px;
        transform: translateY(2px);}
    25% {transform: translateY(5px);}
    50% {transform: translateY(10px);}
    75% {transform: translateY(15px);}
    100% {transform: translateY(20px);}
}  

@keyframes circular {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(180deg) translateX(50px) rotate(-180deg); }
}