/*
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 simplifié pour le projet Koukaki
Version: 1.0
*/

:root {
    --bg: #fff5e9;
    --text: #3d3d3d;
    --orange: #ff5c2f;
    --purple: #7b2cff;
    --header: #ffd5a2;
}

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
}

.site-main,
.story,
#place,
#characters {
    overflow: hidden;
}

.site-header {
    overflow: visible;
}

section,
article {
    scroll-margin-top: 80px;
}

/* Header */
/* Header */
.main-navigation {
    position: relative;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 100px;
    padding: 0 28px;
    background-color: #ffd5a2;
    overflow: visible;
}

.main-navigation .site-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.main-navigation .site-title a {
    color: #000;
    text-decoration: none;
}

.burger {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1002;
}

.burger span,
.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #000;
    transition: transform 0.35s ease, top 0.35s ease, opacity 0.35s ease;
}

.burger span {
    top: 50%;
    transform: translateY(-50%);
}

.burger span::before {
    top: -9px;
}

.burger span::after {
    top: 9px;
}

.burger.active span {
    background: transparent;
}

.burger.active span::before {
    top: 0;
    transform: rotate(45deg);
}

.burger.active span::after {
    top: 0;
    transform: rotate(-45deg);
}

.main-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 100px);
    background: #fff5e9;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
    overflow: hidden;
}

.main-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.menu-logo {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.menu-logo img {
    display: block;
    width: 112px;
    height: auto;
}

.menu-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -38%);
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.menu-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.menu-nav li {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.menu-nav li + li {
    margin-top: 0;
}

.menu-nav a {
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-size: clamp(2rem, 2.8vw, 2.9rem);
    line-height: 1.08;
}

.menu-nav li:nth-child(3) a {
    color: #b86a3f;
    text-shadow: 0 0 4px rgba(184, 106, 63, 0.18);
}

.menu-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.menu-cat,
.menu-flower {
    position: absolute;
    display: block;
    height: auto;
}

.menu-cat-blue {
    width: 52px;
    top: 86px;
    left: 92px;
}

.menu-cat-orange {
    width: 54px;
    left: 28px;
    bottom: 26px;
}

.menu-cat-black {
    width: 58px;
    right: 86px;
    top: 250px;
}

.menu-flower-1 {
    width: 78px;
    top: 44px;
    left: -28px;
}

.menu-flower-2 {
    width: 96px;
    top: 54px;
    right: 38px;
}

.menu-flower-3 {
    width: 170px;
    right: -42px;
    bottom: -34px;
}

.menu-flower-4 {
    width: 30px;
    left: 56px;
    top: 202px;
}

.menu-flower-5 {
    width: 28px;
    right: -8px;
    top: 176px;
}

/* Hero */
.banner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto 100px;
}

.banner #background-video {
    display: block;
    width: 100%;
    height: auto;
}

.banner .container-img {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.banner .container-img img {
    display: block;
    max-width: min(50vw, 700px);
    height: auto;
    margin: 0 auto;
}

.sticky {
    position: static;
    top: auto;
}

@keyframes float {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-12px, -8px) rotate(3deg); }
    50%  { transform: translate(8px, -14px) rotate(-3deg); }
    75%  { transform: translate(-10px, 10px) rotate(2deg); }
    100% { transform: translate(0, 0); }
}

.float {
    animation: float 10s ease-in-out infinite;
}

/* Fade in */
.entrance {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.entrance.active {
    opacity: 1;
    transform: translateY(0);
}

/* Titres */
.animationTitre {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

#nogap {
    gap: 0;
}

@keyframes animationTitre {
    from {
        opacity: 0;
        transform: translateY(70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animationTitre__mot {
    opacity: 0;
    display: inline-block;
    animation: animationTitre 0.9s ease forwards;
}

.animationTitre__mot--0 { animation-delay: 0.2s; }
.animationTitre__mot--1 { animation-delay: 0.4s; }
.animationTitre__mot--2 { animation-delay: 0.6s; }
.animationTitre__mot--3 { animation-delay: 0.8s; }
.animationTitre__mot--4 { animation-delay: 1s; }

/* Story */
.story__article {
    max-width: 900px;
    margin: 0 auto 4rem;
}

/* Characters */
#characters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 4rem 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

#characters .characters-title {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    margin: 0 0 2rem 8%;
    padding: 0 2.2rem;
    min-height: 86px;
    position: relative;
    z-index: 10;
    color: #fff;
    line-height: 1;
    text-align: left;
    background: url("./assets/img/orange_title_bg.png") left center / 100% 100% no-repeat;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

#characters .characters-title span,
#characters .characters-title .animationTitre__mot {
    display: inline-block;
    background: none;
    box-shadow: none;
    color: inherit;
}

#characters .characters-swiper {
    width: 100%;
    position: relative;
    z-index: 1;
}

#characters .swiper {
    width: 100%;
    overflow: hidden;
    padding: 1rem 0 3rem;
}

#characters .swiper-wrapper {
    align-items: flex-start;
}

#characters .swiper-slide {
    width: 320px !important;
}

#characters .swiper-slide figure {
    margin: 0;
    text-align: center;
}

#characters .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

#characters .swiper-slide figcaption {
    margin-top: 1rem;
}

/* Place */
.story #place {
    position: relative;
    min-height: 699px;
    background-image: url("./assets/img/studio_koukaki-image_place.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 4rem 2rem;
}

.place__content {
    max-width: 450px;
    position: relative;
    z-index: 2;
}

.story #place .big_cloud,
.story #place .little_cloud {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    filter: blur(8px);
}

.story #place .big_cloud {
    background-image: url("./assets/img/big_cloud.png");
    width: 316px;
    height: 122px;
    top: 70px;
    right: 120px;
}

.story #place .little_cloud {
    background-image: url("./assets/img/little_cloud.png");
    width: 142px;
    height: 55px;
    top: 220px;
    right: 420px;
}

#studio h2 {
    justify-content: center;
}

/* Animations fleurs uniquement */
@keyframes rotate-flower {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.story h2::after,
.story__article::after,
#studio h2::before,
#studio h2::after,
.site-footer::before,
.site-footer::after,
.site-footer ul::after {
    animation: rotate-flower 30s linear infinite;
    will-change: transform;
}

.story__article::after { transform-origin: 94px 94px; }
.story h2::after       { transform-origin: 77px 77px; }
#studio h2::after      { transform-origin: 54px 54px; }
#studio h2::before     { transform-origin: 101px 100px; }
.site-footer::before   { transform-origin: 77px 77px; }
.site-footer::after    { transform-origin: 86px 84px; }
.site-footer ul::after { transform-origin: center; }

/* Responsive */
@media (max-width: 920px) {
    .story #place .big_cloud {
        right: 40px;
    }

    .story #place .little_cloud {
        right: 240px;
    }
}

@media (max-width: 700px) {
    .main-menu a {
        font-size: 2.4rem;
    }

    .story #place .big_cloud,
    .story #place .little_cloud {
        display: none;
    }

    .swiper-slide {
        width: 240px !important;
    }

    .banner .container-img img {
        max-width: 80vw;
    }
}