/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:"Inter",sans-serif;

    color:#F5EFE4;

}

/* ==========================
   BACKGROUND
========================== */

body{

    background:url("../assets/images/background.png") center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;

    position:relative;

    overflow:hidden;

}

/* ==========================
   DARK OVERLAY
========================== */

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(5,8,6,.55),
        rgba(5,8,6,.72)
    );

}

/* ==========================
   HERO
========================== */

.hero{

    position:relative;

    z-index:2;

    width:100%;
    height:100vh;

    display:flex;

    justify-content:flex-start;

    align-items:center;

}

/* ==========================
   CONTENT
========================== */

.content{

    width:650px;

    margin-left:9%;

    text-align:center;

}

/* ==========================
   TITLE
========================== */

h1{

    font-family:"Cormorant Garamond",serif;

    font-size:86px;

    line-height:.95;

    font-weight:600;

    margin-bottom:35px;

    text-shadow:

    0 8px 30px rgba(0,0,0,.45);

}

/* ==========================
   DESCRIPTION
========================== */

.description{

    font-size:24px;

    line-height:1.8;

    color:#F2E8D7;

    opacity:.92;

    margin-bottom:45px;

}

/* ==========================
   SEPARATOR
========================== */

.separator{

    width:130px;

    height:2px;

    background:#CFA861;

    margin:0 auto 45px;

    border-radius:10px;

}

/* ==========================
   THANKS
========================== */

h2{

    font-family:"Cormorant Garamond",serif;

    color:#E5B45E;

    font-size:50px;

    line-height:1.15;

    font-weight:600;

    margin-bottom:22px;

}

/* ==========================
   SIGNATURE
========================== */

.signature{

    font-family:"Allura",cursive;

    font-size:68px;

    color:white;

    text-shadow:0 0 20px rgba(255,255,255,.12);

    margin-bottom:70px;

}

/* ==========================
   FOOTER TEXT
========================== */

.bottom-text{

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    letter-spacing:.5px;

    opacity:.95;

}

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

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

.content{

    width:90%;

    margin:auto;

}

h1{

    font-size:58px;

}

.description{

    font-size:20px;

}

h2{

    font-size:38px;

}

.signature{

    font-size:50px;

}

.bottom-text{

    font-size:26px;

}

}

/* ==========================
   APPARITION
========================== */

.fade-up{

    opacity:0;

    transform:translateY(35px);

    animation:fadeUp 1.4s ease forwards;

}

.fade-up:nth-child(1){

    animation-delay:.2s;

}

.fade-up:nth-child(2){

    animation-delay:.5s;

}

.fade-up:nth-child(3){

    animation-delay:.9s;

}

.fade-up:nth-child(4){

    animation-delay:1.2s;

}

.fade-up:nth-child(5){

    animation-delay:1.5s;

}

.fade-up:nth-child(6){

    animation-delay:1.8s;

}

.fade-up:nth-child(7){

    animation-delay:2.1s;

}

.fade-up:nth-child(8){

    animation-delay:2.4s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   LUEUR DU FEU
========================== */

body::after {
    content: "";

    position: fixed;

    right: 13%;
    bottom: -13%;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 181, 80, 0.24) 0%,
            rgba(255, 116, 32, 0.11) 38%,
            transparent 68%
        );

    opacity: 0.78;

    pointer-events: none;
    z-index: 1;

    animation:
        fireGlow 2.2s ease-in-out infinite;
}

@keyframes fireGlow {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}


/* ==========================
   COUCHES D'EFFETS
========================== */

.ember-layer,
.firefly-layer {
    position: fixed;
    inset: 0;
    z-index: 3;

    overflow: hidden;
    pointer-events: none;
}

.firefly {
    position: absolute;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(255, 230, 125, 1);

    box-shadow:
        0 0 10px rgba(255, 225, 110, 1),
        0 0 24px rgba(255, 183, 55, 0.65);

    animation:
        fireflyMove var(--life) ease-in-out forwards;
}


/* ==========================
   BRAISES
========================== */

.ember {
    position: absolute;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255, 243, 184, 1) 0%,
            rgba(255, 145, 39, 0.95) 38%,
            rgba(181, 56, 13, 0.55) 67%,
            transparent 78%
        );

    box-shadow:
        0 0 8px rgba(255, 117, 35, 0.7);

    animation:
        emberRise var(--duration) ease-out forwards;
}

@keyframes emberRise {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    14% {
        opacity: var(--opacity);
    }

    65% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(
                var(--drift),
                var(--rise)
            )
            scale(0.1);
    }
}


/* ==========================
   LUCIOLES
========================== */

.firefly {
    position: absolute;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(255, 222, 108, 0.95);

    box-shadow:
        0 0 7px rgba(255, 222, 108, 0.9),
        0 0 16px rgba(255, 191, 64, 0.45);

    animation:
        fireflyMove var(--life) ease-in-out forwards;
}

@keyframes fireflyMove {
    0% {
        opacity: 0;
        transform:
            translate(0, 0)
            scale(0.5);
    }

    18% {
        opacity: 0.75;
    }

    48% {
        opacity: 0.25;

        transform:
            translate(
                calc(var(--move-x) * 0.55),
                calc(var(--move-y) * 0.55)
            )
            scale(1);
    }

    72% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--move-x),
                var(--move-y)
            )
            scale(0.65);
    }
}


/* ==========================
   BOUTON DU SON
========================== */

.sound-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(229, 180, 94, 0.5);
    border-radius: 50%;

    color: #f5efe4;
    font-size: 1.15rem;

    background:
        rgba(5, 10, 7, 0.56);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
    transform: translateY(-3px);

    color: #e5b45e;
    border-color: #e5b45e;

    background:
        rgba(229, 180, 94, 0.1);
}

.sound-toggle.is-playing {
    color: #e5b45e;
    border-color: #e5b45e;

    box-shadow:
        0 0 20px rgba(229, 180, 94, 0.2);
}


/* ==========================
   APPARITION PROGRESSIVE
========================== */

.fade-up {
    opacity: 0;

    transform:
        translateY(28px);

    animation:
        fadeUp 1.15s ease forwards;
}

.fade-up:nth-child(1) {
    animation-delay: 0.2s;
}

.fade-up:nth-child(2) {
    animation-delay: 0.55s;
}

.fade-up:nth-child(3) {
    animation-delay: 0.85s;
}

.fade-up:nth-child(4) {
    animation-delay: 1.15s;
}

.fade-up:nth-child(5) {
    animation-delay: 1.5s;
}

.fade-up:nth-child(6) {
    animation-delay: 1.85s;
}

@keyframes fadeUp {
    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* ==========================
   VERSION MOBILE
========================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;

        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        background-position: 68% center;
        background-attachment: scroll;
    }

    .overlay {
        position: fixed;

        background:
            linear-gradient(
                rgba(4, 7, 5, 0.68),
                rgba(4, 7, 5, 0.82)
            );
    }

    .hero {
        min-height: 100svh;
        height: auto;

        padding:
            max(42px, env(safe-area-inset-top))
            20px
            max(90px, env(safe-area-inset-bottom));

        justify-content: center;
        align-items: center;
    }

    .content {
        width: min(100%, 520px);
        margin: 0 auto;

        text-align: center;
    }

    h1 {
        font-size: clamp(3rem, 13vw, 4.7rem);
        line-height: 0.92;

        margin-bottom: 28px;

        text-shadow:
            0 6px 25px rgba(0, 0, 0, 0.62);
    }

    .description {
        max-width: 440px;
        margin:
            0 auto
            30px;

        font-size: clamp(1rem, 4.5vw, 1.2rem);
        line-height: 1.6;
    }

    .separator {
        width: 90px;
        margin:
            0 auto
            30px;
    }

    h2 {
        font-size: clamp(2rem, 8.5vw, 3rem);
        line-height: 1.08;

        margin-bottom: 22px;
    }

    .signature {
        font-size: clamp(3rem, 13vw, 4.2rem);

        margin-bottom: 38px;
    }

    .bottom-text {
        font-size: clamp(1.45rem, 6vw, 2rem);
        line-height: 1.15;
    }

    body::after {
        right: -24%;
        bottom: -10%;

        width: 520px;
        height: 520px;

        opacity: 0.7;
    }

    .sound-toggle {
        right: 16px;
        bottom:
            max(
                16px,
                env(safe-area-inset-bottom)
            );

        width: 44px;
        height: 44px;

        font-size: 1rem;
    }

    .ember-layer,
    .firefly-layer {
        position: fixed;
    }
}