/* =====================================================
   ZEAGXEL
   GLOBAL STYLES
===================================================== */

:root {

    --black:
        #050608;

    --black-deep:
        #020304;

    --white:
        #f3f1ed;

    --gold:
        #d8a64c;

    --gold-light:
        #efbd62;

    --grey:
        #929398;

    --grey-dark:
        #65676c;

    --border:
        rgba(255, 255, 255, 0.10);

}


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

* {
    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    width: 100%;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}

main {
    transition: filter 0.75s ease;
}

body.lights-on main,
body.lights-on .navbar {
    filter: brightness(1.5);
}

body.lights-on::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 70% 38%, rgba(255, 204, 112, 0.28), transparent 54%),
        radial-gradient(ellipse at 22% 74%, rgba(255, 220, 155, 0.16), transparent 48%);
    mix-blend-mode: screen;
    animation: lightsBloom 0.75s ease-out both;
}

@keyframes lightsBloom {
    from { opacity: 0; }
    to { opacity: 1; }
}


a {
    color: inherit;

    text-decoration: none;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


img {
    display: block;

    max-width: 100%;
}


::selection {

    background:
        var(--gold);

    color:
        var(--black);

}

.site-hero-entrance {
    animation: siteHeroEntrance 0.9s cubic-bezier(0.2, 0.72, 0.25, 1) both;
    animation-delay: var(--entrance-delay, 0ms);
}

.site-scroll-reveal.is-visible {
    animation: siteScrollArcIn 1.05s cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

.site-scroll-reveal-reverse.is-visible {
    animation-name: siteScrollArcInReverse;
}

@keyframes siteHeroEntrance {
    from { opacity: 0; translate: 0 30px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes siteScrollArcIn {
    0% { opacity: 0; translate: 30px 10px; rotate: 5deg; scale: 0.98; }
    55% { opacity: 1; translate: -7px -2px; rotate: -1.2deg; scale: 1.005; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}

@keyframes siteScrollArcInReverse {
    0% { opacity: 0; translate: -30px 10px; rotate: -5deg; scale: 0.98; }
    55% { opacity: 1; translate: 7px -2px; rotate: 1.2deg; scale: 1.005; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .site-hero-entrance,
    .site-scroll-reveal.is-visible {
        animation: none;
    }
}

/* =====================================================
   GLOBAL CONTAINER
===================================================== */

.container {

    width: min(
        1200px,
        calc(100% - 80px)
    );

    margin:
        0 auto;

}


/* =====================================================
   PAGE TRANSITION
===================================================== */

body {

    animation:
        pageEnter
        0.7s
        ease
        both;

}


@keyframes pageEnter {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}