/* * ASTRAEA ページ遷移：上品リビール式 * * 離脱: * 1. 中央にロゼゴールドの細線が左右に伸びる (220ms) * 2. 上下から白いカーテンが閉じる (400ms) * 3. 中央に学園紋章が現れて軽く脈動 (350ms) * * 入場: * 1. 紋章がフェードアウト (250ms) * 2. 白カーテンが開く (500ms) * 3. 中央のロゼゴールド線が消える (250ms) * * 4軸ランダム（水平 / 垂直 / 斜め45° / 斜め-45°） */ #vh-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; overflow: hidden; } #vh-overlay.vh-on { visibility: visible; } /* 回転コンテナ */ .vh-rot { position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax; transform: translate(-50%, -50%) rotate(var(--vh-angle, 0deg)); transform-origin: center center; will-change: transform; } /* 深ブラウン×ロゼゴールドのカーテン（背景の生成りと明確に対比） */ .vh-curtain { position: absolute; left: 0; right: 0; height: 0; background: linear-gradient(180deg, #2a1d14 0%, #3a2818 45%, #4a3424 50%, #3a2818 55%, #2a1d14 100%); box-shadow: 0 0 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(226, 189, 163, .35) inset; will-change: height; transition: height 400ms cubic-bezier(.65, .05, .35, 1); } .vh-curtain.vh-top { top: 0; } .vh-curtain.vh-bottom { bottom: 0; } /* ロゼゴールド線（左→右にシュッと引かれる） */ .vh-line { position: absolute; top: 50%; left: 0; width: 0; height: 1px; margin-top: -0.5px; background: linear-gradient(90deg, transparent 0%, #e2bda3 15%, #c89b7b 50%, #e2bda3 85%, transparent 100%); box-shadow: 0 0 12px rgba(226, 189, 163, .85), 0 0 24px rgba(200, 155, 123, .45); will-change: width, opacity; /* 横線がゆっくり横へ伸びる演出（JS 側 EXIT_LINE_MS / ENTER_LINE_MS と同期） */ transition: width 900ms cubic-bezier(.45, .1, .35, 1), opacity 300ms ease; opacity: 0; } /* 紋章（学園マーク、常に正立） */ .vh-symbol { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; background: center / contain no-repeat; opacity: 0; transform: scale(0.6); transition: opacity 350ms cubic-bezier(.4, 0, .2, 1), transform 350ms cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 0 12px rgba(200, 155, 123, .35)); z-index: 5; } /* Exit */ #vh-overlay.vh-exit-1 .vh-line { width: 200vmax; opacity: 1; } #vh-overlay.vh-exit-2 .vh-curtain { height: 100vmax; } #vh-overlay.vh-exit-3 .vh-symbol { opacity: 1; transform: scale(1); animation: vh-symbol-pulse 650ms ease-in-out 200ms; } @keyframes vh-symbol-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(226, 189, 163, .8)); } 100% { transform: scale(1); } } /* Enter Phase 0 */ #vh-overlay.vh-enter-0 .vh-curtain { height: 100vmax; transition: none; } #vh-overlay.vh-enter-0 .vh-line { width: 200vmax; opacity: 1; transition: none; } #vh-overlay.vh-enter-0 .vh-symbol { opacity: 1; transform: scale(1); transition: none; } #vh-overlay.vh-enter-1 .vh-symbol { opacity: 0; transform: scale(1.3); transition: opacity 250ms ease-out, transform 300ms cubic-bezier(.4, 0, .2, 1); } #vh-overlay.vh-enter-2 .vh-curtain { height: 0; transition: height 500ms cubic-bezier(.7, 0, .3, 1); } #vh-overlay.vh-enter-3 .vh-line { opacity: 0; transition: opacity 250ms ease-out; } body.vh-active { overflow: hidden; padding-right: var(--vh-scrollbar-w, 0px); } /* ============================================================ * 遷移直後の「白フラッシュ」防止 * - の inline スクリプトが sessionStorage を見て * html.astraea-transition-incoming を即時付与する * - body 描画前から背景をカーテン色（深ブラウン）にし、body 自体を不可視化 * - astraea-transition.js の playEnter() がオーバーレイを構築し終えた瞬間に * クラスを外して body を可視化（このときオーバーレイは既に画面を覆っているので * ユーザーの目には白フラッシュが見えない） * ============================================================ */ html.astraea-transition-incoming { background: #2a1d14; /* vh-curtain と同系色 */ } html.astraea-transition-incoming body { visibility: hidden; }