/* FONT ============================================================== */

@font-face {
    font-family: 'Ostrich Sans Heavy';
    src: url('assets/fonts/ostrichsans-heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aguardiente';
    src: url('assets/fonts/aguardiente.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

#eventContent {
    font-family: 'Ostrich Sans Heavy', sans-serif;
}

/* ============================================================== FONT */


/* VARIABLES ========================================================= */

body {
    --margin-size: 2rem;
    --margin-size-mobile: 1rem;
    --light-green: #99d98d;
    --medium-green: #7BC46A;
    --medium-green-dark: #70BA5F;
    --green: #1b4a18;
    --green-dark: #112E0F;
    --white: #fff;
    --orange: #ffaa1c;
}
/* ========================================================= VARIABLES */


/* MODEL DESIGN OVERRIDE ============================================= */
/*
#main-content{
    background-color: var(--light-green);
}*/
#eventContent button,
#eventContent a,
#eventContent input {
    outline: none;
}

/* ============================================= MODEL DESIGN OVERRIDE  */



/* #eventContent ============================================================= */

/* Default order */
#eventContent > *, #eventContent .content-container > * {
    order: 0;
}

/* General layout */
#eventContent{
    display: flex;
    justify-content: space-evenly;
    position: relative;
    
    height: calc(100vh - (var(--margin-size)) * 2);
    margin-left: var(--margin-size);
    margin-right: var(--margin-size);
}

/* General style */
#eventContent{
    background-color: var(--light-green);
}

#eventContent .content-container{
    display: flex;
    max-width: 1220px;
    margin: 0 auto;
    position: relative;
}

/* =============================================================  #eventContent */


/* A ================================================================= */

a{
    text-decoration: none;
    cursor: pointer;
}

/* ================================================================ A */


/* LEAVES LEFT ====================================================== */
/* + Animation */

/* General layout */
.left-leaves{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Styles common to all leaves */
.left-leaves img {
    position: absolute;
    height: auto;
    animation: leaf-move 6s infinite ease-in-out;
}

/*  Animation of leaves with alternating rotation */
@keyframes leaf-move {
    0% {
        transform: translateX(0) rotate(0deg); /* Initial position */
    }
    25% {
        transform: translateX(-2.5px) rotate(3deg); /* Rotate to the right */
    }
    50% {
        transform: translateX(-4.5px) rotate(0deg); /* Back to centre */
    }
    75% {
        transform: translateX(-2.5px) rotate(-3deg); /* Rotate to the left */
    }
    100% {
        transform: translateX(0) rotate(0deg); /* Return to initial position */
    }
}

/* Specific styles by ID with adjusted animation */
#leafTop_1 { width: 35px; top: 16px; animation-duration: 5s; }
#leafTop_2 { width: 74px; top: 58px; animation-duration: 7s; }
#leafMiddle_3 { width: 117px; top: 95px; animation-duration: 6s; }
#leafBottom_4 { width: 104px; top: 199px; animation-duration: 10s; }
#leafBottom_5 { width: 61px; top: 365px; animation-duration: 8s; }

/* ====================================================== LEAVES LEFT */


/* BUTTONS ========================================================= */

/* General layout */
.btn-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: auto 0;
    z-index: 200;
    position: relative;
    margin-left: var(--margin-size);
}

.my-btn {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0.8rem 2.5rem 0.5rem;
    cursor: pointer;
}

.my-btn:not(:last-child) span {
    width: 310px;
}

.my-btn:last-child span{
    width: 400px;
}

.my-btn span{
    display: block;
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 1.5rem;
}

.my-btn img {
    position: absolute;
    pointer-events: none;
}

.my-btn.btn-radius{
    border-radius: 30px !important;
}

/*General style*/
.my-btn{
    box-shadow: 0 11px 20px 0 rgba(0,0,0,0.15);
}

.my-btn span {
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 1.5rem;
    text-decoration: none;
}

/* Primary button */
.my-btn.btn-primary {
    background-color: var(--green);
    border: none;
}

.my-btn.btn-primary span {
    color: var(--white);
}

.my-btn.btn-primary:hover{
    background-color: var(--green-dark);
}

/* Secondary button */
.my-btn.btn-secondary {
    background-color: var(--medium-green);
    border: 1.5px solid var(--green);
}

.my-btn.btn-secondary span {
    color: var(--green);
}

.my-btn.btn-secondary:hover{
    background-color: var(--medium-green-dark);
}

/*Mark the separation between the two levels of buttons*/
.my-btn:nth-child(5){
    margin-bottom: 2rem;
}

/* Image positioning */
#natureVillage{ top: -2.4rem; }
#walks{ top: -1rem; right: 4rem; }
#workshops{ top: -0.25rem; left: 2rem; }
#showing{ top: -0.5rem; right: -1rem; }
#expositions{ top: -0.25rem; left: 0; }
#ecoEvent{ top: -0.5rem; right: -0.5rem; }
#natureActivities{ bottom: -0.1rem; left: 1rem; }

/* Image "Les expositions" */
.my-btn:nth-child(5)::before{
    content: '';
    position: absolute;
    width: 14%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 3rem;
    background: var(--green);
    clip-path: polygon(60% 0, 100% 0, 60% 100%, 0 100%);
}

.my-btn:nth-child(5):hover::before {
    background: var(--green-dark);
}

/* ========================================================= BUTTONS */


/* ILLUSTRATION ==================================================== */

/* General layout */
.illustration{
    position: relative;
    z-index: 0;
    margin: 0 10rem 0 -6rem;
}

.illustration img{
    width: 100%;
    height: auto;
    max-height: calc(100vh - (var(--margin-size)) * 2);
}

/* ==================================================== ILLUSTRATION */


/* LEAVES RIGHT ==================================================== */
/* + Animation */

/* General layout */
.right-leaves {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Styles common to all leaves */
.right-leaves img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: auto;
    animation: leaf-right-move 6s infinite ease-in-out;
}

/*  Animation of leaves with alternating rotation */
@keyframes leaf-right-move {
    0% {
        transform: translateX(0) rotate(0deg); /* Initial position */
    }
    25% {
        transform: translateX(2.5px) rotate(3deg); /* Rotate to the right */
    }
    50% {
        transform: translateX(4.5px) rotate(0deg); /* Back to centre */
    }
    75% {
        transform: translateX(2.5px) rotate(-3deg); /* Rotate to the left */
    }
    100% {
        transform: translateX(0) rotate(0deg); /* Return to initial position */
    }
}

/* Specific styles by ID with adjusted animation */
#leafTopRight_1 { width: 110px; bottom: 373px; animation-duration: 7s; }
#leafMiddleRight_2 { width: 162px; bottom: 252px; animation-duration: 9s; }
#leafMiddleRight_3 { width: 168px; bottom: 101px; animation-duration: 6s; }
#leafBottomRight_4 { width: 83px; bottom: 17px; animation-duration: 8s; }

/* ==================================================== LEAVES RIGHT */


/* EVENT DETAILS =================================================== */

/* General layout */
.event-details{
    position: absolute;
    bottom: 2rem;
    right: 2.5rem;
    width: 100%;
    z-index: 100;
}

.event-details-items{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}

/* Font : Date & Location */
.event-details span{
    font-family: 'Aguardiente', sans-serif;
    text-transform: uppercase;
}

/* Style : Date & Location */
.event-details span:first-of-type {
    position: relative;
    font-size: 32px;
    color: var(--white);
    padding: 0 1.5rem;
    z-index: 1;
    overflow: hidden;
}

.event-details span:last-of-type {
    font-size: 29px;
    color: var(--green);
}

.event-details img{
    width: 424px;
    height: auto;
}

/* =================================================== EVENT DETAILS */


/* MODE TABLET ===================================================== */

@media screen and (min-width: 765px) and (max-width: 1024px){
    .illustration{
        height: auto;
        width: 60%;
    }
}

/* ===================================================== MODE TABLET */


/* MODE MOBILE ===================================================== */

@media screen and (max-width: 1024px) {

    /* #eventContent */
    #eventContent {
        height: auto;
        margin: 0
        flex-wrap: wrap;
        justify-content: center;
        padding: 1.5rem;
        margin-left: var(--margin-size-mobile);
        margin-right: var(--margin-size-mobile);
    }

    #eventContent .content-container {
        flex-wrap: wrap;
        justify-content: center;        
    }

    #eventContent > .left-leaves    { order: 1; }
    #eventContent > .content-container .illustration   { order: 2; }
    #eventContent > .right-leaves   { order: 3; }
    #eventContent > .content-container .btn-group      { order: 4; }
    #eventContent > .content-container .event-details  { order: 5; }
    /* #eventContent */



    /* Leaves absolute position */
    .right-leaves,
    .left-leaves{
        position: absolute;
        z-index: 1;
    }

    .right-leaves{
        right: 0;
        top: 15rem;
    }

    .left-leaves{
        left: 0;
        top: 0;
    }/* Leaves absolute position */

    /* Left Leaves (sizes & positions) */
    #leafTop_1 { width: 22px; height: auto; top: 11px; }
    #leafTop_2 { width: 47px; height: auto; top: 37.5px; }
    #leafMiddle_3 { width: 77px; height: auto; top: 61px; }
    #leafBottom_4 { width: 67.5px; height: auto; top: 128px; }
    #leafBottom_5 { width: 39px; height: auto; top: 237px; }
    /* Leaf left */

    /* Button */
    .btn-group{
        z-index: 1000;
        margin-left: 0;
    }

    .my-btn{
        padding: 0.8rem 0 0.5rem;
    }

    .my-btn:not(:last-child) {
        width: 100%;
    }
    .my-btn:last-child {
        width: 100%;
    }

    .my-btn:last-child span{
        width: 100%;
        padding: 0 3.5rem;
    }

    #walks{ right: 2.5rem; }
    #expositions{ top: -0.25rem; left: -0.75rem; }

    .my-btn:nth-child(5)::before{;
        left: 2.6rem;
    }/* Button */

    /* Illustrations */
    .illustration{
        margin: 0 -1rem .5rem 2rem;
    }
    .illustration img {
        height: auto;
        width: 100%;
    }
    /* Illustrations */


    /* Right Leaves (sizes & positions) */
    .right-leaves{ height: 350px;}

    #leafTopRight_1 { width: 66px; height: auto; bottom: 220px; top: auto;}
    #leafMiddleRight_2 { width: 96px; height: auto; bottom: 149px; }
    #leafMiddleRight_3 { width: 100px; height: auto; bottom: 60px; }
    #leafBottomRight_4 { width: 50px; height: auto; bottom: 9px; }
    /* Right Leaf */

    /* Event details */
    .event-details{
        position: relative;
        bottom: 0;
        right: 0;
        gap: .5rem;
        padding: 2.5rem 0 1rem;
    }

    .event-details span:first-of-type {
        font-size: 23px;
        padding: 0 1rem;
    }

    .event-details span:last-of-type {
        font-size: 21px;
    }/* Event details */
}

/* X-small screen */
@media screen and (max-width: 576px) {
    .event-details img{
        width: 90%;
        height: auto;
    }
}


/* ===================================================== MODE MOBILE */



/* ANIMATIONS ========================================================= */

/* ---------- Button (User interaction) ---------- */

/* Button hover animation */
.my-btn:hover {
    animation: lift-up 0.3s ease forwards;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Keyframes for lift-up animation */
@keyframes lift-up {
    0% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
    60% { transform: translateY(-6px); }
    100% { transform: translateY(-4px); }
}

/* Button click effect */
.my-btn:active {
    transform: scale(0.96);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Transition of images in buttons */
.my-btn img {
    transition: transform 0.4s ease;
}

/* Hover animation */
.my-btn:hover img {
    transform: rotate(-5deg) scale(1.05);
}

/* Button appearance animation */
.btn-group .my-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
    animation-delay: calc(0.2s * var(--i, 1));  /* Dynamically calculate delay */
}

/* Keyframes for the appearance animation */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------- Event details ---------------- */

.event-details {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

/* The children of .event-details (img and span) share the same animations */
.event-details img,
.event-details span {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease-out forwards;
}

.event-details img {
    animation-delay: 0.4s;
}

.event-details span:nth-of-type(1) {
    animation-delay: 0.6s;
}

.event-details span:nth-of-type(2) {
    animation-delay: 0.8s;
}

/* Keyframes for fadeUp */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating elements */
.floating-wrapper {
    animation: float 4s ease-in-out infinite;
}

/* Keyframes for the floating effect */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Pseudo-element for the animated background */
.event-details span:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--orange);
    z-index: -1;
    animation: bgFill 1s cubic-bezier(0.6, 0, 0.2, 1) forwards;
    animation-delay: 1s;
}

/* Animation for the background "trace" */
@keyframes bgFill {
    to {
        width: 100%;
    }
}

/* ========================================================= ANIMATIONS */