/* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
/* https://gist.github.com/lukaszgrolik/5849599 */
/* Gotham Book */
@font-face {
    font-family: gotham;
    font-weight: 300;
    font-style: normal;
    src: url("./gotham-book-B8_o52EL.otf") format( "opentype" );
}
/* Gotham Medium */
@font-face {
    font-family: gotham;
    font-weight: 500;
    font-style: normal;
    src: url("./gotham-medium-BUrkf28q.otf") format( "opentype" );
}
/* Gotham Bold */
@font-face {
    font-family: gotham;
    font-weight: 700;
    font-style: normal;
    src: url("./gotham-bold-CrH6UO9q.otf") format( "opentype" );
}
:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: white;

    /* 1rem */
    font-size: 16px;
}
body {
    margin: 0;
}
#app {
}
.splash-container {
    position: absolute;
    width: 100%;
    height: 100dvh;
    opacity: 0;
    pointer-events: none;
}

p, em, h3 {
    font-style: unset;
}

.splash-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;

    font-family: gotham;
    font-style: normal;
    font-weight: 500;
    font-size: 4.08vw;  /* 16px / 393px */

    color: white;
}

#page-0 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    background: white;
}

#page-0 .splash-key-visual {
    width: 100%;
}

#page-0 .splash-key-text {
    width: 80%;
}


#page-1 {
    color: black;
}

#page-1 .logo {
    width: 50%;
    margin: 10vh 0;
    margin-bottom: 5vh;
}

#page-1 .cta {
    width: 80%;
}

#page-1 h3 {
    margin: 0;
    font-size: 1.125em;
    font-weight: 700;
    margin-bottom: 5vh;
}

#page-1 p {
    margin: 0;
    font-size: .8125em;
    font-style: normal;
    font-weight: 300;
}

:is(#page-1 p) span {
    display: inline-block;
}

:is(#page-1 p) em {
    display: inline-block;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
}

#page-1 .vals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

:is(#page-1 .vals) img {
    position: absolute;
    width: 100%;
    bottom: 0;
}

:is(#page-1 .vals) #vals-sky {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

:is(#page-1 .vals) #vals-bg {
    transform: translateY(-16vh);
}

:is(#page-1 .vals) #vals-mg {
    transform: translateY(-6vh);
}

:is(#page-1 .vals) #vals-fg {
    transform: translateY(0vh);
}

#page-1 .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-transform: uppercase;
    text-align: center;
}

.splash-scroll {
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: 3vh;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    background: linear-gradient(transparent, rgba(0 0 0 / .5));
    opacity: 0;
}

.splash-scroll-arrow {
    width: 6vw;
    filter: drop-shadow(0 1px 1px black);
    animation: 1200ms infinite splash-scroll-arrow ease-in-out;
}

.splash-scroll-arrow:first-child {
    animation-delay: -250ms;
}

.splash-scroll-cta {
    margin-top: 1em;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 1px 1px black;
}

.splash-skip {
    position: absolute;
    top: 3vh;
    right: 3vh;
    background: black;

    border: 1px solid white;
    padding: .2rem .6rem;
    border-radius: .4rem;

    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: .5ch;

    opacity: 0;
}

.splash-skip-cta {
    display: block;
    color: white;
    font-family: gotham;
    font-style: normal;
    font-weight: 700;
    font-size: 1.0em;
    text-transform: uppercase;
    position: relative;
    top: .05rem;
}

.splash-skip-arrow {
    height: .8rem;
}

.skip-placement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover url("skip-placement.webp");
    opacity: .25;
}

@keyframes splash-scroll-arrow {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 0;
        transform: translateY(50%);
    }
}

#page-2 .table {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    scale: 2.2;
    translate: 0 -8vh;
}

#page-2 {
    display: grid;
    place-items: center;

    color: white;
    line-height: 1.25;
}

#page-2 p {
    margin: 0;
}

:is(#page-2 p) span {
    display: inline-block;
    font-weight: 300;
    font-size: 1.125em;
}

:is(#page-2 p) em {
    display: inline-block;
    font-weight: 700;
    font-size: 1.25em;
}

#page-2 .text {
    position: absolute;
    top: 13vh;
    left: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#page-2 .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#page-2 .table {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#page-2 .phone {
    position: absolute;
    bottom: -19%;

    left: 15%;
    height: 90%;
    /* width: 100%; */

    aspect-ratio: 925/1328;
    transform-origin: center bottom;
}

:is(#page-2 .phone) .phone-screen {
    /* set em size relative to view width, to match
     * scaling on phone itself */
    /* font-size: 2.25vw; */
    font-size: 1.5vh;

    position: absolute;
    top: 1.5%;
    left: 10.6%;
    width: 39.3%;
    height: 58.9%;

    clip-path: inset(0 round 2.0em);

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
}

:is(:is(#page-2 .phone) .phone-screen) .phone-screen-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}

:is(:is(:is(#page-2 .phone) .phone-screen) .phone-screen-view) p {
    position: absolute;
    top: 20%;
    margin: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

:is(:is(:is(:is(#page-2 .phone) .phone-screen) .phone-screen-view) p) span {
    display: inline-block;
    font-weight: 300;
    font-size: 0.8125em;
}

:is(:is(:is(:is(#page-2 .phone) .phone-screen) .phone-screen-view) p) em {
    display: inline-block;
    font-weight: 700;
    font-size: 1.00em;
}

:is(:is(#page-2 .phone) .phone-screen) .bottles {
    position: absolute;
    width: 250%;
    bottom: 10%;
    left: -80%;
    -o-object-fit: contain;
    object-fit: contain;
}

:is(:is(#page-2 .phone) .phone-screen) .phone-screen-logo {
    margin-top: 18%;
    width: 42%;
}

:is(:is(#page-2 .phone) .phone-screen) .phone-screen-instructions {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #4f9363;
    font-weight: 700;

    font-size: .8em;
    line-height: 1.25;

    text-align: center;
    padding: 1.25em 0;
}

:is(:is(#page-2 .phone) .phone-screen) .phone-screen-graphic {
    position: absolute;
    top: 30%;
    width: 70%;
    height: 30%;

    display: grid;
    place-items: center;
}

:is(:is(:is(#page-2 .phone) .phone-screen) .phone-screen-graphic) .icon-surface {
    position: absolute;
    width: 100%;
}

:is(:is(:is(#page-2 .phone) .phone-screen) .phone-screen-graphic) .icon-phone {
    position: absolute;
    width: 30%;
    transform-origin: center -200%;
    background: #090502;
}

#page-2 .phone {
    background: url("../splash/hand-and-phone.webp") center/contain no-repeat;
}

#page-2 .logo {
    position: absolute;
    right: 3vh;
    bottom: 3vh;
    width: 30vw;
}

#page-3 {
    display: grid;
    place-items: center;
}

#page-3 p {
    margin: 0;

    color: white;
    text-align: left;
    line-height: 1.25;
}

:is(#page-3 p) span {
    font-size: 1.125em;
    font-weight: 300;
    display: inline-block;
}

:is(#page-3 p) em {
    font-size: 1.25em;

    display: inline-block;
    font-style: normal;
    font-weight: 700;
}

#page-3 .text {
    position: absolute;
    left: 0;
    width: 100%;
    top: 10vh;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

#page-3 .logo {
    position: absolute;
    right: 3vh;
    bottom: 3vh;
    width: 30vw;
}

#page3-background {
    position: absolute;
    top: 0; left: 0; height: 100%;
}

#page-4 {
    display: grid;
    place-items: center;
}

#page-4 p {
    margin: 0;

    color: white;
    text-align: left;
}

:is(#page-4 p) span {
    font-size: 1.125em;
    font-weight: 300;
    display: inline-block;
}

:is(#page-4 p) em {
    font-size: 1.25em;

    display: inline-block;
    font-style: normal;
    font-weight: 700;
}

#page-4 .page4-text {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    margin-bottom: 25%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

#page-4 .logo {
    position: absolute;
    right: 3vh;
    bottom: 3vh;
    width: 30vw;
}

#page4-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#page4-wave {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    mix-blend-mode: screen;
    scale: 1.0;
}

.page4-bottle-composite {
    position: absolute;
    top: -10vh; left: 0; width: 100%; height: 100%;
}

#page4-bottle {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    scale: .6;
    -o-object-fit: contain;
    object-fit: contain;
}

#page4-bottle-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    scale: .61;
    -o-object-fit: contain;
    object-fit: contain;
}

#page-5 .logo {
    width: 40%;
    margin-top: 10vh;
    margin-bottom: 7vh;
}

#page-5 h3 {
    margin: 0;
    font-size: 1.125em;
    font-weight: 700;
    margin-bottom: 5vh;
}

#page-5 p {
    margin: 0;
    font-style: normal;
    line-height: 1.25;
}

:is(#page-5 p) span {
    display: inline-block;

    font-size: 1.125em;
    font-weight: 300;

}

:is(#page-5 p) em {
    display: inline-block;
    font-size: 1.25em;
    font-style: normal;
    font-weight: 700;
}

#page-5 .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;

    text-align: center;

    color: white;
}

#page-5 .photos {
    position: absolute;
    bottom: 10vh;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

#page-5 .photo {
    position: absolute;
    bottom: 0;
    aspect-ratio: 55/100;
    height: 40vh;
    border: 2px solid #a8d3c3;
    transform-origin: bottom center;
    box-shadow: 0 0 5vw green;
}

#page-5 #photo-1 {
    rotate: -10deg;
    background: center/cover url("../splash/photo-example-1.webp");
}

#page-5 #photo-2 {
    rotate: 10deg;
    background: center/cover url("../splash/photo-example-2.webp");
}

#page5-background {
    position: absolute;
    top: 0; left: 0; height: 100%;
}

#page-6 h3 {
    margin: 0;
    font-size: 1.125em;
    font-weight: 700;
    margin-bottom: 5vh;
}

#page-6 p {
    margin: 0;

    font-style: normal;
    text-align: left;
    line-height: 1.25;

    color: white;
}

:is(#page-6 p) span {
    display: inline-block;
    font-size: 1.125em;
    font-weight: 300;
}

:is(#page-6 p) em {
    display: inline-block;
    font-size: 1.25em;
    font-style: normal;
    font-weight: 700;
}

#page-6 .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

#page-6 .bottom {
    position: absolute;
    bottom: 2.0em;
    left: 0;
    width: 100%;

    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

.splash-launch {
    margin-top: 2em;
    margin-bottom: 2em;

    background: #4f9363;
    border: 2px solid #a8d3c3;
    color: white;
    width: 61%;
    height: 3em;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 0.90em;
    text-transform: uppercase;

    pointer-events: auto;
}

#page-6 .links {
    display: flex;
    flex-flow: row;
    gap: 2ch;
}

#page-6 a {
    font-weight: 500;
    font-size: .75em;
    color: white;
    text-decoration: none;
}

#page6-logo {
    width: 40%;
    margin-top: 10vh;
    margin-bottom: 4vh;
}

#page6-background {
    position: absolute;
    top: 0; left: 0; height: 100%;
}

#page6-pin {
    width: 18%;
}

#page6-map {
    width: 90%;
    mix-blend-mode: screen;
    margin-top: -25%;
    margin-bottom: -5%;
}