@font-face {
    font-display: swap;
    font-family: "Melts Script Rough Sanscript One";
    src:
        url("Fonts/meltsscriptrough-sanscriptone-webfont.woff2") format("woff2"),
        url("Fonts/meltsscriptrough-sanscriptone-webfont.woff") format("woff");
    font-style: normal;
    font-weight: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

input,
button,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-family: "Melts Script Rough Sanscript One", Arial, Helvetica, sans-serif;
}

body {
    background-color: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(12px, 2vw, 16px);
}

.site-header {
    align-items: flex-start;
    background-color: #000;
    background-image:
        linear-gradient(to bottom, transparent 80%, #000),
        url("../images/pre-page/island.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 30em;
    justify-content: center;
    padding: 2em 2em 0 2em;
    position: relative;
}

.site-header > .ten-years {
    width: 10em;
}

.site-header > .compass {
    position: absolute;
    left: 2em;
    top: 2em;
    width: 5em;
}

.site-main {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 2em;
}

.site-main > .main-porthole {
    background-image: url("../images/pre-page/porthole-big.webp");
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: circle(50% at 50% 50%);
    height: 22em;
    width: 22em;
}

.site-main > .main-porthole > video {
    clip-path: circle(50% at 50% 50%);
    height: calc(22em - 10%);
    margin: 5%;
    width: calc(22em - 10%);
}

.site-main > .philosophies-header {
    font-size: 1.5em;
    margin: 1em 0;
}

.site-main > .philosophies {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    justify-content: center;
    margin: 0 0 5em 0;
}

.site-main > .philosophies > .philosophy {
    -webkit-tap-highlight-color: transparent;
    background-image: url("../images/pre-page/porthole.webp");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    height: 8em;
    position: relative;
    transition: transform 1000ms ease;
    width: 8em;
}

.site-main > .philosophies > .philosophy::after {
    align-items: center;
    background-image: url("../images/pre-page/porthole-lid.webp");
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 0.5);
    content: "?";
    display: flex;
    font-size: 3em;
    font-weight: bold;
    height: calc(6.7em / 3);
    justify-content: center;
    left: calc(1em / 3);
    padding-top: calc(0.7em / 3);
    position: absolute;
    top: calc(0.3em / 3);
    transform-origin: top;
    transition:
        transform 1000ms ease,
        color 500ms ease;
    width: calc(6em / 3);
}

.site-main > .philosophies > .philosophy.open {
    transform: scale(2);
    z-index: 1;
}

.site-main > .philosophies > .philosophy.open::after {
    color: transparent;
    transform: rotateX(180deg);
}

.site-main > .philosophies > .philosophy:nth-child(1) {
    transform-origin: 0 50%;
    grid-column: 1 / span 2;
}

.site-main > .philosophies > .philosophy:nth-child(2) {
    grid-column: 3 / span 2;
}

.site-main > .philosophies > .philosophy:nth-child(3) {
    transform-origin: 100% 50%;
    grid-column: 5 / span 2;
}

.site-main > .philosophies > .philosophy:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 2;
}

.site-main > .philosophies > .philosophy:nth-child(5) {
    grid-column: 4 / span 2;
    grid-row: 2;
}

@media (min-width: 1200px) {
    .site-main > .philosophies {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
    }
    .site-main > .philosophies > .philosophy:nth-child(1) {
        transform-origin: 50% 50%;
        grid-column: 1;
    }

    .site-main > .philosophies > .philosophy:nth-child(2) {
        grid-column: 2;
    }

    .site-main > .philosophies > .philosophy:nth-child(3) {
        transform-origin: 50% 50%;
        grid-column: 3;
    }

    .site-main > .philosophies > .philosophy:nth-child(4) {
        grid-column: 4;
        grid-row: 1;
    }

    .site-main > .philosophies > .philosophy:nth-child(5) {
        grid-column: 5;
        grid-row: 1;
    }
}

.site-main > .philosophies > .philosophy > img {
    clip-path: circle(50% at 50% 50%);
    height: calc(8em - 30%);
    margin: 15%;
    width: calc(8em - 30%);
}

.site-main > a.presave-link {
    -webkit-tap-highlight-color: transparent;
    background-image: url("../images/pre-page/paper-role.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #42210b;
    font-weight: bold;
    margin: 1.5em 0;
    padding: 1.5em 2em;
    transition: transform 1000ms ease;
}

.site-main > a.presave-link:hover {
    transform: scale(1.5);
}

.site-footer {
    aspect-ratio: 4.3;
    background-image: url("../images/pre-page/treasure-map.webp");
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 20em;
    width: 100%;
}