@font-face {
    font-family: "PP Neue Montreal Medium";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("PP Neue Montreal Medium"),url(./fonts/ppneuemontreal-medium.woff) format("woff")
}

@font-face {
    font-family: "PP Neue Montreal Bold";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("PP Neue Montreal Bold"),url(./fonts/ppneuemontreal-bold.woff) format("woff")
}

:root {
    --positionX: 50vw;
    --positionX-opposit: calc(100% - var(--positionX));
    --positionY: 50vh;
    --positionY-opposit: calc(100% - var(--positionY)); 

    --colorText: white;
    --colorBackground: black;
    --red: #D65259;
    --orange: #F76614;
}
html {
    font-size: 16px;
}
body {
    margin: 0;
    touch-action: none;
    user-select: none;
    cursor: none;
    font-family: sans-serif;
    block-size: 100%;
    overflow: hidden;
}

svg.logo {
    inline-size: 100%;
    block-size: auto;
    position: absolute;
    inset: 0 0 auto 0;
    mix-blend-mode: difference;
    margin-block-start: 1.875em;
    padding-inline: 1.875em;
    box-sizing: border-box;
    pointer-events: none;
    path {
        fill: var(--red);
    }
}
video {
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    pointer-events: none;
}
video.hero {
    inline-size: 100lvw;
    block-size: 100lvh;
}
[data-mute] {
    cursor: none;
    position: absolute;
    inset: auto auto 4em 2em;
    mix-blend-mode: difference;
    > * {
        pointer-events: none;
    }
    circle {
        fill: var(--red);
    }
}

@media (hover: hover) {
    body:has([data-mute]:hover) #icon {
        opacity: 0;
    }
}


[data-page] {
    position: absolute;
    top: 0;
    inline-size: 100%;
    block-size: 100%;
    box-sizing: border-box;
    overflow: auto;
    block-size: 100%;
}
[data-page="home"] {
    color: var(--colorText);
    background-color: var(--colorBackground);
}
[data-page="info"] {
    color: var(--colorBackground);
    background-color: var(--colorText);
    padding: .9375em;
    translate: 0 100%;
    transition: translate .3s cubic-bezier(0.215, 0.610, 0.355, 1);
    transition-delay: .3s;

    &.open {
        translate: 0 0%;
        transition-delay: 0s;
    }
}

.home-body {
    margin-block-end: 50vh; 
    padding-inline: .9375em;
}
.home-body img {
    margin-inline: auto;
    display: block;
}



.gridy {
    display: grid;
    gap: 2.8125em .9375em;
    grid-template-columns: repeat(auto-fit, minmax(min(100%,440px), 1fr));
    list-style: none;
    padding-inline: 0;
}

ul.simple {
    padding-inline: 0;
    list-style: none;
    columns: 2 375px;
    gap: 1em;
}

hr {
    border: none;
    padding: 0;
    margin: 5.5em 0;
    border-top: 10px solid var(--colorText);
}



[data-page] {
    font-family: 'PP Neue Montreal Medium', sans-serif;
    font-size: clamp(1.125rem, 1.617vw + 0.707rem, 2rem);
    line-height: 1.05;
    letter-spacing: calc(-1em / 100);
}
[data-page="info"] {
    strong, h1, h2, h3, h4, h5, h6 {
        font-family: "PP Neue Montreal Bold";
        font-weight: normal;
    }
    .gridy h3 {
        margin-block: 0;
    }
    .gridy p {
        margin-block: .5em 0;
    }
}

.size-128 {
    font-size: clamp( .8rem, 1rem + 8vw, 4em);
    text-wrap-style: balance;
}
.size-96 {
    font-size: 3em;
}
.size-48 {
    font-size: 1.5em;
}
.size-32 {
    font-size: 1em;
    line-height: 1.3;
}

a[href] {
    word-break: break-all;
    color: inherit;
    text-decoration-thickness: from-font;
    &:hover, &:focus-visible {
        color: var(--colorText);
    }
    > * {
        pointer-events: none;
    }
}

.split {
    /*   opacity: 0; */
    will-change: transform;
}
.split * {
    will-change: transform;
}
.line-mask {
    overflow: clip;
    display: inline-block;
    &:has(hr) {
        display: block;
    }
}
li.line-mask {
    display: block;
}
.line-mask span.line {
    display: block;
}
.line-mask div.line {
    display: inline-block;
}
.line-mask .line {
    will-change: translate;
    transition: translate .666s cubic-bezier(0.215, 0.610, 0.355, 1);
    translate: 0% 100%;
}
.line-mask.show .line {
    will-change: translate;
    translate: 0% 0%;
}

.logo-text svg {
    width: auto;
    height: 1.05cap;
    display: inline;
    path {
        fill: var(--orange);
    }
}


#icon {
    --size: 60px;
    position: fixed;
    cursor: none;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: var(--size);
    background-position: calc(var(--positionX) - var(--size) / 2) calc(var(--positionY-opposit) + var(--size) / 2);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='31' fill='white' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.78 37V28.42H12.888C15.252 28.42 16.704 29.956 16.704 32.716C16.704 35.476 15.252 37 12.888 37H9.78ZM10.86 29.38V36.04H12.888C15.072 36.04 15.576 34.396 15.576 32.716C15.576 31.036 15.072 29.38 12.888 29.38H10.86ZM18.9811 32.08H23.2651V33.04H18.9811V36.04H23.9851V37H17.9011V28.42H23.8411V29.38H18.9811V32.08ZM27.4124 37V29.38H24.5564V28.42H31.3484V29.38H28.4924V37H27.4124ZM35.738 34.852H31.958L31.202 37H30.086L33.254 28.42H34.466L37.658 37H36.494L35.738 34.852ZM32.318 33.892H35.39L33.866 29.416H33.842L32.318 33.892ZM38.4909 28.42H39.5709V37H38.4909V28.42ZM41.1277 28.42H42.2077V36.04H46.7077V37H41.1277V28.42ZM50.7055 32.02C52.3735 32.416 53.8975 32.8 53.8975 34.624C53.8975 36.04 52.9735 37.168 50.8375 37.168C48.6895 37.168 47.2015 36.04 47.0815 34.12H48.2095C48.3295 35.308 49.0015 36.22 50.7895 36.22C52.3375 36.22 52.7695 35.536 52.7695 34.66C52.7695 33.46 51.9295 33.316 50.2615 32.896C48.9655 32.572 47.4415 32.176 47.4415 30.52C47.4415 29.152 48.4975 28.252 50.3455 28.252C52.2895 28.252 53.4775 29.236 53.6215 30.964H52.4935C52.3375 29.812 51.7375 29.2 50.3575 29.2C49.1575 29.2 48.5695 29.656 48.5695 30.472C48.5695 31.54 49.6015 31.756 50.7055 32.02Z' fill='black'/%3E%3C/svg%3E");
}