/*
 Theme Name:  Fleurs d'orangers et chats errants - Oscars Short
 Theme URI: https://www.koukaki.local
 Author: Studio Koukaki
 Author URI: https://www.koukaki.local
 Template: foce
 Description: Thème enfant à l'ocasion de la nomination aux Oscars Shorts
 Version: 0.1
*/

/* SECTION HEADER */

/* ajout de la vidéo */
#background_video{
	position: absolute;
}

/* RESPONSIVE + video uniquement sur pc et tablette */
@media screen and (max-width: 850px) {
	html{
		overflow-x: hidden;
	}

	#background_video,
	.feuille_story, 
	.fleur_story, 
	.orchid_burger, 
	.chat_bleu_burger, 
	.chat_gris_burger, 
	.chat_roux_burger, 
	.marguerite_burger, 
	.random_flower_burger, 
	.flower_burger, 
	.hibiscus,
	.menu-toggle,
	.left_flower_studio,
	.right_flower_studio,
	.background_story,
	.background_perso,
	.background_lieu,
	.background_studio,
	.big_cloud,
	.little_cloud,
	.site-footer ul::after
	{
		display: none;
	}

	/* ajustement des titres de section */
	#story .title_story{
		color: white;
		position: initial;
		background-image: url(assets/images/background_story.png);
		background-size: cover;
	}

	.story #characters .title_perso{
		color: white;
		position: initial;
		text-align:inherit;
		background-image: url(assets/images/background_personnage.png);
		font-size: 24px;
	}

	.story #place .title_lieu{
		position: initial;
		background-image: url(assets/images/background_lieu.png);
	}

	#studio .title_studio{
		position: initial;
		color: white;
		background-image: url(assets/images/background_studio.png);
		background-size: cover;
	}

	/* ajustement de ma section oscars */
	.oscars{
		display: flex;
	flex-direction: column;
	}

	.oscars h3{
		font-size: 1.5rem;
	}

	.logo_oscars{
		width: 50%;
		margin-left: 25%;
	}

	/* ajustement de ma navigation */
	.main-navigation ul{
		display: flex;
		width: 100vw;
	}

	.main-navigation {
		height: 80px;
	}

	.nav_burger.active{
		right: auto;
		width: 100vw;
	}

	.main-navigation ul .site-title {
		display: block;
		font-size: 15px;
	}

	.logo_burger{
		top: 20px;
	}

	.nav_burger ul li{
		top: 30px;
	}

	.swiper-wrapper{
		flex-direction: column;
	}

	/* ajustement du footer */
	.site-footer ul{
		flex-direction: column;
		margin-top: 100px;
	}
}
/* Fin responsive */

#logo{
	position: sticky;
	display: flex;
	justify-content: center;
	width: 100%;
	top: 75px;
    animation : up 1s;
}

/* animation in-fade + image en fallback */
 .banner{
	display: flex;
    animation: down 1s;
	background-image:url(assets/images/banner.png)

}

@keyframes down{
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* animation fade-in section story / studio */
#story, #studio{
    animation: up 1s;
}

@keyframes up{
	from {
		opacity: 0;
		transform: translate3d(0, 20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* SECTION PERSONNAGE */

/* ajout de mon caroussel - swiper js */
.swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

  .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 300px;
	height: 300px;
}

  .swiper-slide img {
	display: block;
	width: 100%;
}

.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-left{
	background-image: none;
}

.title_perso{
	text-align: start;
	background-position: end;
	background-position-x: 30px;
}

/* SECTION LIEU */

/* animation des nuages au scroll */
/* ajout de l'image en fond */
.story #place{
	background-image: url("./assets/images/studio_koukaki_place.png");
}

/* ajout de l'image du grand nuage */
.big_cloud{
	filter: blur(10px);
	position: absolute;
	left: 1320px;
	top: 1360px;
	transform: translateX(-100%);
    opacity: 1;
    transition: transform 3s ease-in-out;
    opacity: 0.4s ease-in-out;
}

/* ajout de l'image du petit nuage */
.little_cloud{
	filter: blur(10px);
	position: absolute;
	left: 940px;
	top: 1510px;
	transform: translateX(-100%);
    opacity: 1;
    transition: transform 3s ease-in-out;
    opacity: 0.4s ease-in-out;
}

/* animation des nuages */
.big_cloud.active {
    transform: translateX(-190%);
    opacity: 1;
}

.little_cloud.active {
    transform: translateX(-260%);
    opacity: 1;
}

/* SECTION STUDIO */
/* AJOUT DE LA SECTION OSCARS */

.site-footer::after{
	bottom: 28.8em;
}

.site-footer ul::after{
	bottom: -30.5em;
}

.site-footer{
	display: block;
	overflow: visible;
	padding-top: 11em;
	margin-bottom: 40em;
}

.site-footer ul{
	margin-top : 280px;
}

.oscars{
	display: flex;
	justify-content: center;
}

.oscars h3{
	background-image: url("./assets/images/rectangle_oscars.png");
}

.oscars img{
	object-fit: contain;
}

/* ANIMATION DU SITE */

/* rotation des fleurs - section story et footer */
.story__article::after,
.site-footer::before,
.site-footer::after,
.site-footer ul::after {
    animation : flowerTurn 12s linear infinite;
}
    
@keyframes flowerTurn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* restructuration HTML avant de faire les apparitions */
/* section histoire */
#story{
	padding-top: 50px;
}

.story__article::before{
	top: 12em;
}

.story__article::after{
	top: 5em;
}

/* suppression du background */
.title_story{
	background: none;
	position: absolute;
	top: 40;
}

/* ajout manuel de l'image en background */
.background_story{
	position: relative;
	top: 20px;
}

/* supression tige + feuille et fleur */
.story h2::before, .story h2::after{
	display: none;
}

/* ajout manuel de la tige + feuille et fleur */
.feuille_story{
	position: absolute;
	left: 0;
	top: 150px;
}

.fleur_story{
	position: absolute;
	left: 43px;
	top: 28em;
	animation : flowerTurn 12s linear infinite;
}

/* section personnage */
/* suppression du background */
.story #characters h3{
	background-image: none;
	position: relative;
	margin-top: 65px;
}

/* ajout manuel de l'image en background */
.background_perso{
	position: absolute;
	left: -15px;
	margin-top: 65px;
}

/* section lieu */
/* suppression du background */
.story #place h3{
	background-image: none;
	position: relative;
}

/* ajout manuel de l'image en background */
.background_lieu{
	position: absolute;
	bottom: 329px;
	left: 95px;
}

/* section studio */
/* suppression du background */
#studio h2{
	background: none;
	position: absolute;
	right: 375px;
	top: 25px;
}

/* ajout manuel de l'image en background */
.background_studio{
	position: absolute;
	right: 440px;
	top: 45px;
}

/* suppression des fleurs */
#studio h2::before, #studio h2::after{
	display: none;
}

/* ajout manuel des fleurs */
.left_flower_studio{
	margin-left: -115px;
	animation : flowerTurn 12s linear infinite;
}

.right_flower_studio{
	position: absolute;
	right: 50px;
	top: 95px;
	animation : flowerTurn 12s linear infinite;
}

#studio{
	padding-top: 75px;
}

/* apparition au scroll des titres */
.title_anim {
	opacity: 0;
	transform: translateY(-30px);
}

.title_anim.active{
	opacity:1;
	transform: translateY(0);
	transition: 1.7s;
}

/* AJOUT DE MON MENU BURGER */

.nav_burger {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	top : -100%;
	padding-top: 60px;
	transition: all 1s ease;
	animation: upMenu 1s;
	overflow: hidden;
}

/* animation de fermeture du menu burger */
@keyframes upMenu{
	from {
		opacity: 1;
		transform: translate3d(0, 20%, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, 0, 0);
	}
}
  
.nav_burger a {
	text-decoration: none;
	font-size: 38px;
	color: black;
	display: block;
	transition: 0.3s;
	text-align: center;
}

.nav_burger ul a:hover {
	text-shadow: 0px 0px 14px #FF5C00;
}
  
.nav_burger ul {
	list-style-type: none;
	flex-direction: column;
	background-color: white;
}
  
.nav_burger.active {
	top: 0;
	right: 0;
	width: 100%;
	text-align: center;
	padding-top: 80px;
	animation: down 1s;
	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	background-color:#FFD5A2
}
  
.nav_burger .close {
	position: absolute;
	top: 30px;
	right: 65px;
	font-size: 36px;
	color: black;
}
  
.burger-icon span {
	display: block;
	width: 35px;
	height: 5px;
	background-color: black;
	margin: 6px 0;
}

#openBtn{
	position: absolute;
	top: 20px;
	right: 20px;
}

.site-title{
	z-index: 2;
}

.nav_burger ul li{
	top: 5px;
}

/* ajout des éléments visuels du menu burger */
.logo_burger{
	position: relative;
	top: 5px;
	filter: drop-shadow(0px 0px 26.0937px rgba(255, 92, 0, 0.6));
}

.orchid_burger{
	position: absolute;
	left: -55px;
	top: 120px;
	animation : flowerTurn 12s linear infinite;
}

.chat_bleu_burger{
	position: absolute;
	left: 360px;
	top: 180px;
	animation: floatCat 6s ease-in-out 0s infinite;
}

.marguerite_burger{
	position: absolute;
	top: 135px;
	right: 300px;
	animation : flowerTurn 12s linear infinite;
}

.random_flower_burger{
	position: absolute;
	top: 357px;
	right: -45px;
	animation : flowerTurn 12s linear infinite;
}

.flower_burger{
	position: absolute;
	top: 420px;
	left: 300px;
	animation : flowerTurn 12s linear infinite;
}

.chat_gris_burger{
	position: absolute;
	top: 430px;
	right: 390px;
	animation: floatCat 6s ease-in-out 0s infinite;
}

.chat_roux_burger{
	position: absolute;
	top: 620px;
	left: 130px;
	animation: floatCat 6s ease-in-out 0s infinite;
}

.hibiscus{
	position: absolute;
	bottom: -240px;
	right: -225px;
	animation : flowerTurn 12s linear infinite;
}

/* ajout de l'effet de flottement des chats */
@keyframes floatCat{
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
	100%{
		transform: translateY(0);
	}
}