/* Base & Resets */
:root {
    --bg-color: #05060f;
    --primary: #FFB020; /* 魔法のランプカラー */
    --bg-base: #0a0a15; /* 深い夜空 */
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --font-heading: 'Zen Old Mincho', serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --scroll-progress: 0;
}

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

/* 基本背景・Safari immersion設定 */
html {
    background-color: #050010;
    /* 背景をhtmlタグに直接、強力に固定（Safariのバー裏透過を確実にする） */
    background-image: 
        linear-gradient(to bottom, rgba(5, 8, 20, 1) 0%, rgba(5, 8, 20, 0.4) 20%, rgba(5, 8, 20, 0) 50%),
        url('assets/bg-dawn.png');
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    scroll-behavior: smooth;
    min-height: 100.1%; /* わずかに超えさせてSafariに全画面描画を促す */
    margin: 0;
    padding: 0;
}

/* TOPページ専用 */
body.is-home::before {
    display: none; /* html側に統合したため不要 */
}

body.is-home {
    background: transparent !important;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 80px;
}

body {
    background-color: #050010;
    color: var(--text-main, #ffffff);
    font-family: var(--font-body);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

/* ルビ（ふりがな）の微調整：控えめで上品な印象に */
rt {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
    margin-bottom: -0.1em; /* さらに文字に近づけました */
}

/* TOPページで背景を透かすための指定 */
body.is-home {
    background-color: transparent !important;
}

@keyframes flight-carpet {
    0% { background-position: 50% 100%; background-size: 100%; }
    100% { background-position: 50% 85%; background-size: 110%; }
}

/* 共通背景レイヤー */
body::after {
    display: none; /* すでに本体背景に統合済み */
}

.light-glow-overlay {
    position: fixed;
    top: -0.5lvh; /* わずかにはみ出させる */
    left: 0;
    width: 100%;
    height: 101lvh;
    background: radial-gradient(circle at center bottom, rgba(255, 176, 32, 0.45) 0%, transparent 75%);
    pointer-events: none;
    z-index: -8;
    opacity: calc(0.2 + (var(--scroll-progress) * 0.5));
}

/* Header & Footer */
.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3vw;
    z-index: 9999;
    background: linear-gradient(135deg, rgba(15, 25, 50, 0.8) 0%, rgba(5, 10, 25, 0.6) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.is-home .glass-nav {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: #ffffff;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    opacity: 0.8;
}

.nav-links a:hover,
.glass-nav .nav-links a.is-current-page {
    color: var(--primary) !important;
    opacity: 1 !important;
}

.glass-nav .nav-links a.is-current-page {
    text-shadow: 0 0 15px rgba(255, 176, 32, 0.6) !important; /* 滞在中の意思ある発光を最優先で維持 */
    font-weight: 600 !important;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.4s ease;
}

/* ラインは「ホバーした時」にだけ現れる仕様に限定 */
.nav-links a:hover::after {
    width: 100%;
}

/* Header Main CTA Button (Glowing Glass for Dark Tone) */
.nav-cta {
    padding: 0.6rem 1.4rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 176, 32, 0.8) !important;
    border-radius: 50px;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: var(--primary) !important;
    text-shadow: 0 0 10px rgba(255, 176, 32, 0.5);
    box-shadow: 0 0 15px rgba(255, 176, 32, 0.2), inset 0 0 10px rgba(255, 176, 32, 0.1);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--primary) !important;
    color: #000 !important;
    box-shadow: 0 0 30px rgba(255, 176, 32, 0.8);
    transform: translateY(-2px);
    text-shadow: none;
}

.logo a {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    z-index: 1;
}

.logo a:hover {
    /* 炎の色彩を「淡いシャンパンゴールド系」へシフト */
    background: linear-gradient(to top, #d9a05b 0%, #e8c691 40%, #f5e3c3 70%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-breathing 2.0s ease-in-out infinite alternate;
}

/* 発光専用の背面レイヤー */
.logo a::after {
    content: 'nijigaoka,lab';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    color: #e8c691;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.logo a:hover::after {
    opacity: 1;
    /* 発光も淡く、広がりを持たせる */
    text-shadow: 0 0 12px rgba(255, 176, 32, 0.5), 
                 0 -5px 25px rgba(232, 198, 145, 0.4), 
                 0 -10px 45px rgba(255, 245, 180, 0.3);
    animation: text-breathing 2.0s ease-in-out infinite alternate;
}

.nav-links a:hover {
    opacity: 1;
    color: var(--primary);
    text-shadow: 0 0 12px rgba(255, 176, 32, 0.8), 0 0 24px rgba(255, 176, 32, 0.4);
}

@keyframes text-burning {
    0% { transform: skewX(-1deg) translateY(0); filter: brightness(1.1) contrast(1.1); }
    100% { transform: skewX(1deg) translateY(-0.5px); filter: brightness(1.3) contrast(1.2); }
}

/* --- Logo Spark Effect --- */
.logo-spark {
    position: absolute;
    bottom: 5px;
    left: 10%;
    width: 1.5px;
    height: 1.5px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary), 0 0 8px rgba(255, 176, 32, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.logo:hover .logo-spark {
    opacity: 1;
}

/* ロゴの文字幅に合わせて配置を分散 */
.l-spark-1 { left: 15%; }
.l-spark-2 { left: 35%; }
.l-spark-3 { left: 55%; }
.l-spark-4 { left: 75%; }
.l-spark-5 { left: 90%; }

.logo:hover .l-spark-1 { animation: logo-spark-fly-1 6.2s linear infinite 0.2s; }
.logo:hover .l-spark-2 { animation: logo-spark-fly-2 5.5s linear infinite 1.5s; }
.logo:hover .l-spark-3 { animation: logo-spark-fly-1 7.1s linear infinite 0.8s; }
.logo:hover .l-spark-4 { animation: logo-spark-fly-2 6.8s linear infinite 2.2s; }
.logo:hover .l-spark-5 { animation: logo-spark-fly-1 5.9s linear infinite 0.5s; }

@keyframes logo-spark-fly-1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    15% { opacity: 0.8; }
    40% { transform: translate(-5px, -15px) scale(0.9); }
    70% { transform: translate(3px, -35px) scale(0.8); }
    100% { transform: translate(-2px, -60px) scale(0); opacity: 0; }
}

@keyframes logo-spark-fly-2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    45% { transform: translate(6px, -20px) scale(1.1); }
    75% { transform: translate(-4px, -45px) scale(0.7); }
    100% { transform: translate(2px, -75px) scale(0); opacity: 0; }
}

.footer {
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom)); /* iOSのセーフエリア（バーの裏側）を考慮した余白 */
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    position: relative;
    z-index: 10;
    scroll-snap-align: none; /* スナップの競合（震え）を防ぐため解除 */
}

/* -------------------------------------
 * Scrolltelling Scene Configuration
 * ------------------------------------- */
.scroll-story {
    display: block;
    position: relative;
    z-index: 10; /* 背景 (-10〜-8) や 背景容器 (1〜2) より前面に */
}

.scene {
    position: relative;
    min-height: 100vh;
    min-height: 100svh; /* 小さい状態のビューポートを基準にする */
    min-height: 100dvh;
    padding: 10rem 2rem 12vh; /* 下部に余裕を持たせてバーを避ける */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow-x: hidden;
}

/* シーン背景写真のディゾルブ演出 */
#cinematic-bg-container {
    position: fixed;
    top: -0.5lvh;
    left: 0;
    width: 100%;
    height: 101lvh; /* 安定した最長Viewportを基準にする */
    z-index: 1; /* 背景 (-10〜-8) より上、コンテンツ (10) より下 */
    pointer-events: none;
    overflow: hidden;
}

#cinematic-bg-container::after {
    /* 背景写真の上に暗い幕を掛けて文字を読ませる */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 8, 20, 0.7), rgba(5, 8, 20, 0.3));
    z-index: 2;
}

.cinematic-bg {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; /* 親コンテナの102lvhに合わせる */
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out; /* ゆっくりとしたディゾルブ */
    /* 写真が夜空に溶け込む */
    mix-blend-mode: overlay;
    filter: grayscale(20%) contrast(1.1);
}

.cinematic-bg.active {
    opacity: 0.6; /* フルスクリーンでふわっと浮き上がる */
}

.scene-content {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    padding: 3rem 2rem;
}

/* 左揃えと1本の線（エディトリアルレイアウト）用 */
.left-align-scene .scene-content {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    text-align: left;
    padding-left: 3rem;
    padding-right: 1rem;
    position: relative;
}

.left-align-scene .scene-actions {
    justify-content: flex-start;
}

/* Typography & Glow */
.project-badge {
    font-family: var(--font-heading);
    color: var(--primary);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem; /* 灯火と文字のほどよいスペース */
    width: 100%;
    animation: firefly-glow-badge 4s ease-in-out infinite alternate;
}

/* 日本語「まほうのランプ」を灯火に向けて右寄せ */
.project-badge > .text-chunk:first-child {
    font-size: 1.05em; /* 左右のサイズ差を少し抑える */
    font-weight: 700;
    letter-spacing: 0.2em; /* すこしだけゆとりを持たせる */
    text-align: right;
    margin-right: -0.2em; /* text-align: right 時の右端の余白を打ち消す */
}

/* 英語「PROJECT」をすこし戻して灯火に向けて左寄せ */
.project-badge > .text-chunk:last-child {
    font-size: 0.95em; /* 小さすぎたのを少し戻す */
    font-weight: 500;
    letter-spacing: 0.65em; /* 左の全角文字と同じ物理幅になるよう大きく広げる */
    text-align: left;
    margin-right: -0.65em; /* letter-spacing による右端の余白を打ち消す */
}

/* 魔法のランプの灯火（画像ベースの多層アニメーション） */
.magic-lamp-flame {
    position: relative;
    width: 24px;
    height: 36px;
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: middle;
    top: 1px;
    /* 外側のグロー効果：フィルタの外に出して鮮やかに */
    filter: drop-shadow(0 0 10px rgba(255, 176, 32, 0.5));
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flame-liquid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 液状化エフェクトを炎の核となる部分だけに限定適用 */
    filter: url('#flame-filter');
    isolation: isolate;
}

.flame-layer {
    position: absolute;
    bottom: -8px; /* ロゴに接地 */
    left: 50%;
    width: 36px;
    height: 54px;
    transform: translateX(-50%);
    background-image: url('assets/flame_patterns.png');
    background-size: 400% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: lighten;
    pointer-events: none;
    transform-origin: center bottom;
}

/* レイヤーごとの設定：フィルタで溶けるため、不透明度を少し高めに設定 */
.layer-1 {
    background-position: 66.6% 0;
    animation: flame-flicker-1 1.8s ease-in-out infinite alternate;
    z-index: 3;
    opacity: 0.95;
}

.layer-2 {
    background-position: 0% 0;
    animation: flame-flicker-2 2.5s ease-in-out infinite alternate-reverse;
    opacity: 0.7;
    z-index: 2;
}

.layer-3 {
    background-position: 100% 0;
    animation: flame-flicker-3 3.5s ease-in-out infinite;
    opacity: 0.5;
    z-index: 1;
}

/* 基部の柔らかな発光（ハロー効果：より広く、淡く） */
.flame-glow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 176, 32, 0.4) 0%, transparent 80%);
    filter: blur(12px); /* ボカシを強くして境界を消す */
    border-radius: 50%;
    z-index: 0;
    animation: glow-pulse 4s ease-in-out infinite alternate;
    pointer-events: none;
}

/* ホバー時の燃え上がり演出：下端（ロゴへの設置点）を固定して拡大 */
.project-badge:hover .flame-liquid,
.project-badge:hover .flame-glow {
    transform: scale(1.3); /* 上に持ち上げず、その場で大きくする */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-badge:hover .flame-glow {
    filter: blur(15px);
    opacity: 0.7;
}

.project-badge:hover .magic-lamp-flame {
    /* コンテナ自体は移動させるが拡大はしない */
    transform: translateY(0);
}

.project-badge:hover .flame-liquid {
    /* 燃え上がり時にフィルタの歪みを微増させる場合はここで調整可能 */
}

/* ホバー時に火の粉を発生させるための設定 */
.project-badge:hover .spark {
    opacity: 0.8;
}

/* --- 炎のアニメーション（揺らぎの幅を抑え、呼吸するような変化へ） --- */
@keyframes flame-flicker-1 {
    0%   { transform: translateX(-50%) scale(0.96, 0.98) rotate(-0.3deg); opacity: 0.85; }
    50%  { transform: translateX(-50%) scale(1.02, 1.04) rotate(0.5deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.98, 1.01) rotate(-0.2deg); opacity: 0.9; }
}

@keyframes flame-flicker-2 {
    0%   { transform: translateX(-50%) scale(1.02, 0.96) rotate(1.0deg); opacity: 0.3; }
    50%  { transform: translateX(-50%) scale(0.98, 1.02) rotate(-0.8deg); opacity: 0.45; }
    100% { transform: translateX(-50%) scale(1.05, 0.98) rotate(1.2deg); opacity: 0.35; }
}

@keyframes flame-flicker-3 {
    0%   { transform: translateX(-50%) skewX(-1.0deg) scale(1.0) opacity: 0.2; }
    50%  { transform: translateX(-50%) skewX(1.5deg) scale(1.15) opacity: 0.35; }
    100% { transform: translateX(-50%) skewX(-1.0deg) scale(1.0) opacity: 0.2; }
}

@keyframes glow-pulse {
    0% { transform: translateX(-50%) scale(0.85); opacity: 0.3; }
    100% { transform: translateX(-50%) scale(1.1); opacity: 0.6; }
}

/* -------------------------------------
 * 火の粉 (Spark) エフェクト
 * ------------------------------------- */
/* 火の粉 (Spark) エフェクトの最適化：根元から発生し、ランダムに舞い上がる */
.magic-lamp-flame .spark {
    position: absolute;
    bottom: 10px; /* 出発地点を炎の根元に固定 */
    width: 2px;
    height: 2px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 5px #FFB020; 
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.spark-1 { left: 35%; animation: spark-rise-1 1.2s ease-out infinite 0s; }
.spark-2 { left: 65%; animation: spark-rise-2 1.5s ease-out infinite 0.4s; }
.spark-3 { left: 50%; animation: spark-rise-3 1.0s ease-out infinite 0.8s; }

@keyframes spark-rise-1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { opacity: 0.8; }
    100% { transform: translate(-8px, -45px) scale(0); opacity: 0; }
}

@keyframes spark-rise-2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { opacity: 0.8; }
    100% { transform: translate(10px, -55px) scale(0); opacity: 0; }
}

@keyframes spark-rise-3 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { opacity: 0.8; }
    100% { transform: translate(-4px, -35px) scale(0); opacity: 0; }
}

/* -------------------------------------
 * 通常時（静寂）：3粒の「静かな」火花のみアニメーションさせる
 * ------------------------------------- */
.magic-lamp-flame .spark-1 { animation: spark-fly-elegant-slow 15.2s linear infinite 0.1s; opacity: 0.35; }
.magic-lamp-flame .spark-2 { animation: spark-fly-elegant-slow 16.5s linear infinite 1.8s; opacity: 0.25; }
.magic-lamp-flame .spark-3 { animation: spark-fly-elegant-slow 15.8s linear infinite 3.5s; opacity: 0.3; }

/* 4〜20番は通常時は非表示 */
.magic-lamp-flame .spark:nth-child(n+4) {
    animation: none;
}

/* -------------------------------------
 * ホバー時（爆発）：静を消し、優雅な火花を「着火」させる
 * ------------------------------------- */
.project-badge:hover .magic-lamp-flame .spark-1,
.project-badge:hover .magic-lamp-flame .spark-2,
.project-badge:hover .magic-lamp-flame .spark-3 {
    animation: none;
    opacity: 0;
}

/* 全20個のうち、10粒（4〜13番）にのみ究極のスローな漂いを割り当て（14〜20番は不使用） */
/* ホバー時の優雅な火花：滞留感を解消するため速度を5倍以上に向上 */
.project-badge:hover .magic-lamp-flame .spark:nth-child(4) { animation: spark-fly-elegant-1 4.5s ease-out infinite 0.1s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(5) { animation: spark-fly-elegant-2 5.0s ease-out infinite 0.8s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(6) { animation: spark-fly-elegant-3 4.2s ease-out infinite 1.5s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(7) { animation: spark-fly-elegant-1 3.8s ease-out infinite 2.2s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(8) { animation: spark-fly-elegant-2 4.6s ease-out infinite 0.5s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(9) { animation: spark-fly-elegant-3 5.5s ease-out infinite 1.2s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(10) { animation: spark-fly-elegant-1 4.1s ease-out infinite 1.8s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(11) { animation: spark-fly-elegant-2 4.8s ease-out infinite 0.3s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(12) { animation: spark-fly-elegant-3 5.2s ease-out infinite 2.0s; opacity: 1; }
.project-badge:hover .magic-lamp-flame .spark:nth-child(13) { animation: spark-fly-elegant-1 4.4s ease-out infinite 1.0s; opacity: 1; }

/* 14〜20番はホバー時も非表示のまま */
.project-badge:hover .magic-lamp-flame .spark:nth-child(n+14) {
    animation: none;
    opacity: 0;
}

.project-badge:hover .magic-lamp-flame .spark:nth-child(n+4) {
    background: #FFFFFF !important;
    box-shadow: 0 0 12px #FFFFFF, 0 0 25px #FFB020 !important;
}

/* --- 究極の漂い：S字ゆらぎ軌道 --- */
@keyframes spark-fly-elegant-1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    15% { opacity: 0.7; }
    33% { transform: translate(-4px, -20px) scale(0.95); }
    66% { transform: translate(2px, -45px) scale(0.85); }
    100% { transform: translate(-1px, -70px) scale(0); opacity: 0; }
}
@keyframes spark-fly-elegant-2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    15% { opacity: 0.7; }
    33% { transform: translate(5px, -25px) scale(1); }
    66% { transform: translate(-3px, -55px) scale(0.9); }
    100% { transform: translate(1px, -90px) scale(0); opacity: 0; }
}
@keyframes spark-fly-elegant-3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    15% { opacity: 0.9; }
    40% { transform: translate(-2px, -35px) scale(1.1); }
    75% { transform: translate(4px, -65px) scale(0.95); }
    100% { transform: translate(-1px, -110px) scale(0); opacity: 0; }
}
@keyframes spark-fly-elegant-slow {
    0% { transform: translate(0, 0) scale(1.2); opacity: 0; }
    20% { opacity: 0.6; }
    50% { transform: translate(3px, -45px) scale(1.1); }
    100% { transform: translate(-2px, -100px) scale(0); opacity: 0; }
}


.scene-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3.5rem); /* ABOUTセクションの理想サイズに全統一 */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    color: #FFF5DB; /* さらに黄色みを足して、シャンパンゴールドのニュアンスを強める */
    animation: firefly-glow-title 5s ease-in-out infinite alternate;
}

.scene-desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400; 
    color: #fdfdfa; 
    letter-spacing: 0.05em;
    line-height: 2;
    animation: firefly-glow-desc 6s ease-in-out infinite alternate 1.5s;
}

/* 単語や文節の途中での不自然な改行を防ぐ */
.text-chunk {
    display: inline-block;
}

/* 蛍の光（呼吸するような明滅エフェクト） */
@keyframes firefly-glow-title {
    0% {
        text-shadow: 0 4px 15px rgba(0,0,0,0.9), 0 0 50px rgba(0,0,0,0.6), 
                     0 0 10px rgba(255, 230, 150, 0.1);
    }
    100% {
        text-shadow: 0 4px 15px rgba(0,0,0,0.9), 0 0 50px rgba(0,0,0,0.6), 
                     0 0 20px rgba(255, 245, 180, 0.8), 
                     0 0 40px rgba(255, 230, 130, 0.6), 
                     0 0 80px rgba(255, 200, 100, 0.3);
    }
}

@keyframes firefly-glow-desc {
    0% {
        text-shadow: 0 2px 10px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,0.6),
                     0 0 5px rgba(255, 240, 180, 0.1);
    }
    100% {
        text-shadow: 0 2px 10px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,0.6),
                     0 0 15px rgba(255, 250, 200, 0.6), 
                     0 0 30px rgba(255, 220, 150, 0.3);
    }
}

@keyframes firefly-glow-badge {
    0% {
        text-shadow: 0 0 10px rgba(255, 176, 32, 0.2), 0 2px 4px rgba(0,0,0,0.8);
    }
    100% {
        text-shadow: 0 0 25px rgba(255, 176, 32, 0.8), 0 0 40px rgba(255, 176, 32, 0.5), 0 2px 4px rgba(0,0,0,0.8);
    }
}

/* -------------------------------------
 * Cinematic Fade In/Out Animation
 * ------------------------------------- */
.fade-target {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    /* 消える時（霧散）は、ディレイなしでスッと深いBlurの彼方へ消える */
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 1.2s ease-out;
    filter: blur(20px);
}

.scene.visible .fade-target {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    /* 現れる時（出現）のもたつきをなくし、少し早めにフワッと現れる */
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 1.2s ease-out;
}

/* -------------------------------------
 * Buttons (Action)
 * ------------------------------------- */
.scene-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.scene-actions.compact {
    margin-top: 2.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, rgba(255,176,32,0.8), rgba(255,105,180,0.8));
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 176, 32, 0.2);
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(255, 176, 32, 0.5);
    background: linear-gradient(135deg, rgba(255,176,32,1), rgba(255,105,180,1));
}

.btn-secondary {
    background: rgba(255,255,255,0.05);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 400;
    font-family: var(--font-body);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

/* 光の線が落ちた後、ガラスの輪郭に光が映り込む */
/* 通常のセクション：1.8秒で発光（小気味よいテンポ） */
.scene.visible .btn-secondary {
    animation: btn-glass-reflect 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.8s;
}

/* STORYセクション（#scene-3）専用：さらに余韻を残すため 3.0秒に設定 */
#scene-3.visible .btn-secondary {
    animation-delay: 3.0s;
}

@keyframes btn-glass-reflect {
    0% {
        border-color: rgba(255,255,255,0.2);
        box-shadow: none;
    }
    100% {
        border-color: rgba(255, 176, 32, 0.5); /* シャンパンゴールドがじんわり染みる */
        box-shadow: 0 0 15px rgba(255, 176, 32, 0.15), inset 0 0 10px rgba(255, 176, 32, 0.1);
    }
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 176, 32, 0.3), inset 0 0 15px rgba(255, 176, 32, 0.15) !important;
    border-color: rgba(255, 176, 32, 0.8) !important;
}

.btn-small {
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
}

/* -------------------------------------
 * Social Icons
 * ------------------------------------- */
.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    padding: 0.5rem;
}

.social-icon-link:hover {
    color: var(--primary);
    filter: drop-shadow(0 0 12px rgba(255, 176, 32, 0.8));
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    body.is-home {
        scroll-snap-type: y proximity !important;
        scroll-padding-top: 0 !important; /* スナップ計算の競合を防ぐため、モバイルではヘッダー余白の扱いを解除 */
    }
    
    .scene { 
        min-height: 100vh;
        min-height: 100lvh; /* 最大時の固定高さを基準にして安定させる */
        padding: 6rem 1.5rem 15vh; /* 下部にゆとりを持たせつつ、震えを抑制 */
    }

    /* 背景画像のモバイル最適化 */
    html {
        background-size: 100% auto !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important; /* 太陽が増えないように固定 */
    }

    .cinematic-bg {
        background-size: auto 100% !important;
        background-position: center !important;
    }
    .scene-title { 
        font-size: 1.75rem; 
        margin-bottom: 1.5rem;
    }
    .scene-desc {
        line-height: 1.8;
    }
    .scene-actions {
        margin-top: 2.5rem; /* ボタンの上の余白を圧縮 */
        gap: 1rem;
    }
    
    /* ヒーローバッジの調整 */
    .project-badge {
        gap: 0.5rem;
        font-size: 0.9rem;
        margin-bottom: 1.25rem; /* 余白を詰める */
    }
    .glass-nav {
        flex-direction: column;
        padding: 0.75rem 0; /* 左右パディングを0にし、スワイプエリアを全幅に */
        gap: 0.5rem;
    }

    .logo {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .nav-links {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start; /* スワイプのため左寄せに */
        width: 100%;
        padding: 0.5rem 1.5rem; /* 内側に余白を持たせ、スクロール時に端が切れないように */
        gap: 1.8rem; /* 直感的にタップしやすい間隔 */
        scrollbar-width: none; /* Firefox用 */
        flex-wrap: nowrap !important; /* 絶対に折り返さない */
        
        /* スクロールガイド（右端のフェード） */
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .nav-links::-webkit-scrollbar {
        display: none; /* Safari, Chrome用 */
    }

    .nav-links a {
        font-size: 0.85rem;
        flex-shrink: 0; /* 文字が潰れないように */
        padding: 0.4rem 0;
        opacity: 0.85; /* 少し落ち着かせる */
        font-weight: 500;
    }

    .is-home .nav-links a {
        opacity: 0.95;
    }

    .nav-cta {
        padding: 0.5rem 1.2rem !important;
        font-size: 0.8rem !important;
        margin-left: 0.5rem; /* 前のリンクとの間隔を少し広げる */
        flex-shrink: 0;
    }
}

/* -------------------------------------
 * 3つの柱 (Pillars) アニメーション
 * ------------------------------------- */
/* ディレイ（全体のテンポを上げ、物語の完結に合わせて調整） */
.scene.visible .fade-target.delay-1 { transition-delay: 0.3s; }
.scene.visible .fade-target.delay-2 { transition-delay: 0.6s; }
.scene.visible .fade-target.delay-3 { transition-delay: 0.9s; }
.scene.visible .fade-target.delay-4 { transition-delay: 1.2s; } /* ボタンもスムーズに出現 */

.pillars-container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    margin: 0 0 2rem 0; /* 左軸に沿うように margin auto を廃止 */
    max-width: 650px;
    text-align: left;
}

/* 1本に繋がった金色の線（初期状態は見えない・伸びていない） */
.light-rain-line {
    content: '';
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 176, 32, 0) 0%, rgba(255, 176, 32, 0.4) 15%, rgba(255, 176, 32, 0.4) 85%, rgba(255, 176, 32, 0) 100%);
    transform-origin: top;
    transform: scaleY(0);
}



/* 汎用の光の雨：速さと情緒を両立（3s -> 1.8s, 1s -> 0.5s） */
.scene.visible .light-rain-line,
.editorial-content .light-rain-line {
    animation: rain-drop-line 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.5s;
}

@keyframes rain-drop-line {
    0% { transform: scaleY(0); opacity: 0; }
    1% { opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; box-shadow: 0 0 15px rgba(255, 176, 32, 0.3); } /* 最後はうっすら光る */
}

.pillar {
    position: relative;
    /* padding-left: 2rem; 他のセクションと左端を揃えるため削除 */
    /* border-leftがなくなり、コンテナの1本の線に統合される */
}

.pillar-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: #FFF5DB; /* 大見出しと同じ、ぬくもりのあるシャンパンゴールド */
    margin-bottom: 0.5rem;
    animation: firefly-pulse-text 4s ease-in-out infinite alternate;
}

.pillar-desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: #f8fafc;
    line-height: 1.8;
}

@keyframes firefly-pulse-text {
    0% { text-shadow: 0 0 10px rgba(255, 176, 32, 0.2); }
    100% { text-shadow: 0 0 30px rgba(255, 176, 32, 0.9), 0 0 60px rgba(255, 176, 32, 0.4); }
}

/* シーン5専用：メインボタンを最初はガラス、後から色づかせる演出（滑らかな染み出し版） */
.scene-final.visible .btn-primary {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1; /* z-indexを明示して、下のレイヤーを制御 */
}

/* 色彩のレイヤー */
.scene-final.visible .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,176,32,0.85), rgba(255,105,180,0.85));
    opacity: 0; /* 最初は透明 */
    z-index: -1; /* テキストの下に配置 */
    /* じわっと灯る時間を 4s -> 2s へ、待ち時間を 2.5s -> 1.2s へ短縮 */
    animation: btn-primary-bloom-smooth 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.2s;
}

/* 枠線の消失アニメーション */
.scene-final.visible .btn-primary {
    /* 色づきに合わせて枠線も早く消失させる (4s -> 2s, 2.5s -> 1.2s) */
    animation: btn-border-fade 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.2s;
}

@keyframes btn-primary-bloom-smooth {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes btn-border-fade {
    0% { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0px rgba(255, 176, 32, 0); }
    100% { border-color: transparent; box-shadow: 0 0 30px rgba(255, 176, 32, 0.4); }
}


/* -------------------------------------
 * Firefly Effect (Hero Ambient) - Refined for "Natural Flicker"
 * ------------------------------------- */
.firefly-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 160%;
    pointer-events: none;
    z-index: -1;
}

/* 軸を分離するためのラッパー */
.firefly-x-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}

.firefly-y-wrapper {
    width: 100%;
    height: 100%;
}

.firefly-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #FFF5DB;
    border-radius: 50%;
    filter: blur(1.5px);
    box-shadow: 0 0 15px rgba(255, 176, 32, 0.9), 0 0 30px rgba(255, 176, 32, 0.5);
    opacity: 0;
}

/* --- 3つの周期グループ設定 (3n+1, 3n+2, 3n) --- */

/* グループA: ゆったり・深呼吸 (Longer Period) */
.firefly-x-wrapper:nth-child(3n+1) { animation: firefly-x 15.2s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n+1) .firefly-y-wrapper { animation: firefly-y 20.5s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n+1) .firefly-particle { animation: firefly-glow 5.8s ease-in-out infinite alternate; }

/* グループB: 標準・安定 (Medium Period) */
.firefly-x-wrapper:nth-child(3n+2) { animation: firefly-x 11.4s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n+2) .firefly-y-wrapper { animation: firefly-y 16.8s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n+2) .firefly-particle { animation: firefly-glow 3.4s ease-in-out infinite alternate; }

/* グループC: 活発・鼓動 (Shorter Period) */
.firefly-x-wrapper:nth-child(3n) { animation: firefly-x 8.6s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n) .firefly-y-wrapper { animation: firefly-y 12.3s ease-in-out infinite alternate; }
.firefly-x-wrapper:nth-child(3n) .firefly-particle { animation: firefly-glow 2.1s ease-in-out infinite alternate; }

@keyframes firefly-x {
    0% { transform: translateX(-60px); }
    100% { transform: translateX(60px); }
}

@keyframes firefly-y {
    0% { transform: translateY(-50px); }
    100% { transform: translateY(50px); }
}

@keyframes firefly-glow {
    0%, 100% { opacity: 0.1; transform: scale(0.6); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* 各粒子の初期配置と、グループ内でもタイミングをずらすための個別ディレイ */
.firefly-x-wrapper:nth-child(1)  { top: 20%; left: 10%; animation-delay: -1.2s; }
.firefly-x-wrapper:nth-child(1) .firefly-y-wrapper { animation-delay: -3.5s; }
.firefly-x-wrapper:nth-child(1) .firefly-particle { animation-delay: -0.5s; }

.firefly-x-wrapper:nth-child(2)  { top: 15%; left: 85%; animation-delay: -4.8s; }
.firefly-x-wrapper:nth-child(2) .firefly-y-wrapper { animation-delay: -1.1s; }
.firefly-x-wrapper:nth-child(2) .firefly-particle { animation-delay: -2.3s; }

.firefly-x-wrapper:nth-child(3)  { top: 80%; left: 20%; animation-delay: -7.2s; }
.firefly-x-wrapper:nth-child(3) .firefly-y-wrapper { animation-delay: -9.4s; }
.firefly-x-wrapper:nth-child(3) .firefly-particle { animation-delay: -4.1s; }

.firefly-x-wrapper:nth-child(4)  { top: 75%; left: 75%; animation-delay: -2.6s; }
.firefly-x-wrapper:nth-child(4) .firefly-y-wrapper { animation-delay: -0.5s; }
.firefly-x-wrapper:nth-child(4) .firefly-particle { animation-delay: -1.8s; }

.firefly-x-wrapper:nth-child(5)  { top: 40%; left: 5%;  animation-delay: -8.1s; }
.firefly-x-wrapper:nth-child(5) .firefly-y-wrapper { animation-delay: -2.3s; }
.firefly-x-wrapper:nth-child(5) .firefly-particle { animation-delay: -5.9s; }

.firefly-x-wrapper:nth-child(6)  { top: 35%; left: 95%; animation-delay: -3.3s; }
.firefly-x-wrapper:nth-child(6) .firefly-y-wrapper { animation-delay: -12.4s; }
.firefly-x-wrapper:nth-child(6) .firefly-particle { animation-delay: -0.2s; }

.firefly-x-wrapper:nth-child(7)  { top: 10%; left: 50%; animation-delay: -0.1s; }
.firefly-x-wrapper:nth-child(7) .firefly-y-wrapper { animation-delay: -6.9s; }
.firefly-x-wrapper:nth-child(7) .firefly-particle { animation-delay: -3.4s; }

.firefly-x-wrapper:nth-child(8)  { top: 90%; left: 45%; animation-delay: -11.5s; }
.firefly-x-wrapper:nth-child(8) .firefly-y-wrapper { animation-delay: -1.2s; }
.firefly-x-wrapper:nth-child(8) .firefly-particle { animation-delay: -7.8s; }

.firefly-x-wrapper:nth-child(9)  { top: 50%; left: 15%; animation-delay: -6.8s; }
.firefly-x-wrapper:nth-child(9) .firefly-y-wrapper { animation-delay: -4.6s; }
.firefly-x-wrapper:nth-child(9) .firefly-particle { animation-delay: -2.5s; }

.firefly-x-wrapper:nth-child(10) { top: 45%; left: 80%; animation-delay: -2.2s; }
.firefly-x-wrapper:nth-child(10) .firefly-y-wrapper { animation-delay: -8.4s; }
.firefly-x-wrapper:nth-child(10) .firefly-particle { animation-delay: -1.1s; }

@media (max-width: 768px) {
    .firefly-container {
        width: 120%;
        height: 120%;
    }
    .firefly-particle {
        width: 3px;
        height: 3px;
    }

    /* ヒーローバッジの調整 */
    .project-badge {
        gap: 0.5rem;
        font-size: 0.9rem;
    }
    .project-badge > .text-chunk:first-child {
        letter-spacing: 0.1em;
    }
    .project-badge > .text-chunk:last-child {
        letter-spacing: 0.3em;
    }
    .magic-lamp-flame {
        width: 16px;
        height: 24px;
    }
    .flame-layer {
        width: 24px;
        height: 36px;
    }

    /* コンテンツのパディング調整 */
    .left-align-scene .scene-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .pillars-container {
        gap: 2rem;
    }
}