:root {
    --text-color: #112;
    --panel-animation-delay: 25ms;

    --smooth-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
    --spring-easing: linear(
        0, 0.011, 0.044 1.6%, 0.181 3.5%, 0.895 9.6%, 1.135 12.1%, 1.281 14.4%, 1.323,
        1.345 16.8%, 1.348, 1.344, 1.332, 1.311 20.2%, 1.247 22.1%, 1.052 26.8%,
        0.97 29.1%, 0.908 31.7%, 0.89, 0.88 34.2% 35.9%, 0.892, 0.914 39.7%,
        0.981 44.3%, 1.01, 1.031, 1.041 51.6%, 1.042, 1.038 55.3%, 0.997 64%, 0.99,
        0.986 68.8%, 0.987 72.8%, 1.001 81.3%, 1.005 85.8%, 0.999
    );
}

html {
    font-size: clamp(8px, 1vw, 16px);
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100vw;
    height: 100dvh;
}

body, h1, p {
    margin: 0;
}

.grid {
    display: grid;
    grid-template-rows: repeat(3, 12rem);
    grid-template-columns: repeat(5, 12rem);
    gap: 1rem;
}

.panel {
    border-radius: 1rem;
    user-select: none;
}

#hero {
    grid-column: span 3;
    grid-row: span 3;
    position: relative;

    background-color:#99d6ff !important;
    background-size: cover;
    background-image: url("./assets/gradient.png");
        /* radial-gradient(at 4% 89%, hsla(179,100%,79%,1) 0px, transparent 50%),
        radial-gradient(at 78% 87%, hsla(285,100%,79%,1) 0px, transparent 50%),
        radial-gradient(at 94% 95%, hsla(221,100%,79%,1) 0px, transparent 50%),
        radial-gradient(at 47% 20%, hsla(181,100%,79%,1) 0px, transparent 50%),
        radial-gradient(at 56% 81%, hsla(210,100%,61%,1) 0px, transparent 50%),
        radial-gradient(at 78% 20%, hsla(273,100%,84%,1) 0px, transparent 50%),
        radial-gradient(at 7% 67%, hsla(207,100%,79%,1) 0px, transparent 50%); */

    color: white;
    padding: 1rem 2rem 2rem 9.5rem;

    display: flex;
    flex-direction: column;
    transition: filter 2s;
}

#hero h1 {
    font: 5rem "Cabinet Grotesk";
    font-weight: 800;
    text-shadow: 0.125rem 0.25rem 0.75rem #0000001f;
    line-height: 0.8;
    flex: 1;
}

#hero h1 > .smaller {
    font-size: 2.5rem;
    font-weight: 500;
    /* line-height: 2rem; */
}

#hero p {
    font: 2rem "Cabinet Grotesk";
}

#dinkle {
    position: absolute;
    height: 12rem;
    top: 2rem;
    left: -1.5rem;

    filter: drop-shadow(0.25rem 0.25rem 0.75rem #0000004f);
    user-select: none;
}

.sparkle {
    position: absolute;
    filter: drop-shadow(0 0 1rem #fff);
    transition: transform 3s;
    transition-timing-function: var(--smooth-easing);
}

#hero .sparkle:nth-of-type(2) {
    height: 10.5rem;
    top: 2rem;
    right: 2rem;
    rotate: 7deg;
}

#hero .sparkle:nth-of-type(3) {
    height: 4.9rem;
    top: 9.5rem;
    right: 8.7rem;
    rotate: -5deg;
}

#hero .sparkle:nth-of-type(4) {
    height: 16rem;
    bottom: 2rem;
    left: -2.6rem;
    rotate: -5deg;
}

.sparkle.out-bounds {
    filter: drop-shadow(0 0 1rem #fff) drop-shadow(0 0 1rem #0000002a);
}

#hero:is(:hover, :active) .sparkle:nth-of-type(2) {
    transform:
        translateX(0.12rem)
        translateY(-0.5rem)
        rotate(2deg)
        scale(0.9);
}
#hero:is(:hover, :active) .sparkle:nth-of-type(3) {
    transform:
        translateX(-0.04rem)
        translateY(-0.4rem)
        rotate(-1deg)
        scale(.92);
}
#hero:is(:hover, :active) .sparkle:nth-of-type(4) {
    transform:
        translateX(-0.1rem)
        translateY(-0.39rem)
        rotate(-1deg)
        scale(1.1);
}

img.clickme {
    user-select: none;
    cursor: pointer;
}

img.clickme.haha {
    animation: haha 1s var(--spring-easing);
}

@keyframes haha {
    from {
        transform:
            scaleX(1.3)
            scaleY(.6)
            rotate(-40deg)
            rotate3d(1, 1, 0, 50deg);
            /* translateY(-50%); */
    }
}

.panel.double { grid-column: span 2; }

.panel.game {
    cursor: pointer;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: end;

    padding: 1.5rem;
    transition: transform 1s, box-shadow 1s;
    transition-timing-function: var(--spring-easing);
    text-decoration: none;

    overflow: clip;
}

.panel.game:is(:hover, :active) {
    transform:
        translateY(-0.5rem)
        rotate(-1deg);
        
    box-shadow: 0.25rem 0.4rem 1rem #0000001f;
}

.panel.double.game:is(:hover, :active) {
    transform:
        translateY(-0.5rem)
        rotate(-1deg);
        
    /* box-shadow: 0 0.25rem 16px #00000042; */
}

.panel.game span {
    color: white;
    font: 2.25rem "Cabinet Grotesk";
    font-weight: 800;
    line-height: 1;
    text-shadow: 2px 8px 12px #0000001f;
    opacity: 0;
    transition: opacity 0.5s;
}

.panel.game:is(:hover, :active) span {
    animation: come-up 1s var(--smooth-easing) forwards;
    animation-delay: calc(75ms * sibling-index());
}

@keyframes come-up {
    from {
        translate: 0 1rem;
        rotate: 5deg;
    }

    to { opacity: 1; }
}

@keyframes fade-away {
    to { opacity: 0; }
}

.panel.game img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.5s;
}

.panel.game:is(:hover, :active) img {
    opacity: 0;
}

.panel:nth-child(1) { animation-delay: calc(var(--panel-animation-delay) * 1); }
.panel:nth-child(2) { animation-delay: calc(var(--panel-animation-delay) * 2); }
.panel:nth-child(3) { animation-delay: calc(var(--panel-animation-delay) * 3); }
.panel:nth-child(4) { animation-delay: calc(var(--panel-animation-delay) * 4); }
.panel:nth-child(5) { animation-delay: calc(var(--panel-animation-delay) * 5); }
.panel:nth-child(6) { animation-delay: calc(var(--panel-animation-delay) * 6); }

.panel {
    translate: 0 -2rem;
    rotate: -3deg;
    opacity: 0;
    animation: fade-in 0.8s var(--smooth-easing) forwards;
}

@keyframes fade-in {
    to {
        translate: 0;
        rotate: 0deg;
        opacity: 1;
    }
}

.disclaimer {
    font: 1.5rem "Cabinet Grotesk";
    color: #aaaaab;
}

@media (max-width: 500px) {
    html {
        font-size: clamp(8px, 3.25vw, 14px);
    }

    body {
        justify-content: start;
        align-items: center;
        margin-top: 3rem;
    }

    .grid {
        align-self: stretch;
        margin-inline: 3rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 4rem repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        /* grid-template-rows: 1rem repeat(3, 1fr); */
    }

    #hero {
        grid-column: 1 / span 2;
        justify-content: center;
        padding: 1.5rem;
        padding-top: 1rem;
        padding-left: 7.5rem;
    }

    #hero h1 > .nomobile {
        display: none;
    }
    
    #hero h1 {
        font-size: 3rem;
    }
    
    #hero h1 .smaller {
        font-size: 2rem;
    }
    
    #hero p {
        white-space: nowrap;
        display: flex;
        justify-content: end;
        font-size: 1.5rem;
    }

    #dinkle {
        height: 9rem;
        left: -1rem;
        top: 2rem;
        filter: drop-shadow(0.15rem .3rem 8px #00264f75);
    }

    #hero .sparkle {scale: 0.7}
    #hero .sparkle:nth-of-type(2) {
        top: 0rem;
        right: 0rem;
    }
    #hero .sparkle:nth-of-type(3) {
        top: 6.2rem;
        right: 5.3rem;
    }
    #hero .sparkle:nth-of-type(4) {
        bottom: -0.5rem;
        left: -3.5rem;
    }
    
    .panel.game p {
        font-size: 2rem;
    }
    
    .panel.game:not(.double) {
        aspect-ratio: 1;
    }

    .panel.game:hover { transform: none; }
    
    .panel.game:active {
        transform:
            translateY(-0.5rem)
            rotate(-2deg);
    }

    .disclaimer {
        max-width: 36rem;
        margin-inline: 1rem;
        padding: 2rem;
        text-align: center;
    }

    .panel.mobile-omit { display: none; }
}