@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

*,
html {
    padding: 0;
    margin: 0;
    list-style-type: none;
    box-sizing: border-box;
}

ul {
    list-style-type: none;
}

html,
body {
    font-family: "Google Sans", "Zen Kaku Gothic New", "Zen角ゴシック New", sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
}

body {
    background: #000;
}

h2 {
    font-size: 30px;
}

/* --- Fullscreen Loading Screen --- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100lvh;
    background: #020710;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    color: #fff;
    transition: opacity 0.5s ease;

    .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .loading-spinner {
        width: 44px;
        height: 44px;
        border: 2px solid rgba(255, 255, 255, 0.15);
        border-top: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        animation: loading-spin 1s linear infinite;
    }

    .loading-title {
        font-size: 14px;
        letter-spacing: 0.25em;
        color: #fff;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }

    .loading-sub {
        font-size: 12px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.55);
    }
}

@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Cesium 3D Container --- */
#cesiumContainer {
    height: 100lvh;
    width: 100vw;
    position: fixed;
    top: 0;
    color: #000;
    z-index: -1;

    .cesium-viewer {
        padding: 0;
    }

    .cesium-viewer-toolbar,
    .cesium-viewer-bottom {
        display: none;
    }
}

/* --- Main Layout Container --- */
.container {
    position: relative;
    width: 100lvw;

    .tops {
        padding: 30px 30px 80px 30px;
        height: 100lvh;
        display: flex;
        gap: 20px;
        flex-direction: column;
        justify-content: end;

        @media (max-width: 600px) {
            padding: 30px 20px 100px 20px;
        }
    }

    .data-flex {
        width: 100%;
    }

    h1 {
        font-weight: 400;
        letter-spacing: .025em;
        display: flex;
        flex-direction: column;
        gap: 16px;
        color: #fff;

        .large {
            font-size: clamp(30px, 2.6vw, 42px);
            padding: 0;
        }

        p {
            font-size: clamp(12px, 1.2vw, 18px);
            line-height: 1;
            padding: 0 0 40px 0;
        }
    }
}

/* --- Camera Info HUD --- */
.camera-info {
    display: none;

    li {
        font-size: 11px;
        color: #fff;
    }
}

/* --- Compass Widget (方角ウィジェット) --- */
.compass-widget {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    pointer-events: none;
    /* クリック機能なし、マウス操作を邪魔しない */

    .compass-dial {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 120px;
        /* 3Dパースペクティブの視深度 */
    }

    .compass-svg {
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotateX(56deg);
        /* マップの見下ろし角に合わせた立体パース */
        transform-origin: center center;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
        /* 3D的な接地感・立体感 */

        .compass-ring {
            fill: none;
            stroke: rgba(255, 255, 255, 0.3);
            stroke-width: 1;
        }

        .compass-north-dot {
            fill: rgba(255, 255, 255, 0.85);
        }

        .compass-needle {
            transform-origin: 18px 18px;

            .needle-north {
                fill: #ff479d;
            }

            .needle-south {
                fill: rgba(255, 255, 255, 0.4);
            }
        }
    }

    .compass-deg {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        min-width: 48px;
    }

    @media (max-width: 600px) {
        top: 16px;
        right: 16px;

        .compass-dial {
            width: 36px;
            height: 36px;
        }

        .compass-deg {
            display: none;
        }
    }
}

/* --- Navigation Points --- */
.points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    transition: 1s;

    li {
        font-size: 12px;
        letter-spacing: .05em;
        border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
        padding: 0 2px 2px 2px;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        display: inline-block;
        transition: color 0.3s, border-color 0.3s;

        &:hover {
            color: #fff;
            border-bottom-color: rgba(255, 255, 255, 0.7);
        }

        &.is-active {
            color: #fff;
            border-bottom: 1px #fff solid;
        }
    }

    &.moving {
        opacity: 0.5;

        li {
            pointer-events: none;
            cursor: auto;
        }
    }
}

/* --- Second Section --- */
.second {
    padding: 0;

    .prof {
        padding: 100px 30px;
        color: #fff;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        letter-spacing: .05em;
        line-height: 1.8;
        z-index: 1;

        @media (max-width: 600px) {
            padding: 0 20px 100px 20px;
        }
    }

    #imgbox {
        line-height: 0;
        position: fixed;
        z-index: 1;
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
        width: 70%;
        max-width: 640px;
        text-align: right;
        opacity: 0;
        transition: .4s;
        background: rgba(255, 255, 255, 0);
        padding: 0 6px 2px 0;

        img {
            width: 100%;
            position: relative;
            z-index: 2;
        }

        &.active {
            opacity: 1;
        }

        @media (max-width: 600px) {
            transform: translate(-100%, -80%);
            width: 65%;
        }
    }

    .icando {
        padding: 100px 30px 100px 30px;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        font-size: 14px;
        letter-spacing: .05em;
        line-height: 1.8;
        z-index: -1;

        h2 {
            font-weight: 400;
            letter-spacing: .1em;
            padding: 0 0 60px 0;
        }

        h3 {
            font-weight: 600;
            letter-spacing: .1em;
            padding: 0 0 30px 0;
        }


        .parent {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 50px;

            >div:first-child {
                grid-column: 1 / -1;
            }

            .child {
                display: flex;
                gap: 30px;

                ul {
                    display: flex;
                    align-items: start;
                    align-content:flex-start;
                    flex-wrap: wrap;
                    gap: 12px;
                    padding: 0 0 20px 0;
                    width:25%;max-width:200px;
                    li {
                        width: 32px;
                        line-height: 0;
                        img {
                            width: 100%;
                        }
                    }
                }

                p {
                    flex:1;
                    letter-spacing: .1em;
                    padding: 0 0 40px 0;
                }
            }

            @media (max-width: 600px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 40px;
            }
        }
    }

}

/* --- Data Flex & Sticky Line --- */
.data-flex {
    h2 {
        color: #fff;
        font-weight: 400;
        letter-spacing: .1em;
        padding: 100px 30px 60px 30px;

        @media (max-width: 600px) {
            padding: 100px 0 0 20px;
        }
    }

    .line {
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.4);
        position: sticky;
        top: 70%;
        transform: translateY(-50%);
        z-index: 0;
        transition: .5s;

        &:has(+ #imgbox.active) {
            background: rgba(255, 255, 255, 1);
        }
    }
}

/* --- Data List (Works) --- */
#data-list {
    padding: 60px 0 160px 0;
    display: grid;
    gap: 0;

    li {
        width: 100%;
        display: flex;
        gap: 10px;
        font-size: 14px;
        letter-spacing: .1em;
        padding: 32px 30px;
        color: #fff;
        position: relative;
        transition: .5s;

        &::before,
        &::after {
            position: absolute;
            content: "";
            left: 0;
            width: 6px;
            height: 1px;
            background: rgba(255, 255, 255, 0.4);
            transition: .3s;
        }

        &::before {
            top: 0;
        }

        &::after {
            bottom: 0;
        }

        img {
            display: none;
            opacity: 0.5;
        }

        .desc {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .title {
                line-height: 1.4;
                font-size: 16px;

                @media (max-width: 600px) {
                    width: 50%;
                }
            }

            .description {
                max-width: 480px;
                display: grid;
                grid-template-rows: 0fr;
                transition: .4s;

                >div {
                    overflow: hidden;
                    font-size: 12px;
                    line-height: 180%;
                }
            }

            .cat {
                display: flex;
                gap: 8px;

                .box {
                    font-size: 12px;
                    letter-spacing: .05em;
                    font-weight: 600;
                    line-height: 1;
                    padding: 3px 4px 2px 4px;
                    background: #fff;
                    color: #000;
                }
            }
        }

        &.is-touching {
            background: rgba(255, 255, 255, 1);
            color: #000;

            &::before,
            &::after {
                width: 20px;
                background: rgba(255, 255, 255, 1);
            }

            .desc {
                .description {
                    grid-template-rows: 1fr;
                }

                .cat .box {
                    background: #003169;
                    color: #fff;

                    &.LAYOUT {
                        background: #ffa72b;
                    }

                    &.MOTION {
                        background: #ea2bff;
                    }

                    &.STUDIO {
                        background: #2b55ff;
                    }

                    &.PAPERMEDIA {
                        background: #188c67;
                    }

                    &.CI_VI {
                        background: #75991a;
                    }
                }
            }
        }

        @media (max-width: 600px) {
            padding: 40px 20px;
            width: 100%;
        }
    }
}