/* css/organic-boost-animation.css */

.organic-boost-animation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    width: 100%;
    height: 160px;
    font-family: 'Lato', sans-serif;
    position: relative;
}

.calendar-area {
    display: flex;
    gap: 10px;
}

.week-box {
    width: 50px;
    height: 75px;
    border: 2px solid #E9E7FF; /* Lavande pâle */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    padding-top: 5px;
    box-sizing: border-box;
}

.week-box .comment-emoji,
.week-box .week-label { /* State initial pour les éléments animés */
    opacity: 0;
    /* transform: scale(0.5); */ /* Removed for gentler fade */
}

.week-box .comment-emoji {
    font-size: 24px;
}

.week-label {
    font-size: 12px;
    color: #7C89FF; /* Violet-bleu */
    font-weight: bold;
    margin-top: 5px;
}

/* Animations de cycle pour chaque semaine (emoji + label) */
.organic-boost-animation .week-box:nth-child(1) .comment-emoji,
.organic-boost-animation .week-box:nth-child(1) .week-label {
    animation: week1-cycle 4s ease-in-out infinite;
}
.organic-boost-animation .week-box:nth-child(2) .comment-emoji,
.organic-boost-animation .week-box:nth-child(2) .week-label {
    animation: week2-cycle 4s ease-in-out infinite;
}
.organic-boost-animation .week-box:nth-child(3) .comment-emoji,
.organic-boost-animation .week-box:nth-child(3) .week-label {
    animation: week3-cycle 4s ease-in-out infinite;
}

@keyframes week1-cycle {
    0%    { opacity: 0; } /* Initial et reset */
    12.5% { opacity: 0; } /* 0.5s, début apparition */
    25%   { opacity: 1; }   /* 1.0s, apparu */
    87.5% { opacity: 1; }   /* 3.5s, début disparition */
    100%  { opacity: 0; } /* 4.0s, disparu */
}

@keyframes week2-cycle {
    0%    { opacity: 0; }
    37.5% { opacity: 0; } /* 1.5s, début apparition */
    50%   { opacity: 1; }   /* 2.0s, apparu */
    87.5% { opacity: 1; }   /* 3.5s, début disparition */
    100%  { opacity: 0; }
}

@keyframes week3-cycle {
    0%    { opacity: 0; }
    62.5% { opacity: 0; } /* 2.5s, début apparition */
    75%   { opacity: 1; }   /* 3.0s, apparu */
    87.5% { opacity: 1; }   /* 3.5s, début disparition */
    100%  { opacity: 0; }
}

.boost-bar-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.boost-bar-track {
    width: 25px;
    height: 100px;
    background-color: #E9E7FF; /* Lavande pâle */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
}

.boost-bar-fill {
    width: 100%;
    height: 0%;
    background-color: #7C89FF; /* Violet-bleu */
    border-radius: 12px;
}

.organic-boost-animation #meta-boost-fill {
    animation: fill-boost-bar 4s ease-in-out infinite;
}

@keyframes fill-boost-bar {
    0%    { height: 0%; }
    12.5% { height: 0%; }   /* 0.5s, S1 commence à apparaître */
    25%   { height: 33%; }  /* 1.0s, S1 apparu */
    37.5% { height: 33%; }  /* 1.5s, S2 commence à apparaître */
    50%   { height: 66%; }  /* 2.0s, S2 apparu */
    62.5% { height: 66%; }  /* 2.5s, S3 commence à apparaître */
    75%   { height: 100%; } /* 3.0s, S3 apparu */
    87.5% { height: 100%; } /* 3.5s, Maintien avant reset */
    100%  { height: 0%; }   /* 4.0s, Reset */
}

.boost-bar-label {
    font-size: 12px;
    color: #7C89FF; /* Violet-bleu */
    font-weight: bold;
}

/* Nouveau groupe pour titre et calendrier */
.calendar-title-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le titre et le calendrier horizontalement */
    gap: 10px; /* Espace entre le titre et le calendrier */
}

/* Styles pour la zone de titre dynamique */
.dynamic-title-area {
    height: 30px; /* Hauteur pour le texte */
    position: relative; /* Pour positionner les spans de texte absolus */
    /* margin-bottom: 15px; */ /* Géré par le gap du parent .calendar-title-group */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dynamic-title-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #000B10; /* Noir profond, ou #7C89FF si vous préférez */
    opacity: 0; /* Caché par défaut, géré par l'animation */
    text-align: center;
}

.organic-boost-animation .text-phase-1 {
    animation: animate-title-phase-1 4s ease-in-out infinite;
}

.organic-boost-animation .text-phase-2 {
    animation: animate-title-phase-2 4s ease-in-out infinite;
}

.organic-boost-animation .text-phase-3 {
    animation: animate-title-phase-3 4s ease-in-out infinite;
}

@keyframes animate-title-phase-1 {
    0%    { opacity: 0; }   /* Démarre caché */
    12.5% { opacity: 1; }   /* Apparaît avec S1 (0.5s) */
    37.5% { opacity: 0; }   /* Disparaît quand S2 commence (1.5s) */
    100%  { opacity: 0; }
}

@keyframes animate-title-phase-2 {
    0%    { opacity: 0; }
    37.5% { opacity: 0; }   /* Caché jusqu'à S2 (1.5s) */
    50%   { opacity: 1; }   /* Apparaît avec S2 (2.0s) */
    62.5% { opacity: 0; }   /* Disparaît quand S3 commence (2.5s) */
    100%  { opacity: 0; }
}

@keyframes animate-title-phase-3 {
    0%    { opacity: 0; }
    62.5% { opacity: 0; }   /* Caché jusqu'à S3 (2.5s) */
    75%   { opacity: 1; }   /* Apparaît avec S3 (3.0s) */
    87.5% { opacity: 0; }   /* Disparaît à la fin du cycle d'affichage des semaines (3.5s) */
    100%  { opacity: 0; }
}