html {
    overflow: hidden;
}

body {
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    min-height: 700px;
    max-height: 1400px;
    min-width: 1000px;
    background: url("https://kadorath.github.io/resources/images/CrabCastle/oceanbg.gif");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

body > img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 15%;
}

#crabcastle {
    display: grid;
    position: fixed;
    align-items: center;
    justify-items: center;
    bottom: -15vw;

    transform: scale(0.5);
    aspect-ratio: 2/1;
}

#crabcastle > img {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    width: 100%;
}

#thecastle {
    pointer-events: all;
}

@keyframes kelp1-reveal {
    0%   { transform: translateX(0px); }
    100% { transform: translateX(-900px); }
}
@keyframes kelp2-reveal {
    0%   { transform: translateX(0px); }
    100% { transform: translateX(900px); }
}

.kelp1-reveal {
    animation: kelp1-reveal 0.5s ease-out forwards;
}
.kelp2-reveal {
    animation: kelp2-reveal 0.5s ease-out forwards;
}

@keyframes rotate {
    0% { transform: rotate(160deg); }
    100% { transform: rotate(24deg); }
}

#claw-container {
    position: absolute;
    top: 7%; 
    left: 32%; 
    height: 400px;
    clip-path: inset(-15% 0% 65% 0%)
}

#claw {
    will-change: transform;
    transform-origin: 50% 100%; 
    transform: rotate(160deg);
}

.claw-out {
    animation: rotate 0.5s ease-out 1 forwards;
}