/* ---------- Statues égyptiennes ---------- */

.statue {
    position: absolute;
    bottom: calc(var(--u) * 27);
    z-index: 1;
    height: calc(var(--u) * 650);
    width: auto;
    max-width: none;
    pointer-events: none;
}

.statue--left {
    left: calc(var(--u) * -40);
    animation: statue-left 1s .15s both cubic-bezier(.2, .8, .3, 1);
}

.statue--right {
    right: calc(var(--u) * -36);
    animation: statue-right 1s .15s both cubic-bezier(.2, .8, .3, 1);
}

/* ---------- Accueil ---------- */

.page-home .main {
    justify-content: center;
    padding: calc(var(--u) * 10) 0 calc(var(--u) * 124);
}

.home {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home > * {
    animation: rise .7s both cubic-bezier(.2, .8, .3, 1);
}

.home-logo {
    width: calc(var(--u) * 205);
    animation-delay: .1s;
}

.home-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--u) * 6);
    color: var(--green);
    font-weight: 600;
    line-height: .92;
    text-shadow: 0 0 calc(var(--u) * 18) rgb(255 246 220 / .9);
    animation-delay: .2s;
}

.home-title-small {
    font-size: calc(var(--u) * 36);
}

.home-title-big {
    font-size: calc(var(--u) * 62);
    line-height: .9;
}

.home-movie {
    width: calc(var(--u) * 215);
    margin-top: calc(var(--u) * 6);
    animation-delay: .3s;
}

.home-date {
    width: calc(var(--u) * 190);
    margin-top: calc(var(--u) * 6);
    animation-delay: .35s;
}

.home-cta {
    width: calc(var(--u) * 190);
    margin-top: calc(var(--u) * 10);
    animation: rise .7s .45s both cubic-bezier(.2, .8, .3, 1), pulse 2.4s 2s ease-in-out infinite;
}

.home-cta:hover {
    animation-play-state: paused;
}

/* ---------- Écran d'ouverture ---------- */

.splash {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #f5b445 url("../images/background-f139fbdcf05e8f0705e566339dcfd0c9.webp") center bottom / cover no-repeat;
    cursor: pointer;
    /* Sans JS, l'écran s'efface seul */
    animation: splash-out .6s 3.4s forwards ease-in;
}

.splash.is-leaving {
    animation: splash-out .5s forwards ease-in;
}

.splash-inner {
    position: absolute;
    inset: 0 0 calc(var(--u) * 40);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--u) * 18) 0 calc(var(--u) * 118);
}

.splash-logo {
    width: calc(var(--u) * 315);
    animation: pop .7s .1s both cubic-bezier(.3, 1.5, .5, 1);
}

.splash-packs {
    position: relative;
    width: calc(var(--u) * 375);
    height: calc(var(--u) * 245);
    margin-top: calc(var(--u) * 20);
}

.splash-pack {
    position: absolute;
    max-width: none;
    animation: pack-in .6s both cubic-bezier(.3, 1.4, .5, 1);
}

.splash-pack--gourde {
    left: calc(var(--u) * 151);
    top: calc(var(--u) * 2);
    width: calc(var(--u) * 75);
    --r: 3deg;
    animation-delay: .5s;
}

.splash-pack--fraise {
    left: calc(var(--u) * 49);
    top: calc(var(--u) * 20);
    width: calc(var(--u) * 104);
    --r: -6deg;
    animation-delay: .65s;
}

.splash-pack--banane {
    left: calc(var(--u) * 229);
    top: calc(var(--u) * 20);
    width: calc(var(--u) * 100);
    --r: 4deg;
    animation-delay: .75s;
}

.splash-pack--panache-1 {
    left: calc(var(--u) * 14);
    top: calc(var(--u) * 128);
    width: calc(var(--u) * 178);
    --r: 4deg;
    animation-delay: .9s;
}

.splash-pack--panache-2 {
    left: calc(var(--u) * 186);
    top: calc(var(--u) * 130);
    width: calc(var(--u) * 178);
    --r: -3deg;
    animation-delay: 1s;
}

/* Écran d'ouverture déjà vu pendant la session : accès direct à l'accueil */
.splash-seen .splash {
    display: none;
}

/* Les éléments de l'accueil n'apparaissent qu'après l'ouverture */
html:not(.splash-seen) .page-home .home > *,
html:not(.splash-seen) .page-home .statue {
    animation-delay: calc(3.6s + var(--d, 0s));
}

html:not(.splash-seen) .page-home .home-cta {
    animation-delay: 4s, 6s;
}

html.splash-skipped .page-home .home > *,
html.splash-skipped .page-home .statue {
    animation-delay: var(--d, 0s);
}

html.splash-skipped .page-home .home-cta {
    animation-delay: .4s, 2.4s;
}

.home-title { --d: .1s; }
.home-movie { --d: .2s; }
.home-date { --d: .25s; }

/* ---------- Animations ---------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(calc(var(--u) * 24)); }
    to { opacity: 1; transform: none; }
}

@keyframes pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes pack-in {
    from { opacity: 0; transform: translateY(calc(var(--u) * 60)) rotate(0deg) scale(.8); }
    to { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes splash-out {
    to { opacity: 0; visibility: hidden; }
}

@keyframes statue-left {
    from { opacity: 0; transform: translateX(calc(var(--u) * -40)); }
    to { opacity: 1; transform: none; }
}

@keyframes statue-right {
    from { opacity: 0; transform: translateX(calc(var(--u) * 40)); }
    to { opacity: 1; transform: none; }
}