/* カラーパレットと基本設定 */
:root {
    --base-color: #03030F;
    --main-color: #15F5BA;
    --accent-color-1: #F72798;
    --accent-color-2: #836FFF;
    --text-color: #FFFFFF;
    --font-english: 'Orbitron', sans-serif;
    --font-japanese: 'Zen Kaku Gothic New', sans-serif;
}

body {
    background-color: var(--base-color);
    color: var(--text-color);
    font-family: var(--font-japanese);
    overflow: hidden;
    margin: 0;
}

/* イントロ画面のスタイル */
.intro { height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; transition: opacity 1s ease-out; }
.intro-content { position: relative; padding: 2vw; }
.border { position: absolute; background-color: var(--main-color); box-shadow: 0 0 10px var(--main-color); }
.border-top, .border-bottom { width: 0%; height: 2px; }
.border-left, .border-right { width: 2px; height: 0%; }
.border-top { top: 0; left: 0; animation: draw-width 1s ease-out 0.5s forwards; }
.border-right { top: 0; right: 0; animation: draw-height 1s ease-out 1.5s forwards; }
.border-bottom { bottom: 0; right: 0; animation: draw-width 1s ease-out 0.5s forwards; }
.border-left { top: 0; left: 0; animation: draw-height 1s ease-out 1.5s forwards; }
@keyframes draw-width { to { width: 100%; } }
@keyframes draw-height { to { height: 100%; } }
.glitch-text { font-family: var(--font-english); font-size: 8vw; font-weight: 700; letter-spacing: 0.2em; color: var(--text-color); display: flex; position: relative; z-index: 1; }
.space { display: inline-block; width: 1em; }
.char { position: relative; animation: glitch-skew 1s infinite linear alternate-reverse; }
.char::before, .char::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color); overflow: hidden; }
.char::before { left: 2px; text-shadow: -2px 0 var(--accent-color-1); animation-name: glitch-anim-1; animation-duration: 2.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate-reverse; }
.char::after { left: -2px; text-shadow: -2px 0 var(--main-color); animation-name: glitch-anim-2; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate-reverse; }
.char:nth-child(1)::before { animation-delay: -0.1s; } .char:nth-child(1)::after { animation-delay: -0.2s; }
.char:nth-child(2)::before { animation-delay: -0.5s; } .char:nth-child(2)::after { animation-delay: -0.8s; }
.char:nth-child(3)::before { animation-name: glitch-anim-horizontal-1; animation-duration: 2s; animation-delay: -0.3s; }
.char:nth-child(3)::after  { animation-name: glitch-anim-horizontal-2; animation-duration: 2.2s; animation-delay: -0.6s; }
.char:nth-child(4)::before { animation-delay: -0.9s; } .char:nth-child(4)::after { animation-delay: -0.1s; }
.char:nth-child(6)::before { animation-delay: -0.7s; } .char:nth-child(6)::after { animation-delay: -0.4s; }
.char:nth-child(7)::before { animation-delay: -0.2s; } .char:nth-child(7)::after { animation-delay: -0.5s; }
.char:nth-child(8)::before { animation-name: glitch-anim-horizontal-1; animation-duration: 3s; animation-delay: -1.1s; }
.char:nth-child(8)::after  { animation-name: glitch-anim-horizontal-2; animation-duration: 1.8s; animation-delay: -0.7s; }
.char:nth-child(9)::before { animation-delay: -0.6s; } .char:nth-child(9)::after { animation-delay: -0.9s; }
.char:nth-child(10)::before { animation-name: glitch-anim-horizontal-1; animation-duration: 2.3s; animation-delay: -0.3s; }
.char:nth-child(10)::after  { animation-name: glitch-anim-horizontal-2; animation-duration: 1.9s; animation-delay: -0.5s; }
.char:nth-child(11)::before { animation-name: glitch-anim-horizontal-1; animation-duration: 2.8s; animation-delay: -0.8s; }
.char:nth-child(11)::after  { animation-name: glitch-anim-horizontal-2; animation-duration: 1.6s; animation-delay: -1s; }
@keyframes glitch-anim-1{0%{clip-path:inset(10% 0 85% 0)}20%{clip-path:inset(90% 0 1% 0)}40%{clip-path:inset(55% 0 25% 0)}60%{clip-path:inset(20% 0 78% 0)}80%{clip-path:inset(40% 0 42% 0)}100%{clip-path:inset(70% 0 20% 0)}}
@keyframes glitch-anim-2{0%{clip-path:inset(88% 0 2% 0)}20%{clip-path:inset(20% 0 75% 0)}40%{clip-path:inset(60% 0 30% 0)}60%{clip-path:inset(95% 0 5% 0)}80%{clip-path:inset(5% 0 90% 0)}90%{clip-path:inset(35% 0 58% 0)}100%{clip-path:inset(40% 0 55% 0)}}
@keyframes glitch-anim-horizontal-1{0%{clip-path:polygon(0 0,5% 0,5% 100%,0 100%)}40%{clip-path:polygon(45% 0,55% 0,55% 100%,45% 100%)}60%{clip-path:polygon(90% 0,100% 0,100% 100%,90% 100%)}100%{clip-path:polygon(0 0,5% 0,5% 100%,0 100%)}}
@keyframes glitch-anim-horizontal-2{0%{clip-path:polygon(95% 0,100% 0,100% 100%,95% 100%)}30%{clip-path:polygon(20% 0,30% 0,30% 100%,20% 100%)}70%{clip-path:polygon(60% 0,75% 0,75% 100%,60% 100%)}100%{clip-path:polygon(95% 0,100% 0,100% 100%,95% 100%)}}
@keyframes glitch-skew{0%{transform:skew(0deg)}5%{transform:skew(.2deg,-.1deg)}10%{transform:skew(0deg)}80%{transform:skew(0deg)}85%{transform:skew(-.5deg,.3deg)}95%{transform:skew(0deg)}100%{transform:skew(0deg)}}
.loading-container{position:absolute;bottom:15%;width:60%;max-width:600px;background-color:rgba(255,255,255,.1);border-radius:2px;padding:2px}
#loading-bar{width:0%;height:4px;background-image:repeating-linear-gradient(90deg,var(--main-color),var(--main-color) 10px,transparent 10px,transparent 15px);transition:width .05s linear}
#loading-percentage{margin-top:15px;font-size:1.2rem;letter-spacing:.1em; font-family: var(--font-english);}

/* メインコンテンツ */
.main-content { opacity: 0; pointer-events: none; transition: opacity 1s ease-in; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
#p5-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.scene { width: 100%; height: 100%; perspective: 1000px; display: flex; justify-content: center; align-items: center; }
.nav-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; }

/* トリガーキューブのスタイル */
.cube-container { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; cursor: pointer; transform: translate(-50%, -50%); }
.trigger-container { width: 160px; height: 160px; pointer-events: auto; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; z-index: 10; }
.scene.is-open .trigger-container { width: 100px; height: 100px; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.trigger-cube { animation: pulse 4s infinite ease-in-out, rotate-y 20s infinite linear; transform: translateZ(-80px); }
.trigger-cube .face { border-color: var(--accent-color-2); }
.face { position: absolute; width: 100%; height: 100%; background-color: transparent; border: 1px solid; }
.face.face-front  { transform: rotateY(  0deg) translateZ(80px); }
.face.face-back   { transform: rotateY(180deg) translateZ(80px); }
.face.face-right  { transform: rotateY( 90deg) translateZ(80px); }
.face.face-left   { transform: rotateY(-90deg) translateZ(80px); }
.face.face-top    { transform: rotateX( 90deg) translateZ(80px); }
.face.face-bottom { transform: rotateX(-90deg) translateZ(80px); }
.trigger-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-english); font-size: 1.5rem; animation: pulse-text 4s infinite ease-in-out; color: var(--text-color); }
@keyframes pulse { 0%, 100% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } }
@keyframes pulse-text { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes rotate-y { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* ナビゲーションアイテムのスタイル */
.nav-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.scene.is-open .nav-item { pointer-events: auto; opacity: 1; }
.icon-circle { width: 144px; height: 144px; border: 2px dashed; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); position: relative; overflow: hidden; }
.icon-circle i { font-size: 60px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); }
.label-wrapper { margin-top: 20px; width: 180px; text-align: center; height: 2em; /* ラベルの高さを確保 */ }
.nav-icon { border-color: var(--main-color); color: var(--main-color); }
.nav-label { font-family: var(--font-english); font-size: 1.3rem; color: var(--main-color); text-shadow: 0 0 5px var(--main-color); position: relative; height: 100%; width: 100%; transition: color 0.3s ease, text-shadow 0.3s ease; }
.nav-label span { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); }
.nav-label .en { opacity: 1; transform: translateX(-50%) translateY(0); }
.nav-label .jp { opacity: 0; transform: translateX(-50%) translateY(10px); font-family: var(--font-japanese); font-weight: 900; }

/* ナビゲーションアイテムのホバーエフェクト */
.nav-item:hover .icon-circle { border-style: solid; border-color: var(--accent-color-1); transform: scale(1.05); }
.nav-item:hover .nav-label { color: var(--accent-color-1); text-shadow: 0 0 15px var(--accent-color-1); }
.nav-item:hover .nav-label .en { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.nav-item:hover .nav-label .jp { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ナビゲーションの展開位置と遅延 */
.scene.is-open #nav-home    { transition-delay: 0.1s; }
.scene.is-open #nav-about   { transition-delay: 0.2s; }
.scene.is-open #nav-works   { transition-delay: 0.3s; }
.scene.is-open #nav-contact { transition-delay: 0.4s; }

/* ★★★ 上下左右展開（十字レイアウト）に変更 ★★★ */
.scene.is-open #nav-home    { transform: translate(-50%, -50%) translateY(-30vh); }
.scene.is-open #nav-about   { transform: translate(-50%, -50%) translateX(30vh); }
.scene.is-open #nav-works   { transform: translate(-50%, -50%) translateY(30vh); }
.scene.is-open #nav-contact { transform: translate(-50%, -50%) translateX(-30vh); }