/* FONT */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans+Khmer:wght@100..900&display=swap');

body {
    font-family: "EB Garamond", Georgia, serif;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 10s;
}

::view-transition-old(#stars) {
    transition-delay: 0s;
    transition-duration: 10s;
    background-position: 1000px 1000px;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: #fbfbfa;
    /*color: #161616;*/
    cursor: pointer;
    transition: background 5s cubic-bezier(.55, .01, .24, 1);
    opacity: 0.98;
}

a {
    all: unset;
    cursor: pointer;
}

/* asterisk between menu items */
header a+a:before {
    content: "*";
    font-size: 1.8em;
    line-height: 0em;
    vertical-align: -0.3em;
    margin-right: 0.18em;
    /*newline induces space*/
    margin-left: 0.14em
}

/* unused if js not enabled */
a.first-in-row:before {
    opacity: 0;
}

header {
    margin: 1em 2em;
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: center;
    color: #f5f3ef;
    opacity: 1;

    text-align: center;
    text-wrap: balance;

    a {
        opacity: 0;
        display: inline-block;
        transition-timing-function:
            linear(0, 0.196 16.8%, 0.366 28.2%, 0.543 37.3%, 0.999 57.7%, 0.884 65.6%, 0.857 69.2%, 0.848 72.9%, 0.871 79%, 0.982 92.6%, 0.996 96.1%, 1) !important;
    }

    /* bc we need js to be able to fix dividers before it it visible, 
       so display: none doesnt work */
    pointer-events: none;
}

/* FEATHER */
body.falling {
    background: #000000;
    cursor: default;
    /*todo instead remove a full page element*/

    header {
        pointer-events: unset;

        a {
            opacity: 1;
        }
    }
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 16%, rgba(0, 0, 0, .32) 100%);
    transition: opacity 4s ease;
}

.falling .vignette {
    opacity: 1;
}

.falling .prompt {
    opacity: 0;
}

.feather-wrap {
    position: absolute;
    top: 2vh;
    left: 47%;
    z-index: 1;
    width: clamp(280px, 25vw, 600px);
    transform-origin: 0% 50%;
    /*height: clamp(187px, 25.3vw, 400px);*/
}

.feather-rotate {
    width: 100%;
    height: 100%;
    transform:
        translateX(-50%) rotate(60deg);
}

.feather {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /*filter: drop-shadow(9px 17px 12px rgba(0, 0, 0, .17));*/
}

.falling .feather-wrap {
    /*animation: descend_old 7.05s cubic-bezier(.45, .01, .25, 1) forwards;*/
    animation: descend 4.5s ease-out 0s 1 normal both;
}

.falling .feather {
    animation: breathe 1.26s ease-in-out infinite alternate;
}

@keyframes breathe {
    from {
        transform: skewX(-2deg) scaleX(.98);
    }

    to {
        transform: skewX(2.5deg) scaleX(1.02);
    }
}

@keyframes descend {
    0% {
        transform: translateX(0px) translateY(0vh) rotate(0deg);
        animation-timing-function: cubic-bezier(0.450, 0.050, 0.550, 0.950);
    }

    26% {
        transform: translateX(9vh) translateY(15vh) rotate(-15deg);
        animation-timing-function: cubic-bezier(0.450, 0.050, 0.550, 0.950);
    }

    64% {
        transform: translateX(-15.5vh) translateY(28vh) rotate(18deg);
        animation-timing-function: cubic-bezier(0.450, 0.050, 0.550, 0.950);
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(50vh) rotate(0deg);
        animation-timing-function: cubic-bezier(0.450, 0.050, 0.550, 0.950);
        opacity: 0;
    }
}

/* @media (prefers-reduced-motion: reduce) {
    body {
        transition-duration: 1s;
    }

    .falling .feather-wrap {
        animation-duration: 1s;
    }

    .falling .feather {
        animation: none;
    }
} */


/* starfield */
body.falling header {
    box-shadow: 0 0 1em 2em #000a;
    background: #000a;
}

header {
    transition: background 5s ease,
        box-shadow 5s ease;
    transition-delay: 4s;
}

#stars,
#stars2 {
    position: absolute;
    top: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#stars {
    transition: background 6s ease, opacity 6s ease;
    transition-delay: 12s;
}

#stars2 {
    transition: background 10s ease, opacity 10s ease;
    transition-delay: 8s;
}

#stars3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: auto;
    /* background-size: cover; */
    background: url("tenticles.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-y: bottom -35%;
    background-position-x: center;
    mix-blend-mode: lighten;
    height: 100%;

    opacity: 0%;
    transition: background 60s ease-in, opacity 100s ease-in-out;
    transition-delay: 60s;
}

body.falling {
    #stars {
        background: url("stars.png");
        background-repeat: repeat-x;
        opacity: 70%;
    }

    #stars2 {
        background: url("stars2.png");
        background-size: cover;
        mask-image: linear-gradient(to top, #000, #0005 20%, transparent 90%);
        opacity: 100%;
    }

    #stars3 {
        opacity: 90%;
        background-size: 60%;
        background-position-y: bottom 0%;
    }
}


body.tentacles {
    cursor: url("cursor.png"), default;

    & a {
        cursor: url("cursor_grab.png"), pointer;
    }
}