/* ========================================================== Exe.Gaming — Viewport + Background Layers Service ページ共通の背景空間構造とビューポート HUD。 ※ index.html はメインキャンバスに #bg-canvas (Three.js) を使うため このファイルは読み込まない。 ---------------------------------------------------------- z-index レイヤ: -10 bg-depth 深いグラデーション -9 bg-noise 微ノイズ -7 bg-floor パース床 canvas -6 bg-vignette 端ビネット -5 bg-glow-1/2 大きな radial グロー -3 bg-particles 浮遊粒子 -2 bg-poly 正立方体 -1 scanlines 細いスキャンライン 0 poly-lockon 正立方体周辺のロックオン 1 本文・main コンテンツ 3 bg-hud-bars 縦 HUD バー (左右端) 4 viewport-frame 4 隅ブラケット ========================================================== */ /* 深い黒のグラデーション (層を重ねた背景) — 青黒 + 青紫の奥行き */ .bg-depth { position: fixed; inset: 0; pointer-events: none; z-index: -10; background: radial-gradient(ellipse 80% 70% at 72% 45%, rgba(0, 60, 45, 0.18) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 18% 28%, rgba(108, 123, 255, 0.11) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 30% 78%, rgba(122, 92, 255, 0.08) 0%, transparent 65%), radial-gradient(ellipse 60% 55% at 25% 70%, rgba(8, 14, 28, 0.55) 0%, transparent 65%), linear-gradient(135deg, #060812 0%, #07111A 35%, #0A0F1C 65%, #050610 100%); } /* ノイズ (質感) — 青寄りに微チューン */ .bg-noise { position: fixed; inset: 0; pointer-events: none; z-index: -9; opacity: 0.06; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.45 0 0 0 0 0.85 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; } /* 端ビネット (青黒寄りで奥行きを強調) */ .bg-vignette { position: fixed; inset: 0; pointer-events: none; z-index: -6; background: radial-gradient(ellipse 110% 100% at 60% 50%, transparent 30%, rgba(8, 12, 28, 0.62) 100%); } /* パース床 canvas: 画面下部、控えめに */ #bg-floor { position: fixed; bottom: 0; left: 0; width: 100vw; height: 55vh; pointer-events: none; z-index: -7; opacity: 0.85; } @media (max-width: 1023px) { #bg-floor { height: 40vh; opacity: 0.6; } } /* 浮遊粒子 (背景全体) */ .bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: -3; overflow: hidden; } .bg-particles .p { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(0, 255, 198, 0.55); filter: drop-shadow(0 0 4px rgba(0, 255, 198, 0.35)); bottom: -8px; animation: pageParticleDrift linear infinite; will-change: transform, opacity; } .bg-particles .p:nth-child(3n+2) { background: rgba(108, 123, 255, 0.50); filter: drop-shadow(0 0 4px rgba(108, 123, 255, 0.35)); } .bg-particles .p:nth-child(4n+3) { background: rgba(122, 92, 255, 0.45); filter: drop-shadow(0 0 5px rgba(122, 92, 255, 0.35)); } .bg-particles .p:nth-child(1) { left: 6%; animation-duration: 48s; animation-delay: -3s; } .bg-particles .p:nth-child(2) { left: 16%; animation-duration: 56s; animation-delay: -18s; opacity: 0.7; } .bg-particles .p:nth-child(3) { left: 28%; animation-duration: 42s; animation-delay: -32s; } .bg-particles .p:nth-child(4) { left: 38%; animation-duration: 60s; animation-delay: -8s; width: 1.5px; height: 1.5px; opacity: 0.55; } .bg-particles .p:nth-child(5) { left: 48%; animation-duration: 50s; animation-delay: -24s; } .bg-particles .p:nth-child(6) { left: 60%; animation-duration: 55s; animation-delay: -12s; opacity: 0.65; } .bg-particles .p:nth-child(7) { left: 70%; animation-duration: 46s; animation-delay: -38s; width: 1.5px; height: 1.5px; opacity: 0.5; } .bg-particles .p:nth-child(8) { left: 80%; animation-duration: 52s; animation-delay: -6s; } .bg-particles .p:nth-child(9) { left: 90%; animation-duration: 58s; animation-delay: -28s; opacity: 0.55; } .bg-particles .p:nth-child(10) { left: 22%; animation-duration: 64s; animation-delay: -44s; width: 1.5px; height: 1.5px; opacity: 0.45; } .bg-particles .p:nth-child(11) { left: 64%; animation-duration: 44s; animation-delay: -16s; } .bg-particles .p:nth-child(12) { left: 82%; animation-duration: 50s; animation-delay: -22s; width: 1.5px; height: 1.5px; opacity: 0.5; } @keyframes pageParticleDrift { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translate(28px, -110vh); opacity: 0; } } @media (max-width: 1023px) { .bg-particles .p:nth-child(n+8) { display: none; } } /* 正立方体 (ブランド象徴): 右側に控えめに固定配置 */ #bg-poly { position: fixed; top: 0; right: 0; width: 38vw; height: 100vh; pointer-events: none; z-index: -2; opacity: 0.65; display: block; } @media (max-width: 1023px) { #bg-poly { width: 56vw; height: 36vh; top: 56px; right: -4vw; opacity: 0.30; display: block; } } @media (max-width: 480px) { #bg-poly { width: 64vw; height: 30vh; opacity: 0.22; right: -8vw; } } /* ロックオン: 正立方体周辺に十字状のターゲットラインを periodically 表示 */ .poly-lockon { position: fixed; top: 0; right: 0; width: 38vw; height: 100vh; pointer-events: none; z-index: 0; } @media (max-width: 1023px) { .poly-lockon { display: none; } } .poly-lockon .lo { position: absolute; background: rgba(0, 255, 198, 0.45); filter: drop-shadow(0 0 3px rgba(0, 255, 198, 0.4)); opacity: 0; animation: lockonPulse 9s ease-in-out infinite; } .poly-lockon .lo.h-top { top: 30%; left: 35%; right: 35%; height: 1px; animation-delay: -1s; } .poly-lockon .lo.h-bottom { top: 70%; left: 35%; right: 35%; height: 1px; animation-delay: -1.3s; } .poly-lockon .lo.v-left { left: 35%; top: 30%; bottom: 30%; width: 1px; animation-delay: -1.15s; } .poly-lockon .lo.v-right { right: 35%; top: 30%; bottom: 30%; width: 1px; animation-delay: -1.45s; } @keyframes lockonPulse { 0%, 92%, 100% { opacity: 0; } 93% { opacity: 0.9; } 95% { opacity: 0.55; } 98% { opacity: 0.25; } } /* 既存の bg-glow */ .bg-glow-1, .bg-glow-2 { position: fixed; pointer-events: none; z-index: -5; filter: blur(140px); border-radius: 50%; } .bg-glow-1 { top: -220px; left: -120px; width: 520px; height: 520px; background: #1A2152; opacity: 0.42; } .bg-glow-2 { bottom: -240px; right: -140px; width: 620px; height: 620px; background: #2A1A4A; opacity: 0.28; } .scanlines::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(180deg, rgba(0, 255, 159, 0.018) 0px, rgba(0, 255, 159, 0.018) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, rgba(108, 123, 255, 0.014) 0px, rgba(108, 123, 255, 0.014) 1px, transparent 1px, transparent 9px); } /* 縦 HUD バー (ビューポート左右端) */ .bg-hud-bars { position: fixed; inset: 0; pointer-events: none; z-index: 3; } .bg-hud-bars .vbar { position: absolute; top: 0; bottom: 0; width: 1px; background-color: rgba(0, 255, 198, 0.04); background-image: linear-gradient(180deg, rgba(0, 255, 198, 0) 0%, rgba(0, 255, 198, 0) 35%, rgba(0, 255, 198, 0.55) 50%, rgba(0, 255, 198, 0) 65%, rgba(0, 255, 198, 0) 100%); background-size: 100% 60%; background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(0, 255, 198, 0.20)) drop-shadow(0 0 9px rgba(108, 123, 255, 0.10)); } .bg-hud-bars .vbar.left { left: 6px; animation: vbarShimmer 14s linear infinite; } .bg-hud-bars .vbar.right { right: 6px; animation: vbarShimmer 18s linear infinite reverse; animation-delay: -3s; } @keyframes vbarShimmer { 0% { background-position: 0 -60%; } 100% { background-position: 0 160%; } } @media (max-width: 767px) { .bg-hud-bars { display: none; } } /* ビューポート 4 隅 HUD */ .viewport-frame { position: fixed; inset: 14px; pointer-events: none; z-index: 4; } .viewport-frame .vf { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(0, 255, 198, 0.30); filter: drop-shadow(0 0 4px rgba(0, 255, 198, 0.10)); } .viewport-frame .vf.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .viewport-frame .vf.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; } .viewport-frame .vf.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .viewport-frame .vf.br { bottom: 0; right: 0; border-left: 0; border-top: 0; } @media (max-width: 767px) { .viewport-frame { inset: 10px; } .viewport-frame .vf { width: 14px; height: 14px; } }