@keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(3px) }
    50% { transform: translateX(-3px) }
    75% { transform: translateX(3px) }
    100% { transform: translateX(0) }
}

.page-index body {
    overflow: hidden;
}

.page-index header {
    margin-top: 10vh;
    background: rgba(255, 255, 255, 0.3);
}

.page-index .header-title {
    position: relative;
}

.arrow-header {
    position: absolute;
    top: min(-5vh, -5vw);
    left: min(-5vw, -5vh);
    transform: rotate(-25deg) scale(-1, 1);
    pointer-events: none;
}

.arrow-header-img {
    width: 4vw;
    height: 4vw;
}

.arrow-header-label {
    text-transform: lowercase;
    font-weight: 700;
    font-size: var(--font-size-small);
    transform: scale(-1, 1) translateX(-2vw);
    filter: drop-shadow(1px 1px 2px white);
    text-shadow: none;
}

.whale-wrapper {
    position: relative;
    margin-top: min(20vh, auto);
}

.big-planet {
    position: absolute;
    top: 0;
    right: min(-5vw, -5vh);
    width: min(70vw, 70vh);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, var(--color-1), #000);
}

.big-planet::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("assets/Texturelabs_Atmosphere_196S__indexed.png");
    opacity: 0.4;
    mix-blend-mode: luminosity;
    border-radius: 50%;
}

.small-planet {
    position: absolute;
    top: min(-4vh, -4vw);
    left: min(20vw, 20vh);
    width: min(15vw, 15vh);
    aspect-ratio: 1 / 1;
    background-color: var(--color-base);
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, var(--color-3), #000);
}

.small-planet::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("assets/Texturelabs_Atmosphere_196S__indexed.png");
    opacity: 0.4;
    mix-blend-mode: luminosity;
    border-radius: 50%;
}

.whale {
    position: relative;
    width: min(70vw, 70vh);
    animation: float 4s ease-in-out infinite;
}

.whale-sound {
    position: absolute;
    opacity: 0;
    --sound-cycle: 40s;
    animation: fadeInUp var(--sound-cycle) ease-in-out infinite;
    filter: drop-shadow(1px 1px 2px white);
}

.whale-sound-1 {
    top: 50%;
    left: -15%;
    font-size: var(--font-size-large);
    font-weight: 450;
    animation-delay: calc(var(--sound-cycle) * 1 / 5);
}

.whale-sound-2 {
    top: 50%;
    left: -15%;
    font-size: var(--font-size-large);
    font-weight: 550;
    animation-delay: calc(var(--sound-cycle) * 2 / 5);
}

.whale-sound-3 {
    top: -5%;
    left: -15%;
    font-size: var(--font-size-large);
    font-weight: 600;
    animation-delay: calc(var(--sound-cycle) * 3 / 5);
}

.whale-sound-4 {
    top: 50%;
    left: -15%;
    font-size: var(--font-size-large);
    font-weight: 500;
    animation-delay: calc(var(--sound-cycle) * 4 / 5);
}

.whale-sound-5 {
    top: -5%;
    left: -15%;
    font-size: var(--font-size-large);
    font-weight: 650;
    animation-delay: calc(var(--sound-cycle) * 5 / 5);
}

.whale-img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: lighten;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes fadeInUp {
    0%, 10% {
        opacity: 0;
        transform: translateY(20px);
    }
    5% {
        opacity: 1;
        transform: translateY(0);
    }
}

.arrow-whale {
    position: absolute;
    bottom: max(5vh, 5vw);
    right: max(10vh, 10vw);
    transform: rotate(-220deg) scale(-1, 1);
}

.arrow-whale-img {
    width: 7vw;
    height: 7vw;
}

.arrow-whale-label {
    text-transform: lowercase;
    font-weight: 700;
    font-size: var(--font-size-large);
    transform: scale(1, -1) translateX(6vw);
    filter: drop-shadow(1px 1px 2px white);
}

@media (max-width: 700px) {
    .page-index body {
        overflow: visible;
    }
}