/* Animation des fleurs */
@keyframes rotate-flower {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Animation de FadeIn */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown2 {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
/* Effet de flottement */
@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(10px, -12px);
  }
  40% {
    transform: translate(-14px, 8px);
  }
  60% {
    transform: translate(8px, 14px);
  }
  80% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
main {
  overflow-x: hidden;
}

.story #place {
  background-image: url("./assets/images/Studio_Koukaki-image_place.png");
  position: relative;
}
@media (max-width: 345px) {
  .story #place h3 {
    font-size: 2rem;
  }
}

.decor {
  position: absolute;
  z-index: -1;
}
.decor img {
  display: block;
  width: auto;
  height: auto;
}
@media (max-width: 920px) {
  .decor img {
    display: none;
  }
}

.decor--sunflower-leaves {
  position: absolute;
  left: 0;
  top: 7em;
  z-index: -1;
}

.decor--sunflower {
  position: absolute;
  left: 3em;
  top: 25.5em;
}

.decor--hibiscus-leaves {
  position: absolute;
  left: 50%;
  top: 7em;
  z-index: -1;
}

.decor--hibiscus {
  position: absolute;
  left: calc(50% + 414px);
  top: 1em;
}

.story #characters {
  margin: 0 !important;
}

.story h2::after,
.story h2::before {
  content: none !important;
  display: none !important;
}

.nomination {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 2em;
  background-color: #fff5e9;
}
.nomination h3 {
  font-size: 2em;
  margin-bottom: 2em;
  text-align: center;
}
.nomination img {
  max-width: 100%;
  height: auto;
}

.cloud {
  position: absolute;
  top: 72px;
  left: 72%;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.02s linear;
  pointer-events: none;
  z-index: -1;
  filter: blur(1em);
}

.cloud2 {
  top: 250px;
  left: 57%;
}

@media (max-width: 470px) {
  #studio h2 {
    font-size: 2.5rem;
  }
}
@media (max-width: 392px) {
  #studio h2 {
    font-size: 2rem;
  }
}

footer {
  position: absolute;
  opacity: 1;
  animation-timing-function: ease-out;
  transform: translateY(200px);
  animation: fadeInUp 2s ease-out forwards;
}

.fade {
  opacity: 0;
}
.fade__Up {
  animation: fadeInUp 1.5s ease-out forwards;
}
.fade__Down {
  animation: fadeInDown 2s ease-out forwards;
}

.fadeUpTitre,
#studio > div::before,
.story__article::before {
  animation: fadeInUp 2s ease-out forwards;
}

.fadeDown {
  animation: fadeInDown2 2s;
}

.fade-on-scroll {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.4s ease-out;
}

.fade-on-scroll2 {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.4s ease-out 0.2s;
}

.fade-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-on-scroll2.is-visible2 {
  opacity: 1;
  transform: translateY(0);
}

.rotate,
.story h2::after,
.story__article::after,
#studio h2::before,
#studio h2::after,
.site-footer::after,
.site-footer::before,
.site-footer ul::after {
  position: absolute;
  animation: fadeInUp 2s ease-out forwards, rotate-flower 15s linear infinite 2s;
  transform-origin: center;
}

.story h2::after {
  position: absolute;
  animation: rotate-flower 15s linear infinite;
  transform-origin: center;
}

.rotate {
  position: absolute;
  animation: rotate-flower 15s linear infinite 2s;
  transform-origin: center;
}

.banner {
  background-image: none;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.banner__video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.banner__title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -10%;
}
.banner img {
  position: relative;
  z-index: 1;
  width: 100%;
}
.banner video {
  position: absolute;
  z-index: 0;
  height: 100%;
}
@media (max-width: 767px) {
  .banner {
    background-image: url("./assets/images/banner.png") !important;
  }
  .banner__video {
    display: none;
  }
}

.floating {
  animation: fadeInUp 2s ease-out forwards, float 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 2s;
}

body.no-scroll {
  overflow: hidden;
  position: relative;
  width: 100%;
}

main {
  position: relative;
  top: 80px !important;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #FFD5A2;
  z-index: 1000;
  max-width: 1440px;
  left: 50%;
  transform: translateX(-50%);
}
header .burger {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  z-index: 1001;
}
header .burger span {
  display: block;
  width: 25px;
  height: 3px;
  background: black;
  margin: 5px auto;
  transition: all 0.3s ease;
}
header .burger.open span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
header .burger.open span:nth-child(2) {
  display: none;
}
header .burger.open span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}
header .site-title {
  font-size: 21px;
  font-weight: 700;
  text-decoration: none;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@media (max-width: 600px) {
  header .site-title {
    font-size: 1.1rem;
  }
}
@media (max-width: 400px) {
  header .site-title {
    font-size: 0.75rem;
  }
}

.menu {
  position: fixed;
  top: 80px;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  height: calc(100vh - 80px);
  background: #FFF5E9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 999;
  max-width: 1440px;
  overflow: hidden;
}
.menu.open {
  opacity: 1;
  pointer-events: auto;
}
.menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
}
.menu ul li {
  font-size: 2rem;
  margin: 1rem 0;
  animation: fadeInUp 1s ease forwards;
}
.menu ul li a {
  text-decoration: none;
  color: black;
  font-size: 64px;
}
.menu ul li a:hover {
  color: black;
  text-shadow: 0 0 15px #FF5C00;
}
@media (max-width: 620px) {
  .menu ul li a {
    font-size: 3.5rem;
  }
}
@media (max-width: 470px) {
  .menu ul li a {
    font-size: 3rem;
  }
}
@media (max-width: 400px) {
  .menu ul li a {
    font-size: 2.5rem;
  }
}
.menu .flower {
  position: absolute;
  animation: rotate-flower 15s linear infinite;
}
.menu .flower.hibiscus {
  top: 64%;
  left: 80%;
  height: 626px;
}
.menu .flower.sunflower {
  top: 12%;
  left: 80%;
}
.menu .flower.random {
  top: 41%;
  left: 97%;
  height: 75px;
}
.menu .flower.orchid {
  top: 11%;
  left: -4%;
}
.menu .flower.pink {
  top: 54%;
  left: 19%;
}
@media (max-width: 800px) {
  .menu .flower {
    display: none;
  }
}
.menu .cat {
  position: absolute;
  animation: float 9s ease-in-out infinite;
}
.menu .cat.orange {
  bottom: 10%;
  left: 10%;
}
.menu .cat.blue {
  top: 16%;
  left: 17%;
}
.menu .cat.grey {
  top: 50%;
  right: 10%;
}
@media (max-width: 800px) {
  .menu .cat {
    display: none;
  }
}
.menu .studio {
  position: absolute;
  bottom: 3%;
}
.menu .imgKoukaki {
  position: absolute;
  top: 1%;
}

#characters {
  display: flex;
  flex-direction: column;
}
#characters div {
  margin-left: 2.5%;
}
@media (max-width: 1150px) {
  #characters div {
    margin-left: 1.5%;
  }
}
@media (max-width: 890px) {
  #characters div {
    margin-left: 1%;
  }
}
#characters h3 {
  margin-top: 4%;
  margin-right: 55%;
}
@media (max-width: 1350px) {
  #characters h3 {
    margin-right: 46%;
  }
}
@media (max-width: 1120px) {
  #characters h3 {
    margin-right: 36%;
  }
}
@media (max-width: 920px) {
  #characters h3 {
    margin-right: 30%;
  }
}
@media (max-width: 830px) {
  #characters h3 {
    margin-right: 23%;
  }
}
@media (max-width: 700px) {
  #characters h3 {
    margin-right: 0%;
  }
}

.characters-carousel {
  text-align: center;
  padding: 2em 0;
}
.characters-carousel .swiper {
  width: 100%;
  max-width: 1440px;
  margin: 20px;
  padding: 2em 0;
}
.characters-carousel .swiper-wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.characters-carousel .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px !important;
}
.characters-carousel .swiper-slide img {
  width: 400px !important;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 400px;
}
@media (max-width: 1150px) {
  .characters-carousel .swiper-slide img {
    width: 350px !important;
    height: 350px;
  }
}
@media (max-width: 890px) {
  .characters-carousel .swiper-slide img {
    width: 300px !important;
    height: 300px;
  }
}
@media (max-width: 600px) {
  .characters-carousel .swiper-slide img {
    width: 250px !important;
    height: 250px;
  }
}
.characters-carousel .swiper-slide p {
  margin-top: 1em;
  font-family: monospace;
}/*# sourceMappingURL=style.css.map */