/* Copyright Chris Andrews 2025 */

/* Custom Animation Containers */

#top-star {
    display: none;
}

#bottom-star {
    display: none;
}

/* Custom Animation Classes */
.ca-anim-cont {
	position: relative;
	z-index: -1;
}

/* Animation Triggers*/

.cs-mob-anim-off {
    display: none;
}
	
.cs-mob-anim-on {
    display: none;
}

/* Header Animation */

.cs-twinkle-a {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    opacity: 0.1;
    z-index: -1;
}
	
.cs-twinkle-b {
    position: absolute;
    top: 20px;
    left: 60%;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 1s;
    opacity: 0.1;
    z-index: -1;
    transform: rotate(30deg);
}
    
.cs-twinkle-c {
    position: absolute;
    top: 10px;
    left: 75%;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 1.5s;
    opacity: 0.1;
    z-index: -1;
    transform: rotate(60deg);
}
    
.cs-twinkle-d {
    position: absolute;
    top: 20px;
    left: 15%;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    opacity: 0.1;
    z-index: -1;
}
    
.cs-twinkle-e {
    position: absolute;
    top: 3px;
    left: 30%;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 3s;
    opacity: 0.1;
    z-index: -1;
    transform: rotate(30deg);
}
    
.cs-twinkle-f {
    position: absolute;
    top: 0;
    left: 45%;
    width: 20px;
    height: 20px;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 3.5s;
    opacity: 0.1;
    z-index: -1;
    transform: rotate(60deg);
}

/* Review Animation Classes */

.review-on {
	animation-name: switch;
	animation-duration: 1.5s;
}

.review-off {
	opacity: 0;
	margin-top: 200px;
}

/* JJ Graphic Animations */

.cs-jj-pos-left {
    left: -100%;
    width: 200px;
    transform: rotate(45deg);
    animation-name: jj-left;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    z-index: 999;
}

.cs-jj-pos-left-out {
    left: -100%;
    width: 200px;
    transform: rotate(45deg);
    z-index: 999;
}

.cs-jj-pos-right {
    right: -100%;
    width: 200px;
    transform: rotate(-45deg);
    animation-name: jj-right;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    z-index: 999;
}

.cs-jj-pos-right-out {
    right: -100%;
    width: 200px;
    transform: rotate(-45deg);
    z-index: 999;
}

.cs-jj-pos-top {
    top: 0%;
    left: 25%;
    width: 200px;
    transform: rotate(180deg);
    animation-name: jj-top;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    z-index: -999;
}

.cs-jj-pos-top-out {
    top: 0;
    left: 25%;
    width: 200px;
    transform: rotate(180deg);
    z-index: -999;
    display: none !important;
}

.cs-jj-mic-right {
    right: -100%;
    width: 200px;
    animation-name: jj-right-mic;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    z-index: 1;
}

.cs-jj-mic-right-out {
    right: -100%;
    width: 200px;
    z-index: 1;
}

/* Graphic Animation classes */

.balloons {
	background-repeat: no-repeat;
	background-size: auto;
	position: fixed;
	top: 30%;
	left: 20%;
	opacity: 0;
	animation-name: balloons;
	animation-duration: 12s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.candy-a {
	background-repeat: no-repeat;
	background-size: auto;
	position: fixed;
	top: 0%;
	left: 100%;
	opacity: 0;
	animation-name: candy;
	animation-duration: 8s;
	animation-delay: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.candy-b {
	background-repeat: no-repeat;
	background-size: auto;
	position: fixed;
	top: 0%;
	left: 100%;
	opacity: 0;
	animation-name: candy-b;
	animation-duration: 12s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.candy-c {
	background-repeat: no-repeat;
	position: fixed;
	top: 0%;
	left: 0%;
	opacity: 0;
	animation-name: candy-c;
	animation-duration: 6s;
	animation-delay: 12s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* Text Animation Classes */

.cs-title-fade {
    position: absolute;
    top:0; 
    bottom:0; 
    right: 20%;
    background: #004C98;
    animation-name: scroll-header;
    animation-duration: 2s; 
    opacity: 1;
}

/* Custom Animation */
@keyframes balloons {
	
	0% {
		opacity: 0;
	}
	
	12% {
		opacity: 0.5;
		transform: rotate(10deg);
	}
	
	35% {
		transform: rotate(5deg);
	}
	
	75% {
		opacity: 0;
	}
	
	100% {
		top: 3%;
		left: 1%;}
}

@keyframes candy {
	
	0% { opacity: 0; }
	12% { opacity: 0.5; }
	45% {
		opacity: 0;
		transform: rotate(360deg);
		top: 80%;
		left: 50%;
	}
	
	50% {
		top: 40%;
		left: 50%;
	}
}

@keyframes candy-b {
	
	0% { opacity: 0; }	
	12% { opacity: 0.5; }
	45% {
		opacity: 0;
		transform: rotate(360deg);
		top: 80%;
		left: 30%;
	}
}

@keyframes candy-c {
	
	0% { opacity: 0; }	
	12% { opacity: 0.5; }
	45% {
		opacity: 0;
		transform: rotate(180deg);
		top: 60%;
		left: 70%;
	}
}

@keyframes switch {

	0% {opacity: 0; margin-top: 100px;}
	100% { margin-top: 0; opacity: 1; }
	
}

@keyframes title-transition-a {
    
    0%      { color: #004C98; }
    25%     { color: #0059B3; }
    50%     { color: #0067CF; }
    75%     { color: #0073E8; }
    100%    { color: #008FE8; }
    
}

@keyframes title-transition-b {
    
    0%      { color: #D72E4D; }
    25%     { color: #D72E74; }
    50%     { color: #D72E9C; }
    75%     { color: #D72EAA; }
    100%    { color: #F736C4; }
    
}

@keyframes title-transition-c {
    
    0%      { color: #F0A20A; }
    25%     { color: #F0BA0A; }
    50%     { color: #F2C01B; }
    75%     { color: #F2C327; }
    100%    { color: #FACF00; }
    
}

@keyframes logo-transition {
	
	from 	{ opacity: 0; }
	to 		{ opacity: 1; }
	
}

@keyframes logo-fade {
    
	0% 		{ opacity: 1; }
	100% 	{ opacity: 0.4 }
	
}

@keyframes bottom-star-move {
    
    0% {
        top: 85%; 
        left: 10px;
        transform: rotate(360deg);
    }
    
    25% {
        top: 85%;
        left: 90%;
        transform: rotate(720deg);
    }
    
    
    50% {
        top: 70px;
        left: 90%;
        transform: rotate(1080deg);
    }
    
    75% {
        top: 70px;
        left: 10px;
        transform: rotate(1440deg);
    }
    
    100% {
        top: 85%; 
        left: 10px;
        transform: rotate(1800deg);
    }
    
}

@keyframes top-star-move {
    
    0% {
        top: 70px; 
        left: 90%;
        transform: rotate(360deg);
    }
    
    25% {
        top: 70px;
        left: 10px;
        transform: rotate(720deg);
    }
    
    
    50% {
        top: 85%;
        left: 10px;
        transform: rotate(1080deg);
    }
    
    75% {
        top: 85%;
        left: 90%;
        transform: rotate(1440deg);
    }
    
    100% {
        top: 70px; 
        left: 90%;
        transform: rotate(1800deg);
    }
    
}

@keyframes twinkle {
    
    0% {
        
        opacity: 0.1;
    }
    
    50% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.1;
    }
}


    
@keyframes scroll-header {
        
    0% {
        width: 100%;
    }
        
    70% { 
        opacity: 1;
    }
        
    100% {
        width:0; 
        opacity: 0; 
        display: none;
    }
}

@keyframes jj-right {
    
    0%      { right: -100%; }
    15%     { right: -30%;  }
    85%     { right: -30%;  }
    100%    { right: -100%; }
    
}

@keyframes jj-left {
    
    0%      { left: -100%; }
    15%     { left: -30%;  }
    85%     { left: -30%;  }
    100%    { left: -100%; }
    
}

@keyframes jj-top {
    
    0%      { top: 0;   }
    15%     { top: 3%;  }
    85%     { top: 3%;  }
    100%    { top: 0;   }
    
}

@keyframes jj-right-mic {
    
    0%      { right: -100%; }
    15%     { right: 10%;   }
    85%     { right: 10%;   }
    100%    { right: -100%; }
    
}


/* Screensize Adjustments */

@media screen and (max-width:600px) {
    
    #top-star {
        display: block;
        position: absolute; 
        top: 70px; 
        left: 90%; 
        width: 30px; 
        height: 30px;
        animation-name: top-star-move;
        animation-iteration-count: infinite;
        animation-duration: 8s;
        animation-delay: 2s;
    }

    #bottom-star {
        display: block;
        position: absolute;
        top: 85%; 
        left: 10px;
        width: 30px; 
        height: 30px;
        animation-name: bottom-star-move;
        animation-iteration-count: infinite;
        animation-duration: 8s;
        animation-delay: 2s;
    }
	
	#anim-container-a {
		left: 40%;
		animation-duration: 8s;
	}
	
	.cs-mob-anim-off {
	    display: none;
	}
	
	.cs-mob-anim-on {
	    display: block;
	}
	
}