* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* イントロアニメーション */
.intro-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.intro-animation.hidden {
    display: none;
}

.octagon-svg {
    width: 100vw;
    height: 100vh;
}

/* 白い八角形が縮小していくアニメーション */
.white-octagon {
    fill: #ffffff;
    transform-origin: center;
    animation: octagonShrink 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes octagonShrink {
    0% {
        transform: scale(10);
    }
    100% {
        transform: scale(0);
    }
}

/* メインコンテンツ */
.main-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.main-content.active {
    opacity: 1;
    visibility: visible;
}

.portal-container {
    position: relative;
    width: 800px;
    height: 800px;
}

.portal-container.rotating {
    animation: rotateClockwise 20s linear infinite;
}

@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ポータルボックス */
.portal-box {
    position: absolute;
    width: 140px;
    height: 140px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000000;
    transition: all 0.3s ease;
    opacity: 0;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -70px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.portal-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.portal-box p {
    font-size: 14px;
    color: #666666;
}

/* コンテナが回転する時、各ボックスは位置を保ちつつテキストを正立に */
.portal-container.rotating .portal-box {
    animation: none !important;
    opacity: 1 !important;
    animation-fill-mode: none !important;
}

/* デスクトップ: 各位置でテキストを正立に保つ */
.portal-container.rotating .portal-box[data-angle="0"] {
    transform: translate(0, -300px) rotate(0deg);
    animation: rotateText0 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="45"] {
    transform: translate(212px, -212px) rotate(0deg);
    animation: rotateText45 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="90"] {
    transform: translate(300px, 0) rotate(0deg);
    animation: rotateText90 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="135"] {
    transform: translate(212px, 212px) rotate(0deg);
    animation: rotateText135 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="180"] {
    transform: translate(0, 300px) rotate(0deg);
    animation: rotateText180 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="225"] {
    transform: translate(-212px, 212px) rotate(0deg);
    animation: rotateText225 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="270"] {
    transform: translate(-300px, 0) rotate(0deg);
    animation: rotateText270 20s linear infinite !important;
}

.portal-container.rotating .portal-box[data-angle="315"] {
    transform: translate(-212px, -212px) rotate(0deg);
    animation: rotateText315 20s linear infinite !important;
}

/* 各位置を維持しながらテキストだけ逆回転 */
@keyframes rotateText0 {
    0% { transform: translate(0, -300px) rotate(0deg); }
    100% { transform: translate(0, -300px) rotate(-360deg); }
}

@keyframes rotateText45 {
    0% { transform: translate(212px, -212px) rotate(0deg); }
    100% { transform: translate(212px, -212px) rotate(-360deg); }
}

@keyframes rotateText90 {
    0% { transform: translate(300px, 0) rotate(0deg); }
    100% { transform: translate(300px, 0) rotate(-360deg); }
}

@keyframes rotateText135 {
    0% { transform: translate(212px, 212px) rotate(0deg); }
    100% { transform: translate(212px, 212px) rotate(-360deg); }
}

@keyframes rotateText180 {
    0% { transform: translate(0, 300px) rotate(0deg); }
    100% { transform: translate(0, 300px) rotate(-360deg); }
}

@keyframes rotateText225 {
    0% { transform: translate(-212px, 212px) rotate(0deg); }
    100% { transform: translate(-212px, 212px) rotate(-360deg); }
}

@keyframes rotateText270 {
    0% { transform: translate(-300px, 0) rotate(0deg); }
    100% { transform: translate(-300px, 0) rotate(-360deg); }
}

@keyframes rotateText315 {
    0% { transform: translate(-212px, -212px) rotate(0deg); }
    100% { transform: translate(-212px, -212px) rotate(-360deg); }
}

.portal-box:hover {
    z-index: 100;
}

/* ホバー時、他のアイコンを濃い灰色に */
.portal-box:not(:hover) {
    transition: background 0.3s ease, opacity 0.3s ease;
}

.portal-container:has(.portal-box:hover) .portal-box:not(:hover) {
    background: #888888;
    opacity: 0.4;
}

/* クリック時のアニメーション - クリックされたものだけ拡大 */
.portal-box.clicked {
    animation: simpleExpand 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    z-index: 1000 !important;
}

/* 回転中でもクリック時は拡大アニメーションを優先 */
.portal-container.rotating .portal-box.clicked {
    animation: simpleExpand 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes simpleExpand {
    0% {
        transform: translate(var(--offset-x), var(--offset-y)) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(var(--offset-x), var(--offset-y)) scale(2);
        opacity: 1;
    }
    100% {
        transform: translate(var(--offset-x), var(--offset-y)) scale(5);
        opacity: 0;
    }
}

/* 他のボックスはフェードアウト */
.portal-box.fade-out {
    animation: simpleFade 0.7s ease forwards !important;
}

/* 回転中でもフェードアウトを優先 */
.portal-container.rotating .portal-box.fade-out {
    animation: simpleFade 0.7s ease forwards !important;
}

@keyframes simpleFade {
    to {
        opacity: 0;
    }
}

/* 各ポータルボックスのアニメーション - 時計回りに順次表示 */
.portal-box[data-index="0"] { /* 90度: 右 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

.portal-box[data-index="1"] { /* 45度: 右上 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.625s forwards;
}

.portal-box[data-index="2"] { /* 0度: 上 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.75s forwards;
}

.portal-box[data-index="3"] { /* 315度: 左上 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.875s forwards;
}

.portal-box[data-index="4"] { /* 270度: 左 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}

.portal-box[data-index="5"] { /* 225度: 左下 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 2.125s forwards;
}

.portal-box[data-index="6"] { /* 180度: 下 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 2.25s forwards;
}

.portal-box[data-index="7"] { /* 135度: 右下 */
    animation: boxExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 2.375s forwards;
}

@keyframes boxExpand {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
    }
    100% {
        opacity: 1;
        transform: var(--final-position) scale(1);
    }
}

/* boxExpandアニメーション完了後、その位置を保持 */
.portal-box[data-index="0"],
.portal-box[data-index="1"],
.portal-box[data-index="2"],
.portal-box[data-index="3"],
.portal-box[data-index="4"],
.portal-box[data-index="5"],
.portal-box[data-index="6"],
.portal-box[data-index="7"] {
    animation-fill-mode: forwards;
}

/* 各方向の最終位置 */
.portal-box[data-angle="0"] {
    --final-position: translate(0, -300px);
}

.portal-box[data-angle="45"] {
    --final-position: translate(212px, -212px);
}

.portal-box[data-angle="90"] {
    --final-position: translate(300px, 0);
}

.portal-box[data-angle="135"] {
    --final-position: translate(212px, 212px);
}

.portal-box[data-angle="180"] {
    --final-position: translate(0, 300px);
}

.portal-box[data-angle="225"] {
    --final-position: translate(-212px, 212px);
}

.portal-box[data-angle="270"] {
    --final-position: translate(-300px, 0);
}

.portal-box[data-angle="315"] {
    --final-position: translate(-212px, -212px);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .portal-container {
        width: 100vw;
        height: 100vh;
    }

    .portal-box {
        width: 70px;
        height: 70px;
        margin: -35px 0 0 -35px;
    }

    .portal-box h3 {
        font-size: 11px;
    }

    .portal-box p {
        font-size: 9px;
    }

    .portal-box[data-angle="0"] { --final-position: translate(0, -130px); }
    .portal-box[data-angle="45"] { --final-position: translate(92px, -92px); }
    .portal-box[data-angle="90"] { --final-position: translate(130px, 0); }
    .portal-box[data-angle="135"] { --final-position: translate(92px, 92px); }
    .portal-box[data-angle="180"] { --final-position: translate(0, 130px); }
    .portal-box[data-angle="225"] { --final-position: translate(-92px, 92px); }
    .portal-box[data-angle="270"] { --final-position: translate(-130px, 0); }
    .portal-box[data-angle="315"] { --final-position: translate(-92px, -92px); }
    
    .portal-container.rotating .portal-box[data-angle="0"] { animation: rotateText0Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="45"] { animation: rotateText45Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="90"] { animation: rotateText90Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="135"] { animation: rotateText135Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="180"] { animation: rotateText180Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="225"] { animation: rotateText225Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="270"] { animation: rotateText270Mobile 20s linear infinite !important; }
    .portal-container.rotating .portal-box[data-angle="315"] { animation: rotateText315Mobile 20s linear infinite !important; }
    
    @keyframes rotateText0Mobile {
        0% { transform: translate(0, -130px) rotate(0deg); }
        100% { transform: translate(0, -130px) rotate(-360deg); }
    }
    @keyframes rotateText45Mobile {
        0% { transform: translate(92px, -92px) rotate(0deg); }
        100% { transform: translate(92px, -92px) rotate(-360deg); }
    }
    @keyframes rotateText90Mobile {
        0% { transform: translate(130px, 0) rotate(0deg); }
        100% { transform: translate(130px, 0) rotate(-360deg); }
    }
    @keyframes rotateText135Mobile {
        0% { transform: translate(92px, 92px) rotate(0deg); }
        100% { transform: translate(92px, 92px) rotate(-360deg); }
    }
    @keyframes rotateText180Mobile {
        0% { transform: translate(0, 130px) rotate(0deg); }
        100% { transform: translate(0, 130px) rotate(-360deg); }
    }
    @keyframes rotateText225Mobile {
        0% { transform: translate(-92px, 92px) rotate(0deg); }
        100% { transform: translate(-92px, 92px) rotate(-360deg); }
    }
    @keyframes rotateText270Mobile {
        0% { transform: translate(-130px, 0) rotate(0deg); }
        100% { transform: translate(-130px, 0) rotate(-360deg); }
    }
    @keyframes rotateText315Mobile {
        0% { transform: translate(-92px, -92px) rotate(0deg); }
        100% { transform: translate(-92px, -92px) rotate(-360deg); }
    }
}