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

html {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;

    background-color: #000000;
}

body {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #000000;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;
}

/*
 * 唯一の世界。
 *
 * 背景画像の比率は3:2。
 * スマホ縦・スマホ横・PCでも、
 * 舞台の構図と位置関係は変更しない。
 */
#world-stage {
    position: relative;

    flex: 0 0 auto;

    width:
        min(
            100vw,
            calc(100svh * 1.5)
        );

    aspect-ratio: 3 / 2;

    max-width: 100vw;
    max-height: 100svh;

    overflow: hidden;

    background-color: #000000;

    background-image:
        url("./assets/background-room.jpeg?v=20260801-2146");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        contain;
}

/*
 * CSS水面揺らぎ。
 *
 * 背景画像より前、
 * Three.jsのクジラより後ろに配置する。
 *
 * 水槽上部だけへ弱い光の変化を重ねる。
 */
#water-surface {
    position: absolute;

    z-index: 1;

    top: 21%;
    left: 7%;

    width: 86%;
    height: 22%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.18;

    transform:
        translate3d(0, 0, 0);

    background-image:
        repeating-radial-gradient(
            ellipse at 50% 0%,
            rgba(184, 230, 255, 0.20) 0,
            rgba(154, 214, 247, 0.09) 5%,
            rgba(86, 168, 218, 0.025) 11%,
            rgba(0, 0, 0, 0) 18%
        ),
        repeating-linear-gradient(
            103deg,
            rgba(195, 234, 255, 0.07) 0,
            rgba(195, 234, 255, 0.02) 3%,
            rgba(0, 0, 0, 0) 8%,
            rgba(0, 0, 0, 0) 15%
        );

    background-size:
        34% 155%,
        29% 100%;

    background-position:
        0% 0%,
        100% 0%;

    background-repeat:
        repeat-x;

    filter:
        blur(5px);

    mix-blend-mode:
        screen;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 42%,
            rgba(0, 0, 0, 0) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 42%,
            rgba(0, 0, 0, 0) 100%
        );

    animation:
        water-surface-drift 18s linear infinite,
        water-surface-breathe 9s ease-in-out infinite;
}

#water-surface::before,
#water-surface::after {
    content: "";

    position: absolute;

    inset: -15% -10%;

    pointer-events: none;
}

#water-surface::before {
    opacity: 0.34;

    background:
        radial-gradient(
            ellipse at 20% 10%,
            rgba(174, 225, 255, 0.15),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 55% 0%,
            rgba(190, 235, 255, 0.12),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 84% 8%,
            rgba(135, 205, 244, 0.12),
            transparent 29%
        );

    filter:
        blur(8px);

    animation:
        water-surface-secondary 13s ease-in-out infinite alternate;
}

#water-surface::after {
    opacity: 0.16;

    background:
        repeating-linear-gradient(
            78deg,
            transparent 0,
            transparent 8%,
            rgba(204, 238, 255, 0.14) 11%,
            transparent 16%,
            transparent 24%
        );

    filter:
        blur(7px);

    animation:
        water-surface-cross 21s linear infinite;
}

/*
 * Three.js用Canvas。
 */
#whale-canvas {
    position: absolute;

    z-index: 2;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background:
        transparent;

    pointer-events:
        none;
}

/*
 * クレジット
 */
.credit {
    position: fixed;

    z-index: 3;

    right: 18px;
    bottom: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    max-width:
        calc(100vw - 36px);

    font-size: 13px;
    line-height: 1.45;

    text-align: right;

    color:
        rgba(255, 255, 255, 0.62);

    pointer-events:
        auto;
}

.credit a {
    color:
        rgba(255, 255, 255, 0.62);

    text-decoration:
        none;
}

.credit a:hover {
    color:
        rgba(255, 255, 255, 0.86);
}

@keyframes water-surface-drift {
    0% {
        background-position:
            0% 0%,
            100% 0%;
    }

    50% {
        background-position:
            48% 5%,
            48% 0%;
    }

    100% {
        background-position:
            100% 0%,
            0% 0%;
    }
}

@keyframes water-surface-breathe {
    0%,
    100% {
        opacity: 0.13;

        transform:
            translate3d(-0.5%, 0, 0)
            scaleY(0.98);
    }

    50% {
        opacity: 0.21;

        transform:
            translate3d(0.5%, 1%, 0)
            scaleY(1.03);
    }
}

@keyframes water-surface-secondary {
    0% {
        transform:
            translate3d(-2%, -1%, 0)
            scaleX(0.98);
    }

    100% {
        transform:
            translate3d(2%, 1%, 0)
            scaleX(1.04);
    }
}

@keyframes water-surface-cross {
    0% {
        transform:
            translate3d(-10%, 0, 0);
    }

    100% {
        transform:
            translate3d(10%, 0, 0);
    }
}

/*
 * スマホ縦。
 * 世界の構図は変えない。
 */
@media (
    orientation: portrait
) and (
    max-width: 768px
) {
    .credit {
        right: 16px;
        bottom: 20px;

        max-width:
            calc(100vw - 32px);

        font-size: 11px;
        line-height: 1.45;
    }
}

/*
 * スマホ横。
 * 世界の構図は変えない。
 */
@media (
    orientation: landscape
) and (
    max-height: 600px
) {
    .credit {
        right: 14px;
        bottom: 12px;

        max-width:
            calc(100vw - 28px);

        font-size: 10px;
        line-height: 1.35;
    }
}

/*
 * 動きを抑える設定を選んでいる端末では、
 * 水面演出も停止する。
 */
@media (
    prefers-reduced-motion: reduce
) {
    #water-surface,
    #water-surface::before,
    #water-surface::after {
        animation:
            none;
    }
}