/* =========================================
   1. 英数字フォント (Outfit)
   ========================================= */
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-100.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit Local'; src: url('../fonts/outfit-v15-latin-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* =========================================
   2. 日本語 (Noto Sans JP)
   ========================================= */
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-100.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Noto Sans JP Local'; src: url('../fonts/noto-sans-jp-v56-japanese_latin-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* 優先フォント設定（Tailwind 4.0のカスタム設定と同期） */
body {
    font-family: 'Outfit Local', 'Noto Sans JP Local', ui-sans-serif, system-ui, sans-serif !important;
}

/* =========================================
   浮遊・オーラアニメーション (キーフレーム定義)
   ========================================= */
@keyframes blob1 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    33% { transform: translate(150px, -100px) scale(1.2) rotate(120deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    66% { transform: translate(-100px, 150px) scale(0.8) rotate(240deg); border-radius: 30% 70% 50% 50% / 50% 60% 40% 60%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}
@keyframes blob2 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    33% { transform: translate(-150px, 150px) scale(1.3) rotate(-120deg); border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
    66% { transform: translate(100px, -100px) scale(0.7) rotate(-240deg); border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(-360deg); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}
@keyframes blob3 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%; }
    50% { transform: translate(0px, -150px) scale(1.1) rotate(180deg); border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%; }
}

@keyframes shieldBlob1 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%; }
    50% { transform: translate(80px, -80px) scale(1.15) rotate(180deg); border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%; }
}
@keyframes shieldBlob2 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50%; }
    50% { transform: translate(-100px, 100px) scale(1.2) rotate(-180deg); border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(-360deg); border-radius: 50% 50% 50% 50%; }
}

@keyframes techBlob1 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%; }
    50% { transform: translate(100px, -50px) scale(1.2) rotate(180deg); border-radius: 60% 40% 40% 60% / 40% 60% 50% 60%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%; }
}
@keyframes techBlob2 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50%; }
    50% { transform: translate(-80px, 80px) scale(1.1) rotate(-180deg); border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(-360deg); border-radius: 50% 50% 50% 50%; }
}

@keyframes goldBlob1 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    50% { transform: translate(120px, -60px) scale(1.15) rotate(180deg); border-radius: 60% 40% 40% 60% / 40% 60% 50% 60%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}
@keyframes goldBlob2 {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50%; }
    50% { transform: translate(-100px, 80px) scale(1.2) rotate(-180deg); border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%; }
    100% { transform: translate(0px, 0px) scale(1) rotate(-360deg); border-radius: 50% 50% 50% 50%; }
}

.animate-blob1 { animation: blob1 15s infinite linear; }
.animate-blob2 { animation: blob2 18s infinite linear; }
.animate-blob3 { animation: blob3 20s infinite linear; }

.animate-shield1 { animation: shieldBlob1 20s infinite linear; }
.animate-shield2 { animation: shieldBlob2 25s infinite linear; }

.animate-tech1 { animation: techBlob1 18s infinite linear; }
.animate-tech2 { animation: techBlob2 22s infinite linear; }

.animate-gold1 { animation: goldBlob1 22s infinite linear; }
.animate-gold2 { animation: goldBlob2 26s infinite linear; }

/* =========================================
   インタラクティブ・パララックス用
   ========================================= */
.blob-wrapper {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    --mx: 0; --my: 0; --scale: 1; 
}

/* 新しい文字オーラ用のマウス追従設定 (スマホでの未定義バグと重複設定をクリア) */
#lucida-blob-wrapper { 
    transform: translate(calc(-50% + var(--mx, 0) * 50px), calc(-50% + var(--my, 0) * 50px)) scale(var(--scale, 1)); 
}

#shield-blob1, #tech-blob1, #gold-blob1 { transform: translate(calc(-50% + var(--mx, 0) * 60px), calc(-50% + var(--my, 0) * 60px)) scale(var(--scale, 1)); }
#shield-blob2, #tech-blob2, #gold-blob2 { transform: translate(calc(50% + var(--mx, 0) * -40px), calc(-50% + var(--my, 0) * -40px)) scale(var(--scale, 1)); }

/* =========================================
   スクロール連動フェードイン
   ========================================= */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   バラバラ文字オーラのふわふわアニメーション
   ========================================= */
@keyframes floatA {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, -40px) rotate(15deg); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-40px, 30px) rotate(-10deg); }
}
@keyframes floatC {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, 40px) rotate(20deg); }
}

.animate-floatA { animation: floatA 8s infinite ease-in-out; }
.animate-floatB { animation: floatB 10s infinite ease-in-out; }
.animate-floatC { animation: floatC 12s infinite ease-in-out; }

/* 
   文字ごとの散らばり（--rand） ＋ マウス移動（--mx * --spd） の合成 
*/
.char-aura {
    --scatter-x: var(--rand-x);
    --scatter-y: var(--rand-y);
    transform: translate(
        calc(var(--scatter-x) + var(--mx, 0) * var(--spd-x, 1) * 80px),
        calc(var(--scatter-y) + var(--my, 0) * var(--spd-y, 1) * 80px)
    );
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 
   クリックされた時 (.is-pressed) は、散らばり(scatter)を 0 に強制上書き。
   これでバラバラの破片が一瞬で「LUCIDA」の単語に集結します。
*/
.is-pressed .char-aura {
    --scatter-x: 0vw !important;
    --scatter-y: 0vh !important;
}

/* =========================================
   カスタムスクロールバー（目立たない・ホバー時表示）
   ========================================= */
/* WebKitブラウザ（Chrome, Safari, Edge）用 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* スクロールバーの幅を細く */
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* 背景（レール）は透明 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent; /* 初期状態は透明で見えない */
    border-radius: 10px; /* バーの角を丸く */
}
/* コンテナにマウスオーバーした時だけ、薄いグレーで表示 */
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(209, 213, 219, 0.8); /* Tailwindの gray-300 相当 */
}
/* スクロールバー自体をホバーした時は少し濃くする */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 1); /* Tailwindの gray-400 相当 */
}

/* Firefox用（※Firefoxはホバー制御ができないため、常に細く薄く表示） */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(209, 213, 219, 0.8) transparent;
}

/* モバイルでの横揺れ・はみ出しをブロックしつつ、パララックス(sticky)を復活・維持 */
html, body {
    overflow-x: clip;
    width: 100%;
    position: relative;
    /* Chromeの勝手な文字拡大(Font Boosting)を完全に無効化し、全ブラウザでサイズを統一 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}