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

:root {
    --white: #FFFFFF;
    --black: #000000;
    --lightgrey: #F2F5FA;
    --lightgrey2: #1D1E2326;
    --midgrey: #2C2D31;
    --midgrey2: #6E7075;
    --darkgrey: #16171B;
    --yellow: #FFE500;
}
  
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
    cursor: none !important;
    margin: 0;
    padding: 0;

    @media(max-width: 1023px){
        cursor: auto !important;
    }
}

#smooth-scroll-wrapper {
    height: 100% !important;
    overflow: hidden !important;
}

h1, h2, h3, h4, h5, h6, p, a, button {
    will-change: transform;
}

.words, .lines {
    line-height: 1.2em;
}
div, ul li, a, button {
    cursor: none !important;

    @media(max-width: 1023px){
        cursor: auto !important;
    }

    &:hover {
        transform: none;
    }
}

.nav-dropdown__open {
    background: rgba(22, 23, 27, 0.10) !important;
    
    &::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        z-index: 999;
        inset: 0px;
        background: rgba(22, 23, 27, 0.1);
    }
    
    main {
        position: relative;

    }
}

/* Page transition revealer */
.revealer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    transform-origin: center top;
    background-color: var(--yellow);
    pointer-events: none;
    z-index: 10000;

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

/* Handling view-transition issues */
/* Wipe old page from left to right (revealing background) */
@keyframes swipeOut {
    from {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
}

/* Wipe new page in from left to right (covering background) */
@keyframes swipeIn {
    from {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

::view-transition-old(root), 
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-group(root){
    z-index: 10000 !important;
    background-color: var(--yellow); /* The overlay color */
}

::view-transition-image-pair(root) {
    isolation: isolate;
    will-change: clip-path;
    z-index: 1;
}

::view-transition-old(root) {
    z-index: 2;
    animation: swipeOut 0.5s cubic-bezier(0.87, 0, 0.13, 1) forwards !important;
}

::view-transition-new(root) {
    z-index: 3;
    animation: swipeIn 0.5s cubic-bezier(0.87, 0, 0.13, 1) forwards !important;
    animation-delay: 0.4s !important; /* Start slightly before old finishes for overlap or after? User wants yellow overlay. */
    /* To ensure yellow overlay is seen, we should delay new page entrance until old is mostly gone.
       If both animations are 0.5s, delay of 0.2s means 0.3s of yellow wipe.
       Let's try 0.4s delay (so mostly sequential) for distinct yellow flash.
    */
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); /* Initially hidden */
}


/* Light Mode */
[data-theme="light"] {
    #smooth-scroll-wrapper, body {
        background-color: #FFFFFF;
    }
}

/* Dark Mode */
[data-theme="dark"] {
    #smooth-scroll-wrapper, body {
        background-color: #000000;
    }
}


/* Yellow Mode */
[data-theme="yellow"] {
    #smooth-scroll-wrapper, body {
        background-color: #FFE500;
    }
}



/* Lottie hero */
.lottie-hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* transform-origin: center top; */
    background-color: var(--yellow);
    pointer-events: none;
    z-index: 10000;

    /* display: flex;
    justify-content: center;
    align-items: center; */

    .lottie-hero-content {
        /* max-width: 1000px; */
        height: 100%;
        /* width: 100%; */

        & > div {
            height: 100%;
            width: 100%;

            svg {
                height: auto;
                width: auto;

                & > g > g:last-child {
                    /* transform: scale(0.9); */
                }

                /* rect {
                    width: 100vw;
                    height: 100vh;
                } */
            }
        }
    }
}


/* Skip content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--yellow);
    color: var(--darkgrey);
    padding: 8px 16px;
    z-index: 1001;
    text-decoration: none;
    transition: top 0.3s;
}

.skip-to-content:focus {
    top: 0;
}

#CybotCookiebotDialog {
    z-index: 1000 !important;
}

#CookiebotWidget {
    z-index: 1000 !important;
}


/* No scripting stylings */
@media (scripting: none) {
    body {
        cursor: auto !important;
    }

    .revealer {
        display: none;
    }

    svg {
        width: 100px;
    }

    ul li {
        svg {
            width: 20px;
        }
    }

    div, ul li {
        cursor: auto !important;
    }

    a, button {
        cursor: pointer !important;
    }

    nav {
        position: relative !important;
    }

    #no-script-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        background-color: var(--white);
        z-index: 10001;
        cursor: auto !important;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (scripting: enabled) {
    #no-script-container {
        display: none;
    }
}