/*
Theme Name: Miraitect
Theme URI: https://example.com
Author: Hero+
Description: A Digital x Finance x Communication corporate theme.
Version: 1.0
License: GNU General Public License v2 or later
*/

/* Custom Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Base Styles */
body {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9, #e2e8f0);
    color: #1e293b;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
}

.font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

::selection {
    background-color: #f59e0b;
    color: #0f172a;
}

/* ▼ Mobile Menu Fullscreen Fixes */

/* dvhに対応していないブラウザのためのフォールバック */
#mobile-menu {
    height: 100vh;
}

/* dvh (Dynamic Viewport Height) に対応しているブラウザ用 */
/* これによりアドレスバーの伸縮を含めた真の全画面になります */
@supports (height: 100dvh) {
    #mobile-menu {
        height: 100dvh;
    }
}

/* WordPress Admin Bar対策: ログイン中は管理バーの下に表示 */
body.admin-bar #mobile-menu {
    top: 32px;
    height: calc(100vh - 32px);
}
@supports (height: 100dvh) {
    body.admin-bar #mobile-menu {
        height: calc(100dvh - 32px);
    }
}
@media screen and (max-width: 782px) {
    body.admin-bar #mobile-menu {
        top: 46px;
        height: calc(100vh - 46px);
    }
    @supports (height: 100dvh) {
        body.admin-bar #mobile-menu {
            height: calc(100dvh - 46px);
        }
    }
}

/* ▼ Mobile Menu Stagger Animation */
/* メニューが開いた状態 (.open) */
#mobile-menu.open ul li {
    opacity: 1;
    transform: translateY(0);
}

/* 通常時（閉じている時） */
#mobile-menu ul li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 各メニュー項目の遅延設定 */
#mobile-menu.open ul li:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.open ul li:nth-child(2) { transition-delay: 0.2s; }
#mobile-menu.open ul li:nth-child(3) { transition-delay: 0.3s; }
#mobile-menu.open ul li:nth-child(4) { transition-delay: 0.4s; }
#mobile-menu.open ul li:nth-child(5) { transition-delay: 0.5s; }

/* その他の要素の遅延 */
#mobile-menu.open .menu-stagger {
    opacity: 1;
    transform: translateY(0);
}